/* Shoppes at San Felipe — Financials, Returns, Exit, Sponsor, CTA */
const { useState: u2S, useEffect: u2E, useRef: u2R } = React;

/* =========================== FINANCIALS =========================== */
const NOI_YRS = [1846, 1951, 1996, 1988, 2061, 2072, 2198, 2211, 2178, 2260]; // $K
const DEBT_YRS = [1072, 1072, 1329, 1329, 1329, 1117, 1117, 1409, 1409, 1409];
const OPCF_YRS = [725, 830, 619, 611, 684, 908, 1033, 753, 720, 802];
const COC_YRS =  [5.58, 6.39, 4.76, 4.70, 5.26, 6.98, 7.95, 5.80, 5.54, 6.17];
const LP_DIST =  [563, 668, 457, 449, 521, 745, 871, 591, 558, 640];
const LP_COC  =  [4.3, 5.1, 3.5, 3.5, 4.0, 5.7, 6.7, 4.5, 4.3, 4.9];
const REFI_Y5 = 2495;

function Financials(){
  const [ref, inView] = useInView();
  return <section id="financials" ref={ref} style={{padding:'120px 40px', background:'var(--ink)', color:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="07" title="Financials"/>
      <h2 style={{fontSize:'clamp(40px, 5vw, 68px)', letterSpacing:'-0.025em', lineHeight:1.02,
        fontWeight:300, marginBottom:60, maxWidth:900}}>
        <em style={{color:'var(--gold-soft)'}}>$1.85M</em> in-place NOI. $7.69M total 10-year operating cash flow.
      </h2>

      {/* Year 1 operating statement */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, marginBottom:80}}>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:20}}>Year 1 Operating Statement</div>
          {[
            ['Retail Base Rent', '$1,616,788'],
            ['Expense Recoveries', '$594,523'],
            ['Ground Lease (CVS)', '$385,000'],
            ['Signage / Other', '$3,120'],
            ['Gross Revenue', '$2,599,431', true],
            ['Property Taxes', '($403,580)'],
            ['Insurance', '($36,675)'],
            ['CAM / R&M / Utilities', '($227,029)'],
            ['Management (3.0%)', '($77,983)'],
            ['Administrative', '($8,370)'],
            ['Total Expenses', '($753,637)', true],
          ].map(([k,v,bold])=>(
            <div key={k} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:16,
              padding:'12px 0', borderBottom:'1px solid rgba(244,242,237,0.08)',
              alignItems:'baseline',
              borderTop: bold?'1px solid rgba(244,242,237,0.3)':'none'}}>
              <span style={{fontSize:13, color: bold?'var(--ivory)':'rgba(244,242,237,0.7)',
                fontWeight:bold?500:400}}>{k}</span>
              <span className="tnum" style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:13,
                color:'var(--ivory)', fontWeight:bold?500:400}}>{v}</span>
            </div>
          ))}
          <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:16,
            padding:'18px 0 0', alignItems:'baseline'}}>
            <span style={{fontFamily:"'Jost',sans-serif", fontSize:22}}>Net Operating Income</span>
            <span style={{fontFamily:"'Jost',sans-serif", fontSize:28, color:'var(--gold-soft)'}}
              className="tnum">$1,845,794</span>
          </div>
        </div>

        {/* Cash flow chart */}
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:20}}>
            10-Year NOI Trajectory
          </div>
          <div style={{position:'relative', background:'rgba(244,242,237,0.04)',
            border:'1px solid rgba(244,242,237,0.08)', padding:'28px 20px 40px', height:320}}>
            <div style={{display:'flex', alignItems:'flex-end', gap:6, height:'100%',
              position:'relative'}}>
              {NOI_YRS.map((n,i)=>{
                const h = ((n-1700)/(2300-1700))*90;
                return <div key={i} style={{flex:1, display:'flex', flexDirection:'column',
                  alignItems:'center', gap:6, height:'100%', justifyContent:'flex-end'}}>
                  <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                    color:'rgba(244,242,237,0.7)'}}>${(n/1000).toFixed(2)}M</span>
                  <div style={{width:'100%', height: inView?`${h}%`:0,
                    background:'var(--gold-soft)',
                    transition:`height 1s ease ${0.1+i*0.05}s`}}/>
                  <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                    color:'rgba(244,242,237,0.5)'}}>Yr {i+1}</span>
                </div>;
              })}
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16, marginTop:24}}>
            {[
              ['Total 10-Yr Op. CF', '$7.69M'],
              ['Avg Cash-on-Cash', '5.91%'],
              ['Yr 5 Refi Cash-Out', '$2.50M'],
            ].map(([k,v])=>(
              <div key={k} style={{padding:'16px 18px', background:'rgba(244,242,237,0.04)',
                borderLeft:'2px solid var(--gold-soft)'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.18em',
                  textTransform:'uppercase', color:'rgba(244,242,237,0.55)', marginBottom:6}}>{k}</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:300}} className="tnum">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* DSCR table */}
      <div>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:20,
          display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
          <span>Debt Service Coverage · By Year</span>
          <span style={{color:'rgba(244,242,237,0.55)'}}>Min 1.42× · All years &gt; 1.25× lender threshold</span>
        </div>
        <div style={{overflowX:'auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'140px repeat(10, 1fr)', gap:0,
            minWidth:900}}>
            {['','Yr 1','Yr 2','Yr 3','Yr 4','Yr 5','Yr 6','Yr 7','Yr 8','Yr 9','Yr 10'].map((h,i)=>(
              <div key={i} style={{padding:'12px 8px', fontFamily:"'JetBrains Mono',ui-monospace,monospace",
                fontSize:10, letterSpacing:'0.15em', textTransform:'uppercase',
                color:'rgba(244,242,237,0.55)', borderBottom:'1px solid rgba(244,242,237,0.15)'}}>{h}</div>
            ))}
            {['NOI', ...NOI_YRS.map(n=>`$${n.toLocaleString()}K`)].map((v,i)=>(
              <div key={'n'+i} style={{padding:'14px 8px', fontSize:12,
                fontFamily: i===0?'inherit':"'JetBrains Mono',ui-monospace,monospace",
                color: i===0?'rgba(244,242,237,0.65)':'var(--ivory)',
                borderBottom:'1px solid rgba(244,242,237,0.06)'}}
                className={i>0?'tnum':''}>{v}</div>
            ))}
            {['Debt Svc', ...DEBT_YRS.map(n=>`$${n.toLocaleString()}K`)].map((v,i)=>(
              <div key={'d'+i} style={{padding:'14px 8px', fontSize:12,
                fontFamily: i===0?'inherit':"'JetBrains Mono',ui-monospace,monospace",
                color: i===0?'rgba(244,242,237,0.65)':'rgba(244,242,237,0.75)',
                borderBottom:'1px solid rgba(244,242,237,0.06)'}}
                className={i>0?'tnum':''}>{v}</div>
            ))}
            {['DSCR', ...NOI_YRS.map((n,i)=>(n/DEBT_YRS[i]).toFixed(2)+'×')].map((v,i)=>(
              <div key={'r'+i} style={{padding:'14px 8px', fontSize:12,
                fontFamily: i===0?'inherit':"'JetBrains Mono',ui-monospace,monospace",
                color: i===0?'rgba(244,242,237,0.65)':'var(--gold-soft)',
                fontWeight:i===0?400:500}}
                className={i>0?'tnum':''}>{v}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== LP RETURNS CALCULATOR =========================== */
function Returns(){
  const [amt, setAmt] = u2S(250000);
  const [ref, inView] = useInView();
  const MIN = 100_000, MAX = 5_000_000;
  const share = amt / 13_000_000;
  const distributions = LP_DIST.map(d => d * 1000 * share);
  const refiAmount = REFI_Y5 * 1000 * share;
  const yr5Total = distributions[4] + refiAmount;
  const exitLP = 40353557 - 8558971; // net exit after pre-exit dists ($6.063M ops + $2.495M refi)
  const exitShare = exitLP * share;
  const totalLP = 40353557 * share;

  return <section id="returns" ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="08" title="Model Your Investment"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'start'}}>
        <div>
          <h2 style={{fontSize:'clamp(36px, 4.5vw, 62px)', letterSpacing:'-0.025em', lineHeight:1.04,
            fontWeight:300, marginBottom:24}}>
            $13M invested. <em style={{color:'var(--gold)'}}>$40M returned.</em>
          </h2>
          <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.6, marginBottom:36}}>
            Adjust your commitment to project annual distributions, the Year 5 refi cash-out,
            and Year 10 exit proceeds. Based on base-case underwriting at $300/SF exit — see
            full sensitivity in the package.
          </p>
          <div style={{marginBottom:8, display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--muted)'}}>
              Your commitment
            </div>
          </div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:72, lineHeight:1, fontWeight:300,
            letterSpacing:'-0.03em', marginBottom:16}} className="tnum">
            {fmtUSD(amt)}
          </div>
          <input type="range" min={MIN} max={MAX} step={25000} value={amt}
            onChange={e=>setAmt(parseInt(e.target.value))}
            style={{width:'100%', accentColor:'var(--gold)', marginBottom:8}}/>
          <div style={{display:'flex', justifyContent:'space-between',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, color:'var(--muted)'}}>
            <span>$100K min</span><span>$5.0M</span>
          </div>
          <div style={{display:'flex', gap:8, marginTop:20, flexWrap:'wrap'}}>
            {[100000, 250000, 500000, 1000000, 5000000].map(v=>(
              <button key={v} onClick={()=>setAmt(v)} style={{
                padding:'8px 14px', background: amt===v?'var(--ink)':'transparent',
                color: amt===v?'var(--ivory)':'var(--ink)',
                border:'1px solid var(--ink)', fontSize:12, cursor:'pointer',
                fontFamily:"'JetBrains Mono',ui-monospace,monospace", letterSpacing:'0.05em'
              }}>{fmtUSDshort(v)}</button>
            ))}
          </div>
          <div style={{marginTop:32, padding:'20px 22px', background:'var(--ivory)',
            borderLeft:'2px solid var(--gold)'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>Waterfall</div>
            <div style={{fontSize:13, lineHeight:1.7, color:'var(--ink)'}}>
              Tier 1 · Return of capital<br/>
              Tier 2 · Preferred return to 1.25× invested<br/>
              Tier 3 · 80% to LPs / 20% GP promote on excess
            </div>
          </div>
        </div>

        <div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16, marginBottom:32}}>
            <div style={{background:'var(--ivory)', padding:22, borderTop:'2px solid var(--gold)'}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'var(--muted)', marginBottom:10}}>Total LP distributions</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:36, fontWeight:300,
                letterSpacing:'-0.02em', lineHeight:1}} className="tnum">{fmtUSD(Math.round(totalLP))}</div>
              <div style={{fontSize:11, color:'var(--muted)', marginTop:6}}>10-yr cumulative</div>
            </div>
            <div style={{background:'var(--ink)', color:'var(--ivory)', padding:22,
              borderTop:'2px solid var(--gold)'}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', opacity:0.7, marginBottom:10}}>LP IRR (net)</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:36, fontWeight:300,
                letterSpacing:'-0.02em', lineHeight:1}} className="tnum">14.0%</div>
              <div style={{fontSize:11, opacity:0.7, marginTop:6}}>base case · $300/SF</div>
            </div>
            <div style={{background:'var(--ivory)', padding:22, borderTop:'2px solid var(--gold)'}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'var(--muted)', marginBottom:10}}>LP equity multiple</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:36, fontWeight:300,
                letterSpacing:'-0.02em', lineHeight:1}} className="tnum">3.10×</div>
              <div style={{fontSize:11, color:'var(--muted)', marginTop:6}}>on invested capital</div>
            </div>
          </div>

          {/* Waterfall bars */}
          <div style={{background:'var(--ivory)', padding:'28px 28px 32px'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--muted)', marginBottom:24}}>
              Projected LP cash distribution schedule (your pro rata)
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(11, 1fr)', gap:8,
              alignItems:'flex-end', height:180}}>
              {distributions.map((d,i)=>{
                const total = i===4 ? d + refiAmount : d;
                const pct = (total / (exitShare * 1.1)) * 100;
                const isRefi = i===4;
                return <div key={i} style={{display:'flex', flexDirection:'column', gap:6,
                  height:'100%', justifyContent:'flex-end', alignItems:'center'}}>
                  <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                    color:'var(--muted)'}} className="tnum">{fmtUSDshort(Math.round(total))}</span>
                  <div style={{width:'100%', display:'flex', flexDirection:'column',
                    justifyContent:'flex-end', position:'relative', height:`${Math.max(pct,8)}%`,
                    transition:'height .5s ease'}}>
                    {isRefi && <div style={{width:'100%',
                      height: `${(refiAmount/(total))*100}%`,
                      background:'var(--gold)', display:'flex', alignItems:'center',
                      justifyContent:'center', overflow:'hidden'}}>
                      <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:8,
                        letterSpacing:'0.15em', color:'var(--ivory)', textTransform:'uppercase',
                        whiteSpace:'nowrap'}}>+Refi</span>
                    </div>}
                    <div style={{width:'100%', flex:1, background:'var(--ink)'}}/>
                  </div>
                  <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                    color:'var(--muted)'}}>Y{i+1}</span>
                </div>;
              })}
              {/* Exit bar */}
              <div style={{display:'flex', flexDirection:'column', gap:6,
                height:'100%', justifyContent:'flex-end', alignItems:'center'}}>
                <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                  color:'var(--gold)', fontWeight:600}} className="tnum">{fmtUSDshort(Math.round(exitShare))}</span>
                <div style={{width:'100%', height:'100%',
                  background:'var(--gold)'}}/>
                <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                  color:'var(--gold)', fontWeight:600}}>EXIT</span>
              </div>
            </div>
            <div style={{marginTop:24, paddingTop:16, borderTop:'1px solid var(--rule)',
              display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                  textTransform:'uppercase', color:'var(--muted)', marginBottom:4}}>Total returned over 10 years</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, fontWeight:300}} className="tnum">
                  {fmtUSD(Math.round(totalLP))}
                </div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                  textTransform:'uppercase', color:'var(--muted)', marginBottom:4}}>Net profit</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, fontWeight:300,
                  color:'var(--gold)'}} className="tnum">
                  +{fmtUSD(Math.round(totalLP - amt))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Sensitivity table */}
      <div style={{marginTop:80}}>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)', marginBottom:20}}>
          Sensitivity — LP IRR by exit land price
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(9, 1fr)', gap:0,
          border:'1px solid var(--rule)', background:'var(--ivory)'}}>
          {['$200','$225','$250','$275','$300','$325','$350','$375','$400'].map((p,i)=>(
            <div key={p} style={{padding:'10px 8px', textAlign:'center',
              borderRight: i<8?'1px solid var(--rule)':'none',
              borderBottom:'1px solid var(--rule)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.12em',
              color:'var(--muted)', background: i===4?'var(--ink)':'transparent',
              color: i===4?'var(--ivory)':'var(--muted)'}}>{p}<span style={{opacity:0.6}}>/SF</span></div>
          ))}
          {['8.3%','10.0%','11.5%','12.8%','14.0%','15.0%','16.0%','16.9%','17.8%'].map((v,i)=>(
            <div key={'irr'+i} style={{padding:'16px 8px', textAlign:'center',
              borderRight: i<8?'1px solid var(--rule)':'none',
              fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:300,
              background: i===4?'rgba(160,180,195,0.15)':'transparent',
              color: i===4?'var(--gold)':'var(--ink)'}} className="tnum">{v}</div>
          ))}
          {['1.91×','2.21×','2.51×','2.81×','3.10×','3.40×','3.70×','4.00×','4.30×'].map((v,i)=>(
            <div key={'em'+i} style={{padding:'10px 8px', textAlign:'center',
              borderTop:'1px solid var(--rule)',
              borderRight: i<8?'1px solid var(--rule)':'none',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:12,
              color:'var(--muted)'}} className="tnum">{v}</div>
          ))}
        </div>
        <div style={{fontSize:12, color:'var(--muted)', marginTop:12, fontStyle:'italic'}}>
          Even at $250/SF — 17% below base case — LP IRR exceeds 11.5% with a 2.51× multiple.
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== EXIT VISION =========================== */
function ExitVision(){
  const [ref, inView] = useInView();
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="09" title="Exit · The Next Buyer"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'center'}}>
        <div>
          <img src="./img/exit-rendering.png" alt="Conceptual rendering — The Residences at San Felipe"
            style={{width:'100%', display:'block', aspectRatio:'4/5', objectFit:'cover', background:'#0b1220'}}/>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
            textTransform:'uppercase', color:'var(--muted)', marginTop:10, fontStyle:'italic'}}>
            Illustrative — depicts what the next buyer could build after our exit (est. 2036).
          </div>
        </div>
        <div>
          <h2 style={{fontSize:'clamp(36px, 4.5vw, 62px)', letterSpacing:'-0.025em', lineHeight:1.04,
            fontWeight:300, marginBottom:24}}>
            A <em style={{color:'var(--gold)'}}>19.2%</em> project IRR for the next buyer.
          </h2>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.6, marginBottom:32}}>
            Developer economics at $300/SF land basis validate our exit thesis. The next buyer —
            a mixed-use developer — earns a market-rate return building 449 units on the parcel.
            Our sale is their acquisition.
          </p>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:32}}>
            {[
              ['Developer IRR', '19.2%'],
              ['Equity multiple', '2.78×'],
              ['Stabilized value', '$255.4M'],
              ['Profit margin', '28.8%'],
            ].map(([k,v])=>(
              <div key={k} style={{padding:'18px 20px', background:'var(--ivory-2)',
                borderLeft:'2px solid var(--gold)'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                  textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>{k}</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:30, fontWeight:300,
                  letterSpacing:'-0.02em'}} className="tnum">{v}</div>
              </div>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, fontSize:13,
            color:'var(--muted)'}}>
            {[
              ['14 stories', '449 units'],
              ['353,005 NRSF', '725 SF avg unit'],
              ['$4.90 / SF / mo', '660 parking stalls'],
              ['24,500 SF retail', 'Pool · fitness · dog run'],
            ].flat().map((v,i)=>(
              <div key={i} style={{padding:'10px 0', borderBottom:'1px solid var(--rule)'}}>{v}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== RISKS =========================== */
function Risks(){
  const [ref, inView] = useInView();
  const items = [
    ['Tenant turnover', 'Diverse 21-tenant roster · 95.2% occupancy · 5.77-yr WALT. No single tenant (ex-CVS) exceeds 13% of revenue.'],
    ['Below-market rent', 'Current rents ~21% below market creates natural upside buffer. Mark-to-market adds $471K to NOI without new tenants.'],
    ['Land value compression', 'Even at $225/SF (3.2% CAGR, below Houston\'s 5–7% avg), LP IRR is still ~10% with a 2.2× multiple.'],
    ['Interest rate / refi risk', 'Conservative 60% LTV with DSCR > 1.42× in all years. No-refi scenario still yields 12.4% LP IRR.'],
    ['Property tax reassessment', 'HCAD reassessment risk offset by triple-net recovery structure — taxes pass through to tenants under existing leases.'],
    ['Insurance / storm exposure', 'Gulf Coast location mitigated by concrete tilt-wall construction, flood zone X (minimal), and NNN expense recovery.'],
    ['Zoning / deed restrictions', 'Confirmed NO deed restrictions. Standalone commercial plat. Houston Ch. 42 — no height limits on this parcel.'],
  ];
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="10" title="Risk Factors &amp; Mitigants"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:80, alignItems:'start'}}>
        <h2 style={{fontSize:'clamp(36px, 4.5vw, 58px)', letterSpacing:'-0.02em', lineHeight:1.04,
          fontWeight:300, marginBottom:24}}>
          Where it could <em style={{color:'var(--gold)'}}>go wrong</em>. How we've priced it in.
        </h2>
        <div>
          {items.map(([risk, mitigant], i)=>(
            <div key={risk} style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:32,
              padding:'20px 0', borderBottom:'1px solid var(--rule)',
              opacity: inView?1:0, transform: inView?'none':'translateY(12px)',
              transition:`all .6s ease ${0.05*i}s`}}>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:20, fontWeight:400,
                letterSpacing:'-0.01em'}}>{risk}</div>
              <div style={{fontSize:14, color:'var(--muted)', lineHeight:1.6}}>{mitigant}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== SPONSOR =========================== */
const PILLARS = [
  { k:'01', t:'Partnership & Leadership', pts:[
    'Longstanding collaboration across commercial real estate',
    'Complementary backgrounds: private RE, public markets, capital formation',
    'Institutional discipline · operator-driven execution',
    'Shared philosophy, repeatable process, proven track records',
  ]},
  { k:'02', t:'Strategy & Market Focus', pts:[
    'Private real estate with long-term value creation',
    'Primary emphasis on unanchored strip centers',
    '"Cash-flow day one" — acquire below replacement cost',
    'Texas & Southeast U.S. in a fragmented ~$3T market',
  ]},
  { k:'03', t:'Investor Alignment', pts:[
    'Flexible: deal-by-deal, SMA, or programmatic venture',
    'Modest leverage — capped at ~60% LTV',
    'DSCR still 1:1 even after a 40% cash-flow loss',
    'Operate assets directly — no double-promote structures',
  ]},
];

const BIOS = [
  {
    name:'Justin A. Levine', firm:'Co-Founder · JAL Strategies',
    email:'jlevine@jalstrategies.com',
    stats:[
      ['20+ yrs', 'commercial real estate'],
      ['$600M', 'invested/managed at Levcor'],
      ['3.9M sf', 'across 26 assets (TX & NC)'],
      ['$2.5B', 'equity raised at Blackstone'],
    ],
    bio:[
      'Former President of Levcor, Inc., a full-service national CRE firm that has developed, owned, or managed 25M sf of real estate. At Levcor (2014–2025) served as President, SVP/CIO, and VP.',
      'Helped invest and/or manage $600M across 26 assets and 3.9M sf in Texas and North Carolina — delivering a 4.13× realized equity multiple and 16.1% realized IRR across six exited assets, with an additional twenty active assets carrying an estimated 3.36× total equity multiple as of underwriting.',
      'Previously at The Blackstone Group (2006–2011) in New York, where he helped raise ~$2.5B of institutional equity for global real estate platforms across 15 private-equity advisory assignments. Active member of the Urban Land Institute.',
    ],
    creds:[
      'M.B.A., The Wharton School of Business',
      'B.S. Economics & Communication Studies, Northwestern University',
      'Urban Land Institute (ULI) — Member; former Houston District Council Chair (2022–24)',
      'ICSC member · Licensed Texas real estate salesperson',
    ],
  },
  {
    name:'James C. Pappas', firm:'Co-Founder · JCP Investment Management',
    email:'jcp@jcpinv.com',
    stats:[
      ['17+ yrs', 'public real estate & credit'],
      ['$250M+', 'discretionary capital at JCP'],
      ['$50M+', 'raised in co-invest strategies'],
      ['10+', 'public-company boards served'],
    ],
    bio:[
      'Founded JCP Investment Management in June 2009 — a value-based, SEC-registered investment firm operating across equity, credit, and distressed securities, primarily in North America.',
      'Currently serves on the board of Tandy Leather Factory (NASDAQ:TLF). Prior board seats: Jamba Inc., U.S. Geothermal, The Pantry, and Chairman of Morgan\'s Foods — several taken private or sold at a premium.',
      'Previously with The Goldman Sachs Group (Investment Banking / Leveraged Finance) and Banc of America Securities (Consumer & Retail Investment Banking).',
    ],
    creds:[
      'M.S. Finance, Texas A&M University',
      'B.B.A., Texas A&M University',
      'Houston Methodist Gastrology Board',
      'Endowment Board — Houston Greek Orthodox Church',
    ],
  },
];

const TRACK = [
  { phase:'Realized', dot:'var(--gold)', rows:[
    ['Northwest Mall', 'Houston, TX · Land', '5.62x', '17.4%'],
    ['UTMB / Texas City', 'Texas City, TX · STNL', '3.07x', '31.0%'],
    ['Village @ West Oaks', 'Houston, TX · Retail', '2.74x', '28.4%'],
    ['Sherman Centre', 'Sherman, TX · Retail', '2.31x', '13.5%'],
    ['Laredo San Dario', 'Laredo, TX · Land', '1.27x', '3.3%'],
  ]},
];

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

      {/* ---------- FIRM INTRO ---------- */}
      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:80, alignItems:'start', marginBottom:100}}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:28}}>
            <div style={{width:56, height:56, border:'1px solid var(--ink)', display:'flex',
              flexDirection:'column', alignItems:'center', justifyContent:'center',
              fontFamily:"'Jost',sans-serif", fontStyle:'italic', fontSize:14,
              lineHeight:1.05, letterSpacing:'-0.01em', flexShrink:0}}>
              <span>JAL</span>
              <span style={{fontSize:8, margin:'1px 0', opacity:0.6}}>·</span>
              <span>JCP</span>
            </div>
            <div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:24}}>JAL-JCP Real Estate Partners</div>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'var(--muted)'}}>Houston, TX · Spring 2026</div>
            </div>
          </div>
          <h2 style={{fontSize:'clamp(40px, 5vw, 68px)', letterSpacing:'-0.025em', lineHeight:1.02,
            fontWeight:300, marginBottom:28}}>
            Institutional discipline.<br/>
            <em style={{color:'var(--gold)'}}>Operator-driven execution.</em>
          </h2>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.7, maxWidth:580, marginBottom:20}}>
            JAL-JCP is a partnership between Justin A. Levine and James C. Pappas focused on
            acquiring retail real estate with durable cash flow and long-term value creation.
            James also serves as Founder and Managing Partner of JCP Investment Management,
            an SEC-registered investment firm operating across equity, credit, and distressed
            securities — JCP Investment Management is not the sponsor, manager, or investment
            adviser of this offering.
            Combined experience spans private real estate, public markets, and institutional
            capital formation.
          </p>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.7, maxWidth:580, margin:0}}>
            Our strategy centers on <strong style={{color:'var(--ink)'}}>unanchored strip centers</strong> —
            acquired below replacement cost, underwritten to in-place cash flow, and held with
            conservative leverage for downside protection.
          </p>
        </div>
        <div style={{background:'var(--ivory-2)', padding:32, borderLeft:'2px solid var(--gold)'}}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--muted)', marginBottom:20}}>The partnership</div>
          <div style={{fontFamily:"'Jost',sans-serif", fontSize:24, lineHeight:1.15, marginBottom:14}}>
            Justin A. Levine &amp; James C. Pappas
          </div>
          <p style={{fontSize:13, color:'var(--muted)', lineHeight:1.65, margin:'0 0 20px'}}>
            Two operators, one partnership. Justin brings twenty years of institutional real estate
            investing — Blackstone, Levcor — with a realized 4.13× / 16.1% IRR track record across
            exited Texas &amp; North Carolina assets. James brings seventeen years of public-markets,
            credit, and capital-formation discipline through JCP Investment Management. Together
            they source, underwrite, and operate every deal directly.
          </p>
          <div style={{borderTop:'1px solid rgba(0,0,0,0.08)', paddingTop:18,
            display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            {[
              ['43+ yrs', 'combined experience'],
              ['$900M+', 'invested &amp; managed'],
              ['3.9M SF', 'across 26 assets'],
              ['$2.5B+', 'institutional equity raised'],
            ].map(([k,v])=>(
              <div key={k}>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:24, lineHeight:1, marginBottom:4}}
                  dangerouslySetInnerHTML={{__html:k}}/>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}
                  dangerouslySetInnerHTML={{__html:v}}/>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ---------- THREE PILLARS ---------- */}
      <div style={{marginBottom:100}}>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)', marginBottom:32}}>
          — How we operate
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:2,
          background:'rgba(0,0,0,0.08)', border:'1px solid rgba(0,0,0,0.08)'}}>
          {PILLARS.map(p=>(
            <div key={p.k} style={{background:'var(--ivory)', padding:36}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                color:'var(--gold)', marginBottom:18}}>{p.k}</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:26, lineHeight:1.15,
                letterSpacing:'-0.015em', marginBottom:20, minHeight:60}}>{p.t}</div>
              <ul style={{listStyle:'none', padding:0, margin:0}}>
                {p.pts.map((pt,i)=>(
                  <li key={i} style={{fontSize:13.5, color:'var(--muted)', lineHeight:1.55,
                    padding:'10px 0', borderTop: i>0 ? '1px solid rgba(0,0,0,0.06)' : 'none',
                    display:'flex', gap:10}}>
                    <span style={{color:'var(--gold)', fontFamily:"'JetBrains Mono',ui-monospace,monospace",
                      fontSize:10, lineHeight:1.7, flexShrink:0}}>◦</span>
                    <span>{pt}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* ---------- FOUNDER BIOS ---------- */}
      <div style={{marginBottom:100}}>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)', marginBottom:32}}>
          — The founders
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr', gap:2,
          background:'rgba(0,0,0,0.08)', border:'1px solid rgba(0,0,0,0.08)'}}>
          {BIOS.map((b,bi)=>(
            <div key={b.name} style={{background:'var(--ivory)', padding:48,
              display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, alignItems:'start'}}>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:34, lineHeight:1.05,
                  letterSpacing:'-0.02em', marginBottom:8}}>{b.name}</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
                  textTransform:'uppercase', color:'var(--gold)', marginBottom:14}}>
                  {b.firm}
                </div>
                <a href={`mailto:${b.email}`} style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace",
                  fontSize:11, color:'var(--ink)', borderBottom:'1px solid var(--ink)',
                  paddingBottom:2, display:'inline-block', marginBottom:28}}>{b.email}</a>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'20px 24px', marginBottom:28,
                  paddingBottom:24, borderBottom:'1px solid rgba(0,0,0,0.08)'}}>
                  {b.stats.map(([k,v])=>(
                    <div key={k}>
                      <div style={{fontFamily:"'Jost',sans-serif", fontSize:30, lineHeight:1,
                        letterSpacing:'-0.02em', marginBottom:6, color:'var(--ink)'}}>
                        <CountUp inView={inView} value={k}/>
                      </div>
                      <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.15em',
                        textTransform:'uppercase', color:'var(--muted)'}}>{v}</div>
                    </div>
                  ))}
                </div>
                {b.bio.map((p,i)=>(
                  <p key={i} style={{fontSize:13.5, color:'var(--muted)', lineHeight:1.65,
                    margin:'0 0 14px'}}>{p}</p>
                ))}
              </div>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                  textTransform:'uppercase', color:'var(--muted)', marginBottom:18}}>
                  Education & Affiliations
                </div>
                <ul style={{listStyle:'none', padding:0, margin:0}}>
                  {b.creds.map((c,i)=>(
                    <li key={i} style={{fontSize:13, color:'var(--ink)', lineHeight:1.5,
                      padding:'12px 0', borderTop: i>0 ? '1px solid rgba(0,0,0,0.08)' : 'none'}}>
                      {c}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ---------- TRACK RECORD — JUSTIN / LEVCOR ---------- */}
      <div style={{marginBottom:80}}>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>
          — Track record
        </div>
        <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, letterSpacing:'-0.01em',
          marginBottom:32, color:'var(--ink)'}}>
          Justin A. Levine <span style={{color:'var(--muted)', fontSize:14, letterSpacing:'0.02em'}}>· at Levcor, Inc.</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:2,
          background:'rgba(0,0,0,0.08)', border:'1px solid rgba(0,0,0,0.08)'}}>
          <div style={{background:'var(--ivory)', padding:'40px 44px'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--gold)', marginBottom:16}}>Realized · 6 exited assets</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:80, lineHeight:0.95,
              letterSpacing:'-0.035em', fontWeight:300, marginBottom:8}}>
              <strong style={{fontWeight:500}}>4.13×</strong>
            </div>
            <div style={{fontSize:14, color:'var(--muted)', marginBottom:28}}>realized equity multiple</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
              paddingTop:24, borderTop:'1px solid rgba(0,0,0,0.08)'}}>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>16.1%</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Realized IRR</div>
              </div>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>6</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Exited assets</div>
              </div>
            </div>
          </div>
          <div style={{background:'var(--ivory)', padding:'40px 44px'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--gold)', marginBottom:16}}>Unrealized · 20 active assets</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:80, lineHeight:0.95,
              letterSpacing:'-0.035em', fontWeight:300, marginBottom:8}}>
              <strong style={{fontWeight:500}}>3.36×</strong>
            </div>
            <div style={{fontSize:14, color:'var(--muted)', marginBottom:28}}>est. total equity multiple</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
              paddingTop:24, borderTop:'1px solid rgba(0,0,0,0.08)'}}>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>$600M</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Invested &amp; managed</div>
              </div>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>3.9M SF</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>TX &amp; NC portfolio</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{marginTop:20, padding:'18px 24px', background:'var(--ivory-2)',
          borderLeft:'2px solid var(--gold)', fontSize:11, lineHeight:1.65,
          color:'var(--muted)', fontStyle:'italic'}}>
          Performance reflects investment activities at Levcor, Inc. where Mr. Levine held senior
          leadership roles. Results reflect team contributions, market conditions, and firm
          resources. Past performance is not indicative of future results. JAL-JCP differs in
          program, personnel, and infrastructure — there can be no assurance of replication.
        </div>
      </div>

      {/* ---------- TRACK RECORD — JAMES / JCP ---------- */}
      <div style={{marginBottom:0}}>
        <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>
          — Track record
        </div>
        <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, letterSpacing:'-0.01em',
          marginBottom:32, color:'var(--ink)'}}>
          James C. Pappas <span style={{color:'var(--muted)', fontSize:14, letterSpacing:'0.02em'}}>· at JCP Investment Management</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:2,
          background:'rgba(0,0,0,0.08)', border:'1px solid rgba(0,0,0,0.08)'}}>
          <div style={{background:'var(--ivory)', padding:'40px 44px'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--gold)', marginBottom:16}}>JCP Investment Management · since 2009</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:80, lineHeight:0.95,
              letterSpacing:'-0.035em', fontWeight:300, marginBottom:8}}>
              <strong style={{fontWeight:500}}>$250M+</strong>
            </div>
            <div style={{fontSize:14, color:'var(--muted)', marginBottom:28}}>discretionary capital deployed</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
              paddingTop:24, borderTop:'1px solid rgba(0,0,0,0.08)'}}>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>$50M+</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Co-invest raised</div>
              </div>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, lineHeight:1, marginBottom:6}}>17+ yrs</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Public RE &amp; credit</div>
              </div>
            </div>
          </div>
          <div style={{background:'var(--ivory)', padding:'40px 44px'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--gold)', marginBottom:16}}>Public-company governance</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:80, lineHeight:0.95,
              letterSpacing:'-0.035em', fontWeight:300, marginBottom:8}}>
              <strong style={{fontWeight:500}}>10+</strong>
            </div>
            <div style={{fontSize:14, color:'var(--muted)', marginBottom:28}}>public-company boards served</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
              paddingTop:24, borderTop:'1px solid rgba(0,0,0,0.08)'}}>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:20, lineHeight:1.1, marginBottom:6}}>NASDAQ: TLF</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Current · Tandy Leather</div>
              </div>
              <div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:20, lineHeight:1.1, marginBottom:6}}>Chair · Morgan&apos;s</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.15em',
                  textTransform:'uppercase', color:'var(--muted)'}}>Jamba · Pantry · U.S. Geo</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{marginTop:20, padding:'18px 24px', background:'var(--ivory-2)',
          borderLeft:'2px solid var(--gold)', fontSize:11, lineHeight:1.65,
          color:'var(--muted)', fontStyle:'italic'}}>
          Figures reflect Mr. Pappas&apos;s activities as Founder and Managing Partner of JCP
          Investment Management, an SEC-registered investment adviser operating across equity,
          credit, and distressed securities. JCP Investment Management is not the sponsor,
          manager, or investment adviser of this offering. Past performance is not indicative of
          future results; JAL-JCP differs in program, personnel, and infrastructure.
        </div>
      </div>

    </div>
  </section>;
}

