// 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' }}
    />
  );
}

// ── Floating live ticker (bottom-left of hero) ─────────────────────
function LiveTicker() {
  const rows = [
    { id: 'VND-0441', entity: 'Kelsey Materials',   module: 'AP · NetSuite',       agent: 'Docs',   action: 'vendor onboarded · W9 posted',    statusColor: '#4ADE80', time: '2m ago' },
    { id: 'INV-8812', entity: 'Apex Interiors',     module: 'AR · Fusion Cloud',   agent: 'Ledger', action: 'cash applied $24,800',             statusColor: '#93C5FD', time: '7m ago' },
    { id: 'TKT-0229', entity: 'support@apex.com',   module: 'Billing · Teams',     agent: 'Triage', action: 'dispute routed to AR team',        statusColor: '#93C5FD', time: '13m ago' },
    { id: 'AUD-CC6',  entity: 'SOC 2 Type II',      module: 'GRC · Oracle',        agent: 'Audit',  action: 'evidence pulled for CC6.1',        statusColor: '#FBBF24', time: '19m ago' },
    { id: 'VND-0442', entity: 'Summit Packaging',   module: 'AP · NetSuite',       agent: 'Docs',   action: 'PO matched · 3-way complete',      statusColor: '#4ADE80', time: '26m ago' },
    { id: 'INV-8813', entity: 'Meridian Group',     module: 'AR · Fusion Cloud',   agent: 'Ledger', action: 'remittance matched INV-8813',       statusColor: '#93C5FD', time: '33m ago' },
    { id: 'GL-0519',  entity: 'May close',          module: 'GL · Fusion Cloud',   agent: 'Ledger', action: 'month-end reconciled',             statusColor: '#4ADE80', time: '41m ago' },
    { id: 'TKT-0230', entity: 'support@summit.co',  module: 'Finance ops · Slack', agent: 'Triage', action: 'missing invoice request replied',  statusColor: '#93C5FD', time: '48m ago' },
  ];

  const Row = ({ row }) => (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '0 24px',
      borderRight: '1px solid rgba(147,197,253,0.12)',
      fontFamily: 'var(--ff-mono)', fontSize: 11.5, lineHeight: 1,
      whiteSpace: 'nowrap',
    }}>
      <span style={{ color: '#93C5FD', fontWeight: 700, letterSpacing: '0.06em', fontSize: 11 }}>{row.id}</span>
      <span style={{ color: 'rgba(244,240,232,0.88)', letterSpacing: '0.01em' }}>{row.entity}</span>
      <span style={{ color: 'rgba(244,240,232,0.48)', fontSize: 10.5 }}>{row.module}</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(8, 10, 18, 0.90)',
      border: '1px solid rgba(147,197,253,0.18)',
      borderRadius: 12, overflow: 'hidden',
      boxShadow: '0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(147,197,253,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,10,18,1) 65%, rgba(8,10,18,0) 100%)',
        fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: '#93C5FD',
      }}>
        <span style={{ position: 'relative', display: 'inline-flex', width: 7, height: 7 }}>
          <span style={{ position: 'absolute', inset: -2, borderRadius: '50%', background: 'rgba(147,197,253,0.35)', animation: 'pulse 1.6s ease-in-out infinite' }} />
          <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: '#93C5FD', boxShadow: '0 0 8px #93C5FD' }} />
        </span>
        Live · ERP
      </div>
      <div style={{
        position: 'absolute', right: 0, top: 0, bottom: 0, width: 80, zIndex: 2,
        background: 'linear-gradient(270deg, rgba(8,10,18,1) 0%, rgba(8,10,18,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>
  );
}

// ── 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: 'Vendors onboarded / day', v: '100%', d: 'same day' },
        { k: 'Month-end close',         v: '2 days', d: 'down from 7' },
        { 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' }}>Teams · 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 }}>
        New vendor packet: <span style={{ fontFamily: 'var(--ff-mono)', color: 'var(--accent)', fontWeight: 600 }}>Apex Supply Co.</span><br />
        W-9 + banking extracted.<br />
        Post to Oracle Fusion?
      </div>
      {/* reply */}
      <div style={{ alignSelf: 'flex-end', background: 'var(--forest)', color: '#F4F0E8', borderRadius: 10, padding: '7px 12px', fontSize: 12, fontWeight: 500 }}>Approved</div>
      {/* result + read-back validation */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <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 Oracle Fusion · Apex Supply Co.</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#3A8068' }} />
          <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Read-back validated · Supplier ID 4421</span>
        </div>
      </div>
    </div>
  );
}

// ── Main hero ──────────────────────────────────────────────────────
function Hero({ heroImage = 'hero-bg' }) {
  // (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 */}
      <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 */}
        <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)' }}>
                Oracle.
              </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 vendor onboarding, AR cash app, audit evidence, and finance support. They live inside Teams, Slack, and email.
          </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 */}
            <div 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>

            {/* Microsoft Teams */}
            <div 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, letterSpacing: '-0.005em' }}>Teams</span>
            </div>

            {/* Oracle NetSuite */}
            <div className="trust-logo-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
                <rect x="2" y="2" width="20" height="20" rx="3.5" fill="#C74634"/>
                <path d="M7.6 17.2V6.8h2.1l4.6 6.9V6.8h2.1v10.4h-2.1l-4.6-6.9v6.9z" fill="#fff"/>
              </svg>
              <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400, letterSpacing: '-0.005em' }}>NetSuite</span>
            </div>

            {/* Oracle Fusion Cloud — hidden on mobile */}
            <div className="trust-logo-secondary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="16" height="16" viewBox="0 0 32 32" aria-hidden="true">
                <rect width="32" height="32" rx="6" fill="#C74634"/>
                <path d="M9 8h14M9 16h10M9 24h7" stroke="#fff" strokeWidth="3" strokeLinecap="round"/>
              </svg>
              <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13.5, color: '#F4F0E8', fontWeight: 400, letterSpacing: '-0.005em' }}>Fusion Cloud</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="#93C5FD" stroke="#93C5FD" strokeWidth="1"/>
                </svg>
                <span style={{ fontFamily: "'Helvetica Neue', sans-serif", fontSize: 13, color: '#93C5FD', 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 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; }

        @media (prefers-reduced-motion: reduce) {
          .hero-bg, .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 });