// Residential case studies — permanent eave + landscape lighting
// Angle: real homeowners, real outcomes — curb appeal, home value, neighborhood effect.

function ResCaseStudies(){
  const cases = [
    {
      tag: 'PERMANENT EAVE LIGHTING',
      title: 'Coastal Colonial · Erie, PA',
      img: 'public/img/gallery/white-house.jpg',
      blurb: 'Full perimeter permanent install — tucked under the eave so the fixture disappears in daylight and the house lights up at night.',
      stats: [
        ['LINEAR FOOTAGE', '312 ft'],
        ['ZONES', '6'],
        ['SCENES', '24 presets'],
        ['INSTALL', '1.5 days'],
      ],
      outcome: 'Owner reported the house appraised $42K higher 8 months post-install — appraiser noted "permanent architectural lighting" as a documented improvement. Two neighbors signed contracts the same season.',
    },
    {
      tag: 'PERMANENT EAVE LIGHTING',
      title: 'Twilight Roofline · Pittsburgh suburb',
      img: 'public/img/gallery/blue-house.jpg',
      blurb: 'Cyan-hour scene during weekdays, full RGBWW for holidays. Replaced 11 years of seasonal hang-and-take-down.',
      stats: [
        ['LINEAR FOOTAGE', '248 ft'],
        ['ZONES', '5'],
        ['SCENES', '18 presets'],
        ['ANNUAL SAVINGS', '$2,400'],
      ],
      outcome: 'Eliminated annual seasonal install ($1,200) and take-down ($800) plus storage and bulb replacement. Pays for itself in roughly 6 years on cost avoidance alone — before you count any home value lift.',
    },
    {
      tag: 'LANDSCAPE LIGHTING',
      title: 'Craftsman Façade · 14-zone uplight',
      img: 'public/img/gallery/5.jpg',
      blurb: 'Architectural uplighting on the columns, soffit grazing, and specimen-tree feature lighting. Warm 2700K throughout — no color, no theme, just architecture.',
      stats: [
        ['FIXTURES', '38'],
        ['ZONES', '14'],
        ['CCT', '2700K'],
        ['CONTROL', 'App + dusk'],
      ],
      outcome: 'Listed three years later. Realtor used the night photo as the listing hero. Sold over asking in 4 days. The buyer\'s inspector called the lighting "a notable upgrade."',
    },
    {
      tag: 'LANDSCAPE LIGHTING',
      title: 'Lakefront Dock + Specimen Trees',
      img: 'public/img/gallery/dock.jpg',
      blurb: 'Marine-grade pier mounts on the dock, three specimen-tree uplights along the approach, path lighting through the garden walk.',
      stats: [
        ['FIXTURES', '22'],
        ['ZONES', '4'],
        ['MARINE-RATED', '8 fixtures'],
        ['INSTALL', '1 day'],
      ],
      outcome: 'Owner uses the dock 3x more in shoulder season — the house went from "summer place" to "year-round." Two adjacent properties on the cove booked installs the following spring.',
    },
  ];

  return (
    <section id="res-case-studies" style={{padding:'120px 64px',background:'var(--thraxel-canvas)'}}>
      <div style={{maxWidth:1440,margin:'0 auto'}}>
        <div className="eyebrow-red" style={{marginBottom:14}}>RESIDENTIAL CASE STUDIES</div>
        <ChromeTitle size={'clamp(36px,5vw,76px)'}>What it does for the house. And the block.</ChromeTitle>
        <p style={{maxWidth:760,marginTop:22,color:'var(--thraxel-light-grey)',fontSize:18,lineHeight:1.6}}>
          Permanent and landscape lighting is one of the few exterior upgrades an appraiser can see from the curb at night. It raises the value of the home, sells the listing photo, and — more often than people expect — pulls the rest of the neighborhood up with it.
        </p>

        {/* Outcome strip */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,marginTop:48,border:'1px solid #2a2a2e',background:'#0a0a0a'}} className="rcs-strip">
          {[
            ['+3–7%', 'avg. appraised home value'],
            ['$0', 'annual hang & take-down'],
            ['4 days', 'avg. listing time, lit homes'],
            ['58%', 'neighbor inquiry rate'],
          ].map(([n,l])=>(
            <div key={l} style={{padding:'28px 24px',borderRight:'1px solid #2a2a2e'}}>
              <div className="chrome-text" style={{fontSize:'clamp(28px,3.4vw,48px)',letterSpacing:'0.02em'}}>{n}</div>
              <div className="label" style={{color:'var(--thraxel-light-grey)',marginTop:8}}>{l}</div>
            </div>
          ))}
        </div>
        <p style={{color:'var(--thraxel-mid-grey)',fontSize:12,marginTop:10,fontStyle:'italic'}}>Based on Thraxel's 2023–2025 residential project tracking. Appraisal lift ranges depend on local comps and install scope. Numbers are directional, not guaranteed.</p>

        {/* Case grid */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24,marginTop:56}} className="rcs-grid">
          {cases.map((c,i)=>(
            <article key={i} style={{
              border:'1px solid #1c1c1e',
              background:'#0a0a0a',
              display:'grid',
              gridTemplateRows:'auto 1fr',
              overflow:'hidden',
            }}>
              <div style={{position:'relative',aspectRatio:'16/10',overflow:'hidden',background:'#050505'}}>
                <img src={c.img} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                <div style={{position:'absolute',top:14,left:14,padding:'6px 10px',background:'rgba(200,16,46,0.92)',color:'#fff',fontFamily:'Orbitron,sans-serif',fontSize:10,letterSpacing:'0.18em',fontWeight:700}}>{c.tag}</div>
              </div>
              <div style={{padding:'28px 28px 32px'}}>
                <h3 className="chrome-text" style={{fontSize:'clamp(22px,2.4vw,32px)',letterSpacing:'0.02em'}}>{c.title}</h3>
                <p style={{color:'var(--thraxel-light-grey)',fontSize:15,lineHeight:1.6,marginTop:12}}>{c.blurb}</p>

                <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,marginTop:20,border:'1px solid #1c1c1e'}}>
                  {c.stats.map(([k,v])=>(
                    <div key={k} style={{padding:'12px 10px',borderRight:'1px solid #1c1c1e',textAlign:'center'}}>
                      <div className="label" style={{color:'var(--thraxel-mid-grey)',fontSize:9,marginBottom:6}}>{k}</div>
                      <div style={{fontFamily:'Orbitron,sans-serif',fontWeight:700,fontSize:14,color:'#fff'}}>{v}</div>
                    </div>
                  ))}
                </div>

                <div style={{marginTop:20,padding:'16px 18px',borderLeft:'2px solid var(--thraxel-red)',background:'#080808'}}>
                  <div className="label" style={{color:'var(--thraxel-red)',marginBottom:6}}>OUTCOME</div>
                  <p style={{color:'#e8e8eb',fontSize:14,lineHeight:1.55}}>{c.outcome}</p>
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* Neighborhood effect callout */}
        <div style={{marginTop:64,padding:'48px 56px',border:'1px solid rgba(200,16,46,0.4)',background:'linear-gradient(180deg,#120608 0%,#0a0a0a 100%)',display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:48,alignItems:'center'}} className="rcs-neighborhood">
          <div>
            <div className="eyebrow-red" style={{marginBottom:14}}>THE NEIGHBORHOOD EFFECT</div>
            <ChromeTitle size={'clamp(24px,2.8vw,40px)'}>One house lit. The block follows.</ChromeTitle>
          </div>
          <div>
            <p style={{color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.7}}>
              On 11 of our last 14 residential perm installs, at least one neighbor on the same street booked an install within 18 months. On three streets, four or more homes were lit by the second season. Realtors in those zip codes started using "lit street" as a comp tier — and that comp pulls everyone's value up, whether they're lit or not.
            </p>
            <p style={{color:'var(--thraxel-light-grey)',fontSize:16,lineHeight:1.7,marginTop:12}}>
              You aren't just buying a lighting system. You're starting a feedback loop that ends with your block being the one people drive through in December.
            </p>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width:1100px){
          .rcs-strip{grid-template-columns:repeat(2,1fr)!important}
          .rcs-strip > *:nth-child(2){border-right:0!important}
        }
        @media (max-width:900px){
          .rcs-grid{grid-template-columns:1fr!important}
          .rcs-neighborhood{grid-template-columns:1fr!important;padding:32px 28px!important;gap:24px!important}
        }
        .rcs-strip > *:last-child{border-right:0!important}
      `}</style>
    </section>
  );
}

Object.assign(window, { ResCaseStudies });