// FAQ section
const FAQS = [
  {
    q: "What will it cost?",
    a: "Try Inkly free — 3 designs to see what it produces, no card. After that: $19/mo for 100 designs with no watermark, full downloads, all 7 styles. Or $39 one-time for a single perfected design with vector and stencil files. Founder pricing — $9/mo locked forever — is reserved for the first 200 people on this list."
  },
  {
    q: "When exactly?",
    a: "Early access goes out late August 2026. Public launch in early September. We'll email you the exact day a week before — no surprise drops, no FOMO scarcity timers."
  },
  {
    q: "Will my designs be unique?",
    a: "Each generation is fresh. Your prompt + style + seed never repeats, and we don't sell designs to anyone else. Take them straight to your artist as reference, or as a final."
  }
];

const FAQItem = ({ qa, idx, accent, open, onToggle }) => (
  <Reveal delay={Math.min(idx * 60, 240)} duration={500}>
    <div className="border-t border-[#2a2a2a]">
      <button
        type="button"
        onClick={onToggle}
        className="w-full flex items-start justify-between gap-6 py-6 sm:py-7 text-left"
        aria-expanded={open}
      >
        <span className="font-serif text-[22px] sm:text-[28px] leading-[1.2] tracking-[-0.005em] text-[#F5F5F5]">
          {qa.q}
        </span>
        <span
          className="shrink-0 mt-2 sm:mt-3 inline-block w-[14px] h-[14px] relative"
          aria-hidden="true"
          style={{ color: accent }}
        >
          <span className="absolute inset-x-0 top-1/2 h-[1.5px] -translate-y-1/2" style={{ background: 'currentColor' }} />
          <span
            className="absolute inset-y-0 left-1/2 w-[1.5px] -translate-x-1/2 transition-transform duration-300"
            style={{ background: 'currentColor', transform: open ? 'scaleY(0)' : 'scaleY(1)' }}
          />
        </span>
      </button>
      <div
        className="overflow-hidden transition-all duration-400 ease-out"
        style={{ maxHeight: open ? 320 : 0, opacity: open ? 1 : 0 }}
      >
        <div className="pb-7 pr-10 text-[15px] sm:text-[16px] text-[#cfcfcf] leading-[1.7] max-w-[60ch]">
          {qa.a}
        </div>
      </div>
    </div>
  </Reveal>
);

const FAQ = ({ accent }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="bg-[#0A0A0A] text-[#F5F5F5] py-24 sm:py-32 border-t border-[#1a1a1a]">
      <div className="max-w-[1240px] mx-auto px-6 sm:px-10">
        <Reveal>
          <div className="flex items-end justify-between flex-wrap gap-4 mb-10 sm:mb-14">
            <h2 className="font-serif text-[34px] sm:text-[44px] leading-[1.05] tracking-[-0.01em] max-w-[18ch]">
              Three things people ask first.
            </h2>
            <div className="text-[12px] uppercase tracking-[0.22em] text-[#9a9a9a] flex items-center gap-3">
              <span className="inline-block h-px w-8" style={{ background: accent }} />
              FAQ
            </div>
          </div>
        </Reveal>
        <div className="max-w-[860px] border-b border-[#2a2a2a]">
          {FAQS.map((qa, i) => (
            <FAQItem
              key={i}
              qa={qa}
              idx={i}
              accent={accent}
              open={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;