/* Shoppes at San Felipe — Hero, Snapshot, Property */
const { useState: uS, useEffect: uE, useRef: uR, useMemo: uM } = React;

/* ============================= HERO ============================= */
function Hero({ onCTA }){
  const [ref, inView] = useInView({threshold:0.1});

  return <section id="overview" ref={ref} style={{
    minHeight:'100vh', position:'relative', padding:'120px 40px 80px',
    background:'var(--ivory)', overflow:'hidden',
  }}>
    <div style={{maxWidth:1400, margin:'0 auto', display:'grid',
      gridTemplateColumns:'1.1fr 1fr', gap:60, alignItems:'end', minHeight:'calc(100vh - 200px)'}}>
      <div>
        <div style={{display:'flex', gap:16, alignItems:'center', marginBottom:40,
          fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
          textTransform:'uppercase', color:'var(--muted)',
          opacity: inView?1:0, transform: inView?'none':'translateY(10px)', transition:'all .8s ease'}}>
          <span style={{width:8, height:8, background:'var(--gold)', borderRadius:'50%'}}/>
          <span>Off-Market · Confidential</span>
          <span style={{opacity:0.4}}>·</span>
          <span>Spring 2026</span>
        </div>
        <h1 style={{
          fontSize:'clamp(52px, 6.5vw, 104px)', lineHeight:0.95, letterSpacing:'-0.035em',
          fontWeight:300, marginBottom:32,
          opacity: inView?1:0, transform: inView?'none':'translateY(20px)', transition:'all 1s ease .1s'
        }}>
          Buying 61,196 SF<br/>
          of Houston retail<br/>
          <em style={{color:'var(--gold)', fontStyle:'italic', fontWeight:400}}>below land value.</em>
        </h1>
        <p style={{fontSize:18, color:'var(--muted)', maxWidth:560, lineHeight:1.55, marginBottom:40,
          opacity: inView?1:0, transform: inView?'none':'translateY(20px)', transition:'all 1s ease .2s'}}>
          An off-market acquisition of the Shoppes at San Felipe — a 4.54-acre, 95.2% leased
          retail center at the NEC of San Felipe & S. Voss — at a basis that matches 2019
          raw-land comps on the same block. Ten-year hold, land-sale exit.
        </p>
        <div style={{display:'flex', gap:12, marginBottom:60,
          opacity: inView?1:0, transform: inView?'none':'translateY(20px)', transition:'all 1s ease .3s'}}>
          <Btn variant="primary" onClick={onCTA}>Request investor package →</Btn>
          <Btn variant="ghost" onClick={()=>{
            const el = document.getElementById('thesis');
            if(el) window.scrollTo({top: el.offsetTop-60, behavior:'smooth'});
          }}>Read the thesis</Btn>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24,
          paddingTop:32, borderTop:'1px solid var(--rule)',
          opacity: inView?1:0, transform: inView?'none':'translateY(20px)', transition:'all 1s ease .4s'}}>
          <Stat label="LP equity" value="$13.0M"/>
          <Stat label="LP IRR (net)" value="14.0%"/>
          <Stat label="LP multiple" value="3.10×"/>
          <Stat label="Hold" value={<span style={{whiteSpace:'nowrap'}}>10&nbsp;yr</span>}/>
        </div>
      </div>
      <div>
        <div style={{position:'relative', height:520}}>
          <img src="./img/hero-aerial.jpg" alt="Aerial — Shoppes at San Felipe"
            style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          <div style={{position:'absolute', top:20, left:20, right:20,
            display:'flex', justifyContent:'space-between',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'rgba(244,242,237,0.85)', textShadow:'0 1px 3px rgba(0,0,0,0.4)'}}>
            <span>N 29.7571°</span>
            <span>W 95.5218°</span>
          </div>
          <div style={{position:'absolute', bottom:20, left:20,
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'rgba(244,242,237,0.9)', textShadow:'0 1px 3px rgba(0,0,0,0.5)'}}>
            Houston, TX 77057 · 4.54 acres
          </div>
        </div>

      </div>
    </div>
  </section>;
}

