// ===== Main sections: Nav, Hero, Ticker, Services, Clients, About, Contact, Footer =====
const { useState: useS, useEffect: useE, useRef: useR } = React;

function Nav() {
  const [open, setOpen] = useS(false);
  const [megaOpen, setMegaOpen] = useS(false);
  const closeTimer = useR(null);
  const data = window.CTRLZ_SERVICES || [];
  const close = () => { setOpen(false); setMegaOpen(false); };

  const onEnter = () => { clearTimeout(closeTimer.current); setMegaOpen(true); };
  const onLeave = () => { closeTimer.current = setTimeout(() => setMegaOpen(false), 180); };

  return (
    <nav className="nav" data-screen-label="00 Nav" onMouseLeave={onLeave}>
      <a href="#top" className="nav-logo" onClick={close}>
        <img src={(window.__resources && window.__resources.logoImg) || "assets/logo.png"} alt="Ctrl Z"/>
      </a>
      <div className={`nav-links ${open ? 'open' : ''}`}>
        <div
          className="nav-link-wrap"
          onMouseEnter={onEnter}
          onMouseLeave={onLeave}
        >
          <a className={`nav-link ${megaOpen ? 'is-open' : ''}`} href="#services" onClick={(e) => { if (window.innerWidth > 820) { e.preventDefault(); setMegaOpen(m => !m); } else { close(); } }} data-interactive>
            Services <span className="chev">∨</span>
          </a>
        </div>
        <a className="nav-link" href="#work" onClick={close} data-interactive>Work</a>
        <a className="nav-link" href="#studio" onClick={close} data-interactive>Studio</a>
        <a className="nav-link" href="services.html" onClick={close} data-interactive>Full breakdown</a>
        <a className="nav-cta" href="#contact" onClick={close} data-interactive>Start a project</a>
      </div>
      <button className="nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu" data-interactive>
        <span/><span/><span/>
      </button>

      {/* Mega menu */}
      <div
        className={`mega-menu ${megaOpen ? 'open' : ''}`}
        onMouseEnter={onEnter}
        onMouseLeave={onLeave}
      >
        <div className="mega-inner">
          <div className="mega-head">
            <div>
              <div className="mega-eyebrow">What we do — six pillars</div>
              <h3 className="mega-title">Pick your <span className="it">undo.</span></h3>
            </div>
            <a className="mega-see-all" href="services.html" onClick={close} data-interactive>
              Full services breakdown →
            </a>
          </div>
          <div className="mega-grid">
            {data.map((s) => (
              <a
                key={s.key}
                href={`service.html?s=${s.key}`}
                className="mega-card"
                data-color={s.color}
                onClick={close}
                data-interactive
              >
                <div className="mega-emoji" aria-hidden="true">{s.emoji}</div>
                <div className="mega-num">{s.num}</div>
                <div className="mega-name">{s.name}</div>
                <div className="mega-tag">{s.tagline}</div>
                <div className="mega-arrow">→</div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </nav>
  );
}

function Hero({ tweaks }) {
  const headlines = [
    { a: "copy", b: "paste.", c: "undo." },
    { a: "same-same,", b: "forever.", c: "undo." },
    { a: "another", b: "template.", c: "undo." },
  ];
  const [hIdx, setHIdx] = useS(tweaks.hero || 0);
  useE(() => setHIdx(tweaks.hero || 0), [tweaks.hero]);
  const h = headlines[hIdx % headlines.length];

  const [pressed, setPressed] = useS(false);
  const [zap, setZap] = useS(0);
  const pressKeys = () => {
    setPressed(true);
    setZap(z => z + 1);
    setTimeout(() => setPressed(false), 280);
    // cycle hero headline on click for extra fun
    setHIdx(i => (i + 1) % headlines.length);
  };

  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: 'relative', zIndex: 3, width: '100%' }}>
        <div className="hero-eyebrow">
          <span className="dot"/>
          <span className="mono" style={{ fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Creative &amp; digital studio · est. 2021
          </span>
        </div>

        <h1 className="hero-headline">
          <span className="struck">
            {h.a}
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <path className="scribble-strike" d="M4 26 Q 40 10 80 24 T 160 22 Q 180 14 196 22" />
            </svg>
          </span>
          {" "}
          <span className="struck">
            {h.b}
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <path className="scribble-strike" d="M4 22 Q 40 32 80 18 T 160 24 Q 180 30 196 18" />
            </svg>
          </span>
          <br/>
          <span className="undo-word">
            {h.c}
            <svg className="underline" viewBox="0 0 200 24" preserveAspectRatio="none">
              <path className="scribble-under" stroke="#E85A3C" d="M4 12 Q 30 2 60 12 T 120 14 T 180 12 Q 192 8 198 14" />
              <path className="scribble-under" stroke="#F5C23C" d="M10 18 Q 40 10 80 18 T 140 20 T 192 16" opacity="0.7"/>
            </svg>
          </span>
        </h1>

        <div className="hero-grid">
          <p className="hero-sub">
            In a world of <span className="swap">copy &amp; paste</span>, we're the undo button.
            A creative &amp; digital marketing studio that builds brands worth remembering —
            and campaigns that actually move numbers.
          </p>
          <div className="hero-meta">
            <div className="hero-meta-row">
              <span className="pill teal">Influencer</span>
              <span className="pill yellow">Performance</span>
              <span className="pill coral">Web</span>
              <span className="pill">CRM</span>
              <span className="pill">Photo &amp; Video</span>
            </div>
            <div className="hero-meta-row">
              <a href="#services" className="nav-cta" style={{ background: 'var(--navy)', color: 'var(--cream)' }} data-interactive>
                See the services →
              </a>
              <a href="#contact" className="nav-cta" data-interactive>
                Start a project →
              </a>
            </div>
          </div>
        </div>
      </div>

      <button
        className={`hero-keys ${pressed ? 'pressed' : ''}`}
        onClick={pressKeys}
        aria-label="Press Ctrl+Z to undo"
        data-interactive
        type="button"
      >
        <div className="key">CTRL</div>
        <div className="key plus">+</div>
        <div className="key z">Z</div>
        {zap > 0 && (
          <span key={zap} className="key-zap" aria-hidden="true">undo!</span>
        )}
      </button>

      <svg className="hero-scribble s1" viewBox="0 0 120 120" aria-hidden="true">
        <path d="M10 60 Q 30 20 60 40 Q 90 60 60 80 Q 30 100 50 60 Q 70 20 100 50" stroke="#1E3A6F" strokeWidth="2" fill="none" strokeLinecap="round"/>
      </svg>
      <svg className="hero-scribble s2" viewBox="0 0 100 100" aria-hidden="true">
        <circle cx="50" cy="50" r="40" stroke="#E85A3C" strokeWidth="2" fill="none" strokeDasharray="4 6"/>
        <circle cx="50" cy="50" r="22" stroke="#5AC4B9" strokeWidth="2" fill="none"/>
      </svg>
    </section>
  );
}

function Ticker() {
  const items = ["REWRITE THE BRIEF", "UNDO THE BORING", "REDO THE RESULTS", "UNSEND THE MEDIOCRE", "RETRY WITH FEELING"];
  const row = (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="ticker-star">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {row}{row}{row}{row}
      </div>
    </div>
  );
}

function Services() {
  const data = window.CTRLZ_SERVICES;
  const [open, setOpen] = useS("influencer");
  return (
    <section className="services" id="services" data-screen-label="02 Services">
      <div className="wrap">
        <div className="section-label">
          <span className="bar"/>
          <span>Ch. 02 — What we do</span>
        </div>

        <div className="services-head">
          <h2 className="services-title">
            Five things.{" "}
            <span className="scribbled">
              Done properly.
              <svg viewBox="0 0 400 18" preserveAspectRatio="none"><path className="scribble-under" d="M4 10 Q 80 2 160 10 T 320 12 Q 380 6 396 12"/></svg>
            </span>
          </h2>
          <p className="services-note">
            No bolted-on specialties, no "we also do". Just five disciplines we've been
            quietly winning at — and they work even better together.
          </p>
        </div>

        <div className="service-list">
          {data.map((s) => {
            const isOpen = open === s.key;
            return (
              <div
                key={s.key}
                className={`service-row ${isOpen ? 'open' : ''}`}
                data-color={s.color}
                onClick={() => setOpen(isOpen ? null : s.key)}
                data-interactive
              >
                <div className="wrap">
                  <div className="service-top">
                    <div className="service-num">{s.num}</div>
                    <div className="service-name">{s.name}</div>
                    <div className="service-tagline">{s.tagline}</div>
                    <div className="service-toggle">+</div>
                  </div>
                  <div className="service-body">
                    <div className="service-inner">
                      <div/>
                      <div>
                        <p className="service-desc">{s.desc}</p>
                        <a
                          href={`service.html?s=${s.key}`}
                          onClick={(e) => e.stopPropagation()}
                          data-interactive
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 10,
                            marginTop: 20, fontFamily: 'var(--f-mono)', fontSize: 12,
                            letterSpacing: '0.1em', textTransform: 'uppercase',
                            padding: '12px 20px', border: '2px solid var(--ink)',
                            borderRadius: 999, textDecoration: 'none', color: 'var(--ink)',
                            background: 'var(--cream)', boxShadow: '3px 3px 0 var(--ink)'
                          }}
                        >
                          Read the full {s.name.toLowerCase()} scope →
                        </a>
                      </div>
                      <div className="service-subs">
                        {s.subs.map((sub, i) => (
                          <div key={i} className="service-sub">{sub}</div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="services.html" className="nav-cta" data-interactive>
            Full services breakdown →
          </a>
          <span className="serif-it" style={{ fontSize: 20, opacity: 0.75 }}>
            or keep scrolling — we've got receipts.
          </span>
        </div>
      </div>
    </section>
  );
}

function Clients() {
  const clients = [
    "BABALAS RESCUE", "VITALITY IV", "ROOIBAARD", "BUFFELSFONTEIN",
    "VITA UP", "CIT MOTO", "AUTOMOBILE ASSOCIATION OF SA", "TRIPLE E TRAINING",
  ];
  return (
    <section className="clients" id="work" data-screen-label="03 Clients">
      <div className="wrap">
        <div className="section-label" style={{ color: 'var(--cream)', justifyContent: 'center' }}>
          <span className="bar" style={{ background: 'var(--yellow)' }}/>
          <span>Ch. 03 — In good company</span>
          <span className="bar" style={{ background: 'var(--yellow)' }}/>
        </div>
        <h3 className="clients-title">
          A few of the brands we've <span className="hl">rewritten.</span>
        </h3>
        <div className="clients-grid">
          {clients.map((c, i) => (
            <div key={i} className="client-cell" data-interactive>
              <span className="tiny">{String(i + 1).padStart(2, '0')}</span>
              {c}
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', marginTop: 32, fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 18, opacity: 0.8 }}>
          Proudly in good company — and making room for the next one.
        </p>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about" id="studio" data-screen-label="04 Studio">
      <div className="wrap">
        <div className="section-label">
          <span className="bar"/>
          <span>Ch. 04 — The studio</span>
        </div>
        <div className="about-grid">
          <div>
            <h2 className="about-big">
              We're a small team of <span className="serif">fixers,</span>{" "}
              <span className="accent">strategists,</span> and people who get{" "}
              <span className="serif">strangely obsessed</span> with analytics dashboards.
            </h2>
            <div className="about-stats">
              <div>
                <div className="stat-num">+312%</div>
                <div className="stat-label">Avg. ROAS lift</div>
              </div>
              <div>
                <div className="stat-num">47</div>
                <div className="stat-label">Brands rebuilt</div>
              </div>
              <div>
                <div className="stat-num">11</div>
                <div className="stat-label">Humans in the studio</div>
              </div>
              <div>
                <div className="stat-num">0</div>
                <div className="stat-label">Templates used, ever</div>
              </div>
            </div>
          </div>
          <div>
            <p className="about-copy" style={{ marginBottom: 24 }}>
              Ctrl Z started because we got tired of watching good brands make
              forgettable work. Another "vibrant community". Another "synergy-driven
              solution". Another founder wondering why the agency invoice is so long
              and the results so short.
            </p>
            <p className="about-copy" style={{ marginBottom: 24 }}>
              So we built a studio for the part that's missing — the undo. We fix the
              brief before it breaks the brand. We run media like operators, not
              spectators. We ship sites that don't need a CEO apology email.
            </p>
            <p className="about-copy" style={{ fontWeight: 500 }}>
              If you're brave enough to press the button, we're here to help.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const services = ["Influencer", "Performance", "Web", "CRM", "Photo/Video"];
  const [picks, setPicks] = useS(["Web"]);
  const [sent, setSent] = useS(false);

  const toggle = (s) => {
    setPicks(p => p.includes(s) ? p.filter(x => x !== s) : [...p, s]);
  };

  return (
    <section className="contact" id="contact" data-screen-label="05 Contact">
      <div className="wrap">
        <div className="section-label" style={{ color: 'var(--cream)', opacity: 1 }}>
          <span className="bar" style={{ background: 'var(--yellow)' }}/>
          <span>Ch. 05 — Say hi</span>
        </div>
        <h2 className="contact-head">
          Let's press the <span className="it">undo button.</span>
        </h2>
        <div className="contact-grid">
          <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 3500); }}>
            <div className="field">
              <label>Your name</label>
              <input placeholder="Morgan from Marketing" required data-interactive/>
            </div>
            <div className="field">
              <label>Email</label>
              <input type="email" placeholder="morgan@brand.co" required data-interactive/>
            </div>
            <div className="field">
              <label>Brand / Company</label>
              <input placeholder="Brand Co." data-interactive/>
            </div>
            <div className="field">
              <label>What's this about? (pick any)</label>
              <div className="chip-row">
                {services.map(s => (
                  <button
                    type="button"
                    key={s}
                    className={`chip ${picks.includes(s) ? 'on' : ''}`}
                    onClick={() => toggle(s)}
                    data-interactive
                  >
                    {s}
                  </button>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Tell us more</label>
              <textarea placeholder="We're launching in July and our site looks like 2014…" data-interactive/>
            </div>
            <button className="submit" type="submit" data-interactive>
              {sent ? "✓ sent — we'll be in touch" : "Send it →"}
            </button>
          </form>
          <aside className="contact-aside">
            <p>
              Or skip the form. Email <a href="mailto:info@ctrl-z.agency" data-interactive>info@ctrl-z.agency</a> or WhatsApp us — we read every message.
            </p>
            <div className="contact-info">
              <div>📍 South Africa · remote-friendly</div>
              <div>✉️ <a href="mailto:info@ctrl-z.agency" data-interactive style={{color:'inherit', borderBottom:'2px solid var(--yellow)'}}>info@ctrl-z.agency</a></div>
              <div>💬 <a href="https://wa.me/27729172819?text=Hi%20Ctrl%20Z%2C%20I%27d%20like%20to%20start%20a%20project." target="_blank" rel="noopener" data-interactive style={{color:'inherit', borderBottom:'2px solid var(--yellow)'}}>WhatsApp 072 917 2819</a></div>
              <div>📞 <a href="tel:+27729172819" data-interactive style={{color:'inherit', borderBottom:'2px solid var(--yellow)'}}>+27 72 917 2819</a></div>
            </div>
            <p style={{ marginTop: 32, opacity: 0.85 }}>
              We reply inside one working day. Promise.
            </p>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div>© 2026 Ctrl Z Studio — all rights, some lefts.</div>
      <div style={{ display: 'flex', gap: 20 }}>
        <a href="#top" style={{ color: 'inherit', textDecoration: 'none' }}>Back to top ↑</a>
        <span style={{ opacity: 0.5 }}>v.1 — undo everywhere</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Ticker, Services, Clients, About, Contact, Footer });