/* Sections 3: Structure, Sponsor, Pro Forma, Path, Economics, Documents, Footer */

function Structure(){
  const [ref, inView] = useInView();
  return <section id="structure" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="08" title="The Structure"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:64}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          JAL as <em>lead Operating Partner</em> — retail JV with SRC as capital partner.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Retail-attributable land spins into NewCo. SRC contributes the land as equity; JAL
          brings cash co-invest + operating leadership. GP economics split 70/30 (JAL lead).
          JAL holds day-to-day authority; SRC retains consent on majors.
        </p>
      </div>

      <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        padding:48, background:'var(--ink)', color:'var(--ivory)'
      }}>
        <div style={{textAlign:'center', paddingBottom:36, marginBottom:36,
          borderBottom:'1px solid rgba(244,242,237,0.2)'}}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11,
            letterSpacing:'0.35em', color:'var(--gold-soft)', fontWeight:600, marginBottom:10}}>NEWCO</div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:40, fontWeight:400,
            letterSpacing:'-0.02em', marginBottom:8}}>Republic Square Retail, LLC</div>
          <div style={{fontSize:13, color:'rgba(244,242,237,0.65)', letterSpacing:'0.04em'}}>
            Texas LLC formed at spin-off · Month 9–12
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
          <div style={{padding:28, background:'var(--ink-2)', border:'1px solid rgba(244,242,237,0.12)'}}>
            <Eyebrow color="var(--gold-soft)">GP · General Partner</Eyebrow>
            <div style={{display:'flex', alignItems:'baseline', gap:16, padding:'14px 0',
              borderBottom:'1px solid rgba(244,242,237,0.1)'}}>
              <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:34,
                fontWeight:300, letterSpacing:'-0.02em', minWidth:80, color:'var(--gold-soft)'}}>70%</div>
              <div style={{fontSize:13, lineHeight:1.5}}>
                <div style={{color:'var(--gold-soft)', fontWeight:500}}>JAL</div>
                <div style={{color:'rgba(244,242,237,0.65)'}}>Lead GP · Operating Member · day-to-day authority</div>
              </div>
            </div>
            <div style={{display:'flex', alignItems:'baseline', gap:16, padding:'14px 0'}}>
              <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:34,
                fontWeight:300, letterSpacing:'-0.02em', minWidth:80}}>30%</div>
              <div style={{fontSize:13, lineHeight:1.5}}>
                <div style={{color:'var(--ivory)', fontWeight:500}}>SRC</div>
                <div style={{color:'rgba(244,242,237,0.65)'}}>Capital partner · land contribution</div>
              </div>
            </div>
          </div>

          <div style={{padding:28, background:'var(--ink-2)', border:'1px solid rgba(244,242,237,0.12)'}}>
            <Eyebrow color="var(--gold-soft)">Land Contribution</Eyebrow>
            <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:56,
              fontWeight:300, letterSpacing:'-0.025em', lineHeight:0.95}}>~10 acres</div>
            <div style={{fontSize:13, color:'var(--gold-soft)', marginTop:6}}>retail-attributable</div>
            <div style={{fontSize:13, color:'rgba(244,242,237,0.7)', marginTop:16, lineHeight:1.6,
              paddingTop:16, borderTop:'1px solid rgba(244,242,237,0.1)'}}>
              Right-sized for 103K SF program. Contributed by SRC at FMV ($25/SF, joint third-party
              appraisal); contribution credit via GP interest + waterfall priority.
            </div>
          </div>

          <div style={{padding:28, background:'var(--ink-2)', border:'1px solid rgba(244,242,237,0.12)'}}>
            <Eyebrow color="var(--gold-soft)">Capital Stack</Eyebrow>
            <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:44,
              fontWeight:300, letterSpacing:'-0.02em', lineHeight:1}}>$47.8M</div>
            <div style={{fontSize:13, color:'var(--gold-soft)', marginTop:6}}>total project cost · 70% LTC</div>
            <div style={{marginTop:20, display:'grid', gap:10}}>
              {[
                ['Construction loan (70%)','$33.5M'],
                ['Land equity (SRC)','$10.9M'],
                ['Cash equity (JAL + partners)','$3.5M'],
              ].map(([l,v])=><div key={l} style={{display:'flex', justifyContent:'space-between',
                fontSize:13, color:'rgba(244,242,237,0.88)'}}>
                <span>{l}</span>
                <span className="tnum" style={{color:'var(--gold-soft)', fontWeight:500}}>{v}</span>
              </div>)}
            </div>
          </div>
        </div>

        <div style={{marginTop:36, paddingTop:28, borderTop:'1px solid rgba(244,242,237,0.2)',
          textAlign:'center', fontSize:13, color:'rgba(244,242,237,0.75)', fontStyle:'italic',
          letterSpacing:'0.02em', lineHeight:1.7
        }}>
          Operating control via separate Operating Agreement. SRC retains consent on majors.
          JAL has day-to-day authority. Aligned incentives.
        </div>
      </div>
    </div>
  </section>;
}

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

