/* ==========================================================================
   Home page — hero, stats strip, who-we-are, features, case studies,
   testimonials, CTA. Adapts the reference layout to navy/orange.
   ========================================================================== */

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

/* ---------- Hero focal visual: radial drone orb with waypoints ---------- */
const DroneOrb = () => {
  const [t, setT] = useStateH(0);
  useEffectH(() => {
    let raf; let start = performance.now();
    const loop = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const rot = t * 12;
  return (
    <div style={{ position:'relative', width:'100%', aspectRatio:'1/1' }}>
      {/* Outer glow */}
      <div style={{
        position:'absolute', inset:'8%',
        borderRadius:'50%',
        background:'radial-gradient(circle, rgba(232,80,10,0.35) 0%, rgba(232,80,10,0.08) 40%, transparent 70%)',
        filter:'blur(20px)',
      }}/>
      <svg width="100%" height="100%" viewBox="0 0 520 520" style={{ position:'relative' }}>
        <defs>
          <radialGradient id="droneCoreGrad" cx="50%" cy="35%" r="55%">
            <stop offset="0%" stopColor="#FF8B4F"/>
            <stop offset="45%" stopColor="#E8500A"/>
            <stop offset="100%" stopColor="#7A2600"/>
          </radialGradient>
          <radialGradient id="sphereShade" cx="35%" cy="30%" r="70%">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.22"/>
            <stop offset="60%" stopColor="#ffffff" stopOpacity="0"/>
          </radialGradient>
          <filter id="blurSm"><feGaussianBlur stdDeviation="1.2"/></filter>
        </defs>

        {/* Orbital rings */}
        {[240, 200, 160, 120].map((r, i) => (
          <circle key={r} cx="260" cy="260" r={r}
            stroke="#2A4A75" strokeWidth="1" fill="none"
            strokeDasharray={i % 2 === 0 ? '2 6' : '4 10'}
            transform={`rotate(${rot * (i % 2 ? 1 : -1)} 260 260)`}
          />
        ))}
        {/* crosshair */}
        <line x1="10" y1="260" x2="510" y2="260" stroke="#1E3A5F" strokeWidth="1"/>
        <line x1="260" y1="10" x2="260" y2="510" stroke="#1E3A5F" strokeWidth="1"/>

        {/* Core sphere — geodesic */}
        <g transform="translate(260,260)">
          {/* hex dots on sphere */}
          {Array.from({length: 80}).map((_, i) => {
            const phi = Math.acos(1 - 2*(i+0.5)/80);
            const theta = Math.PI * (1 + Math.sqrt(5)) * i;
            const x = 110 * Math.sin(phi) * Math.cos(theta);
            const y = 110 * Math.sin(phi) * Math.sin(theta);
            const z = 110 * Math.cos(phi);
            if (z < 0) return null;
            return <circle key={i} cx={x} cy={y} r={1.6 + z/160} fill="#fff" opacity={0.2 + z/300}/>;
          })}
          {/* center highlight */}
          <circle cx="-30" cy="-40" r="22" fill="#fff" opacity="0.12" filter="url(#blurSm)"/>
        </g>


        {/* Waypoint markers */}
        {[{x:80,y:110,l:'WP-01'},{x:440,y:140,l:'WP-02'},{x:100,y:420,l:'WP-03'},{x:440,y:400,l:'WP-04'}].map((p,i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="6" fill="#E8500A"/>
            <circle cx={p.x} cy={p.y} r="14" stroke="#E8500A" strokeWidth="1" fill="none" opacity="0.4">
              <animate attributeName="r" values="6;18;6" dur="2.5s" repeatCount="indefinite" begin={`${i*0.4}s`}/>
              <animate attributeName="opacity" values="0.6;0;0.6" dur="2.5s" repeatCount="indefinite" begin={`${i*0.4}s`}/>
            </circle>
            <text x={p.x + 14} y={p.y + 4} fill="#A8B8CC" fontFamily="JetBrains Mono, monospace" fontSize="10">{p.l}</text>
          </g>
        ))}
      </svg>

    </div>
  );
};

/* ---------- Telemetry chips (used outside the orb) ---------- */
const TelemetryChip = ({ label, value, valueSmall, status, statusColor = '#4CC38A' }) => (
  <div style={{
    background:'rgba(30,58,95,0.88)', backdropFilter:'blur(8px)',
    border:'1px solid #2A4A75', borderRadius:10, padding:'12px 16px',
    fontFamily:'Inter', minWidth: 180,
  }}>
    <div style={{ fontSize:10, color:'#A8B8CC', letterSpacing:'0.12em', textTransform:'uppercase' }}>{label}</div>
    <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:18, color:'#fff', letterSpacing:'-0.02em', marginTop:2 }}>
      {value}{valueSmall && <span style={{fontSize:11, color:'#A8B8CC', marginLeft:4}}>{valueSmall}</span>}
    </div>
    {status && (
      <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:4, color:statusColor, fontSize:11 }}>
        <span style={{ width:6, height:6, borderRadius:999, background:statusColor }}/>{status}
      </div>
    )}
  </div>
);

