/* ============================================================
   Tectus — hero (split) + operations mockup + trust strip
   ============================================================ */
const { Button: HButton, Badge: HBadge, Card: HCard, Eyebrow: HEyebrow } = window.TectusDesignSystem_c42b34;

const HERO_BULLETS = [
  { icon: 'zap', t: 'Faster request coordination', d: 'Set coverage by time, location & requirement.' },
  { icon: 'eye', t: 'Visibility across service status', d: 'Track every request from match to completion.' },
  { icon: 'badge-check', t: 'Licensed, vetted vendors', d: 'Verified credentials and insurance, always.' },
];

function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* ambient glow */}
      <div aria-hidden="true" style={{ position: 'absolute', top: -160, right: -120, width: 620, height: 620, background: 'radial-gradient(circle, rgba(212,175,55,0.10), transparent 62%)', pointerEvents: 'none' }} />
      <div className="wrap tt-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.04fr 0.96fr', gap: 60, alignItems: 'center', padding: '76px 40px 84px', position: 'relative' }}>
        <Reveal>
          {/* pill badge */}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 16px', borderRadius: 999, border: '1px solid rgba(212,175,55,0.55)', background: 'rgba(212,175,55,0.07)', fontSize: 13.5, fontWeight: 500, color: 'var(--color-text-muted)', marginBottom: 28, boxShadow: '0 0 12px rgba(212,175,55,0.18)' }}>
            <span style={{ color: 'var(--color-primary)', fontWeight: 600 }}>Easier</span>
            <span style={{ color: 'var(--color-text-faint)' }}>•</span>
            <span style={{ color: 'var(--color-primary)', fontWeight: 600 }}>Faster</span>
            <span style={{ color: 'var(--color-text-faint)' }}>•</span>
            <span style={{ color: 'var(--color-primary)', fontWeight: 600 }}>Customer-first</span>
          </div>

          {/* headline */}
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(48px, 6.5vw, 88px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '0 0 28px', textWrap: 'balance' }}>
            Security. Simplified.<br />
            <span style={{ background: 'linear-gradient(90deg, #D4AF37 0%, #F5E27A 40%, #C29D2A 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Connected.</span>
          </h1>

          <p style={{ fontSize: 19, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 540, margin: '0 0 32px', textWrap: 'pretty' }}>
            Request, manage, and coordinate licensed security coverage in one place — through a structured digital workflow built for speed, visibility, and trust.
          </p>

          <div style={{ display: 'flex', gap: 12, marginBottom: 26, flexWrap: 'wrap' }}>
            <a href="#/demo"><HButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>Book a Demo</HButton></a>
            <a href="#/get-quote"><HButton variant="secondary" size="lg">Get Quote</HButton></a>
          </div>

        </Reveal>

        <Reveal delay={120}>
          <HeroMock />
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Operations dashboard mock ---------- */
const QUEUE = [
  { id: 'RQ-2048', loc: 'Pier 27 Gala · SF', svc: 'Event security', meta: '19:30–01:00 · 6 personnel', status: 'On site', tone: 'success' },
  { id: 'RQ-2049', loc: 'Mason St HQ · SF', svc: 'Executive protection', meta: 'Armed · 2 agents', status: 'Assigned', tone: 'gold' },
  { id: 'RQ-2050', loc: 'Bayfront Depot', svc: 'Mobile patrol', meta: 'Tonight · 4 checkpoints', status: 'Matching', tone: 'warning' },
];
const TONES = {
  success: { c: 'var(--color-success-fg)', bg: 'var(--color-success-soft)', dot: 'var(--color-success)' },
  gold: { c: 'var(--color-primary-light)', bg: 'var(--color-primary-soft)', dot: 'var(--color-primary)' },
  warning: { c: 'var(--color-warning-fg)', bg: 'var(--color-warning-soft)', dot: 'var(--color-warning)' },
};

function useMockTheme() {
  const [dark, setDark] = useState(() => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light');
  useEffect(function() {
    function onTheme(e) { setDark(e.detail !== 'light'); }
    window.addEventListener('tectus-theme', onTheme);
    return function() { window.removeEventListener('tectus-theme', onTheme); };
  }, []);
  return dark;
}

function ClientPhone({ dark }) {
  const [booked, setBooked] = useState(false);
  const bg = dark ? '#0f0f11' : '#ffffff';
  const card = dark ? '#18181b' : '#f4f4f5';
  const inner = dark ? '#0f0f11' : '#e4e4e7';
  const text = dark ? '#ffffff' : '#0B0B0D';
  const muted = dark ? 'rgba(255,255,255,0.42)' : 'rgba(0,0,0,0.42)';
  const border = dark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)';
  const logoSrc = dark ? 'assets/tectus-logo-white.webp' : 'assets/tectus-logo-black.webp';
  const logoKey = dark ? 'logoWhite' : 'logoBlack';

  return (
    <div style={{ width: 200, background: bg, border: `1px solid ${border}`, borderRadius: 28, padding: 9, boxShadow: dark ? '0 40px 80px rgba(0,0,0,0.7)' : '0 40px 80px rgba(0,0,0,0.18)', flexShrink: 0, position: 'relative', zIndex: 2 }}>
      <div style={{ background: card, borderRadius: 20, overflow: 'hidden' }}>
        {/* status bar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 14px 6px', fontSize: 10, color: muted }}>
          <span style={{ fontWeight: 600, color: text }}>9:41</span>
          <div style={{ display: 'flex', gap: 4 }}>
            <Icon name="wifi" size={10} color={muted} />
            <Icon name="battery" size={10} color={muted} />
          </div>
        </div>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', padding: '6px 14px 10px' }}>
          <img src={asset(logoKey, logoSrc)} alt="Tectus" style={{ height: 13, width: 'auto' }} />
        </div>
        {/* booking card */}
        <div style={{ margin: '0 9px 9px', background: inner, borderRadius: 14, padding: '13px 12px' }}>
          <div style={{ fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: muted, fontWeight: 700, marginBottom: 8 }}>New Request</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: text, marginBottom: 3 }}>Event Security</div>
          <div style={{ fontSize: 10.5, color: muted, marginBottom: 1 }}>Pier 27 Gala · SF</div>
          <div style={{ fontSize: 10.5, color: muted, marginBottom: 13 }}>19:30 – 01:00 · 6 personnel</div>
          <button
            onClick={() => setBooked(b => !b)}
            style={{ width: '100%', padding: '9px 0', borderRadius: 10, border: 'none', cursor: 'pointer', fontWeight: 700, fontSize: 12, transition: 'all 0.18s', background: booked ? 'rgba(34,197,94,0.16)' : 'linear-gradient(135deg,#D4AF37,#F5E27A 50%,#C29D2A)', color: booked ? '#22c55e' : '#0B0B0D', outline: 'none' }}
            onMouseEnter={e => { if (!booked) e.currentTarget.style.filter = 'brightness(1.08)'; }}
            onMouseLeave={e => { e.currentTarget.style.filter = ''; }}
          >{booked ? '✓ Booked' : 'Book Now'}</button>
        </div>
        {/* jobs */}
        <div style={{ padding: '0 9px 10px', display: 'flex', flexDirection: 'column', gap: 5 }}>
          {[{ loc: 'Mason St HQ', s: 'Assigned', c: '#D4AF37' }, { loc: 'Bayfront Depot', s: 'Matching', c: '#f59e0b' }].map(r => (
            <div key={r.loc} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: inner, borderRadius: 9, padding: '8px 10px' }}>
              <span style={{ fontSize: 10.5, fontWeight: 600, color: text }}>{r.loc}</span>
              <span style={{ fontSize: 9.5, fontWeight: 600, color: r.c, background: r.c + '22', padding: '2px 7px', borderRadius: 999 }}>{r.s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function GoWebCard({ dark }) {
  const [accepted, setAccepted] = useState(false);
  const bg = dark ? '#0f0f11' : '#ffffff';
  const bar = dark ? '#18181b' : '#f4f4f5';
  const card = dark ? '#18181b' : '#f4f4f5';
  const text = dark ? '#ffffff' : '#0B0B0D';
  const muted = dark ? 'rgba(255,255,255,0.42)' : 'rgba(0,0,0,0.42)';
  const border = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
  const urlBar = dark ? '#0f0f11' : '#e4e4e7';
  const urlText = dark ? 'rgba(255,255,255,0.28)' : 'rgba(0,0,0,0.35)';
  const goLogoSrc = dark ? 'assets/tectus-go-logo-white-v2.png' : 'assets/tectus-go-logo-black-v2.png';
  const goLogoKey = dark ? 'goLogoWhiteV2' : 'goLogoBlackV2';

  return (
    <div style={{ position: 'absolute', top: 0, right: 0, width: '88%', background: bg, border: `1px solid ${border}`, borderRadius: 18, overflow: 'hidden', boxShadow: dark ? '0 24px 60px rgba(0,0,0,0.55)' : '0 24px 60px rgba(0,0,0,0.12)', zIndex: 1 }}>
      {/* browser chrome */}
      <div style={{ background: bar, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: `1px solid ${border}` }}>
        <div style={{ display: 'flex', gap: 5 }}>
          {['#ef4444','#f59e0b','#22c55e'].map(c => <span key={c} style={{ width: 7, height: 7, borderRadius: '50%', background: c, opacity: 0.75 }} />)}
        </div>
        <div style={{ flex: 1, background: urlBar, borderRadius: 6, padding: '4px 10px', fontSize: 10, color: urlText, fontFamily: 'var(--font-mono)' }}>go.tectusapp.com</div>
      </div>
      {/* go app header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '14px 18px 10px' }}>
        <img src={asset(goLogoKey, goLogoSrc)} alt="Tectus GO" style={{ height: 28, width: 'auto' }} />
        <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10.5, color: '#22c55e', fontFamily: 'var(--font-mono)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22c55e' }} />On shift
        </span>
      </div>
      {/* incoming job card */}
      <div style={{ margin: '0 14px 12px', background: card, border: '1px solid rgba(212,175,55,0.28)', borderRadius: 13, padding: '14px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: '#D4AF37' }}>Incoming Job</span>
          <span style={{ fontSize: 10, color: muted, fontFamily: 'var(--font-mono)' }}>RQ-2048</span>
        </div>
        <div style={{ fontSize: 14, fontWeight: 700, color: text, marginBottom: 3 }}>Event Security</div>
        <div style={{ fontSize: 12, color: muted, marginBottom: 1 }}>Pier 27 Gala · SF</div>
        <div style={{ fontSize: 12, color: muted, marginBottom: 14 }}>19:30 – 01:00 · 6 personnel</div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button style={{ padding: '10px 18px', borderRadius: 9, border: `1px solid ${border}`, cursor: 'pointer', fontWeight: 700, fontSize: 12, background: 'transparent', color: muted, outline: 'none' }}>Decline</button>
          <button
            onClick={() => setAccepted(a => !a)}
            style={{ padding: '10px 20px', borderRadius: 9, border: 'none', cursor: 'pointer', fontWeight: 700, fontSize: 12, transition: 'all 0.18s', background: accepted ? 'rgba(34,197,94,0.16)' : '#22c55e', color: accepted ? '#22c55e' : '#0B0B0D', outline: 'none' }}
            onMouseEnter={e => { e.currentTarget.style.opacity = '0.87'; }}
            onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
          >{accepted ? '✓ Accepted' : 'Accept Client'}</button>
        </div>
      </div>
      {/* active row */}
      <div style={{ margin: '0 14px 16px', background: card, borderRadius: 11, padding: '11px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: text }}>Mason St HQ · SF</div>
          <div style={{ fontSize: 10.5, color: muted, marginTop: 2 }}>2 agents · armed</div>
        </div>
        <span style={{ fontSize: 10.5, fontWeight: 600, color: '#D4AF37', background: 'rgba(212,175,55,0.14)', padding: '3px 10px', borderRadius: 999 }}>Active</span>
      </div>
    </div>
  );
}

function HeroMock() {
  const dark = useMockTheme();
  return (
    <div style={{ position: 'relative', height: 420 }}>
      <GoWebCard dark={dark} />
      <div style={{ position: 'absolute', bottom: -20, left: -16 }}>
        <ClientPhone dark={dark} />
      </div>
    </div>
  );
}

/* ---------- Trust / proof strip ---------- */
const STATS = [
  { end: 70, sup: '+', label: 'Estimated Vetted Vendors' },
  { end: 40000, sup: '+', label: 'Estimated Security Professionals' },
  { end: 50, sup: '', label: 'Approximate States Covered' },
];

function useCountUp(end, duration, triggered) {
  const [val, setVal] = useState(0);
  useEffect(function() {
    if (!triggered) return;
    let start = null;
    const step = function(ts) {
      if (!start) start = ts;
      const progress = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setVal(Math.floor(eased * end));
      if (progress < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [triggered]);
  return val;
}

function StatNumber({ end, sup, duration }) {
  const [triggered, setTriggered] = useState(false);
  const ref = useRef(null);
  useEffect(function() {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(function(entries) {
      if (entries[0].isIntersecting) { setTriggered(true); obs.disconnect(); }
    }, { threshold: 0.4 });
    obs.observe(el);
    return function() { obs.disconnect(); };
  }, []);
  const val = useCountUp(end, duration || 1800, triggered);
  const formatted = val.toLocaleString();
  return (
    <span ref={ref} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(42px, 6vw, 76px)', lineHeight: 1, color: 'var(--color-text)', letterSpacing: '-0.03em', display: 'inline-flex', alignItems: 'flex-start', gap: 2 }}>
      {formatted}<span style={{ fontSize: '0.45em', marginTop: '0.12em', fontWeight: 800 }}>{sup}</span>
    </span>
  );
}

function TrustStrip() {
  return (
    <section style={{ borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)', background: 'var(--color-bg)' }}>
      <div className="wrap" style={{ padding: '72px 40px 64px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 54px)', lineHeight: 1.1, letterSpacing: '-0.035em', margin: '0 auto 56px', maxWidth: 760, textWrap: 'balance', color: 'var(--color-text)' }}>
          Physical Security, Delivered Faster.<br />When It Matters Most.
        </h2>
        <div className="tt-trust-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
          {STATS.map((s, i) => (
            <div key={s.label} className="tt-trust-stat" style={{ padding: '0 32px', borderLeft: i ? '1px solid var(--color-divider)' : 'none', textAlign: 'center' }}>
              <StatNumber end={s.end} sup={s.sup} duration={1800} />
              <div style={{ fontSize: 14, color: 'var(--color-text-faint)', marginTop: 10, lineHeight: 1.4, letterSpacing: '0.01em' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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