/* Cinco Ranch Village — Hero, Snapshot, Property */
const { useState: uS, useEffect: uE, useRef: uR, useMemo: uM } = React;

/* ============================= SITE PLAN ============================= */
function SitePlan(){
  return (
    <div style={{width:'100%', position:'relative', background:'#FFFFFF',
      borderRadius:4, overflow:'hidden', boxShadow:'0 1px 0 rgba(212,169,74,0.15)'}}>
      <img src="./app_crv/images/site_plan.jpg" alt="Cinco Ranch Village site plan"
        style={{display:'block', width:'100%', height:'auto'}}/>
      {/* Caption / overlay stats */}
      <div style={{padding:'14px 20px', background:'var(--ivory-2)', display:'flex',
        gap:16, flexWrap:'wrap',
        fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
        textTransform:'uppercase', color:'var(--gold)'}}>
        <span>20,155 SF</span>
        <span style={{opacity:0.4}}>·</span>
        <span>9 SUITES</span>
        <span style={{opacity:0.4}}>·</span>
        <span>2.01 ACRES</span>
        <span style={{opacity:0.4}}>·</span>
        <span>100% LEASED</span>
      </div>
    </div>
  );
}

/* ============================= 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>April 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'
        }}>
          100% leased retail across<br/>
          from one of Houston's<br/>
          <em style={{color:'var(--gold)', fontStyle:'italic', fontWeight:400}}>preeminent lifestyle centers.</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 Cinco Ranch Village — a 20,155 SF, 100% leased NNN
          neighborhood retail center on Cinco Ranch Blvd at SH-99 (~150,000 VPD), directly
          across from La Centerra (5.1M annual visits). Below-market rents, institutional
          tenant mix, 10-year hold.
        </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="$4.0M"/>
          <Stat label="LP IRR (net)" value="14.9%"/>
          <Stat label="LP multiple" value="2.66×"/>
          <Stat label="Hold" value={<span style={{whiteSpace:'nowrap'}}>10&nbsp;yr</span>}/>
        </div>
      </div>
      <div>
        <div style={{position:'relative', height:520}}>
          <img src="app_crv/images/hero_aerial.jpg" alt="Aerial — Cinco Ranch Village · SH-99 Corridor"
            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(10,10,10,0.85)', textShadow:'0 1px 3px rgba(0,0,0,0.4)'}}>
            <span>N 29.7389°</span>
            <span>W 95.8018°</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(10,10,10,0.9)', textShadow:'0 1px 3px rgba(0,0,0,0.5)'}}>
            Katy, TX 77494 · 2.01 acres
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== SNAPSHOT =========================== */
function Snapshot(){
  const [ref, inView] = useInView();
  const summary = [
    ['Purchase Price', '$9,600,000'],
    ['Total Basis', '$9,796,000'],
    ['Basis / SF', '$476 / SF'],
    ['Going-In Cap', '6.80%'],
    ['Year 1 NOI', '$653,169'],
    ['LP Equity', '$4,036,000'],
    ['Senior Debt (60% LTV)', '$5,760,000'],
    ['Rate', '6.00% · 2 Yr IO / 30 Yr Amort'],
  ];
  const exit = [
    ['Exit Cap Rate', '6.25%'],
    ['Year 11 NOI (Forward)', '$945,562'],
    ['Gross Sale Price', '$15,128,992'],
    ['Disposition Costs (2%)', '($302,580)'],
    ['Loan Payoff', '($7,922,176)'],
    ['Net Proceeds to Equity', '$6,904,237'],
    ['+ Operating CF + Yr 5 Refi', '$5,252,979'],
    ['Total LP Distributions', '$10,734,772'],
  ];
  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.3%'],
          ['Project Multiple', '3.01×'],
          ['LP IRR (Net)', '14.9%'],
          ['LP Multiple', '2.66×'],
          ['Going-In Cap', '6.80%'],
        ].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: 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 — Cap Rate 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}}>
            9 tenants. <em style={{color:'var(--gold-soft)'}}>100% leased.</em><br/>
            2.01 acres on Houston's SH-99 corridor.
          </h2>
          <p style={{color:'rgba(10,10,10,0.7)', fontSize:16, lineHeight:1.6, maxWidth:560}}>
            Cinco Ranch Village sits at a signalized intersection on Cinco Ranch Blvd at SH-99
            (~150,000 VPD), directly across from La Centerra — Brixmor's $223M lifestyle-center
            acquisition drawing 5.1M annual visits. 56% national credit tenancy: AFC Urgent Care,
            Orangetheory, Great Clips, PostNet, FYZICAL.
          </p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24,
          background:'rgba(10,10,10,0.04)', padding:28, border:'1px solid rgba(10,10,10,0.08)'}}>
          {[
            ['Gross leasable area', '20,155 SF'],
            ['Land area', '2.01 acres'],
            ['Year built', '1998'],
            ['Occupancy', '100%'],
            ['Tenants', '9'],
            ['Lease type', 'NNN'],
            ['Wtd avg rent', '$32.36 / SF'],
            ['Traffic count', '~150,000 VPD'],
          ].map(([k,v])=>(
            <div key={k}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', color:'rgba(10,10,10,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(10,10,10,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(10,10,10,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="app_crv/images/dusk_aerial.jpg" caption="Cinco Ranch Blvd · SH-99 frontage" label="Aerial · 2.01 ac hard corner" style={{gridRow:'1 / span 2'}}/>
          <PhotoTile src="app_crv/images/afc_urgent.jpg" caption="AFC Urgent Care · 3,100 SF" label="Tenant photo"/>
          <PhotoTile src="app_crv/images/orangetheory.jpg" caption="Orangetheory Fitness · 3,695 SF" label="Tenant photo"/>
          <PhotoTile src="app_crv/images/storefront_east.jpg" caption="Handroll Social · FYZICAL · Nobel Nails" label="East wing"/>
          <PhotoTile src="app_crv/images/storefront_west.jpg" caption="Centerra Ranch Montessori · Mann Insurance" label="West wing"/>
        </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,233,200,0.15)', overflow:'hidden', minHeight:420}}>
            <SitePlan/>
          </div>
          <div>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'rgba(10,10,10,0.5)', marginBottom:16}}>
              Tenant breakdown
            </div>
            {[
              ['Centerra Ranch Montessori', '4,000 SF', '19.8% · since 2012'],
              ['Orangetheory Fitness', '3,695 SF', '18.3% · credit tenant'],
              ['AFC Urgent Care', '3,100 SF', '15.4% · new 10-yr lease'],
              ['FYZICAL Therapy', '2,160 SF', '10.7%'],
              ['Handroll Social', '2,000 SF', '9.9% · F&B'],
              ['Nobel Nails Bar', '1,600 SF', '7.9%'],
              ['PostNet · Great Clips · Pending', '3,600 SF', 'Three 1,200 SF suites'],
            ].map(([t,sf,note])=>(
              <div key={t} style={{
                display:'grid', gridTemplateColumns:'1fr auto', gap:6,
                padding:'14px 0', borderBottom:'1px solid rgba(10,10,10,0.08)'
              }}>
                <div>
                  <div style={{fontSize:14, color:'var(--ivory)'}}>{t}</div>
                  <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                    color:'rgba(10,10,10,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)'}}>
                Centerra Ranch Montessori (4,000 SF @ $26.28) expires Jan 2028 — market renewal
                at $35–$40/SF drives ~$40K+ annual NOI uplift. Single biggest value lever.
              </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="Cinco Ranch Village — map"
              src="https://maps.google.com/maps?q=23144+Cinco+Ranch+Blvd,+Katy,+TX+77494&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(244,233,200,0.9)', color:'var(--ivory)',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
              textTransform:'uppercase', pointerEvents:'none'}}>
              23144 Cinco Ranch Blvd · Katy 77494
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {[
              ['La Centerra visits', '5.1M / yr', 'Directly across · Brixmor'],
              ['SH-99 traffic', '~150,000 VPD', 'Grand Parkway at Cinco Ranch'],
              ['Cinco Ranch Blvd', '~30,200 VPD', 'Signalized intersection'],
              ['Cinco Ranch homes', '14,000 homes', '$300K–$2M values'],
              ['Katy ISD', '#1 in Texas', 'Top-ranked school district'],
              ['Community rank', '#1 in Texas', 'Best Place to Live · Niche'],
            ].map(([k,v,s])=>(
              <div key={k} style={{padding:'14px 18px', background:'rgba(10,10,10,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(10,10,10,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(10,10,10,0.6)', marginTop:2}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  </section>;
}

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