function Sponsor(){
  const [ref, inView] = useInView();
  const stats = [
    ['$6.1B', 'career transaction volume', '$5.5B Blackstone + $600M Levcor'],
    ['$600M', 'debt + equity allocated',   '26 CRE deals at Levcor'],
    ['3.9M SF','TX + NC retail managed',   'Levcor, 2014–2025'],
    ['20+ yrs','CRE experience',           'Operating, capital markets, AM'],
  ];
  const career = [
    { t:'Levcor, Inc.', d:'President 2024–2025; CIO 2021–2024; VP 2014–2021. $600M / 3.9M SF TX + NC retail portfolio. Realized 4.13× / 16.1% IRR on 6 dispositions.' },
    { t:'The Blackstone Group', d:'Analyst / Associate 2006–2011, NYC. Capital raising for US, Asia, India funds; $2.5B raised; ~$5.5B aggregate transaction volume.' },
    { t:'JAL-JCP Real Estate', d:'Co-Founder. Partnership with JCP Investment Management ($250M+ AUM, SEC-registered). Acquisition of below-replacement-cost unanchored strip centers; 60% LTV cap.' },
    { t:'ULI Houston', d:'Chair, District Council Management Committee 2022–2024. ULI Americas Mixed-Use & Retail Councils. Member since 2015.' },
  ];
  return <section id="sponsor" ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="09" title="Why JAL as Operating Partner"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:64}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          Institutional pedigree. <em>Houston-local.</em> Retail specialist.
        </h2>
      </div>

      <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        padding:'40px 48px', background:'var(--ivory)', border:'1px solid var(--rule)', marginBottom:32
      }}>
        <div style={{fontFamily:"'Jost',sans-serif", fontSize:44, fontWeight:400,
          letterSpacing:'-0.02em', marginBottom:6}}>Justin A. Levine</div>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11,
          letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold)', fontWeight:600, marginBottom:36}}>
          Founder & CEO · JAL Strategies
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24}} data-mobile-2col="true">
          {stats.map(([big,lbl,desc],i)=><div key={i} className="stat-tile" style={{
            padding:20, margin:-4, border:'1px solid var(--rule)'
          }}>
            <div className="tnum" style={{fontFamily:"'Jost',sans-serif", fontSize:36,
              fontWeight:300, letterSpacing:'-0.02em', color:'var(--gold)', lineHeight:1}}>{big}</div>
            <div style={{fontSize:12, color:'var(--ink)', marginTop:10, fontWeight:500}}>{lbl}</div>
            <div style={{fontSize:11, color:'var(--muted)', marginTop:4}}>{desc}</div>
          </div>)}
        </div>
      </div>

      <Eyebrow>Career arc</Eyebrow>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16}}>
        {career.map((c,i)=><div key={c.t} className={"reveal reveal-delay-" + (i+1) + (inView ? ' in-view' : '')} style={{
          padding:32, background:'var(--ivory)', border:'1px solid var(--rule)'
        }}>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:500,
            letterSpacing:'-0.01em', color:'var(--gold)', marginBottom:12}}>{c.t}</div>
          <div style={{fontSize:14, color:'var(--ink)', lineHeight:1.65}}>{c.d}</div>
        </div>)}
      </div>

      <div style={{marginTop:36, paddingTop:28, borderTop:'1px solid var(--rule)',
        fontSize:13, color:'var(--muted)', letterSpacing:'0.02em', textAlign:'center'
      }}>
        M.B.A., The Wharton School, University of Pennsylvania  ·  B.S. Economics + Communication Studies, Northwestern University
      </div>
    </div>
  </section>;
}

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

