// FAQ + Footer + CTA
const FAQItem = ({ q, a, defaultOpen = false }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="border-b hairline">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between gap-6 py-6 text-left group"
      >
        <span className="text-[18px] md:text-[22px] font-medium text-ink tracking-tighter2">{q}</span>
        <span className={"shrink-0 w-7 h-7 rounded-full border hairline flex items-center justify-center transition-all " + (open ? "bg-ink text-paper rotate-45" : "text-ink2 group-hover:bg-paper2")}>
          <Icon name="plus" size={14} strokeWidth={1.8} />
        </span>
      </button>
      <div
        className="overflow-hidden transition-all duration-500"
        style={{ maxHeight: open ? 240 : 0, opacity: open ? 1 : 0 }}
      >
        <div className="pb-7 pr-12 max-w-[68ch] text-[15.5px] leading-[1.65] text-ink2" style={{ textWrap: 'pretty' }}>
          {a}
        </div>
      </div>
    </div>
  );
};

const FAQ = () => (
  <section id="faq" className="relative py-24 md:py-32">
    <div className="mx-auto max-w-[1240px] px-6">
      <SectionLabel>05 · Questions</SectionLabel>

      <div className="reveal grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="lg:col-span-4">
          <h2 className="text-ink font-semibold tracking-tightest leading-[0.95] text-[44px] md:text-[58px]">
            Reasonable<br />questions.
          </h2>
          <p className="mt-6 text-[16px] leading-[1.6] text-ink2 max-w-md">
            Still uncertain? Write us a real letter. We answer every one within a working day.
          </p>
          <a href="#" className="mt-6 inline-flex items-center gap-2 text-[14px] font-medium text-violet-deep link-u">
            hello@inkly.app <Icon name="arrow-up-right" size={14} />
          </a>
        </div>
        <div className="lg:col-span-8">
          <FAQItem
            defaultOpen
            q="Is Inkly really lower latency than the system pen?"
            a="Yes — under 9 ms from pen to pixel on Android tablets with high-refresh screens and an active stylus. The line shows up before your eye expects it."
          />
          <FAQItem q="Which platforms are supported?" a="Native Android apps for tablets and phones (Android 10+), plus a full-featured Progressive Web App on the desktop — works in any modern Chromium browser, installs to the dock or taskbar, and runs offline." />
          <FAQItem q="Will my notes sync if I go offline?" a="All edits are recorded locally as a CRDT and resolved automatically when you reconnect. You can write on a plane for ten hours and not lose a stroke." />
          <FAQItem q="Can I export to standard formats?" a="Inkly exports to PDF, PNG, SVG, our open .inkly format, and Markdown with embedded ink. Voice notes export to .m4a + transcript." />
          <FAQItem q="Do I need a stylus?" a="No. Inkly was designed finger-first; tilt, pressure and palm rejection all work with capacitive touch. An active stylus or S Pen unlocks 9 ms latency and predictive strokes." />
          <FAQItem q="Where is my data stored?" a="On your device first; encrypted at rest. Cloud sync runs through Supabase in your selected region (US, EU, AP). End-to-end encrypted with a key only you hold." />
          <FAQItem q="What does it cost?" a="Free for one notebook and one device. Inkly Plus — unlimited notebooks, all devices, AI transcription — is $4.99/month or $39/year." />
        </div>
      </div>
    </div>
  </section>
);

const CTA = () => (
  <section className="relative py-24 md:py-32">
    <div className="mx-auto max-w-[1240px] px-6">
      <div className="reveal relative bg-ink text-paper rounded-[32px] overflow-hidden p-10 md:p-20">
        <div className="absolute -right-40 -top-40 w-[480px] h-[480px] rounded-full" style={{ background: 'radial-gradient(circle, #E5C07B73, transparent 70%)' }} />
        <div className="absolute -left-20 -bottom-32 w-[380px] h-[380px] rounded-full" style={{ background: 'radial-gradient(circle, #E5C07B2E, transparent 70%)' }} />

        <div className="relative">
          <div className="flex items-center gap-3 mb-6">
            <span className="w-10 h-10 rounded-xl overflow-hidden flex items-center justify-center bg-ink ring-1 ring-paper/15">
              <img src="assets/inkly-icon.png" alt="" className="w-full h-full object-cover" />
            </span>
            <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-paper/50">Get Inkly</div>
          </div>
          <h2 className="font-semibold tracking-tightest leading-[0.95] text-[48px] md:text-[88px] max-w-[14ch]">
            Start a notebook.<br />
            <span className="italic font-medium" style={{ color: '#E5C07B' }}>It will keep up.</span>
          </h2>
          <div className="mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <a href="#" className="inline-flex items-center gap-2 bg-paper text-ink px-6 py-3.5 rounded-full text-[14px] font-medium hover:bg-violet-soft transition-colors">
              <Icon name="smartphone" size={15} strokeWidth={1.8} /> Get on Google Play
            </a>
            <a href="#" className="inline-flex items-center gap-2 border border-paper/25 text-paper px-6 py-3.5 rounded-full text-[14px] font-medium hover:bg-paper/10 transition-colors">
              <Icon name="monitor" size={15} strokeWidth={1.8} /> Open Web App
            </a>
            <span className="text-[12px] font-mono uppercase tracking-[0.18em] text-paper/45 ml-1">
              Free · No account required
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="relative pt-12 pb-10 border-t hairline">
    <div className="mx-auto max-w-[1240px] px-6">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
        <div>
          <div className="flex items-center gap-2.5">
            <span className="w-9 h-9 rounded-lg overflow-hidden flex items-center justify-center bg-ink ring-1 ring-ink/10">
              <img src="assets/inkly-icon.png" alt="" className="w-full h-full object-cover" />
            </span>
            <div className="text-[28px] font-semibold tracking-tightest text-ink">Inkly</div>
          </div>
          <p className="mt-3 text-[13px] text-ink3 max-w-xs leading-[1.6]">
            Made for the kind of thinking that doesn't wait.
          </p>
        </div>
        <div className="text-[12px] font-mono uppercase tracking-[0.14em] text-ink3">
          © 2026 Inkly Studio
        </div>
      </div>
    </div>
  </footer>
);

window.FAQ = FAQ;
window.CTA = CTA;
window.Footer = Footer;