/* FAQ — accordion */

function FAQItem({ q, a, open, onToggle }) {
  return (
    <div className={"faq-item " + (open ? "is-open" : "")}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <i data-lucide={open ? "minus" : "plus"} style={{width:18, height:18, strokeWidth: 1.75}}></i>
      </button>
      {open && <div className="faq-a">{a}</div>}
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "How much does it cost?",
      a: "Starter from €699 setup + €39/month. Standard from €1,299 + €59/month. Premium from €2,499 + €129/month. Year one and onward — same price, no surprises. See the plans for what's included." },
    { q: "Do I own the website?",
      a: "Yes. You own the domain, your content, and the design. If you ever want to leave, we'll hand it all over. We just hope you won't want to." },
    { q: "What's included in hosting?",
      a: "Fast hosting on EU servers, SSL certificate, daily backups, security monitoring, and the domain registration itself. No hidden invoices." },
    { q: "What is AI / AEO?",
      a: "Answer-Engine Optimisation. As more people ask ChatGPT and Google's AI for recommendations instead of clicking through search results, your business needs to be cited in those answers. On Premium, we structure your content so AI assistants pick you up." },
    { q: "Can I add new pages later?",
      a: "On Premium, yes - included. On Standard, we'll quote you per hour. Either way, nothing's locked." },
    { q: "Do you work outside Ireland?",
      a: "Ireland is our home market and where our clients are so far. We're open to working with businesses across the EU too — if you're based elsewhere in Europe, get in touch and let's have a chat." },
    { q: `What does "website as a service" mean?`,
      a: "You don't buy a website outright. You pay a one-time setup fee, then a small subscription that covers hosting, domain, email, security, backups, and ongoing updates — everything that keeps a website alive and looking fresh. Standard plans include a professional on-site photo shoot. Premium adds a full-day shoot and a short brand video (60–90 seconds). Cancel any time after year one and take your site with you." },
    { q: "Do you do online shops?",
      a: "Not as part of our plans. We focus on the websites that bring you customers — booking systems are available as an add-on for yoga studios, salons, therapists, and similar. For full e-commerce we'll happily point you to studios that specialise in it." },
    { q: "What happens if I want to leave?",
      a: "You own the design, the content, the photos. We migrate everything to a host of your choice and hand over admin access. Your domain stays yours. No exit fee, no fuss." },
  ];

  return (
    <section id="faq" className="faq">
      <div className="container faq-layout">
        <div className="section-head" style={{marginBottom: 0}}>
          <span className="eyebrow">Common questions</span>
          <h2>Things people usually <span className="h-accent">ask</span>.</h2>
          <p className="lead">Don't see yours? <a href="#contact">Send us a note</a> - we usually reply within a day.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <FAQItem key={i} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
      <style>{`
        .faq { background: var(--paper-warm); }
        .faq-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
        @media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: 40px; } }
        .faq-list { display: flex; flex-direction: column; gap: 0; }
        .faq-item { border-bottom: 1px solid var(--border); }
        .faq-item:first-child { border-top: 1px solid var(--border); }
        .faq-q {
          width: 100%; text-align: left;
          padding: 22px 0;
          background: transparent; border: 0;
          display: flex; justify-content: space-between; align-items: center; gap: 24px;
          font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--ink);
          transition: color var(--dur-fast);
        }
        .faq-q:hover { color: var(--primary); }
        .faq-q i { color: var(--fg-mute); flex-shrink: 0; }
        .faq-a {
          padding: 0 36px 22px 0;
          font-family: var(--font-body);
          font-size: 15.5px; line-height: 1.7; color: var(--fg-soft);
        }
      `}</style>
    </section>
  );
}

window.FAQ = FAQ;