function ProForma(){
  const [ref, inView] = useInView();
  const uses = [
    ['Land contribution (10 ac × $25/SF)','$10.9M'],
    ['Hard construction ($225/SF × 103K)','$23.2M'],
    ['Tenant improvements ($60/SF, LL)','$6.2M'],
    ['Soft costs (18% of hard)','$4.2M'],
    ['Construction interest reserve','$1.7M'],
    ['Contingency (5% of hard)','$1.2M'],
    ['Loan fees / origination','$0.5M'],
  ];
  const sources = [
    ['Construction debt (70% LTC, Prime)','$33.5M'],
    ['Land contribution (equity)','$10.9M'],
    ['Cash equity (JAL + partners)','$3.5M'],
  ];
  const noi = [
    ['Base rent (103K × 95% × $52 esc.)','$5.14M'],
    ['Plus NNN expense recoveries','$0.88M'],
    ['Effective Gross Revenue','$6.02M'],
    ['Less operating expenses ($10/SF)','($0.98M)'],
    ['Less property mgmt fee (4% EGR)','($0.24M)'],
    ['Less capital reserves ($0.50/SF)','($0.05M)'],
  ];
  return <section id="proforma" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="10" title="Development Pro Forma"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:40}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          <em>9.9%</em> Yield on Cost. <em>26.5%</em> Project IRR. <em>3.04×</em> EM.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Houston-market construction ($225/SF hard + $60/SF TI) + Energy Corridor market rents
          ($48/SF NNN). 70% LTC at Prime. Year 5 sale at <strong>6.5%</strong> exit cap — conservative
          exit underwriting vs. market.
        </p>
      </div>

      <div className={"reveal reveal-delay-1" + (inView ? ' in-view' : '')} style={{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16, marginBottom:48
      }} data-mobile-2col="true">
        {[
          ['Yield on Cost', DEAL.yoc, '$4.74M NOI ÷ $47.8M cost'],
          ['Project IRR / EM', `${DEAL.irr} / ${DEAL.em}`, 'Year 5 sale @ 6.5% cap = $75.2M'],
          ['Value Created', DEAL.valueCreated, `LP IRR ${DEAL.lpIRR} / EM ${DEAL.lpEM}`],
        ].map(([l,v,d],i)=><div key={l} className="stat-tile" style={{
          padding:40, background:'var(--ink)', color:'var(--ivory)',
          textAlign:'center'
        }}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.25em', textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:14,
            fontWeight:600}}>{l}</div>
          <div className="tnum" style={{fontFamily:"'Jost',sans-serif",
            fontSize:'clamp(40px, 5vw, 60px)', fontWeight:300, letterSpacing:'-0.025em',
            lineHeight:1, marginBottom:10}}>{v}</div>
          <div style={{fontSize:12, color:'rgba(244,242,237,0.65)'}}>{d}</div>
        </div>)}
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
          padding:40, background:'var(--ivory-2)', border:'1px solid var(--rule)'
        }}>
          <Eyebrow>Uses of Capital</Eyebrow>
          <ul style={{listStyle:'none', padding:0, margin:0}}>
            {uses.map(([l,v])=><li key={l} style={{display:'flex', justifyContent:'space-between',
              padding:'12px 0', borderBottom:'1px solid var(--rule)', fontSize:14}}>
              <span>{l}</span>
              <span className="tnum" style={{fontWeight:500}}>{v}</span>
            </li>)}
            <li style={{display:'flex', justifyContent:'space-between', padding:'20px 0 0',
              fontFamily:"'Jost',sans-serif", fontSize:20, fontWeight:500, letterSpacing:'-0.01em'}}>
              <span>TOTAL PROJECT COST</span>
              <span className="tnum" style={{color:'var(--gold)'}}>$47.8M</span>
            </li>
          </ul>

          <div style={{marginTop:40, paddingTop:24, borderTop:'1px solid var(--rule)'}}>
            <Eyebrow>Sources of Capital</Eyebrow>
            <ul style={{listStyle:'none', padding:0, margin:0}}>
              {sources.map(([l,v])=><li key={l} style={{display:'flex', justifyContent:'space-between',
                padding:'12px 0', borderBottom:'1px solid var(--rule)', fontSize:14}}>
                <span>{l}</span>
                <span className="tnum" style={{fontWeight:500}}>{v}</span>
              </li>)}
              <li style={{display:'flex', justifyContent:'space-between', padding:'20px 0 0',
                fontFamily:"'Jost',sans-serif", fontSize:20, fontWeight:500, letterSpacing:'-0.01em'}}>
                <span>TOTAL CAPITAL</span>
                <span className="tnum" style={{color:'var(--gold)'}}>$47.8M</span>
              </li>
            </ul>
          </div>
        </div>

        <div className={"reveal reveal-delay-3" + (inView ? ' in-view' : '')} style={{
          padding:40, background:'var(--ink)', color:'var(--ivory)'
        }}>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:8}}>
            <Eyebrow color="var(--gold-soft)">Stabilized NOI Build</Eyebrow>
            <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              color:'var(--gold-soft)', letterSpacing:'0.14em'}}>Year 3+ · 95% leased</span>
          </div>
          <ul style={{listStyle:'none', padding:0, margin:0}}>
            {noi.map(([l,v])=><li key={l} style={{display:'flex', justifyContent:'space-between',
              padding:'12px 0', borderBottom:'1px solid rgba(244,242,237,0.12)', fontSize:14,
              color:'rgba(244,242,237,0.9)'}}>
              <span>{l}</span>
              <span className="tnum" style={{fontWeight:500}}>{v}</span>
            </li>)}
            <li style={{display:'flex', justifyContent:'space-between', padding:'24px 0 0',
              fontFamily:"'Jost',sans-serif", fontSize:26, fontWeight:400, letterSpacing:'-0.015em'}}>
              <span>STABILIZED NOI</span>
              <span className="tnum" style={{color:'var(--gold-soft)'}}>$4.74M</span>
            </li>
          </ul>
          <p style={{marginTop:32, fontSize:12, color:'rgba(244,242,237,0.55)', lineHeight:1.65,
            fontStyle:'italic'}}>
            Assumptions: $225/SF hard, $60/SF TI · $48/SF NNN blended rent · 3% escalations ·
            70% LTC @ Prime (7.5%); takeout @ 5.5% · <strong>6.5% exit cap</strong> (conservative).
            Full model attached.
          </p>
        </div>
      </div>
    </div>
  </section>;
}

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

