// Commercial hero, use cases, case study, how it works, AI, service areas, FAQ, final CTA, footer

function CommercialHero({ onQuote }){
  return (
    <section id="commercial" style={{position:'relative',minHeight:'90vh',overflow:'hidden'}}>
      <VideoBg src="public/video/pl-mall.mp4" />
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(10,10,10,0.7) 0%,rgba(10,10,10,0.4) 40%,rgba(10,10,10,0.95) 100%)'}}/>
      <div className="grain"/>
      <div style={{position:'relative',zIndex:2,padding:'140px 64px',maxWidth:1600,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:18}}>COMMERCIAL</div>
        <ChromeTitle size={'clamp(48px,8vw,112px)'}>Your property. On display.</ChromeTitle>
        <div style={{marginTop:14}}><RedTitle size={'clamp(24px,3.5vw,48px)'}>Permanent lighting for commercial exteriors.</RedTitle></div>
        <p style={{maxWidth:680,marginTop:28,fontSize:19,color:'var(--thraxel-light-grey)'}}>Storefronts, shopping plazas, restaurants, dealerships, hotels, office parks. Architectural RGBWW lighting that turns your property into a 24/7 advertisement. Schedule game day colors, holiday themes, brand-aligned ambient. No seasonal install crews. No tangled cords. One system, fully controllable from your phone.</p>
        <div style={{marginTop:36}}>
          <button className="btn-red" onClick={()=>onQuote('commercial')}>Request Commercial Quote <Icons.arrow /></button>
        </div>
      </div>
    </section>
  );
}

const COMM_USE_CASES = [
  { title:'Concerts & Live Venues', cap:'Stage washes · live cues · band lighting', img:'public/img/usecase-venue.png' },
  { title:'Restaurants & Hospitality', cap:'Patio · facade · seasonal accent', img:'public/img/usecase-pavilion.png' },
  { title:'Hotels & Resorts', cap:'24/7 architectural ambient + event modes', img:'public/img/photo-pool.jpg' },
  { title:'Railbikes & Rail Tourism', cap:'Holiday tunnels · evening rides · sellout drivers', placeholder:'tunnel', href:'Railbike Lighting.html' },
  { title:'Outdoor Recreation', cap:'Campgrounds · ziplines · ropes courses · mini golf', placeholder:'outdoor' },
  { title:'Showrooms & Gaming Lounges', cap:'Brand-aligned color on demand', img:'public/img/usecase-gameroom.png' },
  { title:'Office Parks & Corporate', cap:'Wayfinding · security · brand accent', img:'public/img/usecase-park.png' },
  { title:'QSR & Drive-Thru', cap:'24/7 brand presence · night visibility', img:'public/img/photo-dq.jpg' },
];

function PlaceholderArt({ kind }){
  if (kind === 'tunnel'){
    return (
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <defs>
          <radialGradient id="ph-tn" cx="0.5" cy="0.45" r="0.5">
            <stop offset="0%" stopColor="#C8102E" stopOpacity="0.95"/>
            <stop offset="55%" stopColor="#8B0000" stopOpacity="0.45"/>
            <stop offset="100%" stopColor="#000" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="ph-rail" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#3a3a40" stopOpacity="0"/>
            <stop offset="100%" stopColor="#9a9a9f" stopOpacity="1"/>
          </linearGradient>
        </defs>
        <rect width="400" height="300" fill="#0a0608"/>
        <ellipse cx="200" cy="135" rx="95" ry="70" fill="url(#ph-tn)"/>
        <path d="M 158 135 L 70 300 L 95 300 L 188 135 Z" fill="url(#ph-rail)"/>
        <path d="M 242 135 L 330 300 L 305 300 L 212 135 Z" fill="url(#ph-rail)"/>
        {[...Array(7)].map((_,i)=>(<circle key={i} cx={140+i*20} cy={92-Math.abs(i-3)*4} r="2.6" fill={['#FFB347','#C8102E','#FFFFFF','#3FB950','#C8102E','#FFB347','#FFFFFF'][i]}/>))}
      </svg>
    );
  }
  // outdoor
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
      <defs>
        <linearGradient id="ph-sky" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#1a0a14"/>
          <stop offset="100%" stopColor="#0a0a0a"/>
        </linearGradient>
        <radialGradient id="ph-glow" cx="0.5" cy="0.7" r="0.5">
          <stop offset="0%" stopColor="#FFB347" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="#000" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="400" height="300" fill="url(#ph-sky)"/>
      <rect width="400" height="300" fill="url(#ph-glow)"/>
      {/* trees silhouette */}
      <path d="M 0 230 L 30 180 L 50 200 L 70 160 L 95 200 L 115 175 L 140 210 L 165 180 L 190 215 L 220 175 L 250 210 L 280 180 L 310 215 L 340 185 L 370 210 L 400 195 L 400 300 L 0 300 Z" fill="#050505"/>
      {/* string lights arc */}
      <path d="M 20 100 Q 200 60 380 100" stroke="#2a2a2e" strokeWidth="1" fill="none"/>
      {[...Array(11)].map((_,i)=>{
        const t=i/10; const x=20+360*t; const y=100-Math.sin(t*Math.PI)*40;
        const c=['#FFB347','#C8102E','#FFFFFF','#FFB347','#3FB950','#FFFFFF','#C8102E','#FFB347','#FFFFFF','#3FB950','#C8102E'][i];
        return <circle key={i} cx={x} cy={y+4} r="3" fill={c}/>;
      })}
    </svg>
  );
}

