/* Sections 2: Demand, Math, Competitive, Program */

function Demand(){
  const [ref, inView] = useInView();
  const rows = [
    ['F&B (blended)',        '17.8K','36.8K','58.6K'],
    ['Service Retail',       '3.3K','6.0K','9.2K'],
    ['Experiential',         '3.4K','5.5K','8.5K'],
    ['Specialty / Grocery',  '0.4K','0.9K','1.4K'],
  ];
  return <section id="demand" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="04" title="Demand Findings"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:64}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          Phase 3 demand supports <em>78K – 100K+ SF</em> of retail.
        </h2>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:48, alignItems:'stretch'}}>
        <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
          padding:48, background:'var(--ink)', color:'var(--ivory)',
          display:'flex', flexDirection:'column', justifyContent:'center'
        }}>
          <Eyebrow color="var(--gold-soft)">Base Case · Phase 3 Stabilized</Eyebrow>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:104, lineHeight:0.9,
            fontWeight:300, letterSpacing:'-0.03em', marginBottom:10}} className="tnum">77,700</div>
          <div style={{fontSize:18, color:'var(--gold-soft)', marginBottom:28, fontWeight:300}}>
            SF demand-supported retail
          </div>
          <div style={{fontSize:13, color:'rgba(244,242,237,0.7)', padding:'14px 0',
            borderTop:'1px solid rgba(244,242,237,0.2)', borderBottom:'1px solid rgba(244,242,237,0.2)',
            display:'flex', justifyContent:'space-between'}}>
            <span>vs. 2019 Master Plan</span>
            <span className="tnum">65,942 SF</span>
          </div>
          <div style={{fontSize:13, color:'rgba(244,242,237,0.7)', padding:'14px 0',
            borderBottom:'1px solid rgba(244,242,237,0.2)',
            display:'flex', justifyContent:'space-between'}}>
            <span>Delta</span>
            <span className="tnum" style={{color:'var(--gold-soft)'}}>+18% · +11,800 SF</span>
          </div>
          <p style={{marginTop:24, fontSize:14, lineHeight:1.65, color:'rgba(244,242,237,0.88)'}}>
            High-case sensitivity (130% capture) supports{' '}
            <strong style={{color:'var(--gold-soft)'}}>100,000+ SF</strong> — strategic
            decision on design-to case is on the table.
          </p>
        </div>

        <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
          padding:40, background:'var(--ivory-2)', border:'1px solid var(--rule)'
        }}>
          <Eyebrow>Build by phase · Demand-supported SF</Eyebrow>
          <div style={{overflowX:'auto'}} data-mobile-scroll="true">
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:14}}>
            <thead>
              <tr style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)'}}>
                <th style={{textAlign:'left', padding:'16px 8px', borderBottom:'1px solid var(--rule)'}}>Category</th>
                <th style={{textAlign:'right', padding:'16px 8px', borderBottom:'1px solid var(--rule)'}}>Phase 1</th>
                <th style={{textAlign:'right', padding:'16px 8px', borderBottom:'1px solid var(--rule)'}}>Phase 2</th>
                <th style={{textAlign:'right', padding:'16px 8px', borderBottom:'1px solid var(--rule)'}}>Phase 3</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(([c,p1,p2,p3])=><tr key={c}>
                <td style={{padding:'16px 8px', borderBottom:'1px solid var(--rule)'}}>{c}</td>
                <td className="tnum" style={{padding:'16px 8px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{p1}</td>
                <td className="tnum" style={{padding:'16px 8px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{p2}</td>
                <td className="tnum" style={{padding:'16px 8px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{p3}</td>
              </tr>)}
              <tr style={{fontFamily:"'Jost',sans-serif", fontSize:18, fontWeight:500}}>
                <td style={{padding:'20px 8px 0'}}>TOTAL</td>
                <td className="tnum" style={{padding:'20px 8px 0', textAlign:'right'}}>24.9K</td>
                <td className="tnum" style={{padding:'20px 8px 0', textAlign:'right'}}>49.2K</td>
                <td className="tnum" style={{padding:'20px 8px 0', textAlign:'right', color:'var(--gold)'}}>77.7K</td>
              </tr>
            </tbody>
          </table>
          </div>
          <p style={{fontSize:13, color:'var(--muted)', marginTop:28, lineHeight:1.65,
            paddingTop:20, borderTop:'1px solid var(--rule)', fontStyle:'italic'}}>
            F&B drives 75% of the program. Service and experiential are the materially-underbuilt
            categories in the 2019 plan — these are the white space.
          </p>
        </div>
      </div>
    </div>
  </section>;
}

/* ------------------------------------------------------------------ */

function TheMath(){
  const [ref, inView] = useInView();
  const [active, setActive] = useState(0);

  /* Phase 3 populations (from model) */
  const pops = {
    office:    '10,640',
    resident:  '799',
    hotel:     '131,400 nts',
    adjacent:  '28,000',
    drivetime: '125,000',
  };

  /* Per-category spend × capture × sales-per-SF */
  const cats = [
    {
      key:'fb', name:'F&B', sf:'58,619', salesPsf:'$725/SF', psfNote:'70% FS @ $650 + 30% QSR @ $900',
      total:'$39,516,630', totalShort:'$39.5M',
      rows:[
        ['Office workers',      pops.office,    '$3,500',    '70%',  '$26,068,000', '10,640 × $3,500 × 0.70'],
        ['Resident households', pops.resident,  '$3,800',    '40%',  '$1,214,480',  '799 × $3,800 × 0.40'],
        ['Hotel guest nights',  pops.hotel,     '$35/night', '85%',  '$3,909,150',  '131,400 × $35 × 0.85'],
        ['Adjacent walkable',   pops.adjacent,  '$1,500',    '10%',  '$4,200,000',  '28,000 × $1,500 × 0.10'],
        ['Drive-time HH',       pops.drivetime, '$2,200',    '1.5%', '$4,125,000',  '125,000 × $2,200 × 0.015'],
      ]
    },
    {
      key:'service', name:'Service Retail', sf:'9,207', salesPsf:'$525/SF', psfNote:'Banking, salon, dry clean, med-spa',
      total:'$4,495,055', totalShort:'$4.5M',
      rows:[
        ['Office workers',      pops.office,    '$400',      '45%',  '$1,915,200', '10,640 × $400 × 0.45'],
        ['Resident households', pops.resident,  '$1,100',    '35%',  '$307,615',   '799 × $1,100 × 0.35'],
        ['Hotel guest nights',  pops.hotel,     '$12/night', '55%',  '$867,240',   '131,400 × $12 × 0.55'],
        ['Adjacent walkable',   pops.adjacent,  '$200',      '5%',   '$280,000',   '28,000 × $200 × 0.05'],
        ['Drive-time HH',       pops.drivetime, '$900',      '1.0%', '$1,125,000', '125,000 × $900 × 0.010'],
      ]
    },
    {
      key:'experiential', name:'Experiential', sf:'8,534', salesPsf:'$425/SF', psfNote:'Fitness, eatertainment, boutique wellness',
      total:'$3,373,210', totalShort:'$3.4M',
      rows:[
        ['Office workers',      pops.office,    '$250',      '30%',  '$798,000',   '10,640 × $250 × 0.30'],
        ['Resident households', pops.resident,  '$600',      '25%',  '$119,850',   '799 × $600 × 0.25'],
        ['Hotel guest nights',  pops.hotel,     '$8/night',  '30%',  '$315,360',   '131,400 × $8 × 0.30'],
        ['Adjacent walkable',   pops.adjacent,  '$100',      '5%',   '$140,000',   '28,000 × $100 × 0.05'],
        ['Drive-time HH',       pops.drivetime, '$800',      '2.0%', '$2,000,000', '125,000 × $800 × 0.020'],
      ]
    },
    {
      key:'specialty', name:'Specialty / Grocery', sf:'1,437', salesPsf:'$850/SF', psfNote:'Small-format grocery / curated market hall',
      total:'$1,135,990', totalShort:'$1.1M',
      rows:[
        ['Office workers',      pops.office,    '$150',      '10%',  '$159,600', '10,640 × $150 × 0.10'],
        ['Resident households', pops.resident,  '$800',      '20%',  '$127,840', '799 × $800 × 0.20'],
        ['Hotel guest nights',  pops.hotel,     '$5/night',  '15%',  '$98,550',  '131,400 × $5 × 0.15'],
        ['Adjacent walkable',   pops.adjacent,  '$0',        '2%',   '$0',       'N/A — no walkable spend assumed'],
        ['Drive-time HH',       pops.drivetime, '$600',      '1.0%', '$750,000', '125,000 × $600 × 0.010'],
      ]
    },
  ];

  const c = cats[active];

  return <section id="math" ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="05" title="The Math"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:48}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          How we get to <em>77,700 SF</em> — the full math.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Five demand sources × annual spend × capture = captured spend. Divide by sales-per-SF
          and stabilized occupancy to get supportable SF. Four categories, shown separately.
        </p>
      </div>

      {/* Category tab switcher */}
      <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:4, marginBottom:0,
        background:'var(--rule)', padding:4, border:'1px solid var(--rule)'
      }}>
        {cats.map((cat,i)=>
          <button key={cat.key} onClick={()=>setActive(i)} style={{
            padding:'18px 12px',
            background: active===i ? 'var(--ink)' : 'var(--ivory)',
            color: active===i ? 'var(--ivory)' : 'var(--ink)',
            border:'none', cursor:'pointer', fontFamily:"'Figtree',sans-serif",
            display:'flex', flexDirection:'column', alignItems:'center', gap:6,
            transition:'all .2s ease'
          }}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.18em', textTransform:'uppercase',
              opacity: active===i ? 0.8 : 0.6, fontWeight:600}}>{cat.name}</div>
            <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:22,
              fontWeight:400, letterSpacing:'-0.01em',
              color: active===i ? 'var(--gold-soft)' : 'var(--ink)'}}>{cat.sf} SF</div>
          </button>
        )}
      </div>

      {/* Active category table */}
      <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
        background:'var(--ivory)', border:'1px solid var(--rule)', borderTop:'none', overflow:'hidden'
      }}>
        <div style={{padding:'24px 28px', borderBottom:'1px solid var(--rule)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16}}>
          <div>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:6,
              fontWeight:600}}>{c.name} · Phase 3 stabilized</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:24, fontWeight:400,
              letterSpacing:'-0.01em'}}>
              <span className="tnum" style={{color:'var(--gold)'}}>{c.sf} SF</span>
              <span style={{color:'var(--muted)', fontSize:15, marginLeft:12}}>
                supportable at {c.salesPsf}
              </span>
            </div>
          </div>
          <div style={{fontSize:12, color:'var(--muted)', textAlign:'right', fontStyle:'italic'}}>
            {c.psfNote}
          </div>
        </div>

        <div style={{overflowX:'auto'}} data-mobile-scroll="true">
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:14}}>
          <thead>
            <tr style={{background:'var(--ink)', color:'var(--ivory)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.18em', textTransform:'uppercase'}}>
              <th style={{textAlign:'left', padding:'18px 16px'}}>Demand Source</th>
              <th style={{textAlign:'right', padding:'18px 16px'}}>Population</th>
              <th style={{textAlign:'right', padding:'18px 16px'}}>Annual Spend</th>
              <th style={{textAlign:'right', padding:'18px 16px'}}>Capture</th>
              <th style={{textAlign:'right', padding:'18px 16px'}}>Captured Spend</th>
              <th style={{textAlign:'left', padding:'18px 16px'}}>Calculation</th>
            </tr>
          </thead>
          <tbody>
            {c.rows.map((r,i)=><tr key={i} style={{background: i%2 ? 'var(--ivory-2)' : 'var(--ivory)'}}>
              <td style={{padding:'16px', borderBottom:'1px solid var(--rule)'}}>{r[0]}</td>
              <td className="tnum" style={{padding:'16px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{r[1]}</td>
              <td className="tnum" style={{padding:'16px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{r[2]}</td>
              <td className="tnum" style={{padding:'16px', borderBottom:'1px solid var(--rule)', textAlign:'right'}}>{r[3]}</td>
              <td className="tnum" style={{padding:'16px', borderBottom:'1px solid var(--rule)', textAlign:'right', fontWeight:500}}>{r[4]}</td>
              <td style={{padding:'16px', borderBottom:'1px solid var(--rule)',
                fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:12, color:'var(--muted)'}}>{r[5]}</td>
            </tr>)}
            <tr style={{background:'var(--ink)', color:'var(--ivory)'}}>
              <td colSpan="4" style={{padding:'20px 16px', fontFamily:"'Jost',sans-serif", fontSize:18, fontWeight:500}}>
                TOTAL CAPTURED {c.name.toUpperCase()} SPEND
              </td>
              <td className="tnum" colSpan="2" style={{padding:'20px 16px', fontFamily:"'Jost',sans-serif", fontSize:22,
                color:'var(--gold-soft)', fontWeight:400}}>{c.total}</td>
            </tr>
          </tbody>
        </table>
        </div>

        {/* Conversion formula for this category */}
        <div style={{padding:'28px 32px', background:'var(--ivory-2)',
          borderTop:'1px solid var(--rule)',
          textAlign:'center', fontFamily:"'Jost',sans-serif", fontSize:18,
          letterSpacing:'-0.01em', color:'var(--ink)', lineHeight:1.6}}>
          <span className="tnum">{c.totalShort}</span>
          <span style={{color:'var(--gold)', padding:'0 14px'}}>÷</span>
          <span>{c.salesPsf}</span>
          <span style={{color:'var(--gold)', padding:'0 14px'}}>÷</span>
          <span>93% occupancy</span>
          <span style={{color:'var(--gold)', padding:'0 14px'}}>=</span>
          <strong className="tnum" style={{color:'var(--gold)', fontSize:22}}>{c.sf} SF</strong>
        </div>
      </div>

      {/* Grand total footer */}
      <div className={"reveal reveal-delay-3" + (inView ? ' in-view' : '')} style={{
        marginTop:32, padding:'32px 40px', background:'var(--ink)', color:'var(--ivory)',
        display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:4, alignItems:'stretch'
      }}>
        {[
          ['F&B',        '58,619'],
          ['Service',    '9,207'],
          ['Experiential','8,534'],
          ['Specialty',  '1,437'],
          ['TOTAL',      '77,797'],
        ].map(([lbl,sf],i)=><div key={lbl} style={{
          padding:'12px 16px',
          borderLeft: i>0 ? '1px solid rgba(244,242,237,0.15)' : 'none',
          textAlign:'center'
        }}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
            letterSpacing:'0.2em', textTransform:'uppercase',
            color: i===4 ? 'var(--gold-soft)' : 'rgba(244,242,237,0.55)',
            fontWeight:600, marginBottom:10}}>{lbl}</div>
          <div className="tnum" style={{fontFamily:"'Jost',sans-serif",
            fontSize: i===4 ? 36 : 28, fontWeight:300, letterSpacing:'-0.02em',
            lineHeight:1, color: i===4 ? 'var(--gold-soft)' : 'var(--ivory)'}}>{sf}</div>
          <div style={{fontSize:10, color:'rgba(244,242,237,0.5)', marginTop:6,
            letterSpacing:'0.08em'}}>SF</div>
        </div>)}
      </div>
    </div>
  </section>;
}

/* ------------------------------------------------------------------ */

function Competition(){
  const [ref, inView] = useInView();
  const comps = [
    ['CityCentre (Midway)',    '5 mi E',   '~700K mixed','Open-air lifestyle; Life Time Athletic, Yard House, Fogo de Chão, Punch Bowl Social; chef-driven dining + apparel','Dominant lifestyle. NewCo differentiates on workday F&B + Houston-local chef-driven dining.'],
    ['Memorial City Mall',     '5 mi E',   '1.7M GLA',   'Enclosed regional; Macy\'s, AMC, JCPenney; declining apparel','Different consumer occasion. Not a direct competitor for F&B-led NewCo.'],
    ['Town & Country Village', '3 mi E',   '350K SF',    'Outdoor specialty; HEB Central Market, Williams-Sonoma','Owns grocery in this radius. NewCo should NOT chase grocery anchor.'],
    ['BP / Shell campus F&B',  'Adjacent', 'Cafeteria',  'Captive employee cafeterias; no evening / weekend','28K adjacent workers already leaving campus when they can. NewCo replaces this trade.'],
    ['LaCenterra (Cinco Ranch)','12 mi W', '250K SF',    'Open-air mixed; Trader Joe\'s; traded $545/SF (Jul 2025)','Far enough not to compete; validates pricing for stabilized west Houston retail.'],
  ];
  const whitespace = [
    'chef-driven destination dining', 'elevated coffee', 'boutique fitness anchor',
    'eatertainment', 'curated market hall', 'med-spa cluster'
  ];
  return <section id="competition" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="06" title="Competitive Supply"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:56}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          No central retail node exists in the <em>Energy Corridor</em> today.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Major competitors sit 3–5+ miles east, require a car trip, and serve different consumer
          occasions. Republic Square's white space is workday + weekend lifestyle for the corridor itself.
        </p>
      </div>

      <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        background:'var(--ivory-2)', border:'1px solid var(--rule)', overflow:'hidden',
        marginBottom:32
      }}>
        <div style={{overflowX:'auto'}} data-mobile-scroll="true">
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead>
            <tr style={{background:'var(--ink)', color:'var(--ivory)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.18em', textTransform:'uppercase'}}>
              <th style={{textAlign:'left', padding:'18px 16px', minWidth:180}}>Competitor</th>
              <th style={{textAlign:'left', padding:'18px 16px'}}>Distance</th>
              <th style={{textAlign:'left', padding:'18px 16px'}}>GLA</th>
              <th style={{textAlign:'left', padding:'18px 16px'}}>Format / Anchors</th>
              <th style={{textAlign:'left', padding:'18px 16px'}}>Implication</th>
            </tr>
          </thead>
          <tbody>
            {comps.map((r,i)=><tr key={i} style={{background: i%2 ? 'var(--ivory-2)' : 'var(--ivory)'}}>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--rule)', fontWeight:500,
                fontFamily:"'Jost',sans-serif", fontSize:15}}>{r[0]}</td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--rule)',
                color:'var(--muted)', whiteSpace:'nowrap'}}>{r[1]}</td>
              <td className="tnum" style={{padding:'18px 16px', borderBottom:'1px solid var(--rule)'}}>{r[2]}</td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--rule)', color:'var(--muted)',
                lineHeight:1.55, maxWidth:280}}>{r[3]}</td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--rule)', lineHeight:1.55,
                fontStyle:'italic', maxWidth:320}}>{r[4]}</td>
            </tr>)}
          </tbody>
        </table>
        </div>
      </div>

      <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
        padding:'28px 36px', background:'var(--ink)', color:'var(--ivory)',
        display:'flex', flexWrap:'wrap', alignItems:'center', gap:20
      }}>
        <div style={{
          fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.25em',
          textTransform:'uppercase', color:'var(--gold-soft)', paddingRight:20,
          borderRight:'1px solid rgba(244,242,237,0.25)', fontWeight:600
        }}>White Space</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:16, fontSize:14, flex:1}}>
          {whitespace.map((w,i)=><React.Fragment key={w}>
            <span style={{color:'var(--ivory)'}}>{w}</span>
            {i < whitespace.length-1 && <span style={{color:'rgba(244,242,237,0.4)'}}>·</span>}
          </React.Fragment>)}
        </div>
      </div>
    </div>
  </section>;
}

