// Numbers / Use Cases / Discreet / Smart Home / Work gallery

function NumbersSection(){
  const items = [
    { big:'$52.80', sub:'/year', cap:'Energy cost. 6 hours nightly. RGBWW efficiency tested across full season cycles.' },
    { big:'Year', sub:'Round', cap:'IP67 marine-grade silicone, weather-rated, salt-tested. The system stays — through winter, summer, every storm.' },
    { big:'1', sub:'Install. Every season.', cap:'No more cord chaos. No ladders in November. The system stays — the scenes change.' },
  ];
  return (
    <section style={{background:'var(--thraxel-jet)',padding:'120px 64px',position:'relative'}}>
      <div style={{position:'absolute',top:0,left:0,right:0,height:1,background:'linear-gradient(90deg,transparent,#3a3a40,transparent)'}}/>
      <div style={{maxWidth:1440,margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:48}} className="num-grid">
        {items.map((it,i)=>(
          <div key={i} style={{borderTop:'1px solid var(--thraxel-red)',paddingTop:32}}>
            <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:16,flexWrap:'wrap'}}>
              <ChromeTitle size={'clamp(48px,5.5vw,84px)'} as="div">{it.big}</ChromeTitle>
              <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:18,color:'var(--thraxel-light-grey)',letterSpacing:'0.12em',textTransform:'uppercase'}}>{it.sub}</span>
            </div>
            <p style={{color:'var(--thraxel-light-grey)',fontSize:16,maxWidth:'34ch'}}>{it.cap}</p>
          </div>
        ))}
      </div>
      <style>{`@media (max-width:900px){.num-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

const RES_USE_CASES = [
  { id:'home', title:'For Your Home', cap:'Eaves · soffits · architectural perimeter', img:'public/img/gallery/blue-house.jpg',
    body:'Permanent architectural lighting tucked under the eave. Invisible by day, full RGBWW + 2700K warm white by night. One system covers everyday curb appeal, holidays, game day, and every scene in between.' },
  { id:'indoor-pool', title:'For Your Pool House', cap:'Vaulted ceilings · pool houses · sunrooms', img:'public/img/photo-pool.jpg',
    body:'Architectural arches over pool enclosures and vaulted ceilings. Warm white by default, full RGBWW for parties. IP67 rated for high-humidity environments.' },
  { id:'dock', title:'For Your Boat & Dock', cap:'Marine-grade · pier mounts · waterline accent', video:'public/video/dock-lighting.mp4', poster:'public/img/photo-dock.jpg',
    body:'IP67 marine connectors, salt-spray rated. Pier-mount uplights, waterline accent reflections, slip courtesy lighting. Turns your dock into a destination after sunset — and makes the boat easier to find at 11pm.' },
  { id:'sxs', title:'For Your Side-by-Side', cap:'UTV · ATV · trail rigs', img:'public/img/gallery/213324.jpg',
    body:'Underbody, roll-cage, and rock-light kits for your side-by-side. App-controlled scenes synced to your home system, so the rig matches the house when it rolls into the driveway. Vibration-rated, mud-rated, hose-it-off serviceable.' },
  { id:'camper', title:'For Your Camper & RV', cap:'Awning · underglow · campsite ambient', img:'public/img/gallery/1.jpg',
    body:'Awning runs, underglow accent, and campsite ambient lighting that runs off the rig\'s 12V. Same app, same scenes — pull into camp and your site looks like home.' },
  { id:'holidays', title:'For Every Holiday', cap:'Christmas · Halloween · July 4th', img:'public/img/photo-halloween.jpg',
    body:'Preset library covers every major holiday plus user-defined. No untangling cords. No ladder in November. Set it once, swap scenes from your phone.' },
];

// Expandable use case card — click to expand inline
function UseCaseCard({ c, expanded, onToggle, onPlay }){
  return (
    <div style={{
      position:'relative', overflow:'hidden',
      border: expanded ? '1px solid var(--thraxel-red)' : '1px solid #2a2a2e',
      background:'#0a0a0a',
      transition:'all .35s cubic-bezier(0.6,0.05,0.2,1)',
      gridColumn: expanded ? 'span 4' : 'span 2',
      gridRow: expanded ? 'span 2' : 'span 1',
      minHeight: 280,
      cursor: 'pointer',
    }} onClick={()=> c.video ? onPlay(c.video) : onToggle()}>
      {/* Media */}
      <div style={{position:'absolute',inset:0}}>
        {c.video ? (
          <video autoPlay muted loop playsInline poster={c.poster} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}>
            <source src={c.video} type="video/mp4"/>
          </video>
        ) : (
          <img src={c.img} alt={c.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transform:expanded?'scale(1.04)':'scale(1)',transition:'transform .8s ease'}}/>
        )}
        <div style={{position:'absolute',inset:0,background:expanded
          ? 'linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.95) 100%)'
          : 'linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.95) 100%)'}}/>
      </div>

      {/* Animated header bar */}
      <div style={{
        position:'absolute',top:0,left:0,right:0,height:expanded?44:0,
        background:'linear-gradient(180deg,rgba(200,16,46,0.95),rgba(150,12,34,0.85))',
        display:'flex',alignItems:'center',justifyContent:'space-between',
        padding: expanded ? '0 18px' : '0',
        overflow:'hidden',
        transition:'height .3s ease',
      }}>
        <span style={{fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:10,letterSpacing:'0.22em',color:'#fff'}}>● USE CASE EXPANDED</span>
        <button onClick={e=>{e.stopPropagation();onToggle()}} style={{color:'#fff',padding:6}}><Icons.close/></button>
      </div>

      {/* Content */}
      <div style={{position:'absolute',left:24,right:24,bottom:24,top: expanded ? 60 : 'auto', display:'flex',flexDirection:'column',justifyContent:'flex-end'}}>
        <ChromeTitle size={expanded?'clamp(28px,3vw,48px)':'clamp(18px,2vw,28px)'} as="div">{c.title}</ChromeTitle>
        <div style={{color:'var(--thraxel-light-grey)',fontSize:13,marginTop:6,letterSpacing:'0.04em'}}>{c.cap}</div>
        {expanded && (
          <p style={{color:'#cfcfd4',fontSize:15,marginTop:18,lineHeight:1.6,maxWidth:'58ch',textWrap:'pretty'}}>{c.body}</p>
        )}
        {!expanded && !c.video && (
          <div style={{marginTop:14,display:'flex',alignItems:'center',gap:8,color:'var(--thraxel-red)',fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:11,letterSpacing:'0.18em'}}>
            <Icons.plus/> EXPAND
          </div>
        )}
      </div>
      {c.video && !expanded && (
        <div style={{position:'absolute',top:14,right:14,padding:'6px 10px',border:'1px solid rgba(255,255,255,0.4)',background:'rgba(0,0,0,0.55)',fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:9,letterSpacing:'0.2em',color:'#fff'}}>▶ PLAY</div>
      )}
    </div>
  );
}

function ResUseCases(){
  const [openVid, setOpenVid] = useState(null);
  const [expanded, setExpanded] = useState(null);
  return (
    <section id="residential" style={{padding:'120px 64px',background:'var(--thraxel-canvas)'}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:18}}>RESIDENTIAL</div>
        <ChromeTitle size={'clamp(40px,6vw,84px)'}>Every occasion. One system.</ChromeTitle>
        <p style={{maxWidth:600,marginTop:18,color:'var(--thraxel-light-grey)',fontSize:18}}>Tap any card to expand. Tap the dock card to play.</p>
        <div style={{
          marginTop:48,
          display:'grid',
          gridTemplateColumns:'repeat(6, 1fr)',
          gridAutoRows:'minmax(280px, auto)',
          gap:14,
        }} className="res-grid">
          {RES_USE_CASES.map((c)=>(
            <UseCaseCard key={c.id} c={c} expanded={expanded===c.id}
              onToggle={()=>setExpanded(expanded===c.id?null:c.id)}
              onPlay={(v)=>setOpenVid(v)}
            />
          ))}
        </div>
        <style>{`@media (max-width:900px){.res-grid{grid-template-columns:1fr!important;grid-auto-rows:240px!important}.res-grid > *{grid-column:span 1!important;grid-row:span 1!important}}`}</style>
      </div>
      {openVid && (
        <div onClick={()=>setOpenVid(null)} style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.95)',zIndex:100,display:'flex',alignItems:'center',justifyContent:'center',padding:32}}>
          <video autoPlay controls style={{maxWidth:'100%',maxHeight:'90vh'}}><source src={openVid} type="video/mp4"/></video>
        </div>
      )}
    </section>
  );
}

function WorkGallery(){
  const items = [
    { src:'public/img/gallery/5.jpg', cap:'Craftsman Façade', meta:'Architectural uplighting · 14 zones', span:'wide' },
    { src:'public/img/gallery/3.jpg', cap:'Hydrangea Walk', meta:'Path + bed lighting' },
    { src:'public/img/gallery/dock.jpg', cap:'Lakefront Dock', meta:'Marine-grade · pier mounts' },
    { src:'public/img/gallery/rgb-tree.jpg', cap:'RGB Statement Tree', meta:'Color-changing canopy' },
    { src:'public/img/gallery/fountain.jpg', cap:'Pond & Fountain', meta:'Submersible fixtures' },
    { src:'public/img/gallery/7028.jpg', cap:'Outdoor Venue', meta:'Bistro strings + accent uplights', span:'wide' },
    { src:'public/img/gallery/1.jpg', cap:'Cottage Garden', meta:'Pergola + path lighting' },
    { src:'public/img/gallery/7022.jpg', cap:'Stone Wall Wash', meta:'Grazing fixture detail' },
    { src:'public/img/gallery/bollards.jpg', cap:'Commercial Bollards', meta:'Custom laser-cut shrouds' },
    { src:'public/img/gallery/213324.jpg', cap:'Driveway Specimen', meta:'Single-tree feature lighting' },
    { src:'public/img/gallery/7016.jpg', cap:'Autumn Maple', meta:'RGB seasonal scene' },
    { src:'public/img/gallery/6.jpg', cap:'Backyard Beds', meta:'Mixed warm + accent' },
    { src:'public/img/gallery/blue-house.jpg', cap:'Twilight Roofline', meta:'Permanent eave lighting · cyan scene', span:'wide' },
    { src:'public/img/gallery/white-house.jpg', cap:'Coastal Colonial', meta:'Crisp white wash · full perimeter', span:'wide' },
  ];
  return (
    <section id="gallery" style={{padding:'120px 64px',background:'var(--thraxel-jet)'}}>
      <div style={{maxWidth:1600,margin:'0 auto'}}>
        <div className="eyebrow" style={{marginBottom:14}}>FIELD WORK · INSTALLED</div>
        <ChromeTitle size={'clamp(40px,5.5vw,76px)'}>Real homes. Real installs.</ChromeTitle>
        <p style={{maxWidth:680,marginTop:18,color:'var(--thraxel-light-grey)',fontSize:17}}>Every photo on this page is a Thraxel install — no stock, no renders. Hover any tile for the install details.</p>

        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gridAutoRows:'minmax(220px,22vw)',gap:10,marginTop:48}} className="wg-grid">
          {items.map((it,i)=>(
            <figure key={i} className={`wg-tile ${it.span==='wide'?'wg-wide':''}`} style={{
              margin:0,position:'relative',overflow:'hidden',background:'#050505',
              gridColumn: it.span==='wide' ? 'span 2' : 'span 1',
              border:'1px solid #1a1a1e',
              cursor:'pointer',
            }}>
              <img src={it.src} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',transition:'transform .8s ease, filter .4s ease'}}/>
              <figcaption style={{
                position:'absolute',bottom:0,left:0,right:0,
                padding:'18px 20px',
                background:'linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 50%,rgba(0,0,0,0.92) 100%)',
                color:'var(--thraxel-light-grey)',fontSize:12,
              }}>
                <div className="label" style={{color:'#fff',marginBottom:4,letterSpacing:'0.18em'}}>{it.cap}</div>
                <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:600,fontSize:11,letterSpacing:'0.1em',color:'var(--thraxel-mid-grey)'}}>{it.meta}</div>
              </figcaption>
            </figure>
          ))}
        </div>
        <style>{`
          .wg-tile:hover img{transform:scale(1.04);filter:brightness(1.1)}
          @media (max-width:1100px){.wg-grid{grid-template-columns:repeat(3,1fr)!important}.wg-wide{grid-column:span 2!important}}
          @media (max-width:700px){.wg-grid{grid-template-columns:repeat(2,1fr)!important}.wg-wide{grid-column:span 2!important}}
        `}</style>
      </div>
    </section>
  );
}

function DiscreetSection(){
  const [pos,setPos] = useState(50);
  return (
    <section style={{padding:'140px 64px',background:'var(--thraxel-canvas)',position:'relative',overflow:'hidden'}}>
      <div className="smoke" />
      <div style={{maxWidth:1440,margin:'0 auto',position:'relative'}}>
        <ChromeTitle size={'clamp(48px,7vw,108px)'}>Invisible by day.</ChromeTitle>
        <div style={{marginTop:14}}><RedTitle size={'clamp(28px,4.2vw,60px)'}>Unforgettable by night.</RedTitle></div>
        <p style={{maxWidth:640,marginTop:24,color:'var(--thraxel-light-grey)',fontSize:18}}>Color-matched track tucks tight against the trim — your HOA won't see it during the day. After sunset, the system wakes up. 16 million colors plus warm white, individually addressable.</p>

        <div style={{
          position:'relative',marginTop:48,aspectRatio:'21/9',
          border:'1px solid #2a2a2e',overflow:'hidden',userSelect:'none',
        }} onMouseMove={e=>{
          const r = e.currentTarget.getBoundingClientRect();
          setPos(Math.max(0,Math.min(100, ((e.clientX-r.left)/r.width)*100)));
        }} onTouchMove={e=>{
          const r = e.currentTarget.getBoundingClientRect();
          setPos(Math.max(0,Math.min(100, ((e.touches[0].clientX-r.left)/r.width)*100)));
        }}>
          {/* day - desaturated */}
          <div style={{position:'absolute',inset:0,background:'#0a0a0a'}}>
            <img src="public/img/photo-halloween.jpg" style={{width:'100%',height:'100%',objectFit:'cover',filter:'brightness(1.6) saturate(0.5) contrast(0.95)'}} />
            <div style={{position:'absolute',top:24,left:24,padding:'8px 14px',background:'rgba(0,0,0,0.6)',backdropFilter:'blur(6px)'}}>
              <span className="label" style={{color:'#fff'}}>DAY · TRACK BLENDS</span>
            </div>
          </div>
          {/* night clipped */}
          <div style={{position:'absolute',inset:0,clipPath:`inset(0 0 0 ${pos}%)`}}>
            <img src="public/img/photo-halloween.jpg" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
            <div style={{position:'absolute',top:24,right:24,padding:'8px 14px',background:'rgba(200,16,46,0.85)'}}>
              <span className="label" style={{color:'#fff'}}>NIGHT · FULL RGBWW</span>
            </div>
          </div>
          {/* divider */}
          <div style={{position:'absolute',top:0,bottom:0,left:`${pos}%`,width:2,background:'#fff',boxShadow:'0 0 12px rgba(255,255,255,0.6)'}}>
            <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:44,height:44,border:'2px solid #fff',background:'rgba(0,0,0,0.6)',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:14}}>↔</div>
          </div>
        </div>
        <div style={{textAlign:'center',marginTop:14,color:'var(--thraxel-mid-grey)',fontSize:12,fontFamily:'Orbitron,sans-serif',fontWeight:700,letterSpacing:'0.18em'}}>DRAG TO COMPARE</div>
      </div>
    </section>
  );
}

function SmartHome(){
  // Inline SVG glyphs for each platform - simplified iconographic representations
  const logos = [
    { name:'ALEXA', glyph:(
      <svg viewBox="0 0 40 40" style={{width:36,height:36}}>
        <circle cx="20" cy="20" r="17" fill="none" stroke="#00CAFF" strokeWidth="2.5"/>
        <path d="M20 8 a12 12 0 0 1 0 24" fill="none" stroke="#00CAFF" strokeWidth="2.5"/>
        <circle cx="20" cy="32" r="2.2" fill="#00CAFF"/>
      </svg>
    )},
    { name:'GOOGLE HOME', glyph:(
      <svg viewBox="0 0 40 40" style={{width:34,height:34}}>
        <path d="M20 6 L6 20 L10 20 L10 32 L30 32 L30 20 L34 20 Z" fill="none" stroke="#fff" strokeWidth="2" strokeLinejoin="round"/>
        <circle cx="20" cy="24" r="3" fill="#4285F4"/>
        <circle cx="14" cy="24" r="2" fill="#EA4335"/>
        <circle cx="26" cy="24" r="2" fill="#FBBC05"/>
      </svg>
    )},
    { name:'HOMEKIT', glyph:(
      <svg viewBox="0 0 40 40" style={{width:34,height:34}}>
        <path d="M20 5 L8 14 L8 32 L32 32 L32 14 Z" fill="none" stroke="#fff" strokeWidth="2" strokeLinejoin="round"/>
        <path d="M14 22 L20 17 L26 22 L26 30 L14 30 Z" fill="#fff" opacity="0.85"/>
      </svg>
    )},
    { name:'CONTROL4', glyph:(
      <svg viewBox="0 0 48 40" style={{width:42,height:34}}>
        <text x="0" y="28" fontFamily="Orbitron, sans-serif" fontWeight="900" fontSize="22" fill="#fff" letterSpacing="-1">C</text>
        <text x="14" y="28" fontFamily="Orbitron, sans-serif" fontWeight="900" fontSize="22" fill="#0099D8" letterSpacing="0">4</text>
      </svg>
    )},
    { name:'RANDYHOME', glyph:(
      <img src="public/img/thraxel-logo.png" style={{width:38,height:38,objectFit:'contain',filter:'drop-shadow(0 0 8px rgba(200,16,46,0.4))'}}/>
    ), accent:true},
  ];
  return (
    <section style={{padding:'120px 64px',background:'var(--thraxel-jet)'}}>
      <div style={{maxWidth:1440,margin:'0 auto',textAlign:'center'}}>
        <div className="eyebrow" style={{marginBottom:18}}>SMART HOME INTEGRATION</div>
        <ChromeTitle size={'clamp(36px,5vw,72px)'}>It already speaks your home's language.</ChromeTitle>
        <p style={{maxWidth:680,margin:'24px auto 0',color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.55}}>
          Plus our own — <span style={{color:'var(--thraxel-red)',fontFamily:'Orbitron,sans-serif',fontWeight:800,letterSpacing:'0.1em'}}>RANDYHOME</span> — the Thraxel-built voice and automation layer for your perm lighting.
        </p>
        <div style={{display:'flex',justifyContent:'center',alignItems:'stretch',gap:20,marginTop:56,flexWrap:'wrap'}}>
          {logos.map(l=>(
            <div key={l.name} style={{
              padding:'22px 28px',border:`1px solid ${l.accent?'rgba(200,16,46,0.5)':'#2a2a2e'}`,
              background: l.accent ? 'linear-gradient(180deg,#15080a 0%,#0a0a0a 100%)' : '#0a0a0a',
              display:'flex',flexDirection:'column',alignItems:'center',gap:14,
              minWidth:180,
            }}>
              <div style={{height:42,display:'flex',alignItems:'center',justifyContent:'center'}}>{l.glyph}</div>
              <div style={{
                fontFamily:'Orbitron,sans-serif',fontWeight:800,fontSize:12,letterSpacing:'0.2em',
                color: l.accent ? '#fff' : 'var(--thraxel-rule-grey)',
              }}>{l.name}</div>
            </div>
          ))}
        </div>

        {/* RandyHome pricing callout */}
        <div style={{maxWidth:780,margin:'40px auto 0',padding:'22px 28px',border:'1px solid rgba(200,16,46,0.4)',background:'linear-gradient(180deg,#120608 0%,#0a0a0a 100%)',display:'flex',alignItems:'center',justifyContent:'space-between',gap:20,flexWrap:'wrap'}}>
          <div style={{textAlign:'left',flex:'1 1 320px'}}>
            <div className="eyebrow-red" style={{marginBottom:6}}>RANDYHOME · OPTIONAL ADD-ON</div>
            <div style={{color:'#fff',fontSize:15,lineHeight:1.5}}>
              Voice control, scenes, and full home automation built specifically for your Thraxel install. Sold separately, billed annually upfront.
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:900,fontSize:30,color:'#fff',letterSpacing:'0.02em'}}>$9.99<span style={{fontSize:14,color:'var(--thraxel-light-grey)',fontWeight:700}}>/mo</span></div>
            <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:10,letterSpacing:'0.18em',color:'var(--thraxel-mid-grey)',marginTop:4}}>BILLED ANNUALLY · OPTIONAL</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NumbersSection, ResUseCases, WorkGallery, DiscreetSection, SmartHome });