/* Sections 1: Hero, Opportunity, Gap, Methodology */

function Hero(){
  const [ref, inView] = useInView();
  return <section ref={ref} style={{
    minHeight:'100vh', background:'var(--ink)', color:'var(--ivory)',
    position:'relative', overflow:'hidden', display:'flex', alignItems:'center',
    padding:'120px 40px 80px'
  }}>
    <div className="ken-burns" style={{position:'absolute', inset:0, opacity:0.35,
      background:
        'radial-gradient(ellipse at 20% 30%, rgba(160,180,195,0.18) 0%, transparent 45%),' +
        'radial-gradient(ellipse at 80% 70%, rgba(58,36,58,0.35) 0%, transparent 50%),' +
        'linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%)',
    }}/>
    <div className="ph-stripes ph-dark" style={{position:'absolute', inset:0, opacity:0.3}}/>

    <div style={{position:'relative', zIndex:2, maxWidth:1280, margin:'0 auto', width:'100%'}}>
      <div className={"reveal" + (inView ? ' in-view' : '')}>
        <div style={{
          display:'inline-flex', alignItems:'center', gap:10,
          fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.3em',
          textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:40,
          padding:'8px 16px', border:'1px solid rgba(160,180,195,0.4)'
        }}>
          <span className="pulse-dot" style={{width:6, height:6, background:'var(--gold-soft)', borderRadius:'50%', display:'inline-block'}}/>
          Confidential · Prepared for George D. Vincent, Jr. · April 2026
        </div>
      </div>

      <h1 className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        fontFamily:"'Jost',sans-serif", fontWeight:300,
        fontSize:'clamp(72px, 11vw, 168px)', lineHeight:0.88, letterSpacing:'-0.03em',
        margin:0
      }}>
        Republic<br/>
        <em style={{fontWeight:400, color:'var(--gold-soft)'}}>Square.</em>
      </h1>

      <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
        marginTop:40, maxWidth:680,
        fontSize:20, lineHeight:1.45, color:'rgba(244,242,237,0.88)', fontWeight:300
      }}>
        A retail operating partnership at the heart of Houston's Energy Corridor.
        JAL Strategies proposes to serve as lead retail operator in a joint venture with SRC —
        turning the 2019 master plan into a demand-supported, phased, concept-led program.
      </div>

      <div className={"reveal reveal-delay-3" + (inView ? ' in-view' : '')} style={{
        marginTop:48, display:'flex', gap:14, flexWrap:'wrap'
      }}>
        <Btn variant="light" onClick={()=>{ const el=document.getElementById('opportunity'); if(el) window.scrollTo({top:el.offsetTop-60,behavior:'smooth'});}}>
          Begin reading <span style={{opacity:0.6}}>↓</span>
        </Btn>
        <Btn variant="lightGhost" href="uploads/JAL_Republic_Square_Pitch_Deck.pptx" download>
          Download deck <span style={{opacity:0.6}}>↓</span>
        </Btn>
        <Btn variant="lightGhost" href={MAILTO}>
          Email Justin <span style={{opacity:0.6}}>→</span>
        </Btn>
      </div>

      <div className={"reveal reveal-delay-4" + (inView ? ' in-view' : '')} style={{
        marginTop:80, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24,
        paddingTop:40, borderTop:'1px solid rgba(244,242,237,0.2)'
      }} data-mobile-2col="true">
        {[
          ['Yield on Cost', DEAL.yoc, 'Stabilized'],
          ['Project IRR', DEAL.irr, 'Year 5 exit · 6.5% cap'],
          ['Equity Multiple', DEAL.em, '$27.4M created'],
          ['Debt Sizing', '70% LTC', 'Prime + 0 · Interest-only'],
        ].map(([l,v,s],i)=><div key={l} className="stat-tile" style={{padding:16, margin:-16}}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'rgba(244,242,237,0.55)', marginBottom:12}}>{l}</div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:52, lineHeight:0.95,
            fontWeight:300, letterSpacing:'-0.025em', color:'var(--ivory)'}} className="tnum">{v}</div>
          <div style={{fontSize:12, color:'rgba(244,242,237,0.6)', marginTop:8}}>{s}</div>
        </div>)}
      </div>
    </div>
  </section>;
}

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