function Path(){
  const [ref, inView] = useInView();
  const stages = [
    { tag:'Stage 1', t:'Pre-spin master planning', when:'Months 1–9',   fee:'SRC pays JAL $125K',
      items:[
        'SRC pays JAL $125K pre-development fee directly — no JAL capital at risk',
        'Joint master planner selection',
        'Refined demand model & retail program',
        'Anchor tenant pre-qualification',
        'NewCo organizational documents drafted',
        'JAL prepares cash equity commitment',
      ]
    },
    { tag:'Stage 2', t:'NewCo formation', when:'Months 9–12', fee:'$14.3M total equity',
      items:[
        '$10.9M land + $3.5M cash; $33.5M loan',
        'Land contributed at FMV (~76% of equity)',
        'JAL 70% GP (lead) / SRC 30% GP; JAL as Operating Member',
        'JAL + partners source ~$3.5M cash equity',
        'Construction debt closed at 70% LTC',
      ]
    },
    { tag:'Stage 3', t:'Active development', when:'Months 12–48', fee:'GP fees + Operating + Promote',
      items:[
        'JAL operating partner economics',
        'JAL leads design, lease, deliver',
        'GP fees flow 70% to JAL pro rata',
        'JAL Operating Member fee $5K / mo',
        'Quarterly reporting to NewCo LPs',
        'Promote at exit (70% of GP share)',
      ]
    },
  ];
  return <section id="path" ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="11" title="The Path"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:56}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          Three stages from <em>term sheet to exit</em>.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          Stage 1 funded by SRC master-planning fee. Stages 2–3 funded by NewCo equity.
          JAL economics activate at Stage 2 spin-off.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, position:'relative'}}>
        {stages.map((s,i)=><div key={s.tag} className={"reveal reveal-delay-" + (i+1) + (inView ? ' in-view' : '')}
          style={{padding:36, background:'var(--ivory)', border:'1px solid var(--rule)',
          position:'relative'
        }}>
          <div style={{position:'absolute', top:-12, left:36,
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.25em',
            padding:'6px 12px', background:'var(--gold)', color:'var(--ivory)',
            fontWeight:600
          }}>{s.tag}</div>

          <div style={{marginTop:8, marginBottom:20}}>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:24, fontWeight:500,
              letterSpacing:'-0.01em', marginBottom:8}}>{s.t}</div>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)'}}>{s.when}</div>
          </div>

          <div style={{fontFamily:"'Jost',sans-serif", fontSize:16, fontStyle:'italic',
            color:'var(--gold)', padding:'14px 0', borderTop:'1px solid var(--rule)',
            borderBottom:'1px solid var(--rule)', marginBottom:20}}>{s.fee}</div>

          <ul style={{listStyle:'none', padding:0, margin:0}}>
            {s.items.map((item,j)=><li key={j} style={{
              paddingLeft:24, position:'relative', fontSize:13, marginBottom:12, lineHeight:1.6,
              color:'var(--ink)'
            }}>
              <span style={{position:'absolute', left:0, top:'0.65em', width:12, height:1,
                background:'var(--gold)'}}/>
              {item}
            </li>)}
          </ul>
        </div>)}
      </div>
    </div>
  </section>;
}

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

