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

const NAV_LINKS = [
  { label: "Clinics",        href: "clinics.html",       key: "clinics" },
  { label: "Home Services",  href: "home-services.html", key: "home-services" },
  { label: "Agencies",       href: "agencies.html",      key: "agencies" },
  { label: "Proof",          href: "proof.html",         key: "proof" },
  { label: "Pricing",        href: "pricing.html",       key: "pricing" },
];

const CASES = [
  { niche: "CLINIC",    name: "Dr. Joey Alcantara",       result: "$38K in 30 days · 58× ROAS",   color: "#7B5CF5" },
  { niche: "CLINIC",    name: "Renuva Back & Pain",       result: "$2.1M · 7.6× ROI",              color: "#10B981" },
  { niche: "HOME SVC",  name: "Permanent Lights Calgary", result: "$250K · 26.6× ROI",             color: "#F59E0B" },
  { niche: "E-COM",     name: "Bentley Trike",            result: "$3M/yr · 17.83× ROAS",          color: "#3B82F6" },
  { niche: "HOME SVC",  name: "Alanis Air",               result: "$400K+ · 40× ROAS",             color: "#EC4899" },
  { niche: "E-COM",     name: "MiniBeast Fitness",        result: "$194K in 30 days · 4.81× ROAS", color: "#14B8A6" },
  { niche: "CELEBRITY", name: "Tim Tebow",                result: "200+ sign-ups · $50/sign-up",   color: "#7B5CF5" },
  { niche: "SOLAR",     name: "Oregon Solar",             result: "$486K in 9 months",              color: "#F97316" },
  { niche: "HOME SVC",  name: "HVAC Client",              result: "$800K · 40× ROAS",              color: "#06B6D4" },
  { niche: "SOLAR",     name: "Cloud Solar",              result: "$312K in 8 weeks",               color: "#10B981" },
  { niche: "E-COM",     name: "Tote N Carry",             result: "$123K in 1 month · 4× ROAS",    color: "#EC4899" },
  { niche: "ROOFING",   name: "AG Commercial Roofing",    result: "$182K in 4 months",              color: "#F59E0B" },
  { niche: "AUTO",      name: "AA Automotive",            result: "$198K in 4 weeks",               color: "#3B82F6" },
  { niche: "COACHING",  name: "Leadership Vault",         result: "$350K generated",                color: "#7B5CF5" },
  { niche: "E-COM",     name: "WrapLife",                 result: "$73.4K · 446% sales lift",       color: "#F97316" },
  { niche: "FINANCE",   name: "First Citizens Bank",      result: "$142K in 60 days",               color: "#14B8A6" },
  { niche: "SOLAR",     name: "Project Renewable Solar",  result: "$412K in 8 months",              color: "#06B6D4" },
  { niche: "E-COM",     name: "CocoMats & More",          result: "$105K in 1 month · 4× ROAS",    color: "#EC4899" },
  { niche: "REAL EST.", name: "Aman Kang",                result: "$21K · 55 leads · 3.5× ROI",    color: "#10B981" },
  { niche: "FENCING",   name: "Quick Fencing",            result: "$30K in contracts · 60 days",    color: "#F59E0B" },
  { niche: "E-COM",     name: "CharaChorder",             result: "$40K · sold out · 5.3× ROAS",   color: "#3B82F6" },
  { niche: "B2B",       name: "Altivate",                 result: "$1.4M from 8 clients",           color: "#7B5CF5" },
  { niche: "E-COM",     name: "Beauty By Earth",          result: "$111K in 15 days",               color: "#EC4899" },
  { niche: "WINDOW",    name: "Window Treatments by Dave",result: "$74K in 5 months",               color: "#F97316" },
];

