// hero-section.jsx — Full-bleed photo hero with floating UI cards
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ── Hero Logo (cream version for photo overlay) ────────────────────
function HeroLogo({ size = 28 }) {
  // Brand mark — uses the canonical Echo logo image asset.
  return (
    <img
      src="img/echo-logo.jpeg"
      alt="Echo"
      width={size}
      height={size}
      style={{ display: 'block', borderRadius: 4, objectFit: 'contain' }}
    />
  );
}

// ── Load-board ticker (bottom of hero, horizontal scroll) ──────────
function LoadBoardTicker() {
  const loads = [
    { pro: 'C-8841', origin: 'CHI, IL', dest: 'ATL, GA', cls: 'CL 85',  weight: '4,200 lbs', agent: 'Triage',  action: 'POD posted',        statusColor: '#4ADE80', time: '2m ago' },
    { pro: 'C-8842', origin: 'TOR, ON', dest: 'DET, MI', cls: 'CL 70',  weight: '7,800 lbs', agent: 'Triage',  action: 'quote sent',         statusColor: '#60A5FA', time: '6m ago' },
    { pro: 'C-8843', origin: 'DAL, TX', dest: 'HOU, TX', cls: 'CL 100', weight: '2,100 lbs', agent: 'Triage',  action: 'detention filed',    statusColor: '#FBBF24', time: '11m ago' },
    { pro: 'C-8844', origin: 'LAX, CA', dest: 'SEA, WA', cls: 'CL 85',  weight: '5,500 lbs', agent: 'Docs',    action: 'BOL matched',        statusColor: '#4ADE80', time: '18m ago' },
    { pro: 'C-8845', origin: 'NYC, NY', dest: 'BOS, MA', cls: 'CL 125', weight: '1,600 lbs', agent: 'Dock',    action: 'appt confirmed',     statusColor: '#4ADE80', time: '24m ago' },
    { pro: 'C-8846', origin: 'MIA, FL', dest: 'ATL, GA', cls: 'CL 70',  weight: '9,200 lbs', agent: 'Triage',  action: 'rate dispute reply', statusColor: '#60A5FA', time: '31m ago' },
    { pro: 'C-8847', origin: 'DEN, CO', dest: 'SLC, UT', cls: 'CL 85',  weight: '3,400 lbs', agent: 'Docs',    action: 'POD posted',        statusColor: '#4ADE80', time: '38m ago' },
    { pro: 'C-8848', origin: 'YYZ, ON', dest: 'MTL, QC', cls: 'CL 92.5',weight: '6,100 lbs', agent: 'Dock',    action: 'dock booked',        statusColor: '#4ADE80', time: '45m ago' },
    { pro: 'C-8849', origin: 'SEA, WA', dest: 'PDX, OR', cls: 'CL 70',  weight: '11,400 lbs',agent: 'Triage',  action: 'T&T reply sent',     statusColor: '#60A5FA', time: '52m ago' },
    { pro: 'C-8850', origin: 'MEM, TN', dest: 'NSH, TN', cls: 'CL 100', weight: '2,800 lbs', agent: 'Triage',  action: 'claim draft ready',  statusColor: '#FBBF24', time: '1h ago' },
  ];

  const Row = ({ load }) => (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '0 24px',
      borderRight: '1px solid rgba(96,165,250,0.12)',
      fontFamily: 'var(--ff-mono)', fontSize: 11.5, lineHeight: 1,
      whiteSpace: 'nowrap',
    }}>
      <span style={{ color: '#93C5FD', fontWeight: 700, letterSpacing: '0.06em', fontSize: 11 }}>PRO {load.pro}</span>
      <span style={{ color: 'rgba(244,240,232,0.9)', letterSpacing: '0.01em' }}>{load.origin} → {load.dest}</span>
      <span style={{ color: 'rgba(244,240,232,0.45)', fontSize: 10.5 }}>{load.cls} · {load.weight}</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: load.statusColor, boxShadow: `0 0 5px ${load.statusColor}` }} />
        <span style={{ color: load.statusColor, fontWeight: 600, fontSize: 10.5 }}>{load.agent}</span>
        <span style={{ color: 'rgba(244,240,232,0.65)', fontWeight: 400 }}>→ {load.action}</span>
      </span>
      <span style={{ color: 'rgba(244,240,232,0.32)', fontSize: 10 }}>{load.time}</span>
    </span>
  );

  return (
    <div className="loadboard-ticker" style={{
      position: 'relative', width: '100%',
      background: 'rgba(8, 12, 18, 0.90)',
      border: '1px solid rgba(96,165,250,0.18)',
      borderRadius: 12, overflow: 'hidden',
      boxShadow: '0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(96,165,250,0.06)',
    }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 2,
        display: 'flex', alignItems: 'center', gap: 8, padding: '0 20px',
        background: 'linear-gradient(90deg, rgba(8,12,18,1) 65%, rgba(8,12,18,0) 100%)',
        fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: '#4ADE80',
      }}>
        <span style={{ position: 'relative', display: 'inline-flex', width: 7, height: 7 }}>
          <span style={{ position: 'absolute', inset: -2, borderRadius: '50%', background: 'rgba(74,222,128,0.35)', animation: 'pulse 1.6s ease-in-out infinite' }} />
          <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#4ADE80', boxShadow: '0 0 8px #4ADE80' }} />
        </span>
        Live · LTL
      </div>
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
        background: 'linear-gradient(270deg, rgba(8,12,18,1) 0%, rgba(8,12,18,0) 100%)',
        pointerEvents: 'none',
      }} />
      <div className="loadboard-track" style={{
        display: 'inline-flex', alignItems: 'center',
        padding: '14px 0 14px 150px',
        animation: 'loadBoardScroll 80s linear infinite',
        willChange: 'transform',
      }}>
        {loads.map((l, i) => <Row key={`a-${i}`} load={l} />)}
        {loads.map((l, i) => <Row key={`b-${i}`} load={l} />)}
      </div>
    </div>
  );
}