function Economics(){
  const [ref, inView] = useInView();
  const rows = [
    ['Stage 1 pre-development fee', '$125K',  'SRC pays JAL directly during Months 1–9, pre-spin'],
    ['GP fees (70% × standard rates)', '$2.64M','Acq + Dev + AM + Dispo at 70% JAL share'],
    ['JAL Operating Fee ($5K/mo × 36)','$180K','Separate from GP fees, paid by NewCo'],
    ['LP profit on $1M JAL capital', '$1.43M','Pari passu LP returns at 6.5% exit cap'],
    ['GP promote share (JAL 70%)',   '$9.56M','70% of $13.65M GP promote pool (per waterfall tiers)'],
  ];
  return <section id="economics" 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>§ 12</span>
        <span style={{flex:1, height:1, background:'rgba(244,242,237,0.2)'}}/>
        <span>GP Compensation Summary</span>
      </div>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:40}}>
        <h2 style={{fontSize:56, letterSpacing:'-0.02em', lineHeight:1.05, marginBottom:20, color:'var(--ivory)'}}>
          Operating partner compensation, <em>mapped to the SRC waterfall</em>.
        </h2>
        <p style={{fontSize:16, color:'rgba(244,242,237,0.75)', lineHeight:1.65, maxWidth:760}}>
          GP economics split 70/30 between JAL (lead operating partner) and SRC (capital + land).
          Itemized below: pre-development fee, standard GP fees, operating retainer, pari-passu LP
          returns on co-invest, and promote share.
        </p>
      </div>

      <div className={"reveal reveal-delay-2" + (inView ? ' in-view' : '')} style={{
        background:'var(--ink-2)', border:'1px solid rgba(244,242,237,0.12)', overflow:'hidden'
      }}>
        <div style={{overflowX:'auto'}} data-mobile-scroll="true">
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:14}}>
          <thead>
            <tr style={{background:'rgba(0,0,0,0.25)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--gold-soft)'}}>
              <th style={{textAlign:'left', padding:'18px 24px'}}>Component</th>
              <th style={{textAlign:'right', padding:'18px 24px'}}>Amount</th>
              <th style={{textAlign:'left', padding:'18px 24px'}}>Notes</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i)=><tr key={i}>
              <td style={{padding:'18px 24px', borderBottom:'1px solid rgba(244,242,237,0.1)'}}>{r[0]}</td>
              <td className="tnum" style={{padding:'18px 24px', borderBottom:'1px solid rgba(244,242,237,0.1)',
                textAlign:'right', fontWeight:500, color:'var(--gold-soft)'}}>{r[1]}</td>
              <td style={{padding:'18px 24px', borderBottom:'1px solid rgba(244,242,237,0.1)',
                color:'rgba(244,242,237,0.7)', fontStyle:'italic', fontSize:13}}>{r[2]}</td>
            </tr>)}
            <tr style={{background:'rgba(160,180,195,0.12)'}}>
              <td style={{padding:'22px 24px', fontFamily:"'Jost',sans-serif", fontSize:20,
                fontWeight:500, letterSpacing:'-0.01em'}}>Total (all components)</td>
              <td className="tnum" style={{padding:'22px 24px', textAlign:'right',
                fontFamily:"'Jost',sans-serif", fontSize:24, color:'var(--gold-soft)',
                fontWeight:400, letterSpacing:'-0.01em'}}>$13.90M</td>
              <td style={{padding:'22px 24px', color:'rgba(244,242,237,0.7)', fontStyle:'italic', fontSize:13}}>5-year projected; modeled in attached pro forma</td>
            </tr>
          </tbody>
        </table>
        </div>
      </div>
    </div>
  </section>;
}

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