/* Simple count-up for stat labels like "$600M", "20+ yrs", etc. */
function CountUp({inView, value}){
  const [shown, setShown] = u2S(value);
  u2E(()=>{
    if(!inView) return;
    const m = String(value).match(/^(\$?)(\d+(?:\.\d+)?)(.*)$/);
    if(!m) { setShown(value); return; }
    const prefix = m[1], num = parseFloat(m[2]), suffix = m[3];
    const start = performance.now(), dur = 1100;
    const raf = (t)=>{
      const p = Math.min(1, (t-start)/dur);
      const eased = 1 - Math.pow(1-p, 3);
      const cur = num * eased;
      const rounded = num >= 100 ? Math.round(cur) : (num % 1 === 0 ? Math.round(cur) : cur.toFixed(2));
      setShown(`${prefix}${rounded}${suffix}`);
      if(p<1) requestAnimationFrame(raf);
    };
    requestAnimationFrame(raf);
  },[inView]);
  return shown;
}

/* =========================== CTA + FOOTER =========================== */
function CTA({ onCTA }){
  return <section style={{padding:'140px 40px', background:'var(--ink)', color:'var(--ivory)',
    position:'relative', overflow:'hidden'}}>
    <div style={{position:'absolute', inset:0, opacity:0.08,
      backgroundImage:'repeating-linear-gradient(135deg, var(--ivory) 0 1px, transparent 1px 60px)'}}/>
    <div style={{maxWidth:1000, margin:'0 auto', textAlign:'center', position:'relative'}}>
      <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
        textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:32}}>
        — Off-Market · By Invitation —
      </div>
      <h2 style={{fontSize:'clamp(48px, 6vw, 92px)', letterSpacing:'-0.03em', lineHeight:1.02,
        fontWeight:300, marginBottom:36}}>
        Raising <em style={{color:'var(--gold-soft)'}}>$13.0M</em> in LP equity.<br/>
        $100K minimum.
      </h2>
      <p style={{fontSize:18, color:'rgba(244,242,237,0.7)', maxWidth:640, margin:'0 auto 48px', lineHeight:1.55}}>
        Request the full investment package — financial model, offering memorandum, and rent roll
        — or schedule a call directly with Justin or James.
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <Btn variant="gold" onClick={onCTA} style={{padding:'18px 32px', fontSize:14}}>
          Request investor package →
        </Btn>
        <Btn variant="lightGhost"
          href="mailto:jlevine@jalstrategies.com,jcp@jcpinv.com?subject=Shoppes%20at%20San%20Felipe%20%E2%80%94%20Schedule%20a%20call&body=Hi%20Justin%20and%20James%2C%0A%0AI%27d%20like%20to%20schedule%20a%20call%20to%20discuss%20the%20Shoppes%20at%20San%20Felipe%20opportunity.%0A%0AAvailability%3A%0A%0AThank%20you%2C"
          style={{padding:'18px 32px', fontSize:14}}>
          Schedule a call
        </Btn>
      </div>
    </div>
  </section>;
}

