// hero-section.jsx — Freight Brokers & 3PLs hero
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function HeroLogo({ size = 28 }) {
  return (
    <img
      src="img/echo-logo.jpeg"
      alt="Echo"
      width={size}
      height={size}
      style={{ display: 'block', borderRadius: 4, objectFit: 'contain' }}
    />
  );
}

// ── Floating live ticker (bottom-left of hero) ─────────────────────
function LiveTicker() {
  const rows = [
    { id: 'SHP-2291', shipper: 'Apex Logistics',   lane: 'CHI → ATL',  mode: 'FTL · 26ft',  agent: 'Quote',   action: 'rate returned $1,840',   statusColor: '#FBBF24', time: '1m ago' },
    { id: 'SHP-2292', shipper: 'Meridian Supply',  lane: 'DAL → HOU',  mode: 'LTL · CL 85', agent: 'Triage',  action: 'carrier email replied',   statusColor: '#FBBF24', time: '4m ago' },
    { id: 'INV-7741', shipper: 'RapidFreight Inc', lane: 'invoice',     mode: 'UPS overcharge',agent: 'Recover',action: 'overcharge flagged $312', statusColor: '#F87171', time: '9m ago' },
    { id: 'SHP-2293', shipper: 'Summit Industrial',lane: 'TOR → DET',  mode: 'FTL · 48ft',  agent: 'Triage',  action: 'T&T update sent',         statusColor: '#FBBF24', time: '15m ago' },
    { id: 'ONB-0088', shipper: 'Nexus Freight',    lane: 'onboarding',  mode: 'new shipper',  agent: 'Docs',    action: 'W9 + setup complete',     statusColor: '#4ADE80', time: '22m ago' },
    { id: 'SHP-2294', shipper: 'BlueRidge Dist.',  lane: 'NYC → BOS',  mode: 'LTL · CL 100',agent: 'Quote',   action: 'spot quote delivered',    statusColor: '#FBBF24', time: '28m ago' },
    { id: 'INV-7742', shipper: 'CoreLogix',        lane: 'invoice',     mode: 'FedEx dup charge',agent:'Recover',action:'$640 recovered this week',statusColor: '#4ADE80', time: '35m ago' },
    { id: 'SHP-2295', shipper: 'Titan Wholesale',  lane: 'LAX → PHX',  mode: 'FTL · 53ft',  agent: 'Triage',  action: 'claim draft ready',       statusColor: '#F87171', time: '41m ago' },
  ];

  const Row = ({ row }) => (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '0 24px',
      borderRight: '1px solid rgba(245,158,11,0.12)',
      fontFamily: 'var(--ff-mono)', fontSize: 11.5, lineHeight: 1,
      whiteSpace: 'nowrap',
    }}>
      <span style={{ color: '#FCD34D', fontWeight: 700, letterSpacing: '0.06em', fontSize: 11 }}>{row.id}</span>
      <span style={{ color: 'rgba(244,240,232,0.88)', letterSpacing: '0.01em' }}>{row.shipper}</span>
      <span style={{ color: 'rgba(244,240,232,0.5)', fontSize: 10.5 }}>{row.lane} · {row.mode}</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: row.statusColor, boxShadow: `0 0 5px ${row.statusColor}` }} />
        <span style={{ color: row.statusColor, fontWeight: 600, fontSize: 10.5 }}>{row.agent}</span>
        <span style={{ color: 'rgba(244,240,232,0.65)' }}>→ {row.action}</span>
      </span>
      <span style={{ color: 'rgba(244,240,232,0.3)', fontSize: 10 }}>{row.time}</span>
    </span>
  );

  return (
    <div className="loadboard-ticker" style={{
      position: 'relative', width: '100%',
      background: 'rgba(18, 12, 4, 0.90)',
      border: '1px solid rgba(245,158,11,0.20)',
      borderRadius: 12, overflow: 'hidden',
      boxShadow: '0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(245,158,11,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(18,12,4,1) 65%, rgba(18,12,4,0) 100%)',
        fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: '#FBBF24',
      }}>
        <span style={{ position: 'relative', display: 'inline-flex', width: 7, height: 7 }}>
          <span style={{ position: 'absolute', inset: -2, borderRadius: '50%', background: 'rgba(251,191,36,0.35)', animation: 'pulse 1.6s ease-in-out infinite' }} />
          <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#FBBF24', boxShadow: '0 0 8px #FBBF24' }} />
        </span>
        Live · Freight
      </div>
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
        background: 'linear-gradient(270deg, rgba(18,12,4,1) 0%, rgba(18,12,4,0) 100%)',
        pointerEvents: 'none',
      }} />
      <div className="loadboard-track" style={{
        display: 'inline-flex', alignItems: 'center',
        padding: '14px 0 14px 155px',
        animation: 'loadBoardScroll 80s linear infinite',
        willChange: 'transform',
      }}>
        {rows.map((r, i) => <Row key={`a-${i}`} row={r} />)}
        {rows.map((r, i) => <Row key={`b-${i}`} row={r} />)}
      </div>
    </div>
  );
}

// ── Main hero ──────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden' }}>
      {/* Text-legibility scrim */}
      <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 */}
      <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 */}
        <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: '#FBBF24', textShadow: '0 2px 24px rgba(245,158,11,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: '#FBBF24', textShadow: '0 2px 24px rgba(245,158,11,0.55), 0 2px 30px rgba(0,0,0,0.5)' }}>Freight.</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 carrier invoice audits, customer emails, rate quotes, and shipper onboarding inside Teams, Outlook, and your TMS.
            </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 */}
          {/* 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' }}>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 }}>Microsoft</span>
              </div>

              {/* Teams — hidden on mobile */}
              <div className="trust-logo-mobile-hide" style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true">
                  <rect width="24" height="24" rx="4" fill="#5059C9"/>
                  <path d="M7 8h10M12 8v9" stroke="#fff" strokeWidth="2.4" strokeLinecap="round"/>
                </svg>
                <span style={{ fontFamily: "'Segoe UI', 'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400 }}>Teams</span>
              </div>

              {/* TruckMate — visible on mobile */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <rect width="24" height="24" rx="4" fill="#1A3A5C"/>
                  <path d="M4 16 L4 8 L14 8 L14 12 L20 12 L20 16 Z" fill="#fff" opacity="0.9"/>
                  <circle cx="7" cy="17" r="2" fill="#fff"/>
                  <circle cx="17" cy="17" r="2" fill="#fff"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13.5, 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="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <rect width="24" height="24" rx="4" fill="#0057B8"/>
                  <path d="M6 17 V8 L12 14 L18 8 V17" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400 }}>McLeod</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="#FBBF24" stroke="#FBBF24" strokeWidth="1"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#FCD34D', fontWeight: 600, letterSpacing: '-0.005em' }}>+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 loadBoardScroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .loadboard-ticker:hover .loadboard-track { animation-play-state: paused; }
        @keyframes heroBreathe {
          0%, 100% { filter: brightness(1) saturate(1); }
          50%      { filter: brightness(1.08) saturate(1.1); }
        }
        @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(245,158,11,0.45) 35%, rgba(255,255,255,0.85) 60%, rgba(245,158,11,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; }
        @media (prefers-reduced-motion: reduce) {
          .hero-beam, .hero-haze, .streak { 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 });