// FAQ + FINAL CTA + FOOTER

const FAQItem = ({ q, a, idx, open, onToggle }) => {
  return (
    <div className="border-b border-white/10 reveal" style={{ transitionDelay: `${idx*0.04}s` }}>
      <button
        onClick={onToggle}
        className="w-full flex items-center justify-between gap-6 py-6 text-left group"
      >
        <span className="flex items-center gap-5">
          <span className="font-mono text-[11.5px] text-white/35 w-8 shrink-0">/ 0{idx+1}</span>
          <span className="display text-[20px] sm:text-[24px] tracking-[-0.025em] text-white/95 group-hover:text-white">{q}</span>
        </span>
        <span className={"shrink-0 h-9 w-9 rounded-full border border-white/15 flex items-center justify-center transition-transform " + (open ? "rotate-45 bg-accent border-accent text-black" : "text-white/70")}>
          <Icon name="plus" size={14} strokeWidth={2} />
        </span>
      </button>
      <div className={"grid transition-[grid-template-rows] duration-500 ease-[cubic-bezier(.2,.7,.2,1)] " + (open ? "grid-rows-[1fr]" : "grid-rows-[0fr]")}>
        <div className="overflow-hidden">
          <div className="pl-[3.25rem] pb-7 pr-12 text-[15px] leading-[1.6] text-white/60 max-w-[760px]">{a}</div>
        </div>
      </div>
    </div>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="about" className="relative py-24 lg:py-32 border-t border-white/8">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 grid lg:grid-cols-12 gap-12">
        <div className="lg:col-span-4">
          <SectionHead
            kicker="QUESTIONS · 06"
            title={<>The things people <span className="font-serif italic font-normal">always</span> ask.</>}
            intro="Can't see yours? Email hello@mercentalabs.com — a real human replies within four hours, on average."
          />
        </div>
        <div className="lg:col-span-8">
          <div className="border-t border-white/10">
            {window.MERCENTA.FAQS.map((f, i) => (
              <FAQItem key={f.q} q={f.q} a={f.a} idx={i} open={open===i} onToggle={() => setOpen(open===i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" className="relative py-24 lg:py-32 border-t border-white/8 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute -inset-20" style={{
          background: "radial-gradient(50% 50% at 50% 60%, var(--accent) 0%, transparent 60%)",
          opacity: 0.18, filter: "blur(60px)"
        }} />
      </div>
      <div className="relative max-w-[1320px] mx-auto px-6 lg:px-10">
        <div className="rounded-[28px] border border-white/12 bg-[var(--bg-2)] p-10 lg:p-16 overflow-hidden relative">
          <div className="absolute inset-0 dotgrid opacity-30" />
          <div className="absolute -top-24 -right-24 w-[420px] h-[420px] rounded-full" style={{ background: "radial-gradient(circle, var(--accent) 0%, transparent 60%)", opacity: 0.18, filter: "blur(20px)" }} />
          <div className="relative grid lg:grid-cols-12 gap-10 items-end">
            <div className="lg:col-span-7">
              <div className="font-mono text-[11.5px] tracking-[0.2em] text-white/40 reveal">START A PROJECT · Q3 2026</div>
              <h2 className="mt-5 display display-tight text-[56px] sm:text-[80px] lg:text-[104px] reveal reveal-delay-1">
                Let's build the<br/>
                <span className="font-serif italic font-normal text-accent">engine.</span>
              </h2>
              <p className="mt-6 max-w-[520px] text-[16.5px] text-white/65 leading-[1.55] reveal reveal-delay-2">
                Two slots open this quarter. Drop a line, or grab a 30-minute intro call — we'll send back a one-pager within 48 hours.
              </p>
            </div>
            <div className="lg:col-span-5 reveal reveal-delay-2">
              <form
                onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}
                className="rounded-[20px] border border-white/12 bg-black/40 backdrop-blur p-6"
              >
                <label className="font-mono text-[10.5px] tracking-[0.2em] text-white/45">YOUR EMAIL</label>
                <div className="mt-3 flex gap-2 items-center border-b border-white/15 pb-2.5">
                  <input
                    type="email"
                    required
                    value={email}
                    disabled={sent}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="founder@yourbrand.com"
                    className="flex-1 bg-transparent outline-none text-[16px] placeholder:text-white/25 disabled:text-white/40"
                  />
                  {!sent ? (
                    <button type="submit" className="btn-accent inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-[13px] font-medium">
                      Send
                      <Icon name="arrow-right" size={13} strokeWidth={2.4} />
                    </button>
                  ) : (
                    <span className="inline-flex items-center gap-1.5 text-accent text-[13px] font-mono">
                      <Icon name="check" size={14} strokeWidth={2.4} /> received
                    </span>
                  )}
                </div>
                <div className="mt-5 flex items-center justify-between">
                  <a href="#" className="text-[13px] text-white/70 ul-link">or book a 30-min intro →</a>
                  <span className="font-mono text-[10.5px] text-white/35">replies in ~4h</span>
                </div>
                <div className="mt-6 pt-6 border-t border-white/10 grid grid-cols-3 gap-3 text-[11.5px] font-mono text-white/45">
                  <div>
                    <div className="text-white/70 text-[13px] font-sans font-medium">Brooklyn</div>
                    61 Wythe Ave
                  </div>
                  <div>
                    <div className="text-white/70 text-[13px] font-sans font-medium">London</div>
                    7 Redchurch St
                  </div>
                  <div>
                    <div className="text-white/70 text-[13px] font-sans font-medium">Remote</div>
                    9 timezones
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const cols = [
    { h: "Studio", links: [
      { label: "Services",      href: "/#content-services" },
      { label: "Case studies",  href: "/cases" },
      { label: "Process",       href: "/#process" },
      { label: "Help center",   href: "/help" },
      { label: "Careers",       href: "#" },
    ]},
    { h: "Capabilities", links: [
      { label: "Strategy",       href: "/#content-services" },
      { label: "Social ops",     href: "/#social-services" },
      { label: "Video & reels",  href: "/#social-services" },
      { label: "Copywriting",    href: "/#content-services" },
      { label: "Branding",       href: "/#content-services" },
      { label: "Paid & growth",  href: "/#social-services" },
    ]},
    { h: "Resources", links: [
      { label: "The Engine (newsletter)", href: "#" },
      { label: "Capability deck",         href: "#" },
      { label: "Press kit",               href: "#" },
      { label: "Privacy",                 href: "#" },
      { label: "Terms",                   href: "#" },
    ]},
  ];
  return (
    <footer className="relative pt-20 pb-10 border-t border-white/8 overflow-hidden">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-5">
            <a href="#top" className="flex items-center gap-2.5">
              <span className="relative inline-flex items-center justify-center h-9 w-9">
                <span className="absolute inset-0 rounded-[10px] bg-accent" />
                <span className="absolute inset-[3px] rounded-[7px] bg-[var(--bg)]" />
                <span className="relative font-mono text-[12px] font-bold tracking-tighter">m✦</span>
              </span>
              <span className="display text-[22px] tracking-[-0.04em]">mercentalabs</span>
            </a>
            <p className="mt-6 max-w-[380px] text-[14.5px] text-white/55 leading-[1.55]">
              An embedded content & social studio for brands building share-of-attention. Brooklyn, London, anywhere your founders shoot.
            </p>
            <div className="mt-7 flex items-center gap-2">
              {[
                ["instagram", "Instagram"],
                ["linkedin", "LinkedIn"],
                ["youtube", "YouTube"],
                ["twitter", "X / Twitter"],
                ["mail", "Email"],
              ].map(([icon, label]) => (
                <a key={icon} href="#" aria-label={label} className="h-10 w-10 rounded-full border border-white/12 hover:border-white/30 hover:bg-white/5 inline-flex items-center justify-center transition">
                  <Icon name={icon} size={15} />
                </a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h} className="lg:col-span-2">
              <h4 className="font-mono text-[10.5px] tracking-[0.2em] text-white/40 mb-5">{c.h.toUpperCase()}</h4>
              <ul className="space-y-3 text-[14px] text-white/80">
                {c.links.map(l => (
                  <li key={l.label}><a href={l.href} className="ul-link hover:text-white">{l.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
          <div className="lg:col-span-1 hidden lg:block">
            <h4 className="font-mono text-[10.5px] tracking-[0.2em] text-white/40 mb-5">EST.</h4>
            <div className="display text-[34px] text-accent">21</div>
            <div className="font-mono text-[10.5px] text-white/35 mt-1">MMXXI</div>
          </div>
        </div>

        {/* big wordmark */}
        <div className="mt-20 pt-10 border-t border-white/8">
          <div className="display tracking-[-0.06em] text-[18vw] lg:text-[15rem] leading-[0.85] text-white/[0.06] select-none whitespace-nowrap overflow-hidden">
            mercentalabs<span className="text-accent/30">✦</span>
          </div>
        </div>

        <div className="mt-10 flex flex-wrap items-center justify-between gap-4 font-mono text-[11.5px] text-white/40">
          <div>© 2021–26 Mercanta Labs Ltd · All rights reserved</div>
          <div className="flex items-center gap-5">
            <a href="#" className="hover:text-white/70">Privacy</a>
            <a href="#" className="hover:text-white/70">Terms</a>
            <span className="inline-flex items-center gap-1.5">
              <span className="h-1.5 w-1.5 rounded-full bg-accent animate-pulse" />
              Studio status · all systems go
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;