/* ------------------------------------------------------------------ */

function Program(){
  const [ref, inView] = useInView();
  const phases = [
    {
      tag:'Phase 1', when:'Year 1–3', subtitle:'Stabilize + seed', sf:'26.5K SF',
      items:[
        ['F&B anchor (chef-driven)','6.5K'],
        ['Patio / casual restaurants','8.0K'],
        ['Coffee / bakery','3.5K'],
        ['QSR / fast casual','4.5K'],
        ['Service + convenience','4.0K'],
      ]
    },
    {
      tag:'Phase 2', when:'Year 3–6', subtitle:'Retail delivery', sf:'54.0K SF',
      items:[
        ['F&B expansion (6 units)','25.5K'],
        ['Boutique fitness anchor','6.5K'],
        ['Med-spa + wellness','3.0K'],
        ['Market hall / small grocery','12.0K'],
        ['Daycare (experiential)','4.0K'],
      ]
    },
    {
      tag:'Phase 3', when:'Year 6+', subtitle:'Full buildout', sf:'22.5K SF',
      items:[
        ['F&B fill-in (4 units)','10.0K'],
        ['Eatertainment anchor','8.0K'],
        ['Med-spa expansion','1.5K'],
        ['Boutique / lifestyle retail','2.0K'],
        ['Banking / services','1.0K'],
      ]
    },
  ];
  return <section id="program" ref={ref} style={{padding:'120px 40px', background:'var(--ink)', color:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:20,
        fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
        textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:40}}>
        <span>§ 07</span>
        <span style={{flex:1, height:1, background:'rgba(244,242,237,0.2)'}}/>
        <span>Recommended Program</span>
      </div>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:820, marginBottom:56}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24, color:'var(--ivory)'}}>
          Right-sized, <em>phased, concept-led</em>.
        </h2>
        <p style={{fontSize:17, color:'rgba(244,242,237,0.75)', lineHeight:1.6}}>
          Cumulative ~103K SF at full buildout — phased to deliver against residential, hotel,
          and adjacent-capture ramp.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
        {phases.map((p,i)=><div key={p.tag} className={"reveal stat-tile reveal-delay-" + (i+1) + (inView ? ' in-view' : '')}
          style={{padding:36, background:'var(--ink-2)', border:'1px solid rgba(244,242,237,0.12)',
          display:'flex', flexDirection:'column'}}>
          <div style={{
            display:'inline-block', alignSelf:'flex-start', marginBottom:20,
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.25em',
            padding:'6px 12px', border:'1px solid var(--gold-soft)', color:'var(--gold-soft)',
            fontWeight:600
          }}>{p.tag}</div>
          <div style={{fontSize:12, color:'rgba(244,242,237,0.6)', letterSpacing:'0.1em',
            textTransform:'uppercase', marginBottom:8}}>{p.when} · {p.subtitle}</div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:60, fontWeight:300,
            lineHeight:0.95, letterSpacing:'-0.025em', marginBottom:28}} className="tnum">{p.sf}</div>
          <ul style={{listStyle:'none', padding:0, margin:0}}>
            {p.items.map(([l,sf])=><li key={l} style={{
              display:'flex', justifyContent:'space-between', padding:'12px 0',
              borderBottom:'1px solid rgba(244,242,237,0.1)', fontSize:14
            }}>
              <span style={{color:'rgba(244,242,237,0.9)'}}>{l}</span>
              <span className="tnum" style={{color:'var(--gold-soft)', fontWeight:500}}>{sf}</span>
            </li>)}
          </ul>
        </div>)}
      </div>

      <div className={"reveal reveal-delay-4" + (inView ? ' in-view' : '')} style={{
        marginTop:48, padding:'28px 36px', background:'rgba(160,180,195,0.08)',
        borderLeft:'3px solid var(--gold-soft)',
        fontFamily:"'Jost',sans-serif", fontSize:20, lineHeight:1.5, color:'var(--ivory)',
        fontStyle:'italic'
      }}>
        <span style={{color:'var(--gold-soft)', fontStyle:'normal', fontFamily:"'JetBrains Mono',ui-monospace,monospace",
          fontSize:10, letterSpacing:'0.25em', textTransform:'uppercase', marginRight:16, fontWeight:600}}>
          Highest ROI decision →
        </span>
        Subsidize TI for one Houston chef-driven destination anchor. Every other tenant
        conversation is easier after that.
      </div>
    </div>
  </section>;
}

Object.assign(window, { Demand, TheMath, Competition, Program });