/* Shoppes at San Felipe — Thesis, Land Comps, Appreciation */
const { useState: u1S, useEffect: u1E, useRef: u1R } = React;

/* =========================== THESIS =========================== */
function Thesis(){
  const [ref, inView] = useInView();
  return <section id="thesis" ref={ref} style={{padding:'140px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="04" title="The Thesis"/>
      <h2 style={{fontSize:'clamp(44px, 5.5vw, 84px)', maxWidth:1100, letterSpacing:'-0.025em',
        lineHeight:1.02, marginBottom:32, fontWeight:300}}>
        In 2019, the office building across the street appraised at <em style={{color:'var(--gold)'}}>$163&nbsp;/&nbsp;SF</em>.
      </h2>
      <h2 style={{fontSize:'clamp(44px, 5.5vw, 84px)', maxWidth:1100, letterSpacing:'-0.025em',
        lineHeight:1.02, marginBottom:48, fontWeight:300}}>
        Seven years later, our basis matches that — <em style={{color:'var(--gold)'}}>and the buildings come free.</em>
      </h2>
      <p style={{fontSize:19, color:'var(--muted)', maxWidth:800, lineHeight:1.6, marginBottom:80}}>
        We're acquiring 61,196 SF of income-producing retail, on 4.54 acres at a hard
        corner of one of Houston's tightest Inner Loop corridors, at $163&nbsp;/&nbsp;SF of land —
        below the 2019 appraised land values of adjacent parcels. That is the deal.
      </p>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:60}}>
        {[
          {n:'01', t:'Acquire · Year 0',
            b:'$31.75M off-market acquisition. $13.0M LP equity sleeve. 5.81% going-in cap on $1.85M in-place NOI. Below replacement cost — below raw land value.'},
          {n:'02', t:'Operate · Years 1–10',
            b:'In-place rents 21% below market. Mark-to-market adds $471K NOI without new tenants. Year 5 cash-out refi returns 19% of invested equity. 7.8% average levered cash-on-cash.'},
          {n:'03', t:'Exit · Year 10',
            b:'Sell land to a mixed-use developer at $300/SF ($59.3M gross). Houston Inner Loop has compounded at 5–7% annually; $300 is a 6.2% CAGR from our basis — below trend.'},
        ].map((s,i)=>(
          <div key={s.n} style={{
            opacity: inView?1:0, transform: inView?'none':'translateY(24px)',
            transition:`all .7s ease ${0.1*i}s`
          }}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11,
              letterSpacing:'0.22em', color:'var(--gold)', marginBottom:20}}>{s.n}</div>
            <h3 style={{fontSize:32, letterSpacing:'-0.02em', marginBottom:16, fontWeight:400}}>
              {s.t}
            </h3>
            <p style={{color:'var(--muted)', lineHeight:1.65, fontSize:15, margin:0}}>{s.b}</p>
          </div>
        ))}
      </div>
    </div>
  </section>;
}

