/* global React */
const { useEffect, useRef, useState } = React;

// =================================================================
// §7 FAQ — clean list, no phone
// =================================================================
const FAQS = [
  {
    q: "What's the cost?",
    a: "Depends on what you need. Ads-only is one price. Full system — Sophie AI, follow-up, creative, CRM — is another. We custom quote on the call after a 15-minute audit. No setup fees. No surprise charges. Performance-based across the board.",
  },
  {
    q: "What if you miss 3X?",
    a: "Then we work free until we do. Signed on every contract. We've paid out twice in 4 years — both because the offer was wrong and we couldn't fix it fast enough. We tell you up front if we don't see a 3X path.",
    guarantee: true,
  },
  {
    q: "Do I own the ad account?",
    a: "Always. Meta, Google, TikTok, YouTube — all under your business manager, your billing, your data. Day we sign you grant us admin. Day we part ways we hand it back. You never lose the pixel, audiences, or learning.",
  },
  {
    q: "Month-to-month or contracts?",
    a: "Month-to-month. Cancel anytime with 30 days notice. We don't lock you in because we don't need to — if we're not hitting numbers, you'll fire us anyway.",
  },
  {
    q: "Who actually runs my account?",
    a: "The team runs every account on the playbook I built. I review weekly, sign off on creative, read call recordings. You get a dedicated account lead day-to-day. I'm one Slack message away.",
  },
  {
    q: "When will I see real results?",
    a: "First leads in 48 hours. First bookings or sales by week 1. 3X ROAS by day 90 (or we work free). Most clients hit profitability week 3.",
  },
  {
    q: "Will you work with my competitor?",
    a: "No. We only take one business per niche per market. If your competitor signs first, we'll tell you straight up and refer you elsewhere. Call early.",
    exclusive: true,
  },
];

function FAQ() {
  const [open, setOpen] = useState(1); // guarantee row open by default

  return (
    <section className="sec faq-sec" id="faq">
      <div className="sec-inner">
        <div style={{ textAlign: "center" }}>
          <span className="eyebrow"><span className="dot" /> THE STUFF PEOPLE ALWAYS ASK</span>
          <h2 className="display" style={{ marginTop: 24 }}>
            Honest answers.<br/><span className="it">No fluff.</span>
          </h2>
        </div>

        <div className="faq-list-wide">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "") + (f.guarantee ? " is-guarantee" : "") + (f.exclusive ? " is-exclusive" : "")}>
              <button className={"faq-q" + (f.guarantee ? " guarantee" : "") + (f.exclusive ? " exclusive" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-q-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq-q-text">{f.q}</span>
                {f.guarantee && <span className="faq-q-tag">SIGNED</span>}
                {f.exclusive && <span className="faq-q-tag">EXCLUSIVITY</span>}
                <span className="plus">+</span>
              </button>
              <div className="faq-a"><div>{f.a}</div></div>
            </div>
          ))}
          <div style={{ marginTop: 32, textAlign: "center" }}>
            <a href="mailto:team@adscaling.co" className="btn btn-soft">Got a different question? Ask us <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================================================================
// §8 FINAL CTA — 4-card "what you get" row, no phone
// =================================================================
const FINAL_STEPS = [
  { num: "01", ttl: "30-min audit call",   sub: "We screen-share your account · find what's broken" },
  { num: "02", ttl: "Custom 90-day plan",  sub: "Offer · creative · funnel · tracking · spend curve" },
  { num: "03", ttl: "48-hour build",       sub: "Ads + landing + Sophie + dashboard live in 2 days" },
  { num: "04", ttl: "3X guarantee",        sub: "Hit 3X in 90 days or we work free until we do" },
];

const TRUSTED_LOGOS = [
  "tim-tebow-conference.png",
  "bentley-trike.avif",
  "skull-shaver.avif",
  "biktrix.webp",
  "renuva-back-pain-centre.png",
  "g-plans.png",
  "minibeast.png",
  "tinye-swim.avif",
  "alanis-air.png",
  "apricot-solar.png",
  "quality-air.png",
  "amplify-digital-marketing.png",
  "elara-media.png",
  "push-media.png",
  "si-media.png",
  "amcham-t-h-i-s-event.png",
  "church-planting-university.png",
  "medical-center-plus.png",
  "dr-joey-alcantara-chiropractic.png",
  "canadian-centre-for-counselling-and-psychotherapy-josephthomas.png",
  "psych-for-me.png",
  "personalized-wellness-vitality.png",
  "ascension-physio.png",
  "aukland-drape-company.png",
  "gt-motorsports.png",
  "auto-lounge-of-edison.png",
  "sunward-journeys-august-wambold.png",
];

