/* FAQ — accordion list */

const FAQS = [
  {
    q: "Co je to vlastně tokenizace?",
    a: "Tokenizace znamená, že reálné aktivum (nemovitost, FVE, podíl ve firmě) převedeme do podoby digitálních podílů — tokenů — držených on-chain. Investor drží token, právní nárok na výnos / podíl je zajištěn v právní struktuře (SPV, fond, smlouva) v pozadí.",
  },
  {
    q: "Je to v ČR legální?",
    a: "Ano. Pracujeme výhradně v rámci českého a evropského práva. Pro každý projekt navrhujeme konkrétní právní wrapper (SPV, investiční fond, smlouva o tichém společenství atd.) a spolupracujeme s licencovanými partnery na KYC/AML a custody.",
  },
  {
    q: "Kolik to stojí?",
    a: "První konzultace je vždy zdarma. Cena samotné tokenizace závisí na složitosti aktiva, právní struktuře a velikosti emise. Po první schůzce máte konkrétní cenovou nabídku.",
  },
  {
    q: "Jak dlouho proces trvá?",
    a: "Od první konzultace k vydanému tokenu se obvykle dostaneme za 6–10 týdnů. U jednodušších projektů (např. jedna nemovitost v jasném vlastnictví) i rychleji.",
  },
  {
    q: "Kdo budou investoři?",
    a: "Záleží na vašem rozhodnutí. Můžeme cílit na úzký okruh kvalifikovaných investorů, nebo otevřít širší retailovou nabídku — vždy v souladu s regulací. Pomůžeme i s marketingovou částí.",
  },
  {
    q: "Co když chci jen poradit?",
    a: "Konzultace je zdarma a nezávazná. Klidně přijďte jen pro informace — pokud po hovoru zjistíme, že tokenizace pro vás nedává smysl, řekneme to na rovinu.",
  },
];

const FaqItem = ({ q, a, idx }) => {
  const [open, setOpen] = React.useState(idx === 0);
  return (
    <div className={`faq__item ${open ? "faq__item--open" : ""}`}>
      <button className="faq__q" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        <span className="faq__q-text">{q}</span>
        <span className="faq__q-icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 5v14M5 12h14"/>
          </svg>
        </span>
      </button>
      <div className="faq__a-wrap">
        <div className="faq__a">{a}</div>
      </div>
    </div>
  );
};

const FAQ = () => (
  <section className="faq" id="faq">
    <div className="container faq__container">
      <div className="faq__head">
        <span className="eyebrow">FAQ</span>
        <h2 className="h1">Nejčastější <span className="hl">otázky</span></h2>
        <p className="lead">Nenašli jste odpověď? Zeptejte se na konzultaci — odpovíme na cokoli, co vás zajímá.</p>
      </div>
      <div className="faq__list">
        {FAQS.map((f, i) => <FaqItem key={f.q} {...f} idx={i}/>)}
      </div>
    </div>
  </section>
);

window.FAQ = FAQ;