// Each slot starts at a different offset so they don't all flash at once
function TickerCard({ offset }) {
  const [idx, setIdx] = useState(offset % CASES.length);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const delay = offset * 730; // stagger start
    const t = setTimeout(() => {
      const iv = setInterval(() => {
        setVisible(false);
        setTimeout(() => {
          setIdx(i => (i + 1) % CASES.length);
          setVisible(true);
        }, 280);
      }, 2400);
      return () => clearInterval(iv);
    }, delay);
    return () => clearTimeout(t);
  }, []);

  const c = CASES[idx];
  return (
    <div style={{
      borderRadius: 14,
      background: "rgba(10,9,18,0.04)",
      border: "1px solid rgba(10,9,18,0.08)",
      padding: "10px 14px",
      transition: "opacity 0.28s",
      opacity: visible ? 1 : 0,
    }}>
      <div style={{
        fontSize: 9, fontFamily: "'JetBrains Mono', monospace",
        letterSpacing: "0.12em", color: "oklch(0.46 0.10 285)", marginBottom: 6,
        display: "flex", alignItems: "center", gap: 7
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: "50%",
          background: c.color, display: "inline-block",
          boxShadow: `0 0 5px ${c.color}`,
          animation: "navpulse 1.6s ease-in-out infinite"
        }} />
        LIVE · {c.niche}
      </div>
      <div style={{ fontSize: 13, fontWeight: 700, color: "#0A0912", marginBottom: 3 }}>
        {c.name}
      </div>
      <div style={{ fontSize: 18, fontWeight: 800, color: c.color, letterSpacing: "-0.02em" }}>
        {c.result}
      </div>
    </div>
  );
}

function SiteNav({ active, ctaHref, ctaLabel }) {
  const [open, setOpen] = useState(false);
  ctaHref  = ctaHref  || "book.html";
  ctaLabel = ctaLabel || "Book my call";

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      <style>{`
        @keyframes navpulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
      `}</style>

      <nav className="nav">
        <a href="index.html" className="nav-mark">
          <img src="ad-scaling-logo.png" alt="Ad Scaling" style={{ width: 28, height: 28, display: "block" }} />
          Ad Scaling
        </a>
        <div className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.key} href={l.href}
              style={active === l.key ? { color: "var(--violet)", fontWeight: 700 } : {}}
            >{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <a href={ctaHref} className="btn btn-violet nav-cta-desktop">
            {ctaLabel} <span className="arrow">→</span>
          </a>
          <a href={ctaHref} className="btn btn-violet nav-cta-mobile">
            Book →
          </a>
          <button className="nav-hamburger" onClick={() => setOpen(true)} aria-label="Open menu">
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {open && (
        <div className="nav-drawer-overlay" onClick={() => setOpen(false)}>
          <div className="nav-drawer" onClick={e => e.stopPropagation()}>

            {/* Header */}
            <div className="nav-drawer-head">
              <a href="index.html" className="nav-mark" onClick={() => setOpen(false)}>
                <img src="ad-scaling-logo.png" alt="Ad Scaling" style={{ width: 28, height: 28, display: "block" }} />
                Ad Scaling
              </a>
              <button className="nav-drawer-close" onClick={() => setOpen(false)} aria-label="Close menu">✕</button>
            </div>

            {/* Links */}
            <div className="nav-drawer-links">
              {NAV_LINKS.map(l => (
                <a key={l.key} href={l.href}
                  className={"nav-drawer-link" + (active === l.key ? " active" : "")}
                  onClick={() => setOpen(false)}
                >{l.label}</a>
              ))}
            </div>

            {/* CTA — right below Proof */}
            <a href={ctaHref} className="btn btn-violet nav-drawer-cta" onClick={() => setOpen(false)}>
              {ctaLabel} <span className="arrow">→</span>
            </a>

            {/* 3 live flashing case study cards */}
            <div style={{ marginTop: 20, marginBottom: 6 }}>
              <div style={{
                fontSize: 11, fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: "0.1em", color: "oklch(0.46 0.10 285)",
                textTransform: "uppercase", marginBottom: 6
              }}>Live Clients Right Now</div>
              <div style={{
                fontSize: 20, fontWeight: 800, color: "#0A0912",
                fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
                lineHeight: 1.1
              }}>They didn't wait.</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <TickerCard offset={0} />
              <TickerCard offset={3} />
              <TickerCard offset={6} />
            </div>

          </div>
        </div>
      )}
    </>
  );
}

window.SiteNav = SiteNav;