/* ---------- Hero ---------- */
/* ---------- Top hero — dark cinematic fullscreen ---------- */
/* ---------- Top hero — dark cinematic fullscreen ---------- */
const TopHero = () => {
  const firedRef = useRefH(false);
  const videoRef = useRefH(null);
  const [muted, setMuted] = useStateH(false);
  // 'black' | 'playing' | 'done'
  const [phase, setPhase] = useStateH('black');

  /* Lock scroll during black + playing so content below stays hidden */
  useEffectH(() => {
    const lock = phase === 'black' || phase === 'playing';
    document.body.style.overflow = lock ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [phase]);

  /* Detect scroll intent (wheel or touch) to start video */
  useEffectH(() => {
    if (phase !== 'black') return;
    const start = () => {
      setPhase('playing');
      if (videoRef.current) {
        // Try unmuted first; browsers may block it — fall back to muted
        videoRef.current.muted = false;
        videoRef.current.play().catch(() => {
          if (videoRef.current) {
            videoRef.current.muted = true;
            setMuted(true);
            videoRef.current.play().catch(() => {});
          }
        });
      }
    };
    let touchStartY = 0;
    const onWheel = (e) => { if (e.deltaY > 0) start(); };
    const onTouchStart = (e) => { touchStartY = e.touches[0].clientY; };
    const onTouchMove = (e) => { if (e.touches[0].clientY < touchStartY - 10) start(); };
    window.addEventListener('wheel', onWheel, { passive: true });
    window.addEventListener('touchstart', onTouchStart, { passive: true });
    window.addEventListener('touchmove', onTouchMove, { passive: true });
    return () => {
      window.removeEventListener('wheel', onWheel);
      window.removeEventListener('touchstart', onTouchStart);
      window.removeEventListener('touchmove', onTouchMove);
    };
  }, [phase]);

  /* Mute when section scrolls out of view */
  useEffectH(() => {
    if (phase !== 'done') return;
    const section = videoRef.current && videoRef.current.closest('section');
    if (!section) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!videoRef.current) return;
        if (!entry.isIntersecting) {
          videoRef.current.muted = true;
          setMuted(true);
        }
      },
      { threshold: 0.1 }
    );
    observer.observe(section);
    return () => observer.disconnect();
  }, [phase]);

  /* Video ends → unlock scroll, fire nav reveal */
  const handleEnded = () => {
    if (!firedRef.current) {
      firedRef.current = true;
      window.dispatchEvent(new CustomEvent('bm-video-looped'));
    }
    setPhase('done');
    // Keep looping
    if (videoRef.current) {
      videoRef.current.currentTime = 0;
      videoRef.current.play().catch(() => {});
    }
  };

  const toggleMute = () => {
    if (videoRef.current) {
      videoRef.current.muted = !videoRef.current.muted;
      setMuted(videoRef.current.muted);
    }
  };

  return (
    <section style={{
      position:'relative', height:'100vh', overflow:'hidden',
      background:'#000', marginTop:'-68px', flexShrink:0,
    }}>
      {/* Video — always in DOM, looping after first play */}
      <video ref={videoRef} preload="auto" playsInline onEnded={handleEnded} style={{
        position:'absolute', inset:0, width:'100%', height:'100%',
        objectFit:'cover', objectPosition:'center',
        opacity: phase === 'black' ? 0 : 0.85,
        transition: 'opacity 1.2s ease',
      }}>
        <source src="assets/show.mp4" type="video/mp4"/>
      </video>

      {/* Cinematic gradient */}
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(135deg,rgba(3,13,26,0.55) 30%,rgba(3,13,26,0.15) 100%)',
        opacity: phase === 'black' ? 0 : 1,
        transition: 'opacity 1.2s ease',
        pointerEvents:'none',
      }}/>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, height:180,
        background:'linear-gradient(to bottom,transparent,#0A1628)',
        opacity: phase === 'black' ? 0 : 1,
        transition: 'opacity 1.2s ease',
        pointerEvents:'none',
      }}/>

      {/* Scroll indicator — black phase only */}
      {phase === 'black' && (
        <div style={{
          position:'absolute', bottom:48, left:'50%', transform:'translateX(-50%)',
          zIndex:10, display:'flex', flexDirection:'column', alignItems:'center', gap:8,
        }}>
          <style>{`
            @keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
            .scroll-ind{animation:scrollBounce 1.6s ease-in-out infinite}
          `}</style>
          <span style={{fontFamily:'JetBrains Mono,monospace',fontSize:11,color:'rgba(255,255,255,0.45)',letterSpacing:'0.15em',textTransform:'uppercase'}}>Scroll</span>
          <div className="scroll-ind">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#E8500A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 5v14M5 12l7 7 7-7"/>
            </svg>
          </div>
        </div>
      )}

      {/* Sound toggle — playing & done */}
      {phase !== 'black' && (
        <button onClick={toggleMute} style={{
          position:'absolute', bottom:32, right:32, zIndex:10,
          background:'rgba(10,22,40,0.6)', backdropFilter:'blur(8px)',
          border:'1px solid rgba(255,255,255,0.15)', borderRadius:999,
          color:'#fff', cursor:'pointer', width:44, height:44,
          display:'flex', alignItems:'center', justifyContent:'center',
          transition:'all 200ms',
        }}>
          {muted
            ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
            : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
          }
        </button>
      )}
    </section>
  );
};

