/* Benefits — bento grid of why-tokenize features */

const BENEFITS = [
  {
    size: "md",
    title: "Likvidita pro nelikvidní aktiva",
    desc: "Investor neváže kapitál na 10 let. Token lze prodat na sekundárním trhu.",
    visual: "liquidity",
  },
  {
    size: "md",
    title: "Vstup od desítek tisíc",
    desc: "Otevíráte se širší investorské bázi. Bez zúžení na velké hráče.",
    visual: "fragments",
  },
  {
    size: "md",
    title: "Transparentní cap table",
    desc: "Každý podíl on-chain. Auditovatelné v reálném čase.",
    visual: "captable",
  },
  {
    size: "md",
    title: "Compliance v rámci EU & ČR",
    desc: "Pracujeme s licencovanými partnery — KYC/AML, custody, MiCA-ready.",
    visual: "compliance",
  },
  {
    size: "md",
    title: "Automatizované výplaty",
    desc: "Smart contract distribuuje výnos podle držby. Bez excelu.",
    visual: "auto",
  },
  {
    size: "md",
    title: "Rychlost vydání",
    desc: "Od první konzultace ke vydanému tokenu týdny, ne roky.",
    visual: "speed",
  },
];

const BenefitVisual = ({ kind }) => {
  if (kind === "liquidity") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      <defs>
        <linearGradient id="liq" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="var(--amber-300)" stopOpacity="0"/>
          <stop offset="50%" stopColor="var(--amber-500)"/>
          <stop offset="100%" stopColor="var(--amber-300)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M0 60 Q 30 40 60 55 T 120 50 T 200 45" stroke="url(#liq)" strokeWidth="2.5" fill="none">
        <animate attributeName="d" dur="6s" repeatCount="indefinite"
          values="M0 60 Q 30 40 60 55 T 120 50 T 200 45;
                  M0 50 Q 30 70 60 45 T 120 60 T 200 55;
                  M0 60 Q 30 40 60 55 T 120 50 T 200 45"/>
      </path>
      <circle r="3" fill="var(--amber-500)">
        <animateMotion dur="6s" repeatCount="indefinite"
          path="M0 60 Q 30 40 60 55 T 120 50 T 200 45"/>
      </circle>
    </svg>
  );
  if (kind === "fragments") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      {Array.from({ length: 18 }).map((_, i) => (
        <rect key={i} x={(i % 9) * 22 + 6} y={Math.floor(i / 9) * 22 + 22} width="18" height="18" rx="3"
          fill={i < 5 ? "var(--amber-500)" : "var(--bg-3)"}>
          <animate attributeName="fill" dur="4s" repeatCount="indefinite" begin={`${i * 0.1}s`}
            values={`var(--bg-3); var(--amber-500); var(--bg-3)`}/>
        </rect>
      ))}
    </svg>
  );
  if (kind === "captable") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      <circle cx="100" cy="50" r="34" fill="none" stroke="var(--bg-3)" strokeWidth="14"/>
      <circle cx="100" cy="50" r="34" fill="none" stroke="var(--amber-500)" strokeWidth="14"
        strokeDasharray="120 213" strokeDashoffset="0" transform="rotate(-90 100 50)">
        <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite"
          values="0 213; 120 213; 120 213"/>
      </circle>
      <text x="100" y="55" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="14" fill="var(--ink-0)" fontWeight="700">56%</text>
    </svg>
  );
  if (kind === "compliance") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      <path d="M100 18 L130 30 V58 C130 72 118 82 100 88 C82 82 70 72 70 58 V30 Z"
        fill="var(--amber-50)" stroke="var(--amber-500)" strokeWidth="2"/>
      <path d="M88 52 L96 60 L114 42" stroke="var(--amber-600)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <text x="100" y="98" textAnchor="middle" fontSize="9" fill="var(--ink-3)" fontFamily="var(--font-mono)">EU · ČR · MiCA</text>
    </svg>
  );
  if (kind === "auto") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      <rect x="20" y="30" width="60" height="40" rx="6" fill="var(--bg-1)" stroke="var(--line-strong)"/>
      <rect x="120" y="30" width="60" height="40" rx="6" fill="var(--amber-50)" stroke="var(--amber-500)"/>
      <path d="M82 50 L116 50" stroke="var(--amber-500)" strokeWidth="2" strokeDasharray="4 3"/>
      <path d="M112 46 L120 50 L112 54" stroke="var(--amber-500)" strokeWidth="2" fill="none"/>
      <text x="50" y="55" textAnchor="middle" fontSize="10" fontFamily="var(--font-mono)">SC</text>
      <text x="150" y="55" textAnchor="middle" fontSize="10" fontFamily="var(--font-mono)" fill="var(--amber-700)">€€€</text>
    </svg>
  );
  if (kind === "speed") return (
    <svg viewBox="0 0 200 100" fill="none" className="benefit__svg">
      <path d="M30 50 L170 50" stroke="var(--bg-3)" strokeWidth="2"/>
      <path d="M30 50 L170 50" stroke="var(--amber-500)" strokeWidth="2"
        strokeDasharray="140" strokeDashoffset="140">
        <animate attributeName="stroke-dashoffset" dur="2.4s" repeatCount="indefinite" values="140; 0"/>
      </path>
      <circle cx="30" cy="50" r="6" fill="var(--amber-500)"/>
      <circle cx="170" cy="50" r="6" fill="var(--amber-500)">
        <animate attributeName="r" dur="2.4s" repeatCount="indefinite" values="2;8;2"/>
      </circle>
      <text x="100" y="34" textAnchor="middle" fontSize="11" fontFamily="var(--font-mono)" fill="var(--ink-2)">~ 14 dní</text>
    </svg>
  );
  return null;
};

const Benefits = () => (
  <section className="benefits" id="vyhody">
    <div className="container">
      <div className="section-head section-head--center">
        <span className="eyebrow">Proč tokenizovat</span>
        <h2 className="h1">Šest důvodů, proč to teď <span className="hl">dává smysl</span></h2>
      </div>
      <div className="bento">
        {BENEFITS.map((b) => (
          <article key={b.title} className={`benefit benefit--${b.size}`}>
            <div className="benefit__visual"><BenefitVisual kind={b.visual}/></div>
            <h3 className="benefit__title">{b.title}</h3>
            <p className="benefit__desc">{b.desc}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

window.Benefits = Benefits;