function Docs(){
  const [ref, inView] = useInView();
  const docs = [
    {
      type:'PPTX', title:'Pitch Deck', size:'557 KB',
      desc:'Full 13-slide term sheet presentation — opportunity, demand, program, structure, economics.',
      href:'uploads/JAL_Republic_Square_Pitch_Deck.pptx'
    },
    {
      type:'XLSX', title:'Development Pro Forma Model', size:'35 KB',
      desc:'Full financial model — uses & sources, NOI build, returns, sensitivity tables.',
      href:'uploads/Republic_Square_Retail_ProForma_Model.xlsx'
    },
    {
      type:'XLSX', title:'Retail Demand Model', size:'29 KB',
      desc:'Five-source demand framework with ICSC / ULI / BLS / ESRI benchmark inputs and phase build-out.',
      href:'uploads/Republic_Square_Retail_Demand_Model.xlsx'
    },
  ];
  return <section id="docs" ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <SectionLabel num="13" title="Materials"/>

      <div className={"reveal" + (inView ? ' in-view' : '')} style={{maxWidth:860, marginBottom:56}}>
        <h2 style={{fontSize:64, letterSpacing:'-0.02em', lineHeight:1.02, marginBottom:24}}>
          Full <em>materials package</em>.
        </h2>
        <p style={{fontSize:17, color:'var(--muted)', lineHeight:1.6}}>
          The complete set of documents supporting the term sheet. Pitch deck, financial model,
          demand model, and written proposal.
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20}}>
        {docs.map((d,i)=><a key={d.href} href={d.href} target="_blank" rel="noopener" download
          className={"reveal reveal-delay-" + (i+1) + (inView ? ' in-view' : '') + " btn-lift"} style={{
          display:'flex', flexDirection:'column', padding:36, background:'var(--ink)', color:'var(--ivory)',
          textDecoration:'none', border:'1px solid var(--ink)', minHeight:220
        }}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:24}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.3em', color:'var(--gold-soft)', fontWeight:600}}>{d.type}</div>
            <div style={{fontSize:11, color:'rgba(244,242,237,0.5)', letterSpacing:'0.04em'}}>{d.size}</div>
          </div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:28, fontWeight:400,
            letterSpacing:'-0.015em', marginBottom:12}}>{d.title}</div>
          <div style={{fontSize:14, color:'rgba(244,242,237,0.75)', lineHeight:1.6, flex:1}}>{d.desc}</div>
          <div style={{marginTop:24, paddingTop:20, borderTop:'1px solid rgba(244,242,237,0.18)',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.25em', color:'var(--gold-soft)', fontWeight:600,
            display:'flex', justifyContent:'space-between', alignItems:'center'
          }}>
            <span>DOWNLOAD</span>
            <span style={{fontSize:16}}>↓</span>
          </div>
        </a>)}
      </div>
    </div>
  </section>;
}


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