const HomeHero = ({ onNav }) => (
  <React.Fragment>
  <section style={{
    position:'relative', overflow:'hidden',
    padding:'64px 32px 80px',
    background:'#0A1628',
    minHeight:'90vh',
  }}>
    {/* Background image — fills section at any size */}
    <img
      src="assets/hero-bg.png"
      alt=""
      style={{
        position:'absolute', inset:0,
        width:'100%', height:'100%',
        objectFit:'cover', objectPosition:'center top',
        display:'block',
        zIndex: 1,
      }}
    />
    {/* Dark overlay for legibility */}
    <div style={{
      position:'absolute', inset:0,
      background:'linear-gradient(to bottom, rgba(10,22,40,0.75) 0%, rgba(10,22,40,0.45) 60%, rgba(10,22,40,0.1) 100%)',
      pointerEvents:'none',
      zIndex: 2,
    }}/>
    {/* Raster grid — over image, behind content */}
    <div style={{
      position:'absolute', inset:0,
      backgroundImage:`
        repeating-linear-gradient(0deg, transparent, transparent 110px, rgba(30,58,95,0.18) 110px, rgba(30,58,95,0.18) 111px),
        repeating-linear-gradient(90deg, transparent, transparent 110px, rgba(30,58,95,0.18) 110px, rgba(30,58,95,0.18) 111px)
      `,
      pointerEvents:'none',
      zIndex: 3,
    }}/>

    {/* Content */}
    <div style={{ position:'relative', zIndex:4, maxWidth:1280, margin:'0 auto' }}>
      <h1 style={{
        fontFamily:'Barlow', fontWeight:700, fontSize:132, lineHeight:0.95,
        letterSpacing:'-0.035em', margin:0, color:'#fff',
        textShadow:'0 4px 32px rgba(0,0,0,0.5)',
      }}>
        Elevate your brand
        <br/>
        <span style={{ display:'inline-flex', alignItems:'center', gap:20 }}>
          <em style={{
            fontStyle:'italic', fontWeight:700,
            background:'linear-gradient(135deg,#FF6420,#C83C00)',
            WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
            paddingRight: 8,
          }}>above</em>
          <span style={{ color:'#fff' }}>the skyline.</span>
        </span>
      </h1>
      {/* Chips below headline */}
      <div style={{ display:'flex', flexDirection:'column', gap:16, alignItems:'flex-start', marginTop:40 }}>
        <TelemetryChip label="Active mission" value="SM-07" valueSmall="Santa Monica Pier" status="Mission nominal"/>
        <TelemetryChip label="Altitude" value="142" valueSmall="FT AGL" status="LAANC cleared"/>
        <div style={{
          display:'inline-flex', alignItems:'center', gap:10,
          padding:'8px 14px', borderRadius:999,
          background:'rgba(232,80,10,0.12)', color:'#E8500A',
          fontFamily:'Inter', fontSize:12, fontWeight:600, letterSpacing:'0.14em', textTransform:'uppercase',
        }}>
          <span style={{ width:6, height:6, borderRadius:999, background:'#E8500A' }}/>FAA Part 107 Certified
        </div>
      </div>
    </div>

  </section>
  <StatsStrip items={[
    { k: 'OOH',   v: 'Aerial Advertising' },
    { k: 'B2B',   v: 'Business-to-Business Focused' },
    { k: 'UAV',   v: 'Specialist' },
    { k: '200%',  v: 'Avg. ROAS versus static OOH placements' },
  ]}/>
  </React.Fragment>
);

/* ---------- Animated stat card ---------- */
const StatCard = ({ tag, cat, k, v }) => {
  const [hovered, setHovered] = useStateH(false);
  return (
    <div
      style={{
        position:'relative', background: hovered ? '#112240' : 'transparent',
        borderTop:'1px solid #1E3A5F', padding:'20px 20px 20px 20px',
        overflow:'hidden', cursor:'default',
        transform: hovered ? 'translateX(6px)' : 'translateX(0)',
        transition:'transform 320ms cubic-bezier(0.2,0.8,0.2,1), background 320ms',
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* Animated left border */}
      <div style={{
        position:'absolute', left:0, top:0, width:3,
        height: hovered ? '100%' : '0%',
        background:'#E8500A',
        transition:'height 320ms cubic-bezier(0.2,0.8,0.2,1)',
      }}/>
      <div style={{ fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase', color:'#E8500A', marginBottom:8 }}>
        {tag} — {cat}
      </div>
      <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:22, color:'#fff', letterSpacing:'-0.02em', lineHeight:1, marginBottom:6 }}>{k}</div>
      <div style={{ color:'#A8B8CC', fontSize:13, lineHeight:1.5 }}>{v}</div>
    </div>
  );
};

/* ---------- Who We Are split section ---------- */
const WhoWeAre = () => (
  <section style={{ padding:'120px 32px', background:'#0A1628' }}>
    <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:80, alignItems:'start' }}>
      <div>
        <Eyebrow style={{ marginBottom: 20 }}>Who we are</Eyebrow>
        <h2 style={{
          fontFamily:'Raleway', fontWeight:800, fontSize:72, lineHeight:1, letterSpacing:'-0.03em',
          margin:0, color:'#fff',
        }}>
          Bright Media.<br/>Built for the Sky.
        </h2>
      </div>
      <div>
        <p style={{ color:'#A8B8CC', fontSize:18, lineHeight:1.7, margin:0, marginBottom:24 }}>
          Bright Media is an aerial media company based in Santa Monica, California. We design and operate compliant, immersive aerial advertising campaigns for local businesses, sports venues, and cultural institutions.
        </p>
        <p style={{ color:'#A8B8CC', fontSize:18, lineHeight:1.7, margin:0, marginBottom: 32 }}>
          We run projects with a full dedicated team, start to finish. FAA Part 107 certified. 15% of every campaign's display capacity is reserved for public service messaging before commercial use.
        </p>
        <div style={{ display:'flex', flexDirection:'column', gap:0, paddingTop:32 }}>
          {[
            { tag:'01', cat:'Founded', k:'2019', v:'Established in Santa Monica, CA.' },
            { tag:'02', cat:'Focus', k:'1 of 1', v:'One project at a time, fully dedicated.' },
            { tag:'03', cat:'Certified', k:'FAA 107', v:'Part 107 certified operator.' },
          ].map(s => (
            <StatCard key={s.k} tag={s.tag} cat={s.cat} k={s.k} v={s.v}/>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Services cards grid (from reference: 4 cards in 2x2) ---------- */
const ServicesGrid = ({ onNav }) => {
  const cards = [
    { tag:'01', icon:'drone2',  t:'LED Mesh Screen Advertising',    d:'Deploy UAVs carrying large-format LED mesh screens above events, stadiums, and public venues — visible to thousands simultaneously.' },
    { tag:'02', icon:'video', t:'Live Event Coverage',   d:'Real-time aerial footage synchronized to your broadcast — our operators coordinate throughout your event.' },
    { tag:'03', icon:'camera', t:'Brand Activation',    d:'Custom aerial campaigns designed for maximum brand impact — concept, execution, and delivery included.' },
    { tag:'04', icon:'shield', t:'Certified & Insured', d:'All flights conducted by certified operators with full regulatory compliance, aviation insurance, and pre-flight risk assessments.' },
  ];
  return (
    <section style={{ padding:'100px 32px', background:'#0A1628', position:'relative' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 56, gap: 48, flexWrap:'wrap' }}>
          <div>
            <Eyebrow style={{ marginBottom: 20 }}>What we do</Eyebrow>
            <h2 style={{ fontFamily:'Raleway', fontWeight:800, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff', maxWidth: 680 }}>
              Four aerial disciplines.<br/>One dedicated crew.
            </h2>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:12, alignItems:'flex-end' }}>
            <a onClick={() => onNav('services')} style={{
              color:'#E8500A', fontSize:14, fontWeight:600, cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap:8, fontFamily:'Inter',
            }}>See all services <Icon name="arrow" size={16}/></a>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 16 }}>
          {cards.map((c, i) => (
            <div key={c.t} style={{
              background:'#112240', border:'1px solid #2A4A75', borderRadius:12,
              padding: 36, display:'flex', flexDirection:'column', gap: 20,
              transition:'all 240ms cubic-bezier(0.2,0.8,0.2,1)', cursor:'pointer',
              position:'relative', overflow:'hidden', minHeight: 280,
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#E8500A'; e.currentTarget.style.background = '#1E3A5F'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = '#2A4A75'; e.currentTarget.style.background = '#112240'; }}
            >
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 10,
                  background: 'linear-gradient(135deg,#E8500A,#C83C00)',
                  display:'flex', alignItems:'center', justifyContent:'center', color:'#fff',
                  fontFamily:'Barlow', fontWeight:700, fontSize:22, letterSpacing:'-0.02em',
                }}>
                  {parseInt(c.tag)}
                </div>
              </div>
              <div style={{ flex:1 }}>
                <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:26, letterSpacing:'-0.015em', margin:0, marginBottom:10, color:'#fff' }}>{c.t}</h3>
                <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0 }}>{c.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Case Studies scroll-driven ---------- */
const CaseStudies = () => {
  const cases = [
    {
      client: 'VividStream Technologies', tag:'TECH · PRODUCT LAUNCH',
      metric:'150ft', metricLabel:'Minimum AGL per Mission',
      quote:'3-month engagement window drove compound lift across paid and organic channels.',
      venue:'Pier 2 · Santa Monica', date:'Mar 2026',
      img: 'assets/DroneCity.jpg',
    },
    {
      client: 'Halcyon Arena', tag:'VENUE · SEASON OPENER',
      metric:'48K',  metricLabel:'new social followers in 72 hours',
      quote:'Formation finale trended #2 on regional feeds. Broadcast networks picked up the clip organically.',
      venue:'Halcyon Arena · Inglewood', date:'Oct 2025',
      img: 'assets/FlyingScreenStadium.jpg',
    },
    {
      client: 'Meridian Festival', tag:'CULTURE · MULTI-NIGHT',
      metric:'1.2M', metricLabel:'aerial impressions over 3 nights',
      quote:'Custom waypoint grid coordinated with stage cues. Zero infractions, AAA compliance rating renewed.',
      venue:'Griffith Park · LA', date:'Aug 2025',
      img: 'assets/FlyingScreenFestival.jpg',
    },
  ];

  const [idx, setIdx] = useStateH(0);
  const [prevIdx, setPrevIdx] = useStateH(0);
  const [animating, setAnimating] = useStateH(false);
  const outerRef = useRefH(null);
  const idxRef = useRefH(0);

  useEffectH(() => {
    const onScroll = () => {
      const el = outerRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const totalScroll = el.offsetHeight - window.innerHeight;
      const scrolled = -rect.top;
      const progress = Math.max(0, Math.min(1, scrolled / totalScroll));
      // 3 segments: [0, 1/3) → 0, [1/3, 2/3) → 1, [2/3, 1] → 2
      const next = Math.min(2, Math.floor(progress * 3));
      if (next !== idxRef.current) {
        setPrevIdx(idxRef.current);
        idxRef.current = next;
        setAnimating(true);
        setIdx(next);
        setTimeout(() => setAnimating(false), 400);
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const c = cases[idx];

  return (
    /* Outer: tall container — 3 extra viewports give each case ~1vh of scroll */
    <div ref={outerRef} style={{ height: 'calc(100vh * 4)', position:'relative' }}>
      {/* Sticky frame */}
      <div style={{ position:'sticky', top:0, height:'100vh', overflow:'hidden', background:'#112240' }}>
        <div style={{ height:'100%', display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 32px' }}>
          <div style={{ maxWidth:1280, margin:'0 auto', width:'100%' }}>

            {/* Header row */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:48, gap:48 }}>
              <div>
                <Eyebrow style={{ marginBottom:20 }}>How It Looks</Eyebrow>
                <h2 style={{ fontFamily:'Raleway', fontWeight:800, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
                  Aerial Advertising,<br/>Reimagined.
                </h2>
              </div>
            </div>

            {/* Card */}
            <div style={{
              background:'#1E3A5F', borderRadius:16, border:'1px solid #2A4A75', overflow:'hidden',
              display:'grid', gridTemplateColumns:'1.2fr 1fr', minHeight:400,
              opacity: animating ? 0 : 1,
              transform: animating ? `translateX(${idx > prevIdx ? 32 : -32}px)` : 'translateX(0)',
              transition: animating ? 'none' : 'opacity 360ms ease, transform 360ms cubic-bezier(0.2,0.8,0.2,1)',
            }}>
              {/* Left: photo */}
              <div style={{
                position:'relative',
                borderRight:'1px solid #2A4A75',
                overflow:'hidden',
                minHeight: 400,
              }}>
                <img src={c.img} alt={c.client} style={{
                  position:'absolute', inset:0, width:'100%', height:'100%',
                  objectFit:'cover', objectPosition:'center',
                }}/>
                <div style={{ position:'absolute', inset:0, background:'linear-gradient(to top, rgba(10,22,40,0.75) 0%, rgba(10,22,40,0.1) 50%, transparent 100%)' }}/>
              </div>

              {/* Right: metric + quote */}
              <div style={{ padding:48, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
                <div>
                  <div style={{
                    fontFamily:'Barlow', fontWeight:700, fontSize:120, lineHeight:1, letterSpacing:'-0.04em',
                    background:'linear-gradient(135deg,#E8500A,#C83C00)',
                    WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
                  }}>{c.metric}</div>
                  <div style={{ color:'#fff', fontSize:17, lineHeight:1.5, marginTop:8, fontFamily:'Inter', fontWeight:500, maxWidth:360 }}>
                    {c.metricLabel}
                  </div>
                </div>
                <div style={{ borderTop:'1px solid #2A4A75', paddingTop:24 }}>
                  <div style={{ color:'#E8500A', marginBottom:12 }}><Icon name="quote" size={22}/></div>
                  <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.6, margin:0, fontStyle:'italic' }}>"{c.quote}"</p>
                </div>
              </div>
            </div>

            {/* Progress indicators */}
            <div style={{ display:'flex', justifyContent:'center', gap:10, marginTop:32 }}>
              {cases.map((_, i) => (
                <div key={i} style={{
                  width: i === idx ? 42 : 10, height:10, borderRadius:999,
                  background: i === idx ? '#E8500A' : '#2A4A75',
                  transition:'all 360ms cubic-bezier(0.2,0.8,0.2,1)',
                }}/>
              ))}
            </div>

          </div>
        </div>
      </div>
    </div>
  );
};

/* ---------- Testimonials ---------- */
const Testimonials = () => {
  const quotes = [
    {
      q:'Exceptional work. Our launch window traffic doubled in the three months following their sequence — still compounding via referral.',
      n:'Esther Howard', r:'CMO · VividStream',
    },
    {
      q:'The easiest large-scale activation we\'ve ever run. Their compliance paperwork was done before we finished the creative brief.',
      n:'Jenny Wilson', r:'VP Events · Halcyon Arena',
    },
    {
      q:'Genuinely unique format. The formation finale showed up on every major feed inside 24 hours, no paid boost required.',
      n:'Marcus Ng', r:'Festival Director · Meridian',
    },
  ];
  return (
    <section style={{ padding:'120px 32px', background:'#0A1628' }}>
      <div style={{ maxWidth: 1280, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom: 64 }}>
          <Eyebrow style={{ marginBottom: 20 }}>Clients</Eyebrow>
          <h2 style={{ fontFamily:'Raleway', fontWeight:800, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
            Trusted above ground.
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16 }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              background:'#112240', border:'1px solid #2A4A75', borderRadius: 12,
              padding: 36, display:'flex', flexDirection:'column', gap: 24,
              transition:'border-color 200ms',
            }}
              onMouseEnter={e => e.currentTarget.style.borderColor='#E8500A'}
              onMouseLeave={e => e.currentTarget.style.borderColor='#2A4A75'}
            >
              <div style={{ display:'flex', gap:2, color:'#E8500A' }}>
                {Array.from({length:5}).map((_,j) => (
                  <svg key={j} width="16" height="16" viewBox="0 0 24 24" fill="#E8500A"><polygon points="12 2 15 9 22 9.3 16.5 14 18 21 12 17.3 6 21 7.5 14 2 9.3 9 9"/></svg>
                ))}
              </div>
              <p style={{ color:'#fff', fontSize:16, lineHeight:1.6, margin:0, fontFamily:'Inter', flex:1 }}>
                "{q.q}"
              </p>
              <div style={{ display:'flex', alignItems:'center', gap:14, borderTop:'1px solid #2A4A75', paddingTop:24 }}>
                <div style={{
                  width:44, height:44, borderRadius:999,
                  background:'linear-gradient(135deg,#1E3A5F,#112240)',
                  border:'1px solid #2A4A75',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'Barlow', fontWeight:700, fontSize:16, color:'#E8500A',
                }}>{q.n.split(' ').map(w=>w[0]).join('')}</div>
                <div>
                  <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:15, color:'#fff' }}>{q.n}</div>
                  <div style={{ color:'#A8B8CC', fontSize:12 }}>{q.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Marquee of brand names ---------- */
const LogoMarquee = () => {
  const brands = ['UAV Operation', 'Event Coverage', 'Brand Activation', 'Stadium Advertising', 'OOH Campaigns', 'Certified Flight Crew', 'Aerial Advertising', 'LED Mesh Screen'];
  return (
    <section style={{ padding:'48px 0', background:'#112240', borderTop:'1px solid #1E3A5F', borderBottom:'1px solid #1E3A5F', overflow:'hidden' }}>
      <div style={{ display:'flex', gap:64, whiteSpace:'nowrap', animation:'bm-marquee 20s linear infinite' }}>
        {[...brands, ...brands].map((b, i) => (
          <div key={i} style={{ display:'flex', alignItems:'center', gap:24, flexShrink:0 }}>
            <span style={{ color:'#E8500A', fontSize:14, opacity:0.8 }}>✦</span>
            <span style={{
              fontFamily:'Barlow', fontWeight:700, fontSize:28, color:'#A8B8CC',
              letterSpacing:'-0.01em', opacity:0.7,
            }}>{b}</span>
          </div>
        ))}
      </div>
      <style>{`@keyframes bm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </section>
  );
};

/* ---------- Home page composition ---------- */
const HomePage = ({ onNav }) => (
  <div>
    <TopHero onNav={onNav}/>
    <HomeHero onNav={onNav}/>
    <WhoWeAre/>
    <LogoMarquee/>
    <ServicesGrid onNav={onNav}/>
    <CaseStudies/>
    <CTABand onNav={onNav}/>
  </div>
);

window.HomePage = HomePage;