/* sec-faq.jsx — FAQ accordion, Final CTA, Footer */
const { useState: useStateF } = React;

const FAQS = [
  ["How does this work?",
   "You buy a pack of credits, then submit tickets for whatever you need shipped. Every ticket has a clear credit cost up front — a landing page might be 4 credits, an automation 3 — so you always know the cost before work starts. We execute; credits draw down per ticket."],
  ["Is this an agency?",
   "No. Scalexec is an external execution department. You're buying execution capacity — the output of marketers, developers, automation specialists and operators — without hiring, retainers or managing vendors. One team, one queue, one invoice."],
  ["Do credits expire?",
   "Never. Buy capacity now and spend it whenever you're ready — this month or next quarter. Unused credits simply stay in your account."],
  ["What can I submit?",
   "Anything across marketing, operations, automation, development and consulting: landing pages, funnels, CRM systems, AI agents, SOPs, websites, integrations, dashboards, strategy and more. If you're unsure, ask — we'll scope it in credits."],
  ["How fast do things get done?",
   "Most tickets start the same day and our median time to first delivery is around 48 hours. Larger builds are broken into milestones so you see progress continuously, not just at the end."],
  ["Do I need a contract or a call?",
   "No contracts, subscriptions, retainers or minimums — and no mandatory sales call. You buy credits when you want capacity and start submitting. Calls are reserved for enterprise-scale rollouts."],
];

function Faq() {
  const [open, setOpen] = useStateF(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap faq-wrap">
        <div className="faq-head reveal">
          <div className="kicker"><span className="dot" /> FAQ</div>
          <h2>Questions,<br/>answered.</h2>
          <p>Everything you'd ask on a sales call — answered up front, so you don't need one.</p>
          <a className="btn btn-ghost" href="#credits" style={{marginTop:"24px"}}>Still curious? Get started <Icons.arrow size={16}/></a>
        </div>
        <div className="faq-list reveal">
          {FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div className={"faq-item" + (isOpen ? " faq-item--open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{q}</span>
                  <span className="faq-ic">{isOpen ? <Icons.minus size={18}/> : <Icons.plus size={18}/>}</span>
                </button>
                <div className="faq-a" style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}>
                  <div className="faq-a-inner"><p>{a}</p></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="section final" id="start">
      <div className="wrap">
        <div className="final-card reveal">
          <div className="final-glow" />
          <div className="kicker"><span className="dot" /> Get started</div>
          <h2 className="final-h">Scale output.<br/>Not headcount.</h2>
          <p className="final-p">Get the output of a marketing team, operations team, automation team and
             development team — without hiring any of them.</p>
          <div className="final-cta">
            <a className="btn btn-primary btn-lg" href="#credits">Get started <Icons.arrow size={18}/></a>
            <a className="btn btn-ghost btn-lg" href="#">Talk to sales</a>
          </div>
          <div className="final-trust mono">
            <span><Icons.infinity size={15}/> Credits never expire</span>
            <span><Icons.shield size={15}/> No contracts</span>
            <span><Icons.bolt size={14}/> Same-day start</span>
          </div>
          <p className="final-ent mono">Enterprise scale? <a href="#">Talk to sales →</a></p>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Execute", ["Marketing","Operations","Automation","Development","Consulting"]],
    ["Scalexec", ["How it works","Pricing","About","Contact"]],
    ["Resources", ["FAQ","Credit guide","Status","Terms","Privacy"]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Brand />
            <p>Your on-demand execution department. Scale output, not headcount.</p>
            <a className="btn btn-primary" href="#credits">Get started <Icons.arrow size={16}/></a>
          </div>
          <div className="footer-cols">
            {cols.map(([h, items]) => (
              <div className="footer-col" key={h}>
                <span className="footer-h mono">{h}</span>
                {items.map((it) => <a key={it} href="#">{it}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bot">
          <span className="mono">© 2026 Scalexec. All rights reserved.</span>
          <span className="mono footer-made">Built to ship.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Faq, FinalCta, Footer });