// ───────── Header + Hero + Trust Strip ─────────

const NAV = [
  { label: "Services", href: "#services" },
  { label: "AI Systems", href: "#systems" },
  { label: "Case Study", href: "#case" },
  { label: "Process", href: "#process" },
  { label: "Contact", href: "#contact" },
];

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <React.Fragment>
      <div className="header-wrap">
        <div className={`header ${scrolled ? "scrolled" : ""}`}>
          <a className="header-logo" href="#top">
            <img src="assets/mll-logo.png" alt="MLL Digital" />
          </a>
          <nav className="header-nav">
            {NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
          </nav>
          <div className="header-cta">
            <PrimaryCTA label="Book a Discovery Call" />
            <button className="hamburger" aria-label="Menu" onClick={() => setOpen(v => !v)}>
              <Icon name={open ? "close" : "menu"} size={18} />
            </button>
          </div>
        </div>
      </div>
      <div className={`mobile-menu ${open ? "open" : ""}`}>
        {NAV.map(n => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
        <PrimaryCTA label="Book a Discovery Call" />
      </div>
    </React.Fragment>
  );
};

// ── Hero AI command-center visual ──
const Spark = ({ heights }) => (
  <div className="spark">
    {heights.map((h, i) => <span key={i} style={{ height: `${h}%` }}></span>)}
  </div>
);

const HeroVisual = () => (
  <div className="hero-visual" aria-hidden="true">
    {/* concentric rings + soft halo */}
    <div className="ring"></div>
    <div className="ring r2"></div>
    <div className="ring r3"></div>
    <div className="orb-halo"></div>

    {/* core orb */}
    <div className="orb"></div>

    {/* SVG workflow lines connecting nodes through center */}
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="heroLine" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#4d8bff" stopOpacity="0.0" />
          <stop offset="50%" stopColor="#4d8bff" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#a855f7" stopOpacity="0.0" />
        </linearGradient>
      </defs>
      <path d="M22,18 Q38,30 50,50" stroke="url(#heroLine)" strokeWidth="0.3" fill="none" strokeDasharray="1 1.6" />
      <path d="M82,22 Q68,36 50,50" stroke="url(#heroLine)" strokeWidth="0.3" fill="none" strokeDasharray="1 1.6" />
      <path d="M20,82 Q35,70 50,50" stroke="url(#heroLine)" strokeWidth="0.3" fill="none" strokeDasharray="1 1.6" />
      <path d="M80,78 Q68,66 50,50" stroke="url(#heroLine)" strokeWidth="0.3" fill="none" strokeDasharray="1 1.6" />
    </svg>

    {/* floating panels — larger, cleanly tiled, no orb overlap */}
    <div className="float-panel p1">
      <div className="label">Pipeline · Today</div>
      <div className="row">
        <div className="value">€48.2K</div>
        <div className="delta">▲ 12.4%</div>
      </div>
      <Spark heights={[40, 55, 38, 65, 50, 78, 62, 88, 74, 92]} />
    </div>

    <div className="float-panel p2">
      <div className="label">Agent · Lead Qualifier</div>
      <div className="status">Active</div>
      <div style={{ marginTop: 8, color: "var(--ink-3)", fontSize: 11 }}>342 conversations &middot; 28 routed</div>
    </div>

    <div className="float-panel p3">
      <div className="label">Campaign · Google Ads</div>
      <div className="row">
        <div className="value">4.7×</div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.08em" }}>ROAS</div>
      </div>
      <Spark heights={[30, 38, 48, 42, 58, 64, 72, 80, 76, 90, 84, 95]} />
    </div>

    <div className="float-panel p4">
      <div className="label">Automations</div>
      <div className="value">147</div>
      <div className="delta" style={{ color: "var(--blue)" }}>tasks / day</div>
    </div>
  </div>
);

const Hero = () => (
  <section className="hero" id="top">
    <div className="container">
      <div className="hero-grid">
        <div className="reveal in">
          <div className="eyebrow" style={{ marginBottom: 22 }}>AI · Automation · Performance</div>
          <h1 className="h-display">
            Build <span className="grad">AI-Powered Growth Systems</span> Before Your Market Catches Up.
          </h1>
          <p className="lead hero-sub">
            MLL Digital helps businesses automate operations, deploy AI agents, and scale customer
            acquisition through performance marketing, SEO, and intelligent workflows.
          </p>
          <div className="hero-ctas">
            <PrimaryCTA label="Book a Discovery Call" />
            <GhostCTA label="Explore Our Systems" href="#systems" />
          </div>
          <div className="hero-meta">
            <span className="dot"></span>
            <span>Now booking · Q2 strategy calls</span>
          </div>
        </div>
        <HeroVisual />
      </div>
    </div>
  </section>
);

const TrustStrip = () => {
  const items = [
    "AI Automation","Agentic Workflows","Google Ads","Meta Ads","TikTok Ads",
    "Pinterest Ads","SEO","Email Marketing","Social Media Management",
  ];
  const set = (
    <div className="marquee-item">
      {items.map((x, i) => <span key={i}>{x}</span>)}
    </div>
  );
  return (
    <div className="marquee" aria-label="Services">
      <div className="marquee-track">
        {set}{set}{set}
      </div>
    </div>
  );
};

Object.assign(window, { Header, Hero, TrustStrip });