/* Three pillars section — large clickable cards for each asset class */

const PILLARS = [
  {
    icon: "home",
    eyebrow: "Pilíř 01",
    title: "Nemovitosti",
    desc: "Rozdělte komerční budovu, rezidenční projekt nebo pozemek na digitální podíly. Investoři vstupují od desítek tisíc, vy si držíte kontrolu.",
    items: ["Bytové i komerční", "Pronájem i development", "Cap table on-chain"],
    accent: "amber",
  },
  {
    icon: "solar",
    eyebrow: "Pilíř 02",
    title: "Solární elektrárny",
    desc: "Tokenizujte cash-flow z FVE. Investo­ři dostávají podíl na výnosu z prodané energie, vy získáte kapitál na další instalace.",
    items: ["Provozní FVE i nové projekty", "Výnos vázaný na MWh", "Měsíční distribuce"],
    accent: "amber",
  },
  {
    icon: "building",
    eyebrow: "Pilíř 03",
    title: "Firmy",
    desc: "Otevřete část equity nebo budoucího cash-flow firmy. Bez složitého IPO, bez ztráty kontroly. S jasnou právní strukturou v ČR.",
    items: ["SRO i AS", "Equity nebo revenue share", "Smart-contract automatizace"],
    accent: "amber",
  },
];

const Pillars = () => {
  const [active, setActive] = React.useState(0);

  return (
    <section className="pillars" id="pilire">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Tři pilíře tokenizace</span>
          <h2 className="h1">Vyberte si, co chcete <span className="hl">otevřít kapitálu</span></h2>
          <p className="lead section-head__lead">
            Každý pilíř má vlastní právní rámec, výnosový model a investorský profil. Pomůžeme vám vybrat ten správný — a postavit ho od A do Z.
          </p>
        </div>

        <div className="pillar-grid">
          {PILLARS.map((p, i) => (
            <article
              key={p.title}
              className={`pillar ${active === i ? "pillar--active" : ""}`}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              tabIndex={0}
            >
              <div className="pillar__top">
                <div className="pillar__coin"><Coin icon={p.icon} size={72}/></div>
                <span className="pillar__eyebrow eyebrow">{p.eyebrow}</span>
              </div>
              <h3 className="pillar__title h2">{p.title}</h3>
              <p className="pillar__desc">{p.desc}</p>
              <ul className="pillar__items">
                {p.items.map((it) => (
                  <li key={it}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6L9 17l-5-5"/>
                    </svg>
                    {it}
                  </li>
                ))}
              </ul>
              <a className="pillar__more" href="#kontakt">
                Probrat tento pilíř
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </a>
              <div className="pillar__glow" aria-hidden="true"/>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Pillars = Pillars;