function Footer(){
  const [dOpen, setDOpen] = React.useState(false);
  return <footer style={{background:'var(--ink-2)', color:'rgba(244,242,237,0.7)'}}>
    {/* ---------- DISCLAIMER BAND ---------- */}
    <div style={{padding:'48px 40px', borderBottom:'1px solid rgba(244,242,237,0.1)'}}>
      <div style={{maxWidth:1400, margin:'0 auto'}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between',
          marginBottom:20, flexWrap:'wrap', gap:16}}>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--gold-soft)'}}>Important Disclosures · Confidential</div>
          <button onClick={()=>setDOpen(v=>!v)} style={{background:'none', border:'1px solid rgba(244,242,237,0.25)',
            color:'rgba(244,242,237,0.8)', padding:'6px 14px', fontSize:10, letterSpacing:'0.18em',
            textTransform:'uppercase', fontFamily:"'JetBrains Mono',ui-monospace,monospace", cursor:'pointer'}}>
            {dOpen ? 'Collapse −' : 'Read in full →'}
          </button>
        </div>

        <div style={{fontSize:11.5, lineHeight:1.7, color:'rgba(244,242,237,0.7)',
          columnCount: dOpen ? 2 : 1, columnGap:40,
          maxHeight: dOpen ? 'none' : 180, overflow: dOpen ? 'visible' : 'hidden',
          position:'relative'}}>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>STRICTLY CONFIDENTIAL.</strong>{' '}
            This document and the information contained herein (the “Materials”) have been prepared by
            JAL‑JCP Real Estate Partners, LLC (“JAL‑JCP” or the “Sponsor”) solely for informational and
            discussion purposes and are furnished on a confidential basis to a limited number of
            sophisticated, prospective investors. The Materials are the proprietary property of the
            Sponsor and may not be reproduced, distributed, or disclosed, in whole or in part, to any
            other person without the Sponsor’s prior written consent.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>NOT AN OFFER.</strong>{' '}
            The Materials do not constitute an offer to sell, or a solicitation of an offer to buy, any
            security, interest, or investment product. Any such offer or solicitation will be made only to
            “accredited investors” (as defined in Rule 501 of Regulation D under the U.S. Securities Act of
            1933, as amended) and “qualified purchasers” where applicable, pursuant to a definitive
            Confidential Private Placement Memorandum (“PPM”), subscription documents, and a limited
            partnership or operating agreement that will describe the risks, conflicts of interest, fees,
            expenses, and other material terms of the offering. In the event of any inconsistency between
            the Materials and the PPM, the PPM will control.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>FORWARD‑LOOKING STATEMENTS.</strong>{' '}
            Certain information contained herein constitutes forward‑looking statements, including, without
            limitation, statements relating to projected internal rates of return, equity multiples, cash‑on‑cash
            yields, cap rates, exit values, net operating income, refinance assumptions, land appreciation,
            occupancy, and market rent growth. Such statements are based on current expectations,
            assumptions, and beliefs, are subject to significant business, economic, and competitive
            uncertainties and contingencies, many of which are beyond the Sponsor’s control, and are
            subject to change. Actual events or results may differ materially. Words such as “expect,”
            “project,” “estimate,” “target,” “may,” “should,” “intend,” or “believe” are intended to identify
            forward‑looking statements. No representation or warranty, express or implied, is made as to
            the accuracy or completeness of any such forward‑looking statements, and no undertaking is
            given to update them.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>NO REPRESENTATION OR WARRANTY.</strong>{' '}
            Certain information contained herein has been obtained from third‑party sources—including,
            without limitation, HCAD, CoStar, Redfin, Zillow, HAR MLS, ZHVI, broker opinions, market
            reports, appraisals, and tenant‑provided materials. While such information is believed to be
            reliable as of the dates indicated, none of the Sponsor, its affiliates, principals, or
            representatives has independently verified, or makes any representation or warranty as to the
            accuracy or completeness of, such information. The Materials may contain statistical or
            market data derived from third parties and are subject to the applicable disclaimers of such
            sources.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>INVESTMENT RISK.</strong>{' '}
            An investment of the type described involves a high degree of risk, including the risk of loss
            of the entire investment. Risks include, but are not limited to: illiquidity; concentration in a
            single asset, property type, and geography; leverage and interest‑rate risk; tenant credit and
            rollover risk; reliance on a land‑value exit; general economic, real estate, and capital‑markets
            conditions; property‑specific risks (including casualty, flood, and insurance availability);
            regulatory, zoning, and environmental risks; and conflicts of interest inherent in
            Sponsor‑managed vehicles. Investors should review the risk factors described in the PPM in
            their entirety before making any investment decision, and should be able to bear the economic
            risk of a complete loss.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>PAST PERFORMANCE.</strong>{' '}
            Any reference to prior investment activity of the principals—including, without limitation,
            realized and unrealized track‑record data referenced as “Levcor, Inc. 2014–2025” or similar
            descriptions—reflects performance at other firms or platforms with different programs,
            personnel, capital structures, strategies, market conditions, and resources. Such results were
            influenced by team contributions and market factors not attributable solely to any single
            principal. Past performance is not indicative of, and provides no assurance of, future results.
            There can be no assurance that JAL‑JCP or the referenced offering will achieve comparable
            results or its investment objectives.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>RELATED PARTIES.</strong>{' '}
            References to JAL Strategies and JCP Investment Management throughout these Materials
            are descriptive of Mr. Levine’s and Mr. Pappas’s separate professional activities,
            respectively. Neither JAL Strategies nor JCP Investment Management is the sponsor,
            manager, general partner, investment adviser, broker-dealer, or placement agent of
            this offering, and neither has any role in the management or operation of the offering
            entity. The sole sponsor of this offering is JAL-JCP Real Estate Partners, LLC.
          </p>
          <p style={{margin:'0 0 10px'}}>
            <strong style={{color:'var(--ivory)'}}>NO TAX, LEGAL, OR ACCOUNTING ADVICE.</strong>{' '}
            The Materials do not purport to be all‑inclusive and do not contain all information that a
            prospective investor may desire. Nothing herein constitutes investment, tax, legal, regulatory,
            accounting, or other advice. Each prospective investor should consult its own independent
            advisors regarding the suitability, legal, tax, and financial consequences of an investment.
          </p>
          <p style={{margin:0}}>
            <strong style={{color:'var(--ivory)'}}>JURISDICTION.</strong>{' '}
            The offering will be made only in those jurisdictions where such offers and sales are permitted
            under applicable law. The Materials may not be distributed in any jurisdiction where such
            distribution would be unlawful. By accepting the Materials, the recipient agrees to treat them
            as confidential and to return or destroy them upon request.
          </p>

          {!dOpen && <div style={{position:'absolute', left:0, right:0, bottom:0, height:80,
            background:'linear-gradient(to bottom, rgba(11,22,60,0), var(--ink-2))', pointerEvents:'none'}}/>}
        </div>
      </div>
    </div>

    {/* ---------- CONTACT STRIP ---------- */}
    <div style={{padding:'40px'}}>
      <div style={{maxWidth:1400, margin:'0 auto',
        display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:40, alignItems:'start'}}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
            <div style={{width:44, height:44, border:'1px solid rgba(244,242,237,0.4)',
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
              fontFamily:"'Jost',sans-serif", fontStyle:'italic', fontSize:11,
              lineHeight:1.05, letterSpacing:'-0.01em', flexShrink:0}}>
              <span>JAL</span>
              <span style={{fontSize:7, margin:'0', opacity:0.6}}>·</span>
              <span>JCP</span>
            </div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:18, color:'var(--ivory)'}}>
              JAL-JCP Real Estate Partners
            </div>
          </div>
          <p style={{fontSize:11, lineHeight:1.6, maxWidth:460, margin:0, color:'rgba(244,242,237,0.55)'}}>
            Summary only. See “Important Disclosures” above for full legal, risk, and forward‑looking
            statement language governing these Materials.
          </p>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:14}}>Offering</div>
          <div style={{fontSize:13, lineHeight:2}}>
            <div>Shoppes at San Felipe</div>
            <div>1415 S. Voss Rd</div>
            <div>Houston, TX 77057</div>
            <div>Spring 2026</div>
          </div>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:14}}>Justin A. Levine</div>
          <div style={{fontSize:13, lineHeight:2}}>
            <a href="mailto:jlevine@jalstrategies.com" style={{color:'var(--ivory)', opacity:0.8}}>
              jlevine@jalstrategies.com</a>
          </div>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:14}}>James C. Pappas</div>
          <div style={{fontSize:13, lineHeight:2}}>
            <a href="mailto:jcp@jcpinv.com" style={{color:'var(--ivory)', opacity:0.8}}>
              jcp@jcpinv.com</a>
          </div>
        </div>
      </div>
      <div style={{maxWidth:1400, margin:'32px auto 0', paddingTop:20,
        borderTop:'1px solid rgba(244,242,237,0.1)',
        display:'flex', justifyContent:'space-between', gap:20, flexWrap:'wrap',
        fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.1em', color:'rgba(244,242,237,0.5)'}}>
        <span>© 2026 JAL-JCP Real Estate Partners, LLC. All rights reserved.</span>
        <span>All figures projected · Past performance ≠ future results · See full disclosures above</span>
      </div>
    </div>
  </footer>;
}

Object.assign(window, { Financials, Returns, ExitVision, Risks, Sponsor, CTA, Footer });