function Opportunity(){
  const [ref, inView] = useInView();
  const snapshot = [
    { n: DEAL.office, l:'Class-A Office SF', d:'86% leased; SRC handles existing' },
    { n: DEAL.acres, l:'Acres retail parcel', d:'Right-sized for 103K SF retail program' },
    { n: DEAL.srcPrice, l:'SRC purchase price', d:`${DEAL.srcPsf} — 48% below replacement` },
    { n: DEAL.workersCorridor, l:'Energy Corridor workers', d:'3rd largest employment node in Houston' },
  ];
  const bullets = [
    "SRC's marketed 34.8% net IRR depends on monetizing excess land in Years 3–4.",
    "Retail credibility is upstream of land value — anchors validate higher prices for adjacent multi and office parcels.",
    "Seven years have passed since the 2019 master plan; retail program has never been re-validated against modern demand.",
    "Energy Corridor has 91K workers but no central F&B / lifestyle node — opportunity to define the corridor's center.",
    "A best-in-class retail operating partner de-risks the program for SRC and incoming JV investors.",
  ];
  return <section id="opportunity" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="01" title="The Opportunity"/>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:80, alignItems:'start'}}>
        <div className={"reveal" + (inView ? ' in-view' : '')}>
          <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:28}}>
            Retail is the <em>connective tissue</em> of the Republic Square thesis.
          </h2>
          <p style={{fontSize:17, color:'var(--muted)', maxWidth:460, lineHeight:1.6}}>
            {DEAL.address}.
          </p>
        </div>
        <div>
          <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
            display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:48
          }} data-mobile-2col="true">
            {snapshot.map((s,i)=><div key={i} className="stat-tile" style={{
              padding:28, background:'var(--ink)', color:'var(--ivory)'
            }}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:14}}>
                {s.l}
              </div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:44, fontWeight:300,
                lineHeight:0.95, letterSpacing:'-0.025em'}} className="tnum">{s.n}</div>
              <div style={{fontSize:12, color:'rgba(244,242,237,0.65)', marginTop:12, lineHeight:1.5}}>{s.d}</div>
            </div>)}
          </div>

          <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')}>
            <Eyebrow>Why the retail program matters</Eyebrow>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:16}}>
              {bullets.map((b,i)=><li key={i} style={{
                paddingLeft:28, position:'relative', fontSize:15, color:'var(--ink)', lineHeight:1.65
              }}>
                <span style={{position:'absolute', left:0, top:'0.6em', width:14, height:1,
                  background:'var(--gold)'}}/>
                {b}
              </li>)}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

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

function Gap(){
  const [ref, inView] = useInView();
  const plan2019 = [
    ['F&B (Restaurant Retail)','62,222 SF'],
    ['Service Retail','3,720 SF'],
    ['Experiential','—'],
    ['Specialty / Grocery','—'],
  ];
  const planJAL = [
    ['F&B (Full-Service + QSR + Bar)','58,600 SF'],
    ['Service Retail','9,200 SF'],
    ['Experiential','8,500 SF'],
    ['Specialty / Grocery','1,400 SF'],
  ];
  return <section id="gap" ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="02" title="The Gap"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:820, marginBottom:64}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          The 2019 retail plan is a <em>placeholder</em> — not a program.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          65,942 SF allocation in the 2019 PM Realty plan was never tested against demand.
          Category mix favors F&B but underbuilds services, experiential, and specialty.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
          padding:40, background:'var(--ivory)', border:'1px solid var(--rule)'
        }}>
          <Eyebrow>2019 PM Realty Master Plan</Eyebrow>
          <div style={{fontSize:11, color:'var(--muted)', marginBottom:28, letterSpacing:'0.04em'}}>
            As written — placeholder allocation
          </div>
          {plan2019.map(([cat,sf])=><div key={cat} style={{
            display:'flex', justifyContent:'space-between', padding:'14px 0',
            borderBottom:'1px solid var(--rule)', fontSize:15
          }}>
            <span>{cat}</span>
            <span className="tnum" style={{fontWeight:500}}>{sf}</span>
          </div>)}
          <div style={{display:'flex', justifyContent:'space-between', padding:'18px 0 0',
            fontFamily:"'Jost',sans-serif", fontSize:20, letterSpacing:'-0.01em', fontWeight:500}}>
            <span>TOTAL</span>
            <span className="tnum">65,942 SF</span>
          </div>
        </div>

        <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
          padding:40, background:'var(--ink)', color:'var(--ivory)', border:'1px solid var(--ink)'
        }}>
          <Eyebrow color="var(--gold-soft)">JAL Demand-Supported · Base Case</Eyebrow>
          <div style={{fontSize:11, color:'rgba(244,242,237,0.55)', marginBottom:28, letterSpacing:'0.04em'}}>
            Built from ICSC / ULI / BLS / ESRI benchmarks
          </div>
          {planJAL.map(([cat,sf])=><div key={cat} style={{
            display:'flex', justifyContent:'space-between', padding:'14px 0',
            borderBottom:'1px solid rgba(244,242,237,0.15)', fontSize:15
          }}>
            <span>{cat}</span>
            <span className="tnum" style={{fontWeight:500}}>{sf}</span>
          </div>)}
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline',
            padding:'18px 0 0', fontFamily:"'Jost',sans-serif", fontSize:20, letterSpacing:'-0.01em', fontWeight:500}}>
            <span>TOTAL</span>
            <span className="tnum" style={{display:'inline-flex', alignItems:'baseline', gap:12}}>
              77,700 SF
              <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                letterSpacing:'0.18em', padding:'4px 8px', background:'var(--gold-soft)',
                color:'var(--ink)', borderRadius:2}}>+18%</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

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