/* =========================== LAND COMPS =========================== */
function LandComps(){
  const [ref, inView] = useInView();
  const comps = [
    ['7500 San Felipe St','NWC Voss &amp; San Felipe', 2.87, '$20.4M', '$163*', '2019', 'CapRidge · office incl.'],
    ['6363 Woodway Dr','Woodway &amp; Bering', 4.0, '$22.6M', '$130*', '2019', 'CapRidge · office incl.'],
    ['Tradition at Woodway','6336 Woodway Dr', 2.6, '$20.4M', '$180', '2018', 'Tradition Senior Living'],
    ['4702 Westheimer','Adj. River Oaks District', 3.4, 'N/A', '$225–300', '2024', 'Fertitta · vacant land'],
    ['BLVD Place / Post Oak','Post Oak Blvd', 6.3, 'N/A', '$250–350', '2024', 'Goff / Schnitzer / Doggett JV'],
    ['River Oaks District','4444 Westheimer', 14.0, '$450M', '$738**', '2024', 'Fertitta · improved'],
    ['Tanglewood Residential','Adjacent area', '—', 'Various', '$453 avg', '2024', '47 residential lots'],
  ];
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="05" title="Land Comparables"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'start', marginBottom:60}}>
        <div>
          <h2 style={{fontSize:'clamp(36px, 4.2vw, 58px)', letterSpacing:'-0.02em', lineHeight:1.05,
            fontWeight:300, marginBottom:24}}>
            Buying at land value. <em style={{color:'var(--gold)'}}>The buildings come free.</em>
          </h2>
          <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.65}}>
            Today's land-only values on adjacent parcels range $225–350/SF. Our basis of
            $163/SF matches 2019 HCAD appraisals for properties that <em>included</em> buildings —
            at today's market, those same parcels would price 20–30% higher.
          </p>
          <div style={{marginTop:32, padding:'22px 24px', background:'var(--ivory)',
            borderLeft:'2px solid var(--gold)'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
              textTransform:'uppercase', color:'var(--gold)', marginBottom:8}}>Our basis</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:40, fontWeight:300, letterSpacing:'-0.02em'}} className="tnum">
              $163 / SF
            </div>
            <div style={{fontSize:13, color:'var(--muted)', marginTop:6}}>
              + $1.85M NOI + 61,196 SF of buildings, effectively free
            </div>
          </div>
        </div>
        <div>
          <div style={{display:'grid',
            gridTemplateColumns:'2fr 2fr 0.6fr 1fr 1fr 0.8fr',
            padding:'12px 0', borderBottom:'1px solid var(--ink)',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.18em',
            textTransform:'uppercase', color:'var(--muted)'}}>
            <span>Property</span><span>Location</span><span>Ac</span><span>Price</span>
            <span>$/SF</span><span>Yr</span>
          </div>
          {comps.map(r=>(
            <div key={r[0]} style={{display:'grid',
              gridTemplateColumns:'2fr 2fr 0.6fr 1fr 1fr 0.8fr', gap:8,
              padding:'14px 0', borderBottom:'1px solid var(--rule)',
              alignItems:'baseline', fontSize:12}}>
              <span style={{fontFamily:"'Jost',sans-serif", fontSize:14}} dangerouslySetInnerHTML={{__html:r[0]}}/>
              <span style={{color:'var(--muted)'}} dangerouslySetInnerHTML={{__html:r[1]}}/>
              <span className="tnum mono">{r[2]}</span>
              <span className="tnum mono">{r[3]}</span>
              <span className="tnum mono" style={{color:'var(--gold)'}}>{r[4]}</span>
              <span className="tnum mono">{r[5]}</span>
            </div>
          ))}
          {/* Subject row */}
          <div style={{display:'grid',
            gridTemplateColumns:'2fr 2fr 0.6fr 1fr 1fr 0.8fr', gap:8,
            padding:'18px 0 14px', borderTop:'2px solid var(--ink)', marginTop:8,
            alignItems:'baseline', fontSize:12, background:'rgba(160,180,195,0.08)',
            paddingLeft:12, paddingRight:12, marginLeft:-12, marginRight:-12}}>
            <span style={{fontFamily:"'Jost',sans-serif", fontSize:14, fontWeight:500}}>
              Shoppes at San Felipe
            </span>
            <span style={{color:'var(--muted)'}}>1415 S. Voss Rd</span>
            <span className="tnum mono">4.54</span>
            <span className="tnum mono">$31.75M</span>
            <span className="tnum mono" style={{color:'var(--gold)', fontWeight:600}}>$163</span>
            <span className="tnum mono">2026</span>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== APPRECIATION =========================== */