function Footer(){
  return <footer style={{padding:'60px 40px 48px', background:'var(--ink-2)', color:'rgba(244,242,237,0.7)',
    fontSize:13}}>
    <div style={{maxWidth:1280, margin:'0 auto'}}>
      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr', gap:40, marginBottom:40}}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
            <div style={{width:36, height:36, border:'1px solid var(--gold-soft)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:"'Jost',sans-serif", fontSize:14, fontStyle:'italic', color:'var(--gold-soft)'
            }}>RS</div>
            <div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:18, color:'var(--ivory)'}}>
                JAL Strategies
              </div>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-soft)', marginTop:3}}>
                Disciplined Retail Real Estate
              </div>
            </div>
          </div>
          <p style={{maxWidth:360, lineHeight:1.65, color:'rgba(244,242,237,0.6)'}}>
            Institutional retail investing and development. Based in Houston.
          </p>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-soft)',
            marginBottom:14, fontWeight:600}}>Contact</div>
          <div style={{color:'var(--ivory)', marginBottom:4}}>Justin A. Levine</div>
          <div style={{marginBottom:4, color:'rgba(244,242,237,0.6)', fontSize:12}}>Founder & CEO</div>
          <a href="mailto:jlevine@jalstrategies.com" style={{color:'var(--gold-soft)', borderBottom:'1px solid rgba(160,180,195,0.3)'}}>
            jlevine@jalstrategies.com
          </a>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-soft)',
            marginBottom:14, fontWeight:600}}>Confidential</div>
          <div style={{lineHeight:1.65, color:'rgba(244,242,237,0.6)'}}>
            Prepared for George D. Vincent, Jr.<br/>
            Senior Managing Director, SRC<br/>
            April 2026 · Not for redistribution.
          </div>
        </div>
      </div>
      <div style={{paddingTop:24, borderTop:'1px solid rgba(244,242,237,0.12)',
        display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16,
        fontSize:11, color:'rgba(244,242,237,0.5)', letterSpacing:'0.04em'}}>
        <span>© 2026 JAL Strategies LLC · All rights reserved.</span>
        <span>13501 Katy Freeway · Houston, TX · Energy Corridor</span>
      </div>
    </div>
  </footer>;
}

Object.assign(window, { Structure, Sponsor, ProForma, Path, Economics, Docs, Footer });