function Method(){
  const [ref, inView] = useInView();
  const sources = [
    { n:'01', t:'Office Workers',    big:DEAL.workersOnSite,  u:'on-site workers',  d:'Daytime captive lunch & coffee trade; primary F&B driver' },
    { n:'02', t:'Residential HH',    big:'799',               u:'households (P3)',   d:'Evening & weekend trade; drives specialty & service' },
    { n:'03', t:'Hotel Guests',      big:'500',               u:'keys',              d:'Transient F&B near-total capture; evening activator' },
    { n:'04', t:'Adjacent Workers',  big:'28K',               u:'within 1 mile',     d:'BP, Shell, ConocoPhillips capture if pedestrian links built' },
    { n:'05', t:'Drive-Time HH',     big:'125K',              u:'15-min radius',     d:'Regional draw; sensitivity-driven (1.5–5% capture)' },
  ];
  return <section id="method" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="03" title="Methodology"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:64}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          Five-source demand framework, <em>ULI-standard</em> methodology.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Captured Spend ÷ Sales-per-SF ÷ Stabilized Occupancy = Supportable SF.
          Calibrated with ICSC, ULI, BLS, ESRI, STR.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16, marginBottom:48}}>
        {sources.map((s,i)=><div key={s.n} className={"reveal stat-tile reveal-delay-" + (i+1) + (inView ? ' in-view' : '')} style={{
          padding:28, background:'var(--ink)', color:'var(--ivory)', minHeight:260,
          display:'flex', flexDirection:'column'
        }}>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:12, letterSpacing:'0.22em',
            color:'var(--gold-soft)', marginBottom:18}}>{s.n}</div>
          <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase',
            color:'rgba(244,242,237,0.75)', marginBottom:18, fontWeight:600}}>{s.t}</div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:38, lineHeight:1,
            fontWeight:300, letterSpacing:'-0.02em'}} className="tnum">{s.big}</div>
          <div style={{fontSize:11, color:'var(--gold-soft)', marginTop:8,
            letterSpacing:'0.04em', marginBottom:16}}>{s.u}</div>
          <div style={{fontSize:13, color:'rgba(244,242,237,0.75)', lineHeight:1.55,
            marginTop:'auto', paddingTop:16, borderTop:'1px solid rgba(244,242,237,0.15)'}}>{s.d}</div>
        </div>)}
      </div>

      <div className={"reveal reveal-delay-6" + (inView ? ' in-view' : '')} style={{
        padding:'28px 36px', border:'1px dashed var(--gold)',
        background:'rgba(58,36,58,0.04)',
        display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:"'Jost',sans-serif", fontSize:18, letterSpacing:'0.02em', color:'var(--ink)',
        flexWrap:'wrap', gap:14, textAlign:'center'
      }}>
        <span>POPULATION</span>
        <span style={{color:'var(--gold)'}}>×</span>
        <span>SPEND</span>
        <span style={{color:'var(--gold)'}}>×</span>
        <span>CAPTURE</span>
        <span style={{color:'var(--gold)', fontSize:22}}>÷</span>
        <span>SALES/SF</span>
        <span style={{color:'var(--gold)', fontSize:22}}>÷</span>
        <span>OCCUPANCY</span>
        <span style={{color:'var(--gold)'}}>=</span>
        <span style={{fontWeight:500}}>SUPPORTABLE SF</span>
      </div>
    </div>
  </section>;
}

Object.assign(window, { Hero, Opportunity, Gap, Method });