function Appreciation(){
  const [ref, inView] = useInView();
  // $163 -> $300 over 10 years at 6.2% CAGR
  const pts = [];
  for (let y=0; y<=10; y++){
    const v = 163 * Math.pow(1.062, y);
    pts.push({y, v});
  }
  const min = 150, max = 320;
  const xy = pts.map((p,i)=>{
    const x = (i/(pts.length-1))*100;
    const y = 100 - ((p.v-min)/(max-min))*100;
    return [x,y];
  });
  const pathD = xy.map(([x,y],i)=>`${i===0?'M':'L'}${x},${y}`).join(' ');
  const areaD = pathD + ` L100,100 L0,100 Z`;

  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="06" title="Land Appreciation Thesis"/>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'start'}}>
        <div>
          <h2 style={{fontSize:'clamp(36px, 4.2vw, 60px)', letterSpacing:'-0.02em', lineHeight:1.04,
            fontWeight:300, marginBottom:24}}>
            <em style={{color:'var(--gold)'}}>$163 → $300 / SF</em> is a 6.2% CAGR.
          </h2>
          <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.65, marginBottom:24}}>
            Houston's Inner Loop corridors have averaged 5–7% land appreciation annually over
            the past decade. Our base case is below trend.
          </p>
          <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:24}}>
            {[
              ['Houston Heights land', '+64% / 10 yrs', 'HAR / Redfin'],
              ['Houston MSA appreciation', '5.4% annual', 'ZHVI / Census 2014–24'],
              ['Tanglewood residential', '$453 / SF', '2024 · HAR MLS'],
              ['Tanglewood YoY', '+7.3%', '2024 alone'],
              ['Houston median $/SF', '+4.7% YoY', 'Redfin / Zillow'],
              ['Fertitta / 4702 Westheimer', '$225–300 / SF', 'HCAD / CoStar 2024'],
              ['BLVD Place / Post Oak JV', '$250–350 / SF', 'CoStar / press 2024'],
            ].map(([k,v,s])=>(
              <div key={k} style={{display:'grid', gridTemplateColumns:'1fr auto',
                gap:16, padding:'10px 0', borderBottom:'1px solid var(--rule)', alignItems:'baseline'}}>
                <div>
                  <div style={{fontSize:13, color:'var(--ink)'}}>{k}</div>
                  <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
                    color:'var(--muted)', marginTop:2}}>{s}</div>
                </div>
                <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:13, color:'var(--gold)'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
            textTransform:'uppercase', color:'var(--muted)', marginBottom:12,
            display:'flex', justifyContent:'space-between'}}>
            <span>Land value · $ / SF · 6.2% CAGR</span>
            <span>2026 → 2036</span>
          </div>
          <div style={{position:'relative', background:'var(--ivory-2)', padding:'32px 24px 40px', height:400}}>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none"
              style={{position:'absolute', inset:'32px 24px 40px 60px', width:'calc(100% - 84px)',
                height:'calc(100% - 72px)'}}>
              <defs>
                <linearGradient id="apprFill" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="var(--gold)" stopOpacity="0.3"/>
                  <stop offset="1" stopColor="var(--gold)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d={areaD} fill="url(#apprFill)"
                style={{opacity: inView?1:0, transition:'opacity 1.4s ease .3s'}}/>
              <path d={pathD} stroke="var(--gold)" strokeWidth="0.6" fill="none"
                strokeDasharray="200" strokeDashoffset={inView?0:200}
                style={{transition:'stroke-dashoffset 1.8s ease .2s'}}/>
              {xy.map(([x,y],i)=>(
                <circle key={i} cx={x} cy={y} r={i===0||i===10?1:0.6}
                  fill={i===0||i===10?'var(--ink)':'var(--gold)'}
                  style={{opacity: inView?1:0, transition:`opacity .4s ease ${0.6 + i*0.06}s`}}/>
              ))}
            </svg>
            <div style={{position:'absolute', left:20, top:32, bottom:40, width:36,
              display:'flex', flexDirection:'column', justifyContent:'space-between',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, color:'var(--muted)',
              textAlign:'right'}}>
              <span>$320</span><span>$270</span><span>$220</span><span>$170</span>
            </div>
            <div style={{position:'absolute', left:60, right:24, bottom:16,
              display:'flex', justifyContent:'space-between',
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, color:'var(--muted)'}}>
              <span>'26</span><span>'28</span><span>'30</span><span>'32</span><span>'34</span><span>'36</span>
            </div>
          </div>

          {/* Sensitivity pills */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12, marginTop:24}}>
            {[
              ['Downside · $225/SF', '10.0% LP IRR', '2.21× multiple', '3.2% CAGR'],
              ['Base · $300/SF', '14.0% LP IRR', '3.10× multiple', '6.2% CAGR'],
              ['Upside · $350/SF', '16.0% LP IRR', '3.70× multiple', '7.9% CAGR'],
            ].map(([t,v1,v2,s],i)=>(
              <div key={t} style={{padding:'18px 16px',
                background: i===1?'var(--ink)':'var(--ivory-2)',
                color: i===1?'var(--ivory)':'var(--ink)'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.18em',
                  textTransform:'uppercase', opacity:0.6, marginBottom:10}}>{t}</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:400,
                  letterSpacing:'-0.01em', marginBottom:4}} className="tnum">{v1}</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, opacity:0.8}} className="tnum">{v2}</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, opacity:0.55, marginTop:6}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

Object.assign(window, { Thesis, LandComps, Appreciation });