// ── Floating stats card (bottom-right) ─────────────────────────────
function HeroStatsCard() {
  return (
    <div style={{
      background: 'rgba(244, 240, 232, 0.94)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      border: '1px solid rgba(20, 52, 43, 0.12)',
      borderRadius: 14,
      padding: '18px 22px',
      display: 'flex', gap: 28,
      boxShadow: '0 24px 60px rgba(0,0,0,0.18)',
    }}>
      {[
        { k: 'PODs / day',   v: '4,200', d: 'auto-posted' },
        { k: 'Quote latency', v: '< 4m',  d: 'first response' },
        { k: 'Audit trail',  v: '100%',  d: 'logged' },
      ].map((s, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 2, borderLeft: i > 0 ? '1px solid rgba(20,52,43,0.10)' : 'none', paddingLeft: i > 0 ? 24 : 0 }}>
          <div style={{ fontFamily: 'var(--ff-display)', fontSize: 26, fontWeight: 500, color: 'var(--forest)', letterSpacing: '-0.02em', lineHeight: 1 }}>{s.v}</div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', textTransform: 'uppercase', marginTop: 4 }}>{s.k}</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>{s.d}</div>
        </div>
      ))}
    </div>
  );
}

// ── Floating SMS preview (right side, mid) ─────────────────────────
function HeroSMSPreview() {
  return (
    <div style={{
      background: 'rgba(244, 240, 232, 0.96)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      border: '1px solid rgba(20, 52, 43, 0.10)',
      borderRadius: 14,
      padding: 16,
      width: 280,
      boxShadow: '0 28px 72px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.12)',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 10, borderBottom: '1px solid rgba(20,52,43,0.08)' }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#F4F0E8', fontFamily: 'var(--ff-display)', fontSize: 14, fontWeight: 500 }}>O</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--forest)' }}>Docs</div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>SMS · 11:42 AM</div>
        </div>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#5DA88A' }} />
      </div>
      {/* msg */}
      <div style={{ background: 'var(--surface)', borderRadius: 10, padding: '10px 12px', fontSize: 12, color: 'var(--ink)', lineHeight: 1.5 }}>
        POD ready for <span style={{ fontFamily: 'var(--ff-mono)', color: 'var(--accent)', fontWeight: 600 }}>PRO# 4421</span>.<br />
        Summit Industrial · J. Martinez<br />
        Approve to post to your system?
      </div>
      {/* reply */}
      <div style={{ alignSelf: 'flex-end', background: 'var(--forest)', color: '#F4F0E8', borderRadius: 10, padding: '7px 12px', fontSize: 12, fontWeight: 500 }}>Approved</div>
      {/* result */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', background: 'rgba(93, 168, 138, 0.12)', border: '1px solid rgba(93, 168, 138, 0.3)', borderRadius: 8 }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#3A8068" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
        <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: '#1F5444', letterSpacing: '0.04em' }}>Posted to your system · PRO# 4421</span>
      </div>
    </div>
  );
}

