/* Cinco Ranch Village — Thesis, Comps, Replacement Cost */
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 July 2025, Brixmor paid <em style={{color:'var(--gold)'}}>$545&nbsp;/&nbsp;SF</em> for La Centerra.
      </h2>
      <h2 style={{fontSize:'clamp(44px, 5.5vw, 84px)', maxWidth:1100, letterSpacing:'-0.025em',
        lineHeight:1.02, marginBottom:48, fontWeight:300}}>
        We're buying directly across the street for <em style={{color:'var(--gold)'}}>$476&nbsp;/&nbsp;SF</em>.
      </h2>
      <p style={{fontSize:19, color:'var(--muted)', maxWidth:800, lineHeight:1.6, marginBottom:80}}>
        100% leased NNN neighborhood retail in Houston's premier suburban corridor, anchored by
        national credit tenants, with in-place rents ~30% below neighboring centers. Below
        replacement cost. Below La Centerra's institutional benchmark. Clean 60% LTV capital stack.
      </p>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:60}}>
        {[
          {n:'01', t:'Stabilize · Year 1',
            b:'$9.6M off-market acquisition at $476/SF. 6.80% going-in cap on $653K in-place NOI. Execute the pending tenant lease (1,200 SF @ $28/SF NNN) for 100% economic occupancy. 60% LTV senior debt at 6.00%.'},
          {n:'02', t:'Grow NOI · Years 2–4',
            b:'Mark-to-market rollovers: FYZICAL (Nov 2026), Centerra Ranch Montessori (Jan 2028, $26.28 → $35–$40/SF), Handroll Social (Jul 2029). NNN recovery optimization. ~$40K+ NOI uplift from Montessori renewal alone.'},
          {n:'03', t:'Refi & Exit · Years 5–10',
            b:'Year 5 refinance at $13.8M appraisal (60% LTV) — returns ~$2.8M to LPs as ROC. Continue mark-to-market through Yr 10. Exit at 6.25% cap on $945K forward NOI — $15.1M gross sale.'},
        ].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>;
}

