/* sec-hero.jsx — Nav, Hero, animated request queue */
const { useState, useEffect, useRef } = React;

/* ---------- BRAND / LOGO ---------- */
function Brand({ href = "#top" }) {
  return (
    <a className="brand" href={href} aria-label="Scalexec home">
      <span className="brand-mark">
        <svg className="brand-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             strokeWidth="2.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path className="bg-1" d="M4.5 5.5L10.5 12l-6 6.5" />
          <path className="bg-2" d="M12 5.5L18 12l-6 6.5" />
        </svg>
      </span>
      <span className="brand-name">scalexec</span>
    </a>
  );
}

/* ---------- NAV ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => {
      setScrolled(window.scrollY > 12);
      setOpen(false);
    };
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  useEffect(() => {
    const onKey = (event) => {
      if (event.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const links = [["What we execute","#execute"],["How it works","#credits"],["Compare","#compare"],["FAQ","#faq"]];
  return (
    <header className={"nav" + (scrolled || open ? " nav--solid" : "") + (open ? " nav--open" : "")}>
      <div className="nav-inner wrap">
        <Brand />
        <nav className="nav-links">
          {links.map(([t,h]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="nav-cta">
          <a className="nav-login" href="#">Sign in</a>
          <a className="btn btn-primary" href="#credits">Get started <Icons.arrow size={17} /></a>
          <button className="nav-menu-btn" type="button"
                  aria-label={open ? "Close menu" : "Open menu"}
                  aria-expanded={open ? "true" : "false"}
                  aria-controls="mobile-menu"
                  onClick={() => setOpen((v) => !v)}>
            {open ? <Icons.x size={21} sw={2} /> : (
              <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="2" strokeLinecap="round" aria-hidden="true">
                <path d="M4 7h16" />
                <path d="M4 12h16" />
                <path d="M4 17h16" />
              </svg>
            )}
          </button>
        </div>
      </div>
      <div className="nav-mobile wrap" id="mobile-menu" aria-hidden={open ? "false" : "true"}>
        <nav className="nav-mobile-links" aria-label="Mobile navigation">
          {links.map(([t,h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        </nav>
        <div className="nav-mobile-actions">
          <a className="nav-mobile-login" href="#" onClick={() => setOpen(false)}>Sign in</a>
          <a className="btn btn-primary" href="#credits" onClick={() => setOpen(false)}>Get started <Icons.arrow size={17} /></a>
        </div>
      </div>
    </header>
  );
}

/* ---------- HERO ---------- */
const QUEUE = [
  { t: "Rebuild pricing page + 3 variants", cat: "Development", credits: 4 },
  { t: "HubSpot → Slack deal-stage automation", cat: "Automation", credits: 3 },
  { t: "Q3 launch email sequence (6 emails)", cat: "Marketing", credits: 3 },
  { t: "Onboarding SOP + Loom walkthrough", cat: "Operations", credits: 2 },
  { t: "Stripe + Notion revenue dashboard", cat: "Development", credits: 5 },
  { t: "Lead-scoring model for the CRM", cat: "Consulting", credits: 4 },
];
const STAGES = ["Queued", "In progress", "Delivered"];

function HeroQueue() {
  // each row advances through stages on an interval, creating a living queue
  const [ticks, setTicks] = useState(() => QUEUE.map((_, i) => (i % 3)));
  useEffect(() => {
    const id = setInterval(() => {
      setTicks((prev) => {
        // advance one random-ish row each tick for organic motion
        const i = Math.floor(Math.random() * prev.length);
        const next = [...prev];
        next[i] = (next[i] + 1) % 3;
        return next;
      });
    }, 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hq card">
      <div className="hq-top">
        <div className="hq-dots"><i/><i/><i/></div>
        <span className="mono hq-title">scalexec / tickets</span>
        <span className="hq-live"><span className="hq-live-dot"/>live</span>
      </div>
      <div className="hq-rows">
        {QUEUE.map((r, i) => {
          const stage = ticks[i];
          return (
            <div className={"hq-row hq-s" + stage} key={i}>
              <div className="hq-check">
                {stage === 2 ? <Icons.check size={13} sw={2.4}/> :
                 stage === 1 ? <span className="hq-spin"/> :
                 <span className="hq-queued"/>}
              </div>
              <div className="hq-main">
                <span className="hq-task">{r.t}</span>
                <span className="hq-cat mono">{r.cat}</span>
              </div>
              <div className="hq-meta">
                <span className={"hq-stage hq-stage-" + stage}>{STAGES[stage]}</span>
                <span className="hq-credits mono">{r.credits}k</span>
              </div>
            </div>
          );
        })}
      </div>
      <div className="hq-foot">
        <span className="mono">41,000 credits remaining</span>
        <a href="#credits" className="hq-add">Top up <Icons.plus size={13} sw={2}/></a>
      </div>
    </div>
  );
}

const SHIP_WORDS = ["landing pages","funnels","automations","CRM systems","AI agents","SOPs","integrations","dashboards"];

function RotatingWord({ words }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((p) => (p + 1) % words.length), 1900);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="rot">
      <span className="rot-track" style={{ transform: `translateY(${i * -1.4}em)` }}>
        {words.map((w, k) => <span className="rot-line" key={k}>{w}</span>)}
      </span>
    </span>
  );
}

function Hero({ variant }) {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <div className="kicker reveal in"><span className="dot" /> Output without the overhead</div>
          <h1 className="hero-h1 reveal in" data-d="1">
            Scale <span className="hl">output</span>.<br/>Not headcount.
          </h1>
          <p className="hero-sub reveal in" data-d="2">
            Scale faster without hiring. Scalexec gives you an execution department that ships
            marketing, systems, automation and development — without the delays, payroll and
            management overhead of building an internal team.
          </p>
          <div className="hero-ship reveal in" data-d="2">
            <span className="ship-pre mono">we ship</span>
            <Icons.arrow size={15} />
            <RotatingWord words={SHIP_WORDS} />
            <span className="ship-cur" />
          </div>
          <div className="hero-cta reveal in" data-d="3">
            <a className="btn btn-primary btn-lg" href="#credits">Get started <Icons.arrow size={18}/></a>
            <a className="btn btn-ghost btn-lg" href="#execute">What we execute</a>
          </div>
          <div className="hero-facts hero-replaces reveal in" data-d="4">
            <span className="hr-label mono">Replaces a</span>
            <span><Icons.check size={13} sw={2.4}/> Marketing hire</span>
            <span><Icons.check size={13} sw={2.4}/> Operations manager</span>
            <span><Icons.check size={13} sw={2.4}/> Automation specialist</span>
            <span><Icons.check size={13} sw={2.4}/> Agency retainer</span>
          </div>
        </div>
        <div className="hero-visual reveal in" data-d="2">
          {variant === "type" ? null : <HeroQueue />}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Brand, Nav, Hero, HeroQueue });