// ── Main hero ──────────────────────────────────────────────────────
function Hero({ heroImage = 'hero-truck-corridor' }) {
  // (Scroll-coupled parallax state removed — value was unused but the listener
  // was firing setState on every scroll frame, re-rendering the hero subtree
  // and causing lag.)

  return (
    <section style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden' }}>

      {/* Text-legibility scrim — dark gradient behind left text area only, fades right */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1,
        background: 'linear-gradient(90deg, rgba(5,11,9,0.60) 0%, rgba(5,11,9,0.40) 25%, rgba(5,11,9,0.15) 50%, rgba(5,11,9,0) 70%)',
      }} />

      {/* Speed lines — three thin animated streaks suggesting motion */}
      <div className="hero-speed" aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <span className="streak streak-1" />
        <span className="streak streak-2" />
        <span className="streak streak-3" />
      </div>
      {/* ── Content ─────────────────────────── */}
      <div className="hero-content" style={{
        position: 'relative', zIndex: 2,
        minHeight: '100svh',
        maxWidth: 1280, margin: '0 auto',
        padding: '0 48px',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'flex-start',
        color: '#F4F0E8',
      }}>

        {/* Zone 1: Headline + subtext + CTA + trust bar — upper portion */}
        <div className="hero-inner" style={{ paddingTop: 'clamp(72px, 15vh, 180px)' }}>
          <div className="hero-grid" style={{ display: 'block' }}>
          <h1 style={{
            fontFamily: 'var(--ff-display)',
            fontSize: 'clamp(44px, 6vw, 88px)',
            fontWeight: 300,
            letterSpacing: '-0.04em',
            lineHeight: 1.0,
            color: '#F4F0E8',
            marginBottom: 28,
            textShadow: '0 2px 30px rgba(0,0,0,0.35)',
            maxWidth: '14ch',
          }}>
            <span style={{ animation: 'heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.18s both', display: 'block' }}>
              Meet{' '}
              <span style={{ color: '#93C5FD', textShadow: '0 2px 24px rgba(37,99,235,0.55), 0 2px 30px rgba(0,0,0,0.5)' }}>
                Echo,
              </span>
              {' '}your AI
            </span>
            <span style={{ animation: 'heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.26s both', display: 'block' }}>
              Workforce for{' '}
              <span style={{ color: '#93C5FD', textShadow: '0 2px 24px rgba(37,99,235,0.55), 0 2px 30px rgba(0,0,0,0.5)' }}>
                Carriers.
              </span>
            </span>
          </h1>

          <p style={{
            animation: 'heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.5s both',
            fontSize: 18,
            lineHeight: 1.6,
            color: 'rgba(244,240,232,0.95)',
            maxWidth: 540,
            marginBottom: 0,
            fontWeight: 400,
            textShadow: '0 1px 16px rgba(0,0,0,0.85), 0 2px 40px rgba(0,0,0,0.6)',
          }}>
            Four agents that handle PODs, quotes, dock bookings, and detention claims. 24/7, inside the tools your team already uses.
          </p>
          </div>

          {/* CTA row */}
          <div style={{ animation: 'heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.62s both', marginTop: 40, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <a href="#book" data-open-book-call className="echo-cta echo-cta--primary" style={{ fontSize: 16, padding: '15px 28px', flexShrink: 0 }}>
              See Echo run
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <a href="#agents" className="echo-cta echo-cta--ghost" style={{ fontSize: 16, padding: '15px 28px' }}>
              View agents
            </a>
          </div>
        </div>

        {/* flex spacer — pushes trust bar to vertical center */}
          {/* Trust bar — directly under buttons */}
          <div style={{ animation: 'heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.72s both', marginTop: 36, display: 'flex' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap', background: 'rgba(8,12,18,0.90)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', borderRadius: 12, padding: '8px 16px', border: '1px solid rgba(96,165,250,0.18)' }}>
              <span className="trust-built-on-label" style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(244,240,232,0.65)', fontWeight: 500, textTransform: 'uppercase', minWidth: 64 }}>Built on</span>

              {/* Microsoft — hidden on mobile */}
              <div className="trust-logo-mobile-hide" style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="15" height="15" viewBox="0 0 23 23" aria-hidden="true">
                  <rect width="10" height="10" fill="#F25022"/>
                  <rect x="12" width="10" height="10" fill="#7FBA00"/>
                  <rect y="12" width="10" height="10" fill="#00A4EF"/>
                  <rect x="12" y="12" width="10" height="10" fill="#FFB900"/>
                </svg>
                <span style={{ fontFamily: "'Segoe UI', 'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400, letterSpacing: '-0.005em' }}>Microsoft</span>
              </div>

              {/* Teams — hidden on mobile */}
              <div className="trust-logo-mobile-hide" style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="16" height="16" viewBox="0 0 32 32" aria-hidden="true">
                  <rect x="3" y="6" width="20" height="20" rx="2.5" fill="#5059C9"/>
                  <text x="13" y="21" fill="#fff" fontFamily="'Segoe UI', Arial, sans-serif" fontSize="15" fontWeight="700" textAnchor="middle">T</text>
                  <circle cx="25" cy="11" r="4.5" fill="#7B83EB"/>
                  <text x="25" y="14.5" fill="#fff" fontFamily="'Segoe UI', Arial, sans-serif" fontSize="6" fontWeight="700" textAnchor="middle">M</text>
                </svg>
                <span style={{ fontFamily: "'Segoe UI', 'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400, letterSpacing: '-0.005em' }}>Teams</span>
              </div>

              {/* TruckMate / Trimble — visible on mobile */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <img src="img/trimble.svg" alt="Trimble TruckMate" style={{ height: 14, width: 'auto', filter: 'brightness(0) invert(1)' }} />
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#F4F0E8', fontWeight: 400 }}>TruckMate</span>
              </div>

              {/* McLeod — hidden on mobile */}
              <div className="trust-logo-secondary" style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                  <rect width="24" height="24" rx="4" fill="#1B3A6E"/>
                  <text x="12" y="17" fill="#F4F0E8" fontFamily="'Helvetica Neue', Arial, sans-serif" fontSize="14" fontWeight="700" textAnchor="middle" letterSpacing="-0.5">M</text>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#F4F0E8', fontWeight: 400 }}>McLeod</span>
              </div>

              {/* OpenDock — hidden on mobile */}
              <div className="trust-logo-secondary" style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                  <rect width="24" height="24" rx="4" fill="#0EA5E9"/>
                  <rect x="5" y="7" width="11" height="9" rx="1" fill="none" stroke="#F4F0E8" strokeWidth="1.6"/>
                  <line x1="5" y1="17.5" x2="19" y2="17.5" stroke="#F4F0E8" strokeWidth="1.6" strokeLinecap="round"/>
                  <line x1="16" y1="11" x2="19" y2="11" stroke="#F4F0E8" strokeWidth="1.6" strokeLinecap="round"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#F4F0E8', fontWeight: 400 }}>OpenDock</span>
              </div>

              {/* +100 more apps chip */}
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" style={{ flexShrink: 0 }}>
                  <rect x="3" y="3" width="11" height="11" rx="2.5" fill="rgba(244,240,232,0.18)" stroke="rgba(244,240,232,0.32)" strokeWidth="1"/>
                  <rect x="7.5" y="7.5" width="11" height="11" rx="2.5" fill="#60A5FA" stroke="#60A5FA" strokeWidth="1"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#93C5FD', fontWeight: 600 }}>+100</span>
                <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(244,240,232,0.75)', fontWeight: 500, textTransform: 'uppercase' }}>more apps</span>
              </span>

              {/* SOC 2 chip */}
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'rgba(244,240,232,0.85)', fontWeight: 500, padding: '5px 10px', border: '1px solid rgba(244,240,232,0.30)', borderRadius: 4 }}>SOC 2</span>
            </div>
          </div>


      </div>

      <style>{`
        @keyframes floatY {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
        @keyframes heroBreathe {
          0%, 100% { filter: brightness(1) saturate(1); }
          50%      { filter: brightness(1.08) saturate(1.1); }
        }
        .hero-bg { animation: heroBreathe 14s ease-in-out infinite; }

        @keyframes beamSweep {
          0%   { transform: translateX(-30%); opacity: 0; }
          15%  { opacity: 0.9; }
          50%  { opacity: 1; }
          85%  { opacity: 0.6; }
          100% { transform: translateX(30%); opacity: 0; }
        }
        .hero-beam { animation: beamSweep 9s ease-in-out infinite; }

        @keyframes hazeDrift {
          0%, 100% { transform: translate3d(0,0,0); }
          50%      { transform: translate3d(2%, -1%, 0); }
        }
        .hero-haze { animation: hazeDrift 18s ease-in-out infinite; }

        @keyframes streakRun {
          0%   { transform: translateX(-110%) skewX(-12deg); opacity: 0; }
          12%  { opacity: 0.45; }
          80%  { opacity: 0.45; }
          100% { transform: translateX(110vw) skewX(-12deg); opacity: 0; }
        }
        .streak {
          position: absolute;
          height: 2px;
          width: 220px;
          background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,0.45) 35%, rgba(255,255,255,0.85) 60%, rgba(96,165,250,0.35) 80%, transparent 100%);
          filter: blur(1.4px);
          will-change: transform, opacity;
          mix-blend-mode: screen;
        }
        .streak-1 { top: 28%; left: 0; animation: streakRun 5.4s linear infinite; animation-delay: 0.2s; opacity: 0; }
        .streak-2 { top: 52%; left: 0; animation: streakRun 7.2s linear infinite; animation-delay: 2.4s; width: 320px; height: 1.5px; opacity: 0; }
        .streak-3 { top: 71%; left: 0; animation: streakRun 4.6s linear infinite; animation-delay: 4.1s; width: 180px; opacity: 0; }

        @keyframes loadBoardScroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .loadboard-ticker:hover .loadboard-track { animation-play-state: paused; }
        /* Mobile: trim left padding so rows aren't shoved off-screen
           by the LIVE FREIGHT cap label */
        @media (max-width: 640px) {
          .loadboard-track { padding: 12px 0 12px 110px !important; }
        }

        @media (prefers-reduced-motion: reduce) {
          .hero-bg, .hero-beam, .hero-haze, .streak { animation: none !important; }
          .loadboard-track { animation: none !important; }
        }
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-card-col { display: none !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, HeroLogo });