/* =========================== SALE COMPARABLES =========================== */
function LandComps(){
  const [ref, inView] = useInView();
  const comps = [
    ['La Centerra', 'Lifestyle', 409000, '96%', '$223.0M', '$545', '5.00%', 'Jul 2025'],
    ['Katy Green', 'Pad/Strip', 14920, '100%', '$5.5M', '$370', '6.30%', 'Oct 2024'],
    ['Shops at Cinco Ranch', 'Strip (NNN)', 27500, '94%', '$10.5M', '$380', '6.50%', 'Mar 2025'],
    ['Cross Creek Plaza', 'Strip (NNN)', 16963, '100%', '$6.1M', '$360', '6.80%', 'Q3 2024'],
    ['Cinco Ranch Town Ctr', 'Strip (NNN)', 22400, '95%', '$8.2M', '$366', '7.00%', 'Q1 2024'],
    ['Mason Village', 'Anchored', 96486, '92%', '$22.5M', '$233', '7.20%', 'H2 2024'],
  ];
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="05" title="Sale 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}}>
            Value vs. the comps. <em style={{color:'var(--gold)'}}>6.80% cap.</em>
          </h2>
          <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.65}}>
            Median comp cap rate is 6.65%. CRV at 6.80% prices 15 bps <em>above</em> market
            despite 100% occupancy and institutional-quality income. $476/SF reflects the
            occupancy premium vs. comp mean of $376/SF.
          </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">
              $476 / SF @ 6.80%
            </div>
            <div style={{fontSize:13, color:'var(--muted)', marginTop:6}}>
              13% discount to La Centerra's $545/SF · 1.0 mile away
            </div>
          </div>
        </div>
        <div>
          <div style={{display:'grid',
            gridTemplateColumns:'1.8fr 1.1fr 0.9fr 0.7fr 0.9fr 0.8fr 0.8fr 0.9fr',
            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>Comp</span><span>Type</span><span>GLA</span><span>Occ</span>
            <span>Price</span><span>$/SF</span><span>Cap</span><span>Date</span>
          </div>
          {comps.map(r=>(
            <div key={r[0]} style={{display:'grid',
              gridTemplateColumns:'1.8fr 1.1fr 0.9fr 0.7fr 0.9fr 0.8fr 0.8fr 0.9fr', gap:8,
              padding:'14px 0', borderBottom:'1px solid var(--rule)',
              alignItems:'baseline', fontSize:12}}>
              <span style={{fontFamily:"'Jost',sans-serif", fontSize:14}}>{r[0]}</span>
              <span style={{color:'var(--muted)', fontSize:11}}>{r[1]}</span>
              <span className="tnum mono" style={{fontSize:11}}>{(r[2]/1000).toFixed(0)}K</span>
              <span className="tnum mono" style={{fontSize:11}}>{r[3]}</span>
              <span className="tnum mono" style={{fontSize:11}}>{r[4]}</span>
              <span className="tnum mono" style={{fontSize:11}}>{r[5]}</span>
              <span className="tnum mono" style={{color:'var(--gold)', fontSize:11}}>{r[6]}</span>
              <span className="tnum mono" style={{color:'var(--muted)', fontSize:10}}>{r[7]}</span>
            </div>
          ))}
          {/* Subject row */}
          <div style={{display:'grid',
            gridTemplateColumns:'1.8fr 1.1fr 0.9fr 0.7fr 0.9fr 0.8fr 0.8fr 0.9fr', 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}}>
              Cinco Ranch Village
            </span>
            <span style={{color:'var(--muted)', fontSize:11}}>Strip (NNN)</span>
            <span className="tnum mono" style={{fontSize:11}}>20K</span>
            <span className="tnum mono" style={{fontSize:11}}>100%</span>
            <span className="tnum mono" style={{fontSize:11}}>$9.6M</span>
            <span className="tnum mono" style={{fontWeight:600, fontSize:11}}>$476</span>
            <span className="tnum mono" style={{color:'var(--gold)', fontWeight:600, fontSize:11}}>6.80%</span>
            <span className="tnum mono" style={{color:'var(--muted)', fontSize:10}}>Jul 2026</span>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

/* =========================== REPLACEMENT COST =========================== */
function Appreciation(){
  const [ref, inView] = useInView();
  const costs = [
    ['Land acquisition', '$40.00 / SF', '$3,502,224'],
    ['Site work & utilities', '$8.00 / SF', '$700,445'],
    ['Impact fees & entitlements', '$3.50 / SF', '$306,445'],
    ['Shell construction (NNN)', '$165.00 / SF', '$3,325,575'],
    ['Parking / signage / landscape', '$31.00 / SF', '$624,805'],
    ['GC + contingency (11%)', '$21.56 / SF', '$434,542'],
    ['Soft costs (8% of hard)', '—', '$350,794'],
    ['TI + LC + financing', '—', '$1,352,314'],
    ['Development fee (4%)', '—', '$175,397'],
  ];
  return <section ref={ref} style={{padding:'120px 40px', background:'var(--ivory)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="06" title="Replacement Cost Analysis"/>
      <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)'}}>10.9% below</em> replacement cost.
          </h2>
          <p style={{color:'var(--muted)', fontSize:15, lineHeight:1.65, marginBottom:24}}>
            Replicating CRV at today's market rates costs $534/SF. We're buying at $476/SF —
            $1.2M embedded margin of safety. Land alone at $40/SF plus site improvements
            represents 47% of acquisition price.
          </p>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginTop:24}}>
            <div style={{padding:'20px 22px', 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}}>Replacement cost</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:30, fontWeight:300, letterSpacing:'-0.02em'}} className="tnum">
                $534 / SF
              </div>
              <div style={{fontSize:12, color:'var(--muted)', marginTop:6}}>$10.77M total</div>
            </div>
            <div style={{padding:'20px 22px', background:'var(--ink)', color:'var(--ivory)'}}>
              <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
                textTransform:'uppercase', opacity:0.7, marginBottom:8}}>Our basis</div>
              <div style={{fontFamily:"'Jost',sans-serif", fontSize:30, fontWeight:300, letterSpacing:'-0.02em'}} className="tnum">
                $476 / SF
              </div>
              <div style={{fontSize:12, opacity:0.7, marginTop:6}}>$9.60M total</div>
            </div>
          </div>
          <div style={{marginTop:24, padding:'16px 18px', 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(--gold)', marginBottom:6}}>Rent growth catalyst</div>
            <div style={{fontSize:13, lineHeight:1.55, color:'var(--ink)'}}>
              As replacement costs rise 3–5% annually, the gap between existing rents and
              new-build required rents widens — driving mark-to-market upside at every lease rollover.
            </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>Cost buildup · $ per SF</span>
            <span>Hard + soft + carry</span>
          </div>
          <div style={{background:'var(--ivory-2)', padding:'28px 28px 32px'}}>
            {costs.map(([k,psf,total],i)=>(
              <div key={k} style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:16,
                padding:'12px 0', borderBottom:i<costs.length-1?'1px solid var(--rule)':'none',
                alignItems:'baseline'}}>
                <span style={{fontSize:13, color:'var(--ink)'}}>{k}</span>
                <span className="tnum mono" style={{fontSize:12, color:'var(--muted)', textAlign:'right'}}>{psf}</span>
                <span className="tnum mono" style={{fontSize:13, textAlign:'right'}}>{total}</span>
              </div>
            ))}
            <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:16,
              padding:'18px 0 0', borderTop:'2px solid var(--ink)', marginTop:6,
              alignItems:'baseline'}}>
              <span style={{fontFamily:"'Jost',sans-serif", fontSize:18}}>Total replacement cost</span>
              <span className="tnum mono" style={{fontSize:13, textAlign:'right', color:'var(--muted)'}}>$534 / SF</span>
              <span className="tnum mono" style={{fontSize:18, textAlign:'right', color:'var(--gold)', fontWeight:500}}>$10,772,539</span>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12, marginTop:24}}>
            {[
              ['Below replacement', '10.9%', '$1.17M savings'],
              ['Land value floor', '47%', 'of acquisition price'],
              ['New-supply barrier', '$218 / SF', 'hard-cost floor'],
            ].map(([t,v,s])=>(
              <div key={t} style={{padding:'18px 16px', background:'var(--ivory-2)'}}>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.18em',
                  textTransform:'uppercase', color:'var(--muted)', marginBottom:10}}>{t}</div>
                <div style={{fontFamily:"'Jost',sans-serif", fontSize:22, fontWeight:400,
                  letterSpacing:'-0.01em', marginBottom:4}} className="tnum">{v}</div>
                <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, color:'var(--muted)'}}>{s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

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