function CommUseCases(){
  return (
    <section style={{padding:'120px 64px',background:'var(--thraxel-canvas)'}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:18}}>COMMERCIAL APPLICATIONS</div>
        <ChromeTitle size={'clamp(36px,5.5vw,76px)'}>If it's outside, we light it.</ChromeTitle>
        <p style={{maxWidth:720,marginTop:18,color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.55}}>
          A non-exhaustive list. If your customers spend time outdoors after dark — or could — Thraxel turns the venue itself into the attraction.
        </p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginTop:48}} className="cu-grid">
          {COMM_USE_CASES.map((c,i)=>(
            <a key={i} href={c.href || '#'} onClick={e=>{ if(!c.href) e.preventDefault(); }} style={{position:'relative',aspectRatio:'4/3',overflow:'hidden',border:'1px solid #2a2a2e',background:'#0a0a0a',cursor: c.href ? 'pointer' : 'default', display:'block', textDecoration:'none'}}>
              {c.img ? (
                <img src={c.img} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transition:'transform .5s ease'}} onMouseEnter={e=>e.currentTarget.style.transform='scale(1.05)'} onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
              ) : (
                <PlaceholderArt kind={c.placeholder}/>
              )}
              <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 40%,rgba(10,10,10,0.95))'}}/>
              {c.href && (
                <div style={{position:'absolute',top:14,right:14,padding:'5px 10px',background:'rgba(200,16,46,0.92)',color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:9,letterSpacing:'0.18em'}}>CASE STUDY ↗</div>
              )}
              <div style={{position:'absolute',left:20,right:20,bottom:20}}>
                <div className="chrome-text" style={{fontSize:'clamp(16px,1.6vw,22px)',letterSpacing:'0.04em',textTransform:'uppercase'}}>{c.title}</div>
                <div style={{color:'var(--thraxel-light-grey)',fontSize:13,marginTop:4}}>{c.cap}</div>
              </div>
            </a>
          ))}
        </div>
        <style>{`@media (max-width:1100px){.cu-grid{grid-template-columns:repeat(2,1fr)!important}}@media (max-width:600px){.cu-grid{grid-template-columns:1fr!important}}`}</style>
      </div>
    </section>
  );
}