function FinalCTA() {
  return (
    <section id="cta" className="final-cta-wrap" style={{ padding: "32px 16px 24px", background: "#fff" }}>
      <div className="final-cta-card" style={{
        background: "#fff",
        borderRadius: 36,
        padding: "56px 40px 24px",
        position: "relative",
        overflow: "hidden",
        maxWidth: 1320,
        margin: "0 auto",
        boxShadow: "0 2px 0 0 rgba(10,9,18,0.06), 0 0 0 1px rgba(10,9,18,0.06)",
      }}>
        {/* Eyebrow */}
        <div style={{ textAlign: "center", marginBottom: 24 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "8px 18px", borderRadius: 999,
            border: "1px solid oklch(0.42 0.26 285 / 0.20)",
            background: "oklch(0.42 0.26 285 / 0.06)",
            fontSize: 12, fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: 1.3, color: "oklch(0.42 0.26 285)"
          }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "oklch(0.42 0.26 285)" }} />
            YOU REALLY HAVEN'T BOOKED YET..?
          </span>
        </div>

        {/* Display */}
        <h2 style={{
          textAlign: "center", margin: "0 0 22px",
          fontSize: "clamp(40px, 6vw, 84px)",
          lineHeight: 0.98, letterSpacing: "-0.02em",
          fontWeight: 800, color: "#0A0912",
          position: "relative", zIndex: 1
        }}>
          Be our <span style={{
            fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400,
            color: "oklch(0.42 0.26 285)"
          }}>next</span> case <span style={{
            fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400,
            color: "oklch(0.42 0.26 285)"
          }}>study.</span>
        </h2>

        <p style={{
          textAlign: "center", maxWidth: 720, margin: "0 auto 24px",
          fontSize: 16, lineHeight: 1.55, color: "#0A0912"
        }}>
          30-minute audit of your account. We show you what's broken, what's working, and whether we can hit 3X. No pitch.
        </p>

        {/* Slot pill */}
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "10px 20px", borderRadius: 999,
            border: "1px solid rgba(10,9,18,0.25)",
            background: "rgba(10,9,18,0.05)",
            color: "#0A0912",
            fontSize: 12, fontFamily: "'JetBrains Mono', monospace",
            letterSpacing: 1.3, fontWeight: 700
          }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#0A0912" }} />
            3 CLIENT SLOTS LEFT · 1 BUSINESS PER MARKET
          </span>
        </div>

        {/* CTA button */}
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginBottom: 36, position: "relative", zIndex: 1 }}>
          <a href="book.html" className="btn-violet final-cta-btn" style={{
            display: "inline-block",
            padding: "22px 56px",
            color: "#fff", borderRadius: 999, textDecoration: "none",
            fontWeight: 700, fontSize: 17, letterSpacing: 0.3,
            whiteSpace: "nowrap"
          }}>BOOK MY FREE AUDIT →</a>
          <a href="mailto:team@adscaling.co" style={{
            color: "#0A0912", fontSize: 13,
            fontFamily: "'JetBrains Mono', monospace",
            textDecoration: "none", letterSpacing: 0.5
          }}>or email team@adscaling.co</a>
        </div>

        {/* Microcopy */}
        <div style={{
          textAlign: "center", paddingBottom: 32,
          fontSize: 13, fontFamily: "inherit",
          letterSpacing: 0, color: "#0A0912",
          lineHeight: 1.8, fontWeight: 500
        }}>
          ✓ No long-term contract · Month-to-month · You own the ad account forever<br/>
          ✓ 1 business per market · Book before your competition
        </div>

        <style>{`
          @media (max-width: 720px) {
            .final-cta-card { padding: 36px 22px 28px !important; border-radius: 24px !important; }
            .final-cta-card h2 { font-size: 34px !important; line-height: 1.05 !important; }
          }
          @media (max-width: 680px) {
            .final-cta-btn { width: 100% !important; box-sizing: border-box !important; padding: 18px 24px !important; text-align: center !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// =================================================================
// FOOTER
// =================================================================
function Footer() {
  return (
    <footer className="footer site-footer">
      <div className="footer-inner-wrap">
        {/* Brand */}
        <div className="footer-brand-col">
          <a href="#top" className="footer-logo-mark">
            <img src="ad-scaling-logo.png" alt="Ad Scaling" width="32" height="32" />
            <span className="footer-wordmark-text">Ad Scaling</span>
          </a>
          <p className="footer-tagline">3X in 90 days.<br/>Or we work free.</p>
        </div>

        {/* Nav columns */}
        <div className="footer-nav-cols">
          <div className="footer-nav-col">
            <div className="footer-col-label">WORK</div>
            {[['Clinics','clinics.html'],['Home Services','home-services.html'],['Agencies','agencies.html'],['Coaches','agencies.html'],['E-Commerce','ecom.html']].map(([l,h]) => (
              <a key={l} href={h}>{l}</a>
            ))}
          </div>
          <div className="footer-nav-col">
            <div className="footer-col-label">COMPANY</div>
            {[['The Story','#moi'],['Case Studies','proof.html'],['FAQ','#faq'],['Book a Call','book.html'],['Privacy · Terms','privacy.html']].map(([l,h]) => (
              <a key={l} href={h}>{l}</a>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="footer-bottom-bar">
        <span>© 2026 Ad Scaling</span>
        <span className="footer-sep">—</span>
        <span>$117M+ Managed · 385 Clients · 8+ yrs</span>
        <span className="footer-sep">—</span>
        <span className="footer-live">
          <span className="footer-live-dot" />
          Live
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer });