/* ==========================================================================
   Pages: UAS Program, Services, How It Works, Pricing, Contact, FAQs
   ========================================================================== */

const { useState: useStateP } = React;

/* =================================================================
   UAS PROGRAM
================================================================= */
const UASPage = ({ onNav }) => {
  const [specHovered, setSpecHovered] = useStateP(false);
  const capabilities = [
    { icon:'video',    t:'Aerial advertising',    d:'Up to 500-drone LED displays rendering brand logos, QR codes, and choreographed narrative sequences at altitudes from 100–400 ft AGL.' },
    { icon:'sparkles', t:'Drone animations',      d:'Multi-drone formation design with our in-house choreography tools. Typical sequence: 90–180 seconds, 3-act narrative structure.' },
    { icon:'camera',   t:'Video capture',         d:'Cinematic 8K aerial cinematography. Full FAA 107.31 compliance for crowd overflight on qualifying platforms.' },
    { icon:'shield',   t:'Compliance ops',        d:'Waiver filings (107.29 night ops, 107.35 multi-drone), LAANC, venue approvals, insurance certificates, and briefings.' },
  ];
  const certs = [
    { k:'Part 107', v:'FAA Remote Pilot' },
    { k:'107.29',   v:'Night ops waiver' },
    { k:'107.35',   v:'Multi-drone waiver' },
    { k:'107.39',   v:'Over people waiver' },
    { k:'LAANC',    v:'Auto-clearance' },
    { k:'$10M',     v:'Liability coverage' },
  ];
  return (
    <div>
      <PageHeader
        eyebrow="UAS Program"
        title="Every flight, fully accounted for."
        subtitle="The BM UAS Program is the operations backbone behind every campaign. One dedicated crew. One project window at a time. Full documentation on every flight."
      >
        <div style={{ display:'flex', gap:14 }}>
          <Button variant="primary" icon="arrow" onClick={() => onNav('contact')}>Request capability brief</Button>
          <Button variant="ghost" onClick={() => onNav('how')}>See flight workflow</Button>
        </div>
      </PageHeader>

      {/* Capability grid */}
      <section style={{ padding:'100px 32px', background:'#0A1628' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16 }}>
            {capabilities.map((c, i) => (
              <div key={c.t} style={{
                background:'#112240', border:'1px solid #2A4A75', borderRadius:12,
                padding:36, display:'flex', gap:24, alignItems:'flex-start',
                transition:'all 240ms', cursor:'default',
              }}
                onMouseEnter={e => e.currentTarget.style.borderColor='#E8500A'}
                onMouseLeave={e => e.currentTarget.style.borderColor='#2A4A75'}
              >
                <div style={{
                  width:56, height:56, borderRadius:10, flexShrink:0,
                  background:'linear-gradient(135deg,#E8500A,#C83C00)',
                  display:'flex', alignItems:'center', justifyContent:'center', color:'#fff',
                }}>
                  <Icon name={c.icon} size={28} stroke={1.75}/>
                </div>
                <div>
                  <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'#6B7D94', letterSpacing:'0.1em', marginBottom:6 }}>/ 0{i+1}</div>
                  <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:24, 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>

      {/* Technical Specifications */}
      <section style={{ padding:'100px 32px', background:'#112240' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ marginBottom:56 }}>
            <Eyebrow style={{ marginBottom:20 }}>Tech Specs</Eyebrow>
            <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
              Engineered for<br/>precision flight.
            </h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, background:'#1E3A5F', borderRadius:16, border:'1px solid #2A4A75' }}>

            {/* Left: drone photo */}
            <div
              className={specHovered ? 'spec-hov' : ''}
              style={{ position:'relative', background:'#0A1628', borderRight:'1px solid #2A4A75', borderRadius:'16px 0 0 16px', overflow:'hidden' }}
              onMouseEnter={() => setSpecHovered(true)}
              onMouseLeave={() => setSpecHovered(false)}
            >
              <style>{`
                @keyframes droneFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
                @keyframes droneGlow  { 0%,100%{filter:drop-shadow(0 0 10px rgba(232,80,10,0.15))} 50%{filter:drop-shadow(0 0 32px rgba(232,80,10,0.55))} }
                .sdimg { animation: droneFloat 3.2s ease-in-out infinite, droneGlow 3.2s ease-in-out infinite; display:block; width:100%; height:auto; }
                .spec-hov .sdimg { animation-duration: 1.2s; }
              `}</style>
              <div style={{ padding:'32px 24px 32px' }}>
                <img src="assets/DRONE1.png" className="sdimg" alt=""/>
              </div>
            </div>

            {/* Right: spec table */}
            <div style={{ padding:'48px 48px', display:'flex', flexDirection:'column', justifyContent:'flex-start', gap:0, alignSelf:'flex-start', position:'sticky', top:80 }}>
              {/* Drone specs */}
              <div style={{ marginBottom:36 }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
                  <span style={{ width:8, height:8, borderRadius:999, background:'#E8500A' }}/>
                  <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'#E8500A', letterSpacing:'0.12em', textTransform:'uppercase' }}>UAV Platform</span>
                </div>
                {[
                  { k:'Max Payload',     v:'60 kg' },
                  { k:'Flight Time',     v:'20 min' },
                  { k:'Wind Tolerance',  v:'35 mph' },
                  { k:'Max Altitude',    v:'400 ft AGL' },
                ].map((s, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:0, padding:'10px 0', borderBottom:'1px solid #2A4A75' }}>
                    <span style={{ fontFamily:'Inter', fontSize:13, color:'#A8B8CC', flex:1 }}>{s.k}</span>
                    <span style={{ flex:1, borderBottom:'1px dashed #2A4A75', margin:'0 12px', height:1, display:'block' }}/>
                    <span style={{ fontFamily:'Barlow', fontWeight:700, fontSize:15, color:'#fff', letterSpacing:'-0.01em', minWidth:90, textAlign:'right' }}>{s.v}</span>
                  </div>
                ))}
              </div>

              {/* Screen specs */}
              <div style={{ marginBottom:36 }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
                  <span style={{ width:8, height:8, borderRadius:999, background:'#4CC38A' }}/>
                  <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'#4CC38A', letterSpacing:'0.12em', textTransform:'uppercase' }}>LED Mesh Screen</span>
                </div>
                {[
                  { k:'Dimensions',    v:'4m × 6m' },
                  { k:'Pixel Pitch',   v:'P4 / P6' },
                  { k:'Brightness',    v:'5,000 nits' },
                  { k:'Screen Weight', v:'12 kg' },
                ].map((s, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:0, padding:'10px 0', borderBottom:'1px solid #2A4A75' }}>
                    <span style={{ fontFamily:'Inter', fontSize:13, color:'#A8B8CC', flex:1 }}>{s.k}</span>
                    <span style={{ flex:1, borderBottom:'1px dashed #2A4A75', margin:'0 12px', height:1, display:'block' }}/>
                    <span style={{ fontFamily:'Barlow', fontWeight:700, fontSize:15, color:'#fff', letterSpacing:'-0.01em', minWidth:90, textAlign:'right' }}>{s.v}</span>
                  </div>
                ))}
              </div>

              {/* System */}
              <div>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
                  <span style={{ width:8, height:8, borderRadius:999, background:'#A8B8CC' }}/>
                  <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color:'#A8B8CC', letterSpacing:'0.12em', textTransform:'uppercase' }}>System</span>
                </div>
                {[
                  { k:'Rig Type',      v:'4-pt Cable Harness' },
                  { k:'Certification', v:'FAA Part 107' },
                  { k:'Night Ops',     v:'107.29 Waiver' },
                ].map((s, i) => (
                  <div key={i} style={{ display:'flex', alignItems:'center', gap:0, padding:'10px 0', borderBottom:'1px solid #2A4A75' }}>
                    <span style={{ fontFamily:'Inter', fontSize:13, color:'#A8B8CC', flex:1 }}>{s.k}</span>
                    <span style={{ flex:1, borderBottom:'1px dashed #2A4A75', margin:'0 12px', height:1, display:'block' }}/>
                    <span style={{ fontFamily:'Barlow', fontWeight:700, fontSize:15, color:'#fff', letterSpacing:'-0.01em', minWidth:90, textAlign:'right' }}>{s.v}</span>
                  </div>
                ))}
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Mission timeline */}
      <section style={{ padding:'100px 32px', background:'#112240' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:80, alignItems:'center' }}>
          <div>
            <Eyebrow style={{ marginBottom:20 }}>Mission profile</Eyebrow>
            <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff', marginBottom:20 }}>
              A typical day,<br/>hour by hour.
            </h2>
            <p style={{ color:'#A8B8CC', fontSize:17, lineHeight:1.7, margin:0, marginBottom:28 }}>
              Every mission opens with a pre-flight briefing and closes with a recovery debrief. The intervening hours are documented down to the minute. Copy of all logs ships with your final engagement report.
            </p>
            <Button variant="secondary" icon="arrow">Download sample log</Button>
          </div>
          <div style={{ background:'#1E3A5F', borderRadius:16, padding:32, border:'1px solid #2A4A75' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:24 }}>
              <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:20, color:'#fff' }}>Mission timeline · SM-07</div>
              <div style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'4px 10px', background:'rgba(76,195,138,0.15)', color:'#4CC38A', borderRadius:4, fontSize:11, fontWeight:600, letterSpacing:'0.06em' }}>
                <span style={{ width:6, height:6, borderRadius:999, background:'#4CC38A' }}/>CLEARED
              </div>
            </div>
            {[
              { t:'0800', l:'Pre-flight briefing', s:'done' },
              { t:'0830', l:'LAANC authorization confirmed', s:'done' },
              { t:'0900', l:'Equipment deployment', s:'done' },
              { t:'0930', l:'Formation sequence — Act 1', s:'active' },
              { t:'1015', l:'Engagement capture window', s:'pending' },
              { t:'1100', l:'Recovery + post-flight debrief', s:'pending' },
              { t:'1130', l:'Log submission + report draft', s:'pending' },
            ].map((row, i) => (
              <div key={i} style={{ display:'flex', gap:16, alignItems:'flex-start', padding:'12px 0', borderTop: i===0 ? 'none' : '1px solid #2A4A75' }}>
                <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'#A8B8CC', width:48 }}>{row.t}</div>
                <div style={{ width:10, height:10, borderRadius:999, marginTop:5, background: row.s==='done'?'#4CC38A':row.s==='active'?'#E8500A':'#2A4A75', boxShadow: row.s==='active'?'0 0 0 4px rgba(232,80,10,0.25)':'none', flexShrink:0 }}/>
                <div style={{ flex:1, fontSize:14, color: row.s==='pending'?'#A8B8CC':'#fff', fontWeight: row.s==='active'?600:400 }}>{row.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Certifications grid */}
      <section style={{ padding:'100px 32px', background:'#0A1628' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:56 }}>
            <Eyebrow style={{ marginBottom:20 }}>Certifications</Eyebrow>
            <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
              The paperwork, already done.
            </h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16 }}>
            {certs.map(c => (
              <div key={c.k} style={{
                background:'#112240', border:'1px solid #2A4A75', borderRadius:12,
                padding:32, display:'flex', alignItems:'center', gap:20,
              }}>
                <div style={{
                  width:64, height:64, borderRadius:12,
                  border:'1.5px solid #E8500A',
                  display:'flex', alignItems:'center', justifyContent:'center', color:'#E8500A',
                  fontFamily:'Barlow', fontWeight:700, fontSize:14, letterSpacing:'-0.01em',
                  flexShrink:0,
                }}>{c.k}</div>
                <div>
                  <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:18, color:'#fff' }}>{c.v}</div>
                  <div style={{ color:'#A8B8CC', fontSize:13, marginTop:4 }}>Active · renewed 2026</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onNav={onNav}/>
    </div>
  );
};

/* =================================================================
   SERVICES
================================================================= */
const ServicesPage = ({ onNav }) => {
  const tiers = [
    { t:'Contract',  price:'Quarterly retainer', d:'Ongoing campaigns tied to your brand calendar. Recurring flight windows, dedicated producer, priority scheduling.', features:['Quarterly planning cadence','Priority flight-window booking','Dedicated campaign producer','Custom choreography library','Monthly engagement report'] },
    { t:'Location',  price:'Per activation',     d:'Single-venue activations — sports arenas, festivals, grand openings, and high-profile branded moments.', features:['Venue survey + risk assessment','Flight-path design','Day-of ops coverage','Social-ready edits within 48h','Post-event engagement report'], featured:true },
    { t:'Outsource', price:'Wholesale',          d:'White-label operations for agencies running aerial as one channel in a broader media plan.', features:['NDA-protected engagement','Agency rate card','Branded or unbranded delivery','API access for scheduling','Joint insurance certificates'] },
  ];
  const addons = [
    { icon:'video', t:'Live broadcast feed', d:'Real-time aerial feed to your venue screens or social stream.' },
    { icon:'chart', t:'Extended analytics', d:'Foot-traffic sensors, social sentiment tracking, third-party impression audit.' },
    { icon:'users', t:'On-site producer', d:'Additional producer for talent, sponsor, and stakeholder coordination on the day.' },
    { icon:'film',  t:'Post-production package', d:'Cinematic cut, broadcast masters, and 20+ platform-native social edits.' },
  ];
  return (
    <div>
      <PageHeader
        eyebrow="Services"
        title="Three ways to work with us."
        subtitle="Contract, Location, or Outsource. Each with a single dedicated crew, the same compliance standard, and measurable outcomes. Pick the shape that fits your media plan."
      />

      <section style={{ padding:'80px 32px 100px', background:'#0A1628' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }}>
            {tiers.map(ti => (
              <div key={ti.t} style={{
                background: ti.featured ? '#1E3A5F' : '#112240',
                border: ti.featured ? '1.5px solid #E8500A' : '1px solid #2A4A75',
                borderRadius:12, padding:36, position:'relative',
                display:'flex', flexDirection:'column', gap:24,
                boxShadow: ti.featured ? '0 0 40px rgba(232,80,10,0.15)' : 'none',
              }}>
                {ti.featured && (
                  <div style={{
                    position:'absolute', top:-12, left:28,
                    background:'#E8500A', color:'#fff',
                    fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.14em',
                    padding:'5px 14px', borderRadius:4, whiteSpace:'nowrap',
                  }}>MOST POPULAR</div>
                )}
                <div>
                  <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:32, letterSpacing:'-0.02em', margin:0, marginBottom:6, color:'#fff' }}>{ti.t}</h3>
                  <div style={{ color:'#E8500A', fontSize:13, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase' }}>{ti.price}</div>
                </div>
                <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0, minHeight: 88 }}>{ti.d}</p>
                <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12, flex:1 }}>
                  {ti.features.map(f => (
                    <li key={f} style={{ display:'flex', alignItems:'flex-start', gap:10, color:'#fff', fontSize:14, lineHeight:1.5 }}>
                      <span style={{ color:'#E8500A', marginTop:2, flexShrink:0 }}><Icon name="check" size={16} stroke={2.5}/></span>
                      {f}
                    </li>
                  ))}
                </ul>
                <Button variant={ti.featured?'primary':'secondary'} fullWidth icon="arrow" onClick={()=>onNav('contact')}>
                  {ti.featured ? 'Request this' : 'Talk to us'}
                </Button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Add-ons */}
      <section style={{ padding:'100px 32px', background:'#112240' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:56, gap:48 }}>
            <div>
              <Eyebrow style={{ marginBottom:20 }}>Add-ons</Eyebrow>
              <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:48, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
                Extensions for larger campaigns.
              </h2>
            </div>
            <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0, maxWidth:360 }}>
              Stack any add-on onto a tier. Priced per engagement, quoted during scope.
            </p>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16 }}>
            {addons.map(a => (
              <div key={a.t} style={{
                background:'#1E3A5F', border:'1px solid #2A4A75', borderRadius:12,
                padding:28, display:'flex', gap:20, alignItems:'flex-start',
                transition:'border-color 200ms',
              }}
                onMouseEnter={e => e.currentTarget.style.borderColor='#E8500A'}
                onMouseLeave={e => e.currentTarget.style.borderColor='#2A4A75'}
              >
                <div style={{
                  width:48, height:48, borderRadius:10,
                  background:'rgba(232,80,10,0.12)', color:'#E8500A',
                  display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                }}>
                  <Icon name={a.icon} size={24}/>
                </div>
                <div>
                  <h4 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:20, margin:0, marginBottom:6, color:'#fff' }}>{a.t}</h4>
                  <p style={{ color:'#A8B8CC', fontSize:14, lineHeight:1.6, margin:0 }}>{a.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onNav={onNav}/>
    </div>
  );
};

/* =================================================================
   HOW IT WORKS
================================================================= */
const HowPage = ({ onNav }) => {
  const steps = [
    { n:'01', t:'Scope call',          d:'30-minute call to understand your venue, window, and goal. We confirm fit and pull initial airspace data while you\'re on the line.',   time:'Day 0' },
    { n:'02', t:'Brief + proposal',    d:'We send a written proposal with creative direction, flight-path concept, compliance plan, and a fixed quote. Revisions are free.',   time:'Days 1–3' },
    { n:'03', t:'Kickoff + filings',   d:'On signature, we start FAA and venue paperwork in parallel with creative pre-production. Weekly status calls begin.',              time:'Week 1' },
    { n:'04', t:'Rehearsal + dry run', d:'Closed-field rehearsal of the full choreography sequence. Client review, revisions, sign-off.',                                   time:'T-7 days' },
    { n:'05', t:'Mission day',         d:'Full crew on-site. Pre-flight, flight, post-flight, recovery. Social-ready cuts within 48 hours.',                                 time:'Mission day' },
    { n:'06', t:'Report + debrief',    d:'Engagement report, flight logs, and raw footage delivered. Debrief call to plan the next window.',                                time:'T+14 days' },
  ];
  return (
    <div>
      <PageHeader
        eyebrow="How it works"
        title="From scope call to debrief, in six steps."
        subtitle="Each engagement runs the same six-step sequence. Predictable, documented, and transparent — from first call through final report."
      />

      <section style={{ padding:'80px 32px 120px', background:'#0A1628' }}>
        <div style={{ maxWidth:1080, margin:'0 auto' }}>
          <div style={{ position:'relative' }}>
            {/* vertical line */}
            <div style={{ position:'absolute', left:39, top:20, bottom:20, width:2, background:'#2A4A75' }}/>
            <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
              {steps.map((s, i) => (
                <div key={s.n} style={{ display:'grid', gridTemplateColumns:'80px 1fr 140px', gap:24, alignItems:'flex-start', position:'relative' }}>
                  <div style={{
                    width:80, height:80, borderRadius:12,
                    background:'linear-gradient(135deg,#E8500A,#C83C00)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontFamily:'Barlow', fontWeight:700, fontSize:28, color:'#fff', letterSpacing:'-0.02em',
                    boxShadow:'0 8px 24px rgba(232,80,10,0.25)', flexShrink:0,
                    position:'relative', zIndex:1,
                  }}>{s.n}</div>
                  <div style={{
                    background:'#112240', border:'1px solid #2A4A75', borderRadius:12,
                    padding:28, transition:'border-color 200ms',
                  }}
                    onMouseEnter={e => e.currentTarget.style.borderColor='#E8500A'}
                    onMouseLeave={e => e.currentTarget.style.borderColor='#2A4A75'}
                  >
                    <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:24, margin:0, marginBottom:8, color:'#fff', letterSpacing:'-0.015em' }}>{s.t}</h3>
                    <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0 }}>{s.d}</p>
                  </div>
                  <div style={{
                    fontFamily:'JetBrains Mono, monospace', fontSize:12, color:'#E8500A', letterSpacing:'0.08em',
                    paddingTop:28, textAlign:'right',
                  }}>{s.time}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Compliance principles */}
      <section style={{ padding:'100px 32px', background:'#112240' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:56 }}>
            <Eyebrow style={{ marginBottom:20 }}>Operating principles</Eyebrow>
            <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:56, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
              Four rules we never bend.
            </h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16 }}>
            {[
              { t:'One at a time', d:'A single active engagement. Every crew member on your project only.' },
              { t:'Compliance first', d:'No flight without filings. No shortcut paths. No exceptions, ever.' },
              { t:'15% reserved', d:'Public service messaging capacity held before commercial slots open.' },
              { t:'Documented', d:'Every minute logged. Every log shipped with the final report.' },
            ].map(p => (
              <div key={p.t} style={{ borderTop:'2px solid #E8500A', paddingTop:20 }}>
                <h4 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:22, margin:0, marginBottom:10, color:'#fff' }}>{p.t}</h4>
                <p style={{ color:'#A8B8CC', fontSize:14, lineHeight:1.6, margin:0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onNav={onNav}/>
    </div>
  );
};

/* =================================================================
   PRICING
================================================================= */
const PricingPage = ({ onNav }) => {
  const [billing, setBilling] = useStateP('project');
  const plans = [
    {
      t:'Starter', sub:'Single activation',
      p_project:'$24k', p_q:'—',
      d:'Short-run activation up to 60 drones, single night.',
      inc:['Up to 60 drones','One 90s sequence','Single venue night','Social-ready 1080p edits','Engagement summary'],
      cta:'Request starter scope',
    },
    {
      t:'Signature', sub:'Most popular',
      p_project:'$72k', p_q:'$198k',
      d:'Full-production activation — up to 250 drones, multi-act narrative.',
      inc:['Up to 250 drones','Multi-act sequence','Rehearsal + dry run','4K social + 8K master','Foot-traffic report','Dedicated producer'],
      cta:'Request signature scope',
      featured: true,
    },
    {
      t:'Flagship', sub:'Season retainer',
      p_project:'—', p_q:'$420k',
      d:'Multi-window season retainer with priority scheduling and reserved crew.',
      inc:['Up to 500 drones','Quarterly windows','Reserved flight crew','Custom choreography library','Third-party impression audit','Executive QBR'],
      cta:'Talk to sales',
    },
  ];
  return (
    <div>
      <PageHeader
        eyebrow="Pricing"
        title="Transparent. Scoped. No surprises."
        subtitle="Campaigns are priced by drone count, show complexity, and on-site hours. Below are our reference scopes — every engagement gets a written fixed quote after the scope call."
      />

      <section style={{ padding:'48px 32px 100px', background:'#0A1628' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          {/* Billing toggle */}
          <div style={{ display:'flex', justifyContent:'center', marginBottom:40 }}>
            <div style={{
              display:'inline-flex', padding:4, background:'#112240',
              border:'1px solid #2A4A75', borderRadius:999,
            }}>
              {[['project','Per project'],['quarter','Quarterly retainer']].map(([id,lbl]) => (
                <button key={id} onClick={() => setBilling(id)} style={{
                  padding:'10px 22px', borderRadius:999, border:'none', cursor:'pointer',
                  background: billing===id ? '#E8500A' : 'transparent',
                  color: billing===id ? '#fff' : '#A8B8CC',
                  fontFamily:'Inter', fontSize:14, fontWeight:600, letterSpacing:'0.02em',
                  transition:'all 200ms',
                }}>{lbl}</button>
              ))}
            </div>
          </div>

          {/* Plans */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }}>
            {plans.map(pl => {
              const price = billing==='project' ? pl.p_project : pl.p_q;
              return (
                <div key={pl.t} style={{
                  background: pl.featured ? '#1E3A5F' : '#112240',
                  border: pl.featured ? '1.5px solid #E8500A' : '1px solid #2A4A75',
                  borderRadius:12, padding:36, position:'relative',
                  display:'flex', flexDirection:'column', gap:24,
                  boxShadow: pl.featured ? '0 0 40px rgba(232,80,10,0.15)' : 'none',
                }}>
                  {pl.featured && (
                    <div style={{
                      position:'absolute', top:-12, left:28,
                      background:'#E8500A', color:'#fff',
                      fontFamily:'Inter', fontSize:11, fontWeight:600, letterSpacing:'0.14em',
                      padding:'5px 14px', borderRadius:4, whiteSpace:'nowrap',
                    }}>MOST POPULAR</div>
                  )}
                  <div>
                    <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:28, letterSpacing:'-0.02em', margin:0, color:'#fff' }}>{pl.t}</h3>
                    <div style={{ color:'#A8B8CC', fontSize:13, marginTop:4, letterSpacing:'0.04em', textTransform:'uppercase', fontWeight:500 }}>{pl.sub}</div>
                  </div>
                  <div>
                    <div style={{ display:'flex', alignItems:'baseline', gap:6 }}>
                      <span style={{ fontFamily:'Barlow', fontWeight:700, fontSize:56, color:'#fff', letterSpacing:'-0.03em', lineHeight:1 }}>{price}</span>
                      {price !== '—' && (
                        <span style={{ color:'#A8B8CC', fontSize:14 }}>{billing==='project'?'starting':'/ quarter'}</span>
                      )}
                    </div>
                    {price === '—' && <div style={{ color:'#6B7D94', fontSize:13, marginTop:4 }}>Not available on this billing</div>}
                  </div>
                  <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0, minHeight:68 }}>{pl.d}</p>
                  <div style={{ borderTop:'1px solid #2A4A75' }}/>
                  <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12, flex:1 }}>
                    {pl.inc.map(f => (
                      <li key={f} style={{ display:'flex', alignItems:'flex-start', gap:10, color:'#fff', fontSize:14, lineHeight:1.5 }}>
                        <span style={{ color:'#E8500A', marginTop:2, flexShrink:0 }}><Icon name="check" size={16} stroke={2.5}/></span>
                        {f}
                      </li>
                    ))}
                  </ul>
                  <Button variant={pl.featured?'primary':'secondary'} fullWidth icon="arrow" onClick={()=>onNav('contact')}>{pl.cta}</Button>
                </div>
              );
            })}
          </div>

          {/* Footnote */}
          <div style={{
            marginTop:40, padding:'20px 28px', background:'#112240',
            border:'1px solid #2A4A75', borderRadius:12,
            display:'flex', alignItems:'center', gap:20, justifyContent:'space-between', flexWrap:'wrap',
          }}>
            <div style={{ display:'flex', alignItems:'center', gap:14 }}>
              <div style={{ color:'#E8500A' }}><Icon name="shield" size={22}/></div>
              <div>
                <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:17, color:'#fff' }}>Prices include full compliance</div>
                <div style={{ color:'#A8B8CC', fontSize:14 }}>FAA filings, venue approvals, and $10M liability coverage are never priced separately.</div>
              </div>
            </div>
            <Button variant="ghost" onClick={()=>onNav('faq')}>See pricing FAQ</Button>
          </div>
        </div>
      </section>

      {/* Feature comparison table */}
      <section style={{ padding:'100px 32px', background:'#112240' }}>
        <div style={{ maxWidth:1080, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:48 }}>
            <Eyebrow style={{ marginBottom:20 }}>Compare plans</Eyebrow>
            <h2 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:48, lineHeight:1.05, letterSpacing:'-0.025em', margin:0, color:'#fff' }}>
              The full breakdown.
            </h2>
          </div>
          <div style={{ background:'#1E3A5F', border:'1px solid #2A4A75', borderRadius:12, overflow:'hidden' }}>
            {[
              ['Max drone count', '60', '250', '500'],
              ['Rehearsal / dry run', false, true, true],
              ['Custom choreography', 'Library', 'Custom', 'Custom + reusable'],
              ['Social-ready edits (48h)', true, true, true],
              ['8K master', false, true, true],
              ['Foot-traffic report', false, true, true],
              ['Dedicated producer', false, true, true],
              ['Priority scheduling', false, false, true],
              ['Third-party audit', false, false, true],
            ].map((row, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1fr',
                padding:'16px 28px', gap:16,
                borderTop: i===0 ? 'none' : '1px solid #2A4A75',
                background: i===0 ? '#112240' : 'transparent',
                alignItems:'center',
              }}>
                <div style={{ color:'#fff', fontSize:15, fontWeight: i===0 ? 600 : 400, fontFamily:'Inter' }}>
                  {i===0 ? 'Feature' : row[0]}
                </div>
                {row.slice(1).map((v, j) => (
                  <div key={j} style={{ color:'#fff', fontSize:14, fontFamily:'Inter' }}>
                    {v === true ? <span style={{color:'#E8500A'}}><Icon name="check" size={18} stroke={2.5}/></span>
                     : v === false ? <span style={{color:'#6B7D94'}}>—</span>
                     : v}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand onNav={onNav}/>
    </div>
  );
};

/* =================================================================
   CONTACT
================================================================= */
const ContactPage = ({ onNav }) => {
  const [sent, setSent] = useStateP(false);
  const [form, setForm] = useStateP({ name:'', brand:'', email:'', window:'', type:'location', message:'' });
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const field = (label, el) => (
    <div>
      <label style={{ display:'block', fontFamily:'Inter', fontSize:13, fontWeight:500, marginBottom:8, color:'#fff' }}>{label}</label>
      {el}
    </div>
  );
  const input = (key, placeholder, type='text') => (
    <input type={type} value={form[key]} placeholder={placeholder} onChange={e => update(key, e.target.value)}
      style={{
        width:'100%', boxSizing:'border-box',
        background:'#0A1628', border:'1px solid #2A4A75', borderRadius:6,
        padding:'12px 14px', color:'#fff', fontFamily:'Inter', fontSize:14, outline:'none',
        transition:'border-color 200ms',
      }}
      onFocus={e => e.target.style.borderColor='#E8500A'}
      onBlur={e => e.target.style.borderColor='#2A4A75'}
    />
  );
  return (
    <div>
      <PageHeader
        eyebrow="Contact"
        title="Let's plan a mission."
        subtitle="Tell us about your venue, timing window, and the engagement you want. We reply within one business day."
      />

      <section style={{ padding:'60px 32px 120px', background:'#0A1628' }}>
        <div style={{ maxWidth:1180, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'flex-start' }}>
          {/* Info rail */}
          <div>
            <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
              {[
                { icon:'mappin', k:'Santa Monica, California', v:'1520 Ocean Ave · Suite 304' },
                { icon:'mail',   k:'info@brightmediausa.com\n',      v:'For scope + proposal requests' },
                { icon:'phone',  k:'+1 (310) 430 8467',          v:'Mon–Fri · 9am–6pm PT' },
                { icon:'shield', k:'Operator #BM-107-2024',      v:'FAA Part 107 Certified' },
              ].map(row => (
                <div key={row.k} style={{ display:'flex', gap:16, alignItems:'flex-start' }}>
                  <div style={{
                    width:44, height:44, borderRadius:10, flexShrink:0,
                    background:'rgba(232,80,10,0.12)', color:'#E8500A',
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}>
                    <Icon name={row.icon} size={20}/>
                  </div>
                  <div>
                    <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:17, color:'#fff' }}>{row.k}</div>
                    <div style={{ color:'#A8B8CC', fontSize:14, marginTop:2 }}>{row.v}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop:40, padding:24, background:'#112240',
              border:'1px solid #2A4A75', borderRadius:12,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10, color:'#4CC38A', fontSize:12, fontWeight:600, letterSpacing:'0.12em', textTransform:'uppercase' }}>
                <span style={{ width:8, height:8, borderRadius:999, background:'#4CC38A' }}/>
                Accepting summer 2026 bookings
              </div>
              <p style={{ color:'#A8B8CC', fontSize:14, lineHeight:1.7, margin:0 }}>
                June window is 40% booked. July and August have availability. September books 60+ days out.
              </p>
            </div>
          </div>

          {/* Form */}
          <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{
            background:'#1E3A5F', borderRadius:16, padding:40, border:'1px solid #2A4A75',
            display:'flex', flexDirection:'column', gap:20,
          }}>
            {sent ? (
              <div style={{ padding:'40px 0', textAlign:'center' }}>
                <div style={{
                  width:72, height:72, borderRadius:999, margin:'0 auto 20px',
                  background:'rgba(76,195,138,0.15)', color:'#4CC38A',
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}>
                  <Icon name="check" size={36} stroke={2.5}/>
                </div>
                <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:28, marginBottom:8, color:'#fff', letterSpacing:'-0.02em' }}>Mission received.</div>
                <p style={{ color:'#A8B8CC', margin:0, fontSize:15 }}>We'll be in touch within one business day.</p>
                <Button variant="ghost" onClick={()=>setSent(false)} size="sm">Send another</Button>
              </div>
            ) : (
              <>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  {field('Your name', input('name','Jamie Chen'))}
                  {field('Venue or brand', input('brand','The Forum'))}
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                  {field('Email', input('email','jamie@forum.la','email'))}
                  {field('Target window', input('window','Aug 2026'))}
                </div>
                {field('Engagement type',
                  <div style={{ display:'flex', gap:8 }}>
                    {[['location','Location'],['contract','Contract'],['outsource','Outsource']].map(([id,lbl]) => (
                      <button key={id} type="button" onClick={()=>update('type',id)} style={{
                        flex:1, padding:'10px 16px', borderRadius:6, cursor:'pointer',
                        background: form.type===id ? 'rgba(232,80,10,0.12)' : 'transparent',
                        border:'1.5px solid ' + (form.type===id ? '#E8500A' : '#2A4A75'),
                        color: form.type===id ? '#E8500A' : '#A8B8CC',
                        fontFamily:'Inter', fontSize:14, fontWeight:600, letterSpacing:'0.02em',
                        transition:'all 200ms',
                      }}>{lbl}</button>
                    ))}
                  </div>
                )}
                {field('What do you need?',
                  <textarea value={form.message} onChange={e=>update('message',e.target.value)}
                    placeholder="We're hosting a venue re-opening in August and want an aerial sequence over the plaza during the pre-show window."
                    style={{
                      width:'100%', boxSizing:'border-box', minHeight:120,
                      background:'#0A1628', border:'1px solid #2A4A75', borderRadius:6,
                      padding:'12px 14px', color:'#fff', fontFamily:'Inter', fontSize:14,
                      outline:'none', resize:'vertical', lineHeight:1.5,
                    }}
                    onFocus={e => e.target.style.borderColor='#E8500A'}
                    onBlur={e => e.target.style.borderColor='#2A4A75'}
                  />
                )}
                <Button variant="primary" icon="arrow">Send message</Button>
                <div style={{ fontSize:12, color:'#6B7D94', textAlign:'center', marginTop:-4 }}>
                  By submitting, you agree to our privacy policy. No marketing email, ever.
                </div>
              </>
            )}
          </form>
        </div>
      </section>
    </div>
  );
};

/* =================================================================
   FAQ
================================================================= */
const FAQPage = ({ onNav }) => {
  const groups = [
    {
      cat:'Operations',
      items:[
        { q:'What regulations does Bright Media operate under?', a:'We operate under FAA Part 107, all applicable state regulations, and local municipal codes. Every flight includes a filed operations plan and, where required, LAANC authorization or waiver approval. We hold active 107.29 (night), 107.35 (multi-drone), and 107.39 (over-people) waivers.' },
        { q:'How many projects do you run at once?', a:'One. The full team is assigned to a single project at a time. This is a compliance-first decision — concurrent operations multiply the surface area for error, and we\'d rather turn down work than compromise the standard.' },
        { q:'Do you operate outside of California?', a:'Yes. We run campaigns nationwide. Regulatory overhead varies by state and municipality; we scope that into every out-of-region proposal. Contact us with your target market and we will scope accordingly.' },
        { q:'What happens if weather cancels the flight?', a:'We maintain a primary and two alternate windows on every engagement. If all three are called, the engagement is rebooked at no additional cost. If client changes force a reschedule within 14 days, a rebook fee applies — documented in the proposal.' },
      ],
    },
    {
      cat:'Engagement',
      items:[
        { q:'What is the public messaging reserve?', a:'A percentage of our total display capacity is held for local authorities and public service messaging before being offered to commercial advertisers. We publish the reserve rate in every engagement; the floor is 15%.' },
        { q:'How is engagement measured?', a:'Each campaign window is reported against impression counts, social reach across major platforms, and — for venue activations — foot traffic lift. Flagship tier includes a third-party impression audit.' },
        { q:'How long does a typical engagement take?', a:'From scope call to mission day is typically 6–10 weeks. The pinch points are FAA waiver timing and venue approvals, both of which we begin in parallel with creative pre-production.' },
      ],
    },
    {
      cat:'Pricing & billing',
      items:[
        { q:'Are FAA filings and insurance included?', a:'Yes. All compliance filings, venue approvals, and the $10M liability certificate are included in every tier. They are never priced separately.' },
        { q:'Do you offer payment plans?', a:'Standard terms are 40% on kickoff and 60% on delivery. Quarterly retainers bill on the first of each quarter. Custom terms available for Flagship tier.' },
        { q:'Is pricing negotiable?', a:'Tier pricing is fixed, but scope is flexible. We routinely trim scope to hit a target budget. We will not reduce compliance coverage or crew count to hit a number.' },
      ],
    },
  ];
  const [open, setOpen] = useStateP('0-0');
  return (
    <div>
      <PageHeader
        eyebrow="FAQs"
        title="Everything you'd ask on a first call."
        subtitle="If you don't see your question here, mail info@brightmediausa.com\n or book a scope call. Typical reply time is one business day."
      />

      <section style={{ padding:'64px 32px 120px', background:'#0A1628' }}>
        <div style={{ maxWidth:960, margin:'0 auto', display:'flex', flexDirection:'column', gap:56 }}>
          {groups.map((g, gi) => (
            <div key={g.cat}>
              <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:24 }}>
                <div style={{
                  fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'#E8500A', letterSpacing:'0.08em',
                }}>0{gi+1}</div>
                <div style={{ flex:1, height:1, background:'#2A4A75' }}/>
                <div style={{ fontFamily:'Barlow', fontWeight:700, fontSize:24, color:'#fff', letterSpacing:'-0.015em' }}>{g.cat}</div>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {g.items.map((it, i) => {
                  const key = `${gi}-${i}`;
                  const isOpen = open === key;
                  return (
                    <div key={key} style={{
                      background: isOpen ? '#1E3A5F' : '#112240',
                      border:'1px solid ' + (isOpen ? '#E8500A' : '#2A4A75'),
                      borderRadius:10, overflow:'hidden', transition:'all 200ms',
                    }}>
                      <button onClick={() => setOpen(isOpen ? null : key)} style={{
                        width:'100%', textAlign:'left', padding:'22px 26px',
                        background:'transparent', border:'none', color:'#fff',
                        display:'flex', justifyContent:'space-between', alignItems:'center', gap:20,
                        cursor:'pointer', fontFamily:'Barlow', fontWeight:700, fontSize:19,
                        letterSpacing:'-0.015em',
                      }}>
                        <span>{it.q}</span>
                        <span style={{
                          width:32, height:32, borderRadius:999, flexShrink:0,
                          background: isOpen ? '#E8500A' : 'transparent',
                          border:'1.5px solid #E8500A', color: isOpen ? '#fff' : '#E8500A',
                          display:'inline-flex', alignItems:'center', justifyContent:'center',
                          transition:'all 200ms',
                        }}>
                          <Icon name={isOpen ? 'minus' : 'plus'} size={16} stroke={2.5}/>
                        </span>
                      </button>
                      {isOpen && (
                        <div style={{ padding:'0 26px 26px', color:'#A8B8CC', fontSize:15, lineHeight:1.7 }}>{it.a}</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))}

          {/* Still have questions */}
          <div style={{
            marginTop: 20, padding:'40px 40px', borderRadius:16,
            background:'linear-gradient(135deg, #1E3A5F 0%, #112240 100%)',
            border:'1px solid #2A4A75',
            display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'center',
          }}>
            <div>
              <h3 style={{ fontFamily:'Barlow', fontWeight:700, fontSize:28, margin:0, marginBottom:8, color:'#fff', letterSpacing:'-0.02em' }}>
                Still have questions?
              </h3>
              <p style={{ color:'#A8B8CC', fontSize:15, lineHeight:1.7, margin:0 }}>
                Book a 30-minute scope call. We'll pull the airspace data live while we talk.
              </p>
            </div>
            <div style={{ display:'flex', gap:12 }}>
              <Button variant="secondary" onClick={()=>onNav('contact')}>Email us</Button>
              <Button variant="primary" icon="arrow" onClick={()=>onNav('contact')}>Book a scope call</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { UASPage, ServicesPage, HowPage, PricingPage, ContactPage, FAQPage });