function CommCaseStudy(){
  return (
    <section style={{padding:'120px 64px',background:'var(--thraxel-jet)'}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:14}}>FEATURED INSTALL</div>
        <ChromeTitle size={'clamp(36px,5vw,68px)'}>Shopping Plaza</ChromeTitle>
        <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:32,marginTop:40,alignItems:'stretch'}} className="cs-grid">
          <video autoPlay muted loop playsInline style={{width:'100%',aspectRatio:'16/9',objectFit:'cover',border:'1px solid #2a2a2e'}}>
            <source src="public/video/pl-mall.mp4" type="video/mp4"/>
          </video>
          <div style={{display:'grid',gridTemplateRows:'repeat(4,1fr)',gap:0,border:'1px solid #2a2a2e',background:'#0a0a0a'}}>
            {[
              ['LINEAR FOOTAGE','2,840 ft'],
              ['ZONES','14'],
              ['SCENE PROGRAMS','22'],
              ['LED COUNT','3,408 px'],
            ].map(([k,v])=>(
              <div key={k} style={{padding:'22px 24px',borderBottom:'1px solid #2a2a2e',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                <span className="label" style={{color:'var(--thraxel-light-grey)'}}>{k}</span>
                <span className="chrome-text" style={{fontSize:24}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width:900px){.cs-grid{grid-template-columns:1fr!important}}`}</style>
      </div>
    </section>
  );
}

const HIW = [
  { num:'01', title:'Consultation', body:'We come to you. Walk the property, listen to use cases, propose zones. No high-pressure sales pitch.', img:'public/img/photo-pool.jpg' },
  { num:'02', title:'Design', body:'We render your property in 3D with the proposed install. Color-matched track. Zone breakdown. Scene programs.', img:'public/img/photo-halloween.jpg' },
  { num:'03', title:'Install', body:'Permanent. Warrantied — 3-year parts, 1-year labor. App-controlled day one.', img:'public/img/photo-dock.jpg' },
];

function HowItWorks({ onQuote }){
  return (
    <section style={{background:'var(--thraxel-canvas)'}}>
      <div style={{padding:'100px 64px 40px',maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow" style={{marginBottom:14}}>PROCESS</div>
        <ChromeTitle size={'clamp(40px,5.5vw,76px)'}>How it works.</ChromeTitle>
      </div>
      {HIW.map((s,i)=>(
        <div key={s.num} style={{
          display:'grid',gridTemplateColumns: i%2 ? '1fr 1.2fr' : '1.2fr 1fr',
          minHeight:'70vh',borderTop:'1px solid #2a2a2e',
        }} className="hiw-row">
          <div style={{order: i%2 ? 2 : 1,position:'relative',overflow:'hidden',background:'#0a0a0a'}}>
            <img src={s.img} style={{width:'100%',height:'100%',objectFit:'cover',position:'absolute',inset:0}}/>
            <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg,transparent 60%,rgba(10,10,10,0.6))'}}/>
          </div>
          <div style={{order: i%2 ? 1 : 2,padding:'80px 64px',display:'flex',flexDirection:'column',justifyContent:'center'}}>
            <div className="chrome-text" style={{fontSize:120,letterSpacing:'0.04em',lineHeight:1}}>{s.num}</div>
            <div className="chrome-text" style={{fontSize:'clamp(32px,4vw,56px)',marginTop:8,letterSpacing:'0.04em',textTransform:'uppercase'}}>{s.title}</div>
            <p style={{color:'var(--thraxel-light-grey)',fontSize:18,marginTop:24,maxWidth:'40ch'}}>{s.body}</p>
            {(s.num==='01' || s.num==='03') && (
              <div style={{marginTop:32}}>
                <button className="btn-red" onClick={()=>onQuote('residential')}>
                  {s.num==='01' ? 'Start with a Quote' : 'Book Your Install'} <Icons.arrow/>
                </button>
              </div>
            )}
          </div>
        </div>
      ))}
      <style>{`@media (max-width:900px){.hiw-row{grid-template-columns:1fr!important}.hiw-row > *{order:unset!important}}`}</style>
    </section>
  );
}

function AISection(){
  return (
    <section id="ai-for-home-services" style={{padding:'140px 64px',background:'var(--thraxel-jet)',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',top:0,right:'-10%',width:'60%',height:'100%',opacity:0.06,pointerEvents:'none'}}>
        <LightningArc seed={9} opacity={0.5}/>
      </div>
      <div style={{maxWidth:1440,margin:'0 auto',position:'relative'}}>
        <div className="eyebrow-red" style={{marginBottom:14}}>BEYOND LIGHTING — THRAXEL AI HUB</div>
        <ChromeTitle size={'clamp(36px,5.5vw,84px)'}>One hub. Every tool. Zero admin.</ChromeTitle>
        <p style={{maxWidth:780,marginTop:24,color:'var(--thraxel-light-grey)',fontSize:19,lineHeight:1.55}}>
          We build AI automation hubs for home service businesses. Stop logging into 12 different apps. Stop paying for 12 different subscriptions. Talk to your business, deploy AI voice, spin up on-brand avatars, and put booking on autopilot — all from one place.
        </p>

        {/* Animated walkthrough video */}
        <div style={{marginTop:48}}>
          <AIWalkthrough />
        </div>

        {/* Outcomes grid below the video */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginTop:32}} className="ai-out-grid">
          {[
            ['Cut software stack 60–80%','Replace overlapping SaaS with one unified layer'],
            ['Talk to your business','Voice or chat — "what jobs are open this week?"'],
            ['AI voice answers 24/7','Inbound calls, forms, DMs — handled and triaged'],
            ['On-brand AI avatars','Custom voice & face for video replies, follow-ups, social'],
            ['Booking on autopilot','AI proposes, confirms, captures deposit, sends to calendar'],
            ['Watch-only mode','We run it. You review the daily summary.'],
          ].map(([t,d])=>(
            <div key={t} style={{padding:'16px 20px',border:'1px solid #2a2a2e',background:'#0a0a0a'}}>
              <div className="label" style={{color:'#fff',marginBottom:4}}>{t}</div>
              <div style={{color:'var(--thraxel-light-grey)',fontSize:13,lineHeight:1.45}}>{d}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,display:'flex',justifyContent:'center'}}>
          <a href="#" className="btn-red">Book an AI Audit <Icons.arrow /></a>
        </div>
        <style>{`@media (max-width:900px){.ai-out-grid{grid-template-columns:1fr!important}}`}</style>
      </div>
    </section>
  );
}

function ServiceAreas(){
  // PA 16xxx zip codes are concentrated in Western/Northwestern PA — Erie, Crawford, Mercer, Venango, Forest, Warren, Clarion, Jefferson, Elk, Cameron, Clearfield, Centre, Indiana, Armstrong, Butler, Lawrence, Beaver, Allegheny (parts).
  // We approximate with a dense cluster of dots in WPA region.
  const pulseDots = useMemo(()=>{
    const dots = [];
    // Center cluster around Western PA in the SVG viewport (PA roughly x:300-580, y:170-260 in our schematic)
    for (let i=0;i<48;i++){
      const cx = 320 + Math.random()*180;
      const cy = 175 + Math.random()*70;
      dots.push({x:cx,y:cy,delay:Math.random()*3,r:1.6+Math.random()*1.4});
    }
    return dots;
  },[]);

  const [hoverState, setHoverState] = useState(null);

  return (
    <section id="service-areas" style={{padding:'140px 64px',background:'var(--thraxel-canvas)',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,200,80,0.04), transparent 70%)',pointerEvents:'none'}}/>
      <div style={{maxWidth:1440,margin:'0 auto',position:'relative'}}>
        <div className="eyebrow" style={{marginBottom:14}}>SERVICE AREAS</div>
        <ChromeTitle size={'clamp(40px,5.5vw,84px)'}>Where we install.</ChromeTitle>
        <p style={{maxWidth:680,marginTop:20,color:'var(--thraxel-light-grey)',fontSize:19,lineHeight:1.55}}>
          Active coverage across <span style={{color:'#fff'}}>Pennsylvania, West Virginia, Ohio, Maryland</span>, and <span style={{color:'#fff'}}>New York</span>. Our primary install territory is Western PA — every zip starting <span style={{color:'#3aff7a',fontFamily:'Orbitron,sans-serif',fontWeight:800,letterSpacing:'0.1em'}}>16xxx</span> is in our daily route.
        </p>

        <div style={{position:'relative',marginTop:48,padding:0,border:'1px solid #2a2a2e',background:'linear-gradient(180deg,#080808,#0e0e10)',overflow:'hidden'}}>
          {/* horizon glow */}
          <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 70% 60% at 50% 60%, rgba(58,255,122,0.08), transparent 70%)',pointerEvents:'none'}}/>
          {/* grid */}
          <div style={{position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(58,255,122,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(58,255,122,0.04) 1px,transparent 1px)',backgroundSize:'40px 40px',pointerEvents:'none'}}/>

          <svg viewBox="0 0 800 480" style={{width:'100%',height:'auto',display:'block',position:'relative',zIndex:1,
            transform:'perspective(1400px) rotateX(8deg)',transformOrigin:'center 60%',
          }}>
            <defs>
              <radialGradient id="zipGlow" cx="50%" cy="50%">
                <stop offset="0" stopColor="#3aff7a" stopOpacity="1"/>
                <stop offset="0.4" stopColor="#3aff7a" stopOpacity="0.3"/>
                <stop offset="1" stopColor="#3aff7a" stopOpacity="0"/>
              </radialGradient>
              <linearGradient id="stateFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#1a1a1e" stopOpacity="0.85"/>
                <stop offset="1" stopColor="#0a0a0a" stopOpacity="0.6"/>
              </linearGradient>
              <linearGradient id="stateActive" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="rgba(200,16,46,0.18)"/>
                <stop offset="1" stopColor="rgba(200,16,46,0.05)"/>
              </linearGradient>
              <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="2"/>
                <feOffset dx="0" dy="3" result="off"/>
                <feComponentTransfer><feFuncA type="linear" slope="0.6"/></feComponentTransfer>
              </filter>
            </defs>

            {/* States — schematic 3D-extruded look */}
            {[
              { id:'NY', label:'NEW YORK', pts:'180,80 600,70 620,140 540,150 280,160 180,150', x:380, y:115 },
              { id:'PA', label:'PENNSYLVANIA', pts:'280,160 540,150 620,140 640,180 580,260 320,270 280,240', x:430, y:215, active:true },
              { id:'OH', label:'OHIO', pts:'140,170 280,160 280,240 200,310 130,290', x:200, y:245 },
              { id:'WV', label:'WEST VIRGINIA', pts:'200,310 320,270 380,330 340,400 240,400 180,360', x:280, y:355 },
              { id:'MD', label:'MARYLAND', pts:'320,270 580,260 600,300 380,330', x:480, y:295 },
            ].map(s=>{
              const isActive = s.active;
              return (
                <g key={s.id}
                  onMouseEnter={()=>setHoverState(s.id)}
                  onMouseLeave={()=>setHoverState(null)}
                  style={{cursor:'pointer'}}
                >
                  {/* shadow underneath */}
                  <polygon points={s.pts} fill="#000" opacity="0.7" transform="translate(2,4)"/>
                  {/* body */}
                  <polygon points={s.pts}
                    fill={isActive ? 'url(#stateActive)' : 'url(#stateFill)'}
                    stroke={isActive ? '#C8102E' : (hoverState===s.id ? '#5a5a62' : '#2a2a2e')}
                    strokeWidth={isActive ? '2' : '1.4'}
                  />
                  {/* label */}
                  <text x={s.x} y={s.y}
                    fontFamily="Orbitron, sans-serif" fontWeight="800"
                    fontSize={isActive?'14':'12'}
                    fill={isActive ? '#fff' : (hoverState===s.id ? '#cfcfd4' : '#5a5a62')}
                    letterSpacing="3" textAnchor="middle">{s.label}</text>
                </g>
              );
            })}

            {/* 16xxx zip code dots — green glow cluster in Western PA */}
            {pulseDots.map((d,i)=>(
              <g key={i}>
                <circle cx={d.x} cy={d.y} r="10" fill="url(#zipGlow)" opacity="0.45">
                  <animate attributeName="opacity" values="0.2;0.6;0.2" dur={`${2+d.delay}s`} repeatCount="indefinite"/>
                </circle>
                <circle cx={d.x} cy={d.y} r={d.r} fill="#3aff7a">
                  <animate attributeName="r" values={`${d.r};${d.r*1.4};${d.r}`} dur={`${1.8+d.delay}s`} repeatCount="indefinite"/>
                </circle>
              </g>
            ))}

            {/* Hub pin */}
            <g>
              <circle cx="410" cy="210" r="4" fill="#fff"/>
              <circle cx="410" cy="210" r="10" fill="none" stroke="#C8102E" strokeWidth="2">
                <animate attributeName="r" from="6" to="22" dur="1.6s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="1" to="0" dur="1.6s" repeatCount="indefinite"/>
              </circle>
            </g>

            {/* Hover tooltip */}
            {hoverState && (
              <g>
                <rect x="20" y="20" width="180" height="46" fill="#0a0a0a" stroke="#C8102E" strokeWidth="1"/>
                <text x="32" y="42" fontFamily="Orbitron, sans-serif" fontWeight="800" fontSize="11" fill="#fff" letterSpacing="2">
                  {hoverState === 'PA' ? 'PRIMARY · WESTERN PA' : `${hoverState} · ACTIVE COVERAGE`}
                </text>
                <text x="32" y="58" fontFamily="Inter, sans-serif" fontSize="10" fill="#9a9a9f">
                  {hoverState === 'PA' ? 'All 16xxx zip codes' : 'Daily install routes'}
                </text>
              </g>
            )}
          </svg>

          {/* Legend */}
          <div style={{display:'flex',gap:32,padding:'20px 32px',borderTop:'1px solid #2a2a2e',flexWrap:'wrap',color:'var(--thraxel-light-grey)',fontSize:12,fontFamily:'Orbitron,sans-serif',fontWeight:700,letterSpacing:'0.18em'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}><span style={{width:10,height:10,borderRadius:'50%',background:'#3aff7a',boxShadow:'0 0 12px #3aff7a'}}/> 16XXX ZIP — DAILY ROUTE</div>
            <div style={{display:'flex',alignItems:'center',gap:10}}><span style={{width:14,height:14,background:'rgba(200,16,46,0.3)',border:'2px solid #C8102E'}}/> PRIMARY TERRITORY</div>
            <div style={{display:'flex',alignItems:'center',gap:10}}><span style={{width:14,height:14,background:'#1a1a1e',border:'1px solid #2a2a2e'}}/> ACTIVE COVERAGE</div>
            <div style={{display:'flex',alignItems:'center',gap:10}}><span style={{width:8,height:8,borderRadius:'50%',background:'#fff'}}/> REGIONAL HUB</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  ["What's the difference between RGBWW and RGB?","RGBWW combines RGB color with a dedicated warm-white (2700K) diode. You get true ambient warm white when you want it, plus 16M colors when you want a show. RGB-only systems fake white by mixing — it always reads slightly off."],
  ["Energy cost — really only $52.80/year?","Yes — based on a 168-LED average install running 6 hours nightly at the regional kWh rate. RGBWW LEDs draw approximately 0.3W per pixel."],
  ['How does it hold up through harsh winters?','Marine-grade silicone, IP67 connectors, 16-gauge wire. Tested through ice load, road salt, and summer thunderstorms. 3-year parts warranty backs it.'],
  ['Smart home integration?','Alexa, Google Home, Apple HomeKit, and Control4. Scenes and zones are exposed as native devices.'],
  ['Install process?','Free consultation. 3D rendering of your property. Permanent install in 1–2 days for most homes. Full app onboarding day-of.'],
  ['Warranty?','3 years parts, 1 year labor. We match the industry on transparency.'],
  ['Financing?','Yes — 0% APR up to 24 months for qualifying applicants through our partner.'],
  ["HOA compliance?","The track is color-matched to your trim and tucks tight. By day, neighbors can't see it. We've passed every HOA we've worked in."],
  ["Commercial vs residential?","Different controllers, different warranty terms, different scheduling. Commercial systems get our property-management dashboard."],
  ["Maintenance?","Individually addressable means one bad LED doesn't kill the strip. Replacements ship same-day under warranty."],
];

function FAQ(){
  const [open,setOpen] = useState(0);
  return (
    <section style={{padding:'120px 64px',background:'var(--thraxel-jet)'}}>
      <div style={{maxWidth:1100,margin:'0 auto'}}>
        <div className="eyebrow" style={{marginBottom:14}}>FAQ</div>
        <ChromeTitle size={'clamp(36px,5vw,72px)'}>Questions, answered.</ChromeTitle>
        <div style={{marginTop:48,borderTop:'1px solid #2a2a2e'}}>
          {FAQS.map(([q,a],i)=>(
            <div key={i} style={{borderBottom:'1px solid #2a2a2e'}}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{
                width:'100%',padding:'24px 0',display:'flex',justifyContent:'space-between',alignItems:'center',gap:24,textAlign:'left',
              }}>
                <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:'clamp(15px,1.4vw,18px)',letterSpacing:'0.06em',textTransform:'uppercase',color:'#fff'}}>{q}</span>
                <span style={{
                  width:32,height:32,border:'1px solid #3a3a40',display:'flex',alignItems:'center',justifyContent:'center',
                  color: open===i ? 'var(--thraxel-red)' : 'var(--thraxel-light-grey)',
                  transform: open===i ? 'rotate(45deg)' : 'rotate(0)',
                  transition:'transform .2s, color .2s',
                  fontFamily:'Orbitron,sans-serif',fontWeight:700,
                  flexShrink:0,
                }}>+</span>
              </button>
              {open===i && (
                <div style={{padding:'0 0 24px',color:'var(--thraxel-light-grey)',fontSize:16,maxWidth:'70ch',lineHeight:1.65}}>{a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onQuote }){
  return (
    <section style={{padding:'140px 64px',position:'relative',overflow:'hidden'}}>
      <div className="smoke"/>
      <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(200,16,46,0.08), transparent 70%)',pointerEvents:'none'}}/>
      <div style={{maxWidth:1100,margin:'0 auto',textAlign:'center',position:'relative'}}>
        <ChromeTitle size={'clamp(48px,8vw,120px)'}>Ready to light it up?</ChromeTitle>
        <div style={{display:'flex',gap:16,marginTop:48,justifyContent:'center',flexWrap:'wrap'}}>
          <button className="btn-red" onClick={()=>onQuote('residential')}>Residential Quote <Icons.arrow /></button>
          <button className="btn-red" onClick={()=>onQuote('commercial')}>Commercial Quote <Icons.arrow /></button>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer style={{borderTop:'1px solid var(--thraxel-red)',background:'var(--thraxel-canvas)'}}>
      <div style={{padding:'72px 64px 32px',maxWidth:1440,margin:'0 auto'}}>
        <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',gap:48}} className="ft-grid">
          <div>
            <Wordmark size={28}/>
            <p style={{color:'var(--thraxel-light-grey)',fontSize:14,marginTop:18,maxWidth:'34ch'}}>Permanent outdoor RGBWW lighting. Architectural by day. Cinematic by night.</p>
            <div style={{marginTop:24,color:'var(--thraxel-light-grey)',fontSize:13,lineHeight:1.8}}>
              <a href="mailto:hq@thraxel.com" style={{color:'#fff'}}>hq@thraxel.com</a><br/>
              <a href="tel:7248594390" style={{color:'#fff'}}>724-859-4390</a>
            </div>
          </div>
          <div>
            <div className="label" style={{color:'#fff',marginBottom:14}}>Residential</div>
            {['Quote','Configurator','Use Cases','Gallery','FAQ'].map(l=>(
              <a key={l} href="#" style={{display:'block',color:'var(--thraxel-light-grey)',fontSize:14,padding:'4px 0'}}>{l}</a>
            ))}
          </div>
          <div>
            <div className="label" style={{color:'#fff',marginBottom:14}}>Commercial</div>
            {[['Quote','#'],['Industries','#commercial'],['Railbike Lighting','Railbike Lighting.html'],['Case Studies','#'],['Property Management','#']].map(([l,h])=>(
              <a key={l} href={h} style={{display:'block',color:'var(--thraxel-light-grey)',fontSize:14,padding:'4px 0'}}>{l}</a>
            ))}
          </div>
          <div>
            <div className="label" style={{color:'#fff',marginBottom:14}}>Service Areas</div>
            <div style={{color:'var(--thraxel-light-grey)',fontSize:14,lineHeight:1.9}}>Pennsylvania<br/>Maryland<br/>West Virginia<br/>Ohio</div>
            <div className="label" style={{color:'#fff',margin:'22px 0 10px'}}>Legal</div>
            <a href="Privacy Policy.html" style={{display:'block',color:'var(--thraxel-light-grey)',fontSize:14,padding:'4px 0'}}>Privacy Policy</a>
            <a href="Terms of Service.html" style={{display:'block',color:'var(--thraxel-light-grey)',fontSize:14,padding:'4px 0'}}>Terms of Service</a>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:48,paddingTop:24,borderTop:'1px solid #2a2a2e',color:'var(--thraxel-mid-grey)',fontSize:12,fontFamily:'Orbitron,sans-serif',letterSpacing:'0.16em',flexWrap:'wrap',gap:18}}>
          <span>© 2026 THRAXEL · ALL RIGHTS RESERVED</span>
          <a href="https://www.160glow.com" target="_blank" rel="noopener noreferrer" style={{
            color:'#e8e8eb',
            display:'inline-flex',alignItems:'center',gap:10,
            padding:'8px 14px',border:'1px solid #2a2a2e',
            transition:'border-color .15s ease, color .15s ease',
          }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--thraxel-red)';e.currentTarget.style.color='#fff'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='#2a2a2e';e.currentTarget.style.color='#e8e8eb'}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:'var(--thraxel-red)',boxShadow:'0 0 8px rgba(200,16,46,0.8)'}}/>
            CHRISTMAS LIGHTING SALES &amp; INSTALLS
            <span style={{fontSize:10,opacity:0.8}}>↗</span>
          </a>
          <span>UL · ETL · CUL CERTIFIED</span>
        </div>
      </div>
      <style>{`@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr!important}}`}</style>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────────
// Railbike teaser — sits below CommCaseStudy, links to dedicated page
function RailbikeTeaser(){
  return (
    <section style={{position:'relative',overflow:'hidden',background:'#000',borderTop:'1px solid #1a1a1a',borderBottom:'1px solid #1a1a1a'}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',minHeight:520}} className="rb-grid">
        <div style={{position:'relative',background:'#000',overflow:'hidden'}}>
          {/* Real T&Y field photo */}
          <img src="public/img/ty/town-overview-hillside.jpg" alt="Tracks & Yaks holiday lighting view" loading="lazy" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
          <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.85) 100%)'}}/>
          <div style={{position:'absolute',top:18,left:18,padding:'5px 10px',background:'rgba(200,16,46,0.92)',color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:9,letterSpacing:'0.18em'}}>NEW VERTICAL · CASE STUDY</div>
          <div style={{position:'absolute',bottom:18,left:18,fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.18em',color:'#e8e8eb',textShadow:'0 1px 8px rgba(0,0,0,0.8)'}}>TRACKS &amp; YAKS · FROSTBURG, MD &nbsp;·&nbsp; SCENIC RAIL RIDERS · NH</div>
        </div>
        <div style={{padding:'72px 64px',display:'flex',flexDirection:'column',justifyContent:'center',background:'var(--thraxel-canvas)'}} className="rb-copy">
          <div className="eyebrow-red" style={{marginBottom:18}}>RAILBIKE LIGHTING</div>
          <ChromeTitle size={'clamp(32px,3.6vw,56px)'}>Your off-season, lit up and sold out.</ChromeTitle>
          <p style={{color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.65,marginTop:20,maxWidth:'52ch'}}>
            Holiday and themed lighting turns a railbike operation into a year-round product. Tracks &amp; Yaks runs <strong style={{color:'#fff'}}>72-seat capacity tours, 3 trips a night</strong> at $30/seat — routinely sold out, pulling customers who'd never book a daytime ride: date nights, family Christmas traditions, corporate buy-outs, photographers.
          </p>
          <p style={{color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.65,marginTop:14,maxWidth:'52ch'}}>
            We've installed and taken down for <strong style={{color:'#fff'}}>Tracks &amp; Yaks</strong> in Frostburg, MD and <strong style={{color:'#fff'}}>Scenic Rail Riders</strong> in New Hampshire. Both saw their email lists grow, their off-season fill, and their towns claim something genuinely worth driving to.
          </p>
          <div style={{marginTop:32,display:'flex',gap:14,flexWrap:'wrap'}}>
            <a href="Railbike Lighting.html" className="btn-red">See the Portfolio <Icons.arrow/></a>
            <a href="Railbike Lighting.html#case-study" className="btn-ghost">Read the Case Study</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:900px){.rb-grid{grid-template-columns:1fr!important}.rb-copy{padding:48px 32px!important}}`}</style>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Holiday Lighting strip — gallery + Santa + paragraph
function HolidayStrip({ onQuote }){
  const [idx, setIdx] = useState(0);
  const slides = [
    { season:'CHRISTMAS', title:'C9 ridgelines · color-matched bows · synced soundtracks', tone:'#C8102E' },
    { season:'HALLOWEEN', title:'Purple/orange wash · strobe · pulse-to-thunder', tone:'#FFB347' },
    { season:'VALENTINE\'S', title:'Soft pinks · candle whites · slow breathe', tone:'#FF6B9D' },
    { season:'ST. PATTY\'S', title:'Triple-green chase · pub windows · facade flag', tone:'#3FB950' },
    { season:'4TH OF JULY', title:'Red/white/blue chase · timed to fireworks', tone:'#4A90E2' },
    { season:'BAR POPUPS', title:'Theme nights, weekly resets, full RGBWW palette', tone:'#9F4DFF' },
  ];
  const next = ()=>setIdx(i=>(i+1)%slides.length);
  const prev = ()=>setIdx(i=>(i-1+slides.length)%slides.length);
  const s = slides[idx];

  return (
    <section style={{position:'relative',padding:'120px 64px',background:'#0a0a0a',borderTop:'1px solid #1a1a1a',overflow:'hidden'}}>
      {/* ambient glow keyed to slide */}
      <div style={{position:'absolute',inset:0,background:`radial-gradient(ellipse 70% 50% at 75% 40%, ${s.tone}22, transparent 65%)`,pointerEvents:'none',transition:'background .4s ease'}}/>
      <div style={{maxWidth:1440,margin:'0 auto',display:'grid',gridTemplateColumns:'1.05fr 1fr',gap:64,alignItems:'center',position:'relative'}} className="hl-grid">
        {/* LEFT: copy + santa */}
        <div>
          <div className="eyebrow-red" style={{marginBottom:18}}>HOLIDAY &amp; SEASONAL</div>
          <ChromeTitle size={'clamp(36px,4.4vw,68px)'}>Every holiday. One install.</ChromeTitle>
          <p style={{color:'var(--thraxel-light-grey)',fontSize:17,lineHeight:1.6,marginTop:22,maxWidth:'52ch'}}>
            Christmas ridgelines, Halloween pulses, Valentine's pinks, St. Patty's triple-green chases, 4th of July fireworks-sync — same fixtures, swap a preset. Bars and venues running themed popup nights: this is the whole job done in software.
          </p>
          <div style={{marginTop:28,display:'flex',gap:14,flexWrap:'wrap'}}>
            <button className="btn-red" onClick={()=>onQuote('residential')}>Residential Holiday <Icons.arrow/></button>
            <button className="btn-ghost" onClick={()=>onQuote('commercial')}>Bar / Venue Popups</button>
          </div>

          {/* Santa removed per user request */}
        </div>

        {/* RIGHT: gallery card */}
        <div>
          <div style={{position:'relative',aspectRatio:'4/5',border:'1px solid #2a2a2e',background:'#000',overflow:'hidden'}}>
            {/* placeholder visual — color wash + season name */}
            <div style={{position:'absolute',inset:0,transition:'background .4s ease',background:`
              radial-gradient(ellipse 80% 60% at 50% 35%, ${s.tone}55, transparent 65%),
              linear-gradient(180deg,#0a0a0a 0%,#000 100%)
            `}}/>
            {/* faux house silhouette with ridgeline lights */}
            <svg viewBox="0 0 400 500" style={{position:'absolute',inset:0,width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid slice">
              <path d="M 50 320 L 200 200 L 350 320 L 350 480 L 50 480 Z" fill="#0a0a0a" stroke="#1a1a1a" strokeWidth="1"/>
              {/* roof lights */}
              {[...Array(22)].map((_,i)=>{
                const t = i/21;
                const xL = 50 + (200-50)*t;
                const yL = 320 + (200-320)*t;
                const xR = 200 + (350-200)*t;
                const yR = 200 + (320-200)*t;
                return (
                  <g key={i}>
                    <circle cx={xL} cy={yL} r={3} fill={s.tone}>
                      <animate attributeName="opacity" values="0.4;1;0.4" dur={`${1.4 + (i%3)*0.3}s`} repeatCount="indefinite"/>
                    </circle>
                    <circle cx={xR} cy={yR} r={3} fill={s.tone}>
                      <animate attributeName="opacity" values="1;0.4;1" dur={`${1.4 + (i%3)*0.3}s`} repeatCount="indefinite"/>
                    </circle>
                  </g>
                );
              })}
              {/* windows */}
              <rect x="100" y="360" width="60" height="80" fill={s.tone} opacity="0.18"/>
              <rect x="240" y="360" width="60" height="80" fill={s.tone} opacity="0.18"/>
            </svg>
            <div style={{position:'absolute',top:18,left:18,padding:'5px 10px',background:'rgba(0,0,0,0.7)',backdropFilter:'blur(4px)',color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:10,letterSpacing:'0.22em'}}>{s.season}</div>
            <div style={{position:'absolute',left:0,right:0,bottom:0,padding:'24px 22px',background:'linear-gradient(180deg,transparent,rgba(0,0,0,0.92))'}}>
              <div className="chrome-text" style={{fontSize:18,letterSpacing:'0.04em'}}>{s.title}</div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:14}}>
                <div style={{display:'flex',gap:5}}>
                  {slides.map((_,i)=>(
                    <button key={i} onClick={()=>setIdx(i)} aria-label={`slide ${i+1}`} style={{width:i===idx?22:7,height:3,background:i===idx?s.tone:'#3a3a40',border:'none',padding:0,cursor:'pointer',transition:'all .3s ease'}}/>
                  ))}
                </div>
                <div style={{display:'flex',gap:6}}>
                  <button onClick={prev} aria-label="previous" style={{width:32,height:32,border:'1px solid #3a3a40',background:'rgba(0,0,0,0.6)',color:'#fff',cursor:'pointer',fontFamily:'Orbitron,sans-serif',fontSize:14}}>‹</button>
                  <button onClick={next} aria-label="next" style={{width:32,height:32,border:'1px solid #3a3a40',background:'rgba(0,0,0,0.6)',color:'#fff',cursor:'pointer',fontFamily:'Orbitron,sans-serif',fontSize:14}}>›</button>
                </div>
              </div>
            </div>
          </div>
          <div style={{marginTop:14,fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.2em',color:'var(--thraxel-mid-grey)',textAlign:'center'}}>SWIPE THROUGH HOLIDAY MODES · {idx+1} / {slides.length}</div>
        </div>
      </div>
      <style>{`@media (max-width:900px){.hl-grid{grid-template-columns:1fr!important;gap:48px!important}}`}</style>
    </section>
  );
}

Object.assign(window, { CommercialHero, CommUseCases, CommCaseStudy, HowItWorks, AISection, ServiceAreas, FAQ, FinalCTA, Footer, RailbikeTeaser, HolidayStrip });