// nav-hero.jsx — SiteNav, Hero, TrustStrip
window.DZ = window.DZ || {};

function SiteNav({ onCta, onOpenMenu }) {
  const { Button } = window.DelzAILabsDesignSystem_bfa572 || {};
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 12);
    handler();
    window.addEventListener('scroll', handler, { passive: true });
    return () => window.removeEventListener('scroll', handler);
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [open]);
  const links = window.SITE.nav;

  const linkStyle = {
    fontSize: 15, color: 'var(--text-body)', textDecoration: 'none',
    transition: 'color var(--dur-fast) var(--ease-standard)', cursor: 'pointer',
  };

  // Liquid-glass surface: translucent fill + heavy blur + bright top edge + soft drop
  const glass = {
    background: scrolled
      ? 'linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52))'
      : 'linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.40))',
    backdropFilter: 'saturate(200%) blur(22px)',
    WebkitBackdropFilter: 'saturate(200%) blur(22px)',
    border: '1px solid rgba(255,255,255,0.55)',
    boxShadow: scrolled
      ? '0 12px 40px rgba(10,26,102,0.16), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(10,26,102,0.04)'
      : '0 8px 30px rgba(10,26,102,0.10), inset 0 1px 0 rgba(255,255,255,0.80)',
    borderRadius: 'var(--radius-pill)',
    transition: 'background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
  };

  return (
    <header style={{ position: 'sticky', top: 'clamp(12px, 2vw, 22px)', zIndex: 40, padding: '0 clamp(14px, 4vw, 40px)', pointerEvents: 'none' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', pointerEvents: 'auto' }}>
        <div style={{ ...glass, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '10px 12px 10px 20px' }}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', flex: 'none' }}>
            <img src="assets/logo-mark.png" alt="Delz AI Labs" style={{ height: 40 }} />
            <span className="notranslate" translate="no" style={{ fontFamily: 'var(--font-display)', fontSize: 21, color: 'var(--text-strong)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>Delz AI Labs</span>
          </a>

          <nav className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            {links.map((l) => (
              <a key={l.label} href={l.href} style={linkStyle}
                 onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-strong)')}
                 onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-body)')}>{l.label}</a>
            ))}
          </nav>

          <div className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {Button && <Button variant="primary" onClick={onCta}>Book a build</Button>}
          </div>

          <button className="nav-mobile-btn" onClick={() => setOpen((v) => !v)} aria-label="Menu"
            style={{ display: 'none', width: 42, height: 42, alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.6)', background: 'rgba(255,255,255,0.5)', borderRadius: 'var(--radius-pill)', cursor: 'pointer', color: 'var(--text-strong)' }}>
            <i data-lucide={open ? 'x' : 'menu'} style={{ width: 22, height: 22 }} />
          </button>
        </div>

        {open && (
          <div className="nav-mobile-panel" style={{ ...glass, borderRadius: 'var(--radius-lg)', marginTop: 10, padding: '8px 14px 16px', display: 'flex', flexDirection: 'column', gap: 2 }}>
            {links.map((l) => (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)}
                 style={{ padding: '12px 6px', fontSize: 16, color: 'var(--text-body)', textDecoration: 'none', borderBottom: '1px solid rgba(10,26,102,0.08)' }}>{l.label}</a>
            ))}
            <div style={{ marginTop: 12 }}>
              {Button && <Button variant="primary" fullWidth onClick={() => { setOpen(false); onCta(); }}>Book a build</Button>}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}
window.DZ.SiteNav = SiteNav;

function Hero({ onCta }) {
  const { Button, Badge } = window.DelzAILabsDesignSystem_bfa572 || {};
  const chips = [
    { brand: 'whatsapp', color: '#25D366', label: 'WhatsApp', sub: 'replied in 3s', top: '14%', left: '-4%' },
    { brand: 'telegram', color: '#2AABEE', label: 'Telegram', sub: 'lead booked', bottom: '16%', right: '-6%' },
  ];
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(48px, 8vw, 104px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 80px)' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 90% at 88% -10%, rgba(242,106,31,0.16), transparent 55%), radial-gradient(60% 80% at 0% 110%, rgba(27,63,196,0.14), transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container-xl)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0, 1.12fr) minmax(0, 0.88fr)', gap: 'clamp(28px, 5vw, 72px)', alignItems: 'center' }} className="hero-grid">
        <div>
          <div data-hr="0" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px 6px 8px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-xs)', marginBottom: 22 }}>
            <span style={{ display: 'inline-flex', width: 20, height: 20, borderRadius: '50%', background: 'var(--gradient-flame)', alignItems: 'center', justifyContent: 'center', color: '#fff' }}><i data-lucide="sparkles" style={{ width: 12, height: 12 }} /></span>
            <span className="eyebrow" style={{ color: 'var(--text-muted)' }}>AGENTIC AI &amp; AUTOMATION</span>
          </div>
          <h1 data-hr="1" style={{ fontSize: 'clamp(38px, 6vw, 70px)', margin: '0 0 22px', lineHeight: 1.04 }}>
            Put your busywork on <span className="text-gradient">autopilot</span>
          </h1>
          <p data-hr="2" style={{ fontSize: 'clamp(17px, 2vw, 20px)', lineHeight: 1.65, color: 'var(--text-muted)', maxWidth: 540, margin: '0 0 32px' }}>
            Delz builds AI agents that work across WhatsApp, Telegram and email — plugged into your tools, running the workflows you'd rather not. You bring the work. We bring the agents.
          </p>
          <div data-hr="3" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            {Button && <Button variant="accent" size="lg" onClick={onCta} iconRight={<i data-lucide="arrow-right" />}>Book a build</Button>}
            {Button && <Button variant="secondary" size="lg" iconLeft={<i data-lucide="play" />} onClick={() => { const el = document.getElementById('how'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); }}>See how it works</Button>}
          </div>
          <div data-hr="4" style={{ display: 'flex', gap: 'clamp(20px, 4vw, 40px)', marginTop: 44, flexWrap: 'wrap' }}>
            {[['500+', 'agents deployed'], ['6', 'channels supported'], ['99.9%', 'run reliability']].map(([n, l]) => (
              <div key={l}>
                <div className="stat-num" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 4vw, 34px)', color: 'var(--text-strong)', lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 7 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', minHeight: 320 }}>
          <div aria-hidden className="hero-glow" style={{ position: 'absolute', inset: '8% 14%', background: 'var(--gradient-ember)', filter: 'blur(54px)', opacity: 0.45, borderRadius: '50%' }} />
          <img src="assets/logo-mark.png" alt="" className="hero-logo" style={{ position: 'relative', width: 'min(82%, 360px)', filter: 'drop-shadow(0 26px 64px rgba(7,12,36,0.30))' }} />
          {chips.map((c) => (
            <div key={c.label} className="hero-chip" style={{ position: 'absolute', top: c.top, bottom: c.bottom, left: c.left, right: c.right, display: 'flex', alignItems: 'center', gap: 11, background: 'var(--surface-card)', boxShadow: 'var(--shadow-lg)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: '11px 15px' }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, background: c.color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flex: 'none' }}><svg viewBox="0 0 24 24" width="18" height="18" fill="#fff" aria-hidden="true"><path d={window.BRAND_ICONS[c.brand]} /></svg></span>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-strong)' }}>{c.label}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{c.sub}</div>
              </div>
              {Badge && <Badge tone="success" dot>Live</Badge>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.DZ.Hero = Hero;

function TrustStrip() {
  const tools = window.SITE.tools;
  const pill = (t, k) => (
    <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '8px 16px 8px 12px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-xs)', fontSize: 14, color: 'var(--text-body)', fontWeight: 500, whiteSpace: 'nowrap' }}>
      <img src={`https://cdn.simpleicons.org/${t.slug}`} alt="" width="18" height="18" style={{ display: 'block', flex: 'none' }} onError={(e) => { e.currentTarget.style.display = 'none'; }} />
      {t.name}
    </span>
  );
  return (
    <section style={{ padding: '4px 0 clamp(40px, 6vw, 72px)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontSize: 13, letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-subtle)', marginBottom: 22, padding: '0 clamp(20px, 5vw, 56px)' }}>Connects to the tools your work already lives in</div>
        <div className="lg-marquee">
          <div className="lg-track">
            {tools.map((t, i) => pill(t, 'a' + i))}
            <span className="mq-dup" aria-hidden="true" style={{ display: 'contents' }}>
              {tools.map((t, i) => pill(t, 'b' + i))}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.DZ.TrustStrip = TrustStrip;