/* =========================== SNAPSHOT =========================== */
function Snapshot(){
  const [ref, inView] = useInView();
  const summary = [
    ['Purchase Price', '$31,750,000'],
    ['Total Basis', '$32,500,000'],
    ['Going-In Cap', '5.81%'],
    ['Year 1 NOI', '$1,845,794'],
    ['LP Equity', '$13,000,000'],
    ['Senior Debt (60% LTV)', '$19,500,000'],
    ['Rate', '5.50%'],
    ['Structure', '2-Yr IO / 30-Yr Amort'],
  ];
  const exit = [
    ['Land Sale (197,762 SF × $300)', '$59,328,600'],
    ['Loan Payoff', '($20,319,553)'],
    ['Disposition Costs (2.0%)', '($1,186,572)'],
    ['Net Proceeds to Equity', '$37,822,475'],
    ['+ Operating CF + Yr 5 Refi', '$10,181,973'],
    ['Total Project Distributions', '$48,004,448'],
    ['LP Total Distributions', '$40,353,557'],
    ['Avg Cash-on-Cash (10yr)', '7.8%'],
  ];
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="01" title="Deal Snapshot"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr 1fr', gap:24, marginBottom:80}}>
        {[
          ['Project IRR', '16.4%'],
          ['Project Multiple', '3.69×'],
          ['LP IRR (Net)', '14.0%'],
          ['LP Multiple', '3.10×'],
          ['Annual Cash Yield', '4.7–8.0%'],
        ].map(([l,v],i)=>(
          <div key={l} style={{
            background: i===2||i===3 ? 'var(--ink)' : 'var(--ivory-2)',
            color: i===2||i===3 ? 'var(--ivory)' : 'var(--ink)',
            padding:'32px 20px',
            minHeight: 140,
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            textAlign:'center',
            opacity: inView?1:0, transform: inView?'none':'translateY(16px)',
            transition:`all .6s ease ${0.08*i}s`
          }}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
              textTransform:'uppercase', opacity:0.65, marginBottom:14, whiteSpace:'nowrap'}}>{l}</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize: i===4 ? 36 : 44, fontWeight:300,
              letterSpacing:'-0.02em', lineHeight:1, whiteSpace:'nowrap'}} className="tnum">{v}</div>
          </div>
        ))}
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60}}>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--gold)', marginBottom:20}}>Investment Summary</div>
          {summary.map(([k,v])=>(
            <div key={k} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:16,
              padding:'14px 0', borderBottom:'1px solid var(--rule)', alignItems:'baseline'}}>
              <span style={{fontSize:14, color:'var(--muted)'}}>{k}</span>
              <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:14}} className="tnum">{v}</span>
            </div>
          ))}
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--gold)', marginBottom:20}}>Year 10 Exit — Land Sale</div>
          {exit.map(([k,v])=>(
            <div key={k} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:16,
              padding:'14px 0', borderBottom:'1px solid var(--rule)', alignItems:'baseline'}}>
              <span style={{fontSize:14, color:'var(--muted)'}}>{k}</span>
              <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:14}} className="tnum">{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== PROPERTY =========================== */
function Property(){
  const [tab, setTab] = uS('photos');
  return <section id="property" style={{padding:'120px 40px', background:'var(--ink)', color:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="02" title="The Property"/>
      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:80, alignItems:'start', marginBottom:60}}>
        <div>
          <h2 style={{fontSize:'clamp(40px, 5vw, 68px)', letterSpacing:'-0.025em', lineHeight:1.02,
            fontWeight:300, marginBottom:28}}>
            21 tenants. <em style={{color:'var(--gold-soft)'}}>95.2% leased.</em><br/>
            4.54 acres at a hard corner.
          </h2>
          <p style={{color:'rgba(244,242,237,0.7)', fontSize:16, lineHeight:1.6, maxWidth:560}}>
            The Shoppes at San Felipe occupy the northeast corner of San Felipe Street
            and S. Voss Road in the heart of Houston's Inner Loop corridor — anchored by
            Wild Fork Foods, with a CVS Pharmacy on ground lease and a complementary mix
            of service, F&amp;B, and specialty retail tenants.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
          background:'rgba(244,242,237,0.04)', padding:28, border:'1px solid rgba(244,242,237,0.08)'}}>
          {[
            ['Gross leasable area', '61,196 SF'],
            ['Land area', '4.54 acres'],
            ['Occupancy', '95.2%'],
            ['Tenants', '21'],
            ['WALT', '5.77 yrs'],
            ['Year 1 NOI', '$1.85M'],
            ['Ground lease', 'CVS Pharmacy'],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'rgba(244,242,237,0.5)', marginBottom:6}}>{k}</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:300}} className="tnum">{v}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{display:'flex', gap:0, borderBottom:'1px solid rgba(244,242,237,0.15)', marginBottom:32}}>
        {[['photos','Photography'],['siteplan','Site plan'],['map','Location']].map(([k,l])=>(
          <button key={k} onClick={()=>setTab(k)} style={{
            padding:'16px 24px', background:'transparent', border:'none',
            color: tab===k ? 'var(--ivory)' : 'rgba(244,242,237,0.5)',
            borderBottom: tab===k ? '2px solid var(--gold-soft)' : '2px solid transparent',
            fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", cursor:'pointer', marginBottom:-1
          }}>{l}</button>
        ))}
      </div>

      {tab==='photos' && (
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gridTemplateRows:'240px 240px', gap:16}}>
          <PhotoTile src="./img/hero-aerial.jpg" caption="Hard corner · San Felipe & S. Voss" style={{gridRow:'1 / span 2'}}/>
          <PhotoTile src="./img/tenant-wildfork.jpg" caption="Wild Fork Foods"/>
          <PhotoTile src="./img/tenant-cvs.jpg" caption="CVS Pharmacy · ground lease"/>
          <PhotoTile src="./img/tenant-piola.jpg" caption="East wing · Piola, Massage Heights"/>
          <PhotoTile src="./img/tenant-cleanjuice.jpg" caption="North wing · Clean Juice, Jersey Mike's"/>
        </div>
      )}

      {tab==='siteplan' && (
        <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:32}}>
          <div style={{position:'relative', background:'var(--ivory)', padding:20,
            border:'1px solid rgba(244,242,237,0.1)', overflow:'hidden'}}>
            <img src="./img/siteplan.png" alt="Site plan"
              style={{width:'100%', height:'auto', display:'block'}}/>
          </div>
          <div>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'rgba(244,242,237,0.5)', marginBottom:16}}>
              Tenant breakdown
            </div>
            {[
              ['Wild Fork Foods', '18,400 SF', 'Specialty grocer'],
              ['CVS Pharmacy', 'Ground Lease', '$385K / yr'],
              ['East Wing tenants', '14 shops', 'Varied'],
              ['North Wing tenants', '5 shops', 'F&B / Service'],
              ['Available', '2,935 SF', '4.8% vacant'],
            ].map(([t,sf,note])=>(
              <div key={t} style={{
                display:'grid', gridTemplateColumns:'1fr auto', gap:6,
                padding:'14px 0', borderBottom:'1px solid rgba(244,242,237,0.08)'
              }}>
                <div>
                  <div style={{fontSize:14, color:'var(--ivory)'}}>{t}</div>
                  <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                    color:'rgba(244,242,237,0.55)', marginTop:2}}>{note}</div>
                </div>
                <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:12,
                  color:'var(--gold-soft)', alignSelf:'center'}} className="tnum">{sf}</span>
              </div>
            ))}
            <div style={{marginTop:20, padding:'16px 18px', background:'rgba(160,180,195,0.08)',
              borderLeft:'2px solid var(--gold)'}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'var(--gold-soft)', marginBottom:6}}>Upside</div>
              <div style={{fontSize:13, lineHeight:1.5, color:'var(--ivory)'}}>
                4.54-acre parcel supports 2–3 outparcel pads along San Felipe — $200–400K
                incremental NOI, additive to exit land value.
              </div>
            </div>
          </div>
        </div>
      )}

      {tab==='map' && (
        <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:32}}>
          <div style={{position:'relative', background:'var(--ivory)', height:440, overflow:'hidden'}}>
            <iframe
              title="Shoppes at San Felipe — map"
              src="https://maps.google.com/maps?q=1415+S+Voss+Rd,+Houston,+TX+77057&t=m&z=15&ie=UTF8&iwloc=&output=embed"
              style={{width:'100%', height:'100%', border:0, display:'block', filter:'grayscale(0.2) contrast(1.05)'}}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen/>
            <div style={{position:'absolute', top:12, left:12, padding:'8px 12px',
              background:'rgba(11,22,60,0.9)', color:'var(--ivory)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
              textTransform:'uppercase', pointerEvents:'none'}}>
              1415 S Voss Rd · Houston 77057
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {[
              ['Houston Heights land', '+64% / 10 yrs', '6.4% CAGR · HAR/Redfin'],
              ['Houston MSA appreciation', '5.4% / yr', '2014–2024 · ZHVI'],
              ['Tanglewood residential', '$453 / SF', '2024 avg · HAR MLS'],
              ['Tanglewood YoY', '+7.3%', '2024 alone'],
              ['4702 Westheimer (Fertitta)', '$225–300 / SF', '2024 land comp'],
              ['BLVD Place / Post Oak JV', '$250–350 / SF', '2024 land basis'],
            ].map(([k,v,s])=>(
              <div key={k} style={{padding:'14px 18px', background:'rgba(244,242,237,0.04)',
                borderLeft:'2px solid var(--gold-soft)'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
                  textTransform:'uppercase', color:'rgba(244,242,237,0.55)', marginBottom:4}}>{k}</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:300}} className="tnum">{v}</div>
                <div style={{fontSize:11, color:'rgba(244,242,237,0.6)', marginTop:2}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  </section>;
}

Object.assign(window, { Hero, Snapshot, Property });
