/* Shoppes at San Felipe — Rent Roll */
const { useState: rrS } = React;

const RR_TENANTS = [
  // [suite, name, sf, pct, start, end, psf, total, options/note, kind]
  ['100',   'Distinct Dental',                  2500,  5.2, '7/30/12', '7/31/33', 32.50, 81250,  'Steps to $35 PSF by 2031', 'service'],
  ['110',   'The UPS Store',                    1235,  2.6, '12/1/06', '11/30/31', 38.00, 46930, 'Steps to $41.80 PSF (12/26)', 'service'],
  ['115',   'Clara Rose Boutique',              1690,  3.5, '7/31/25', '7/31/30', 40.00, 67600,  '2% annual increases · One 5-yr opt @ $44.17', 'specialty'],
  ['120',   'Alloy Personal Training',          1575,  3.3, '9/1/24',  '10/31/34', 45.00, 70875, 'Two 5-yr opts @ $54.45, $59.90', 'fitness'],
  ['130',   'The Ozone Bar',                    1690,  3.5, '11/1/24', '10/31/29', 41.82, 70676, '2% annual · One 5-yr opt @ $45.27', 'fnb'],
  ['135',   'Piola',                            2670,  5.5, '11/28/17','11/30/27', 33.00, 88110, 'Two 5-yr opts @ $36.30, $39.93', 'fnb'],
  ['150',   'Heights Wellness Retreat — Voss',  3707,  7.7, '2/9/08',  '2/28/33', 31.00, 114917,'One 5-yr opt @ $36.50', 'wellness'],
  ['160',   'European Wax Center',              1421,  2.9, '5/27/11', '5/31/26', 32.67, 46424, 'Expiring · 2026 mark-to-market', 'service'],
  ['170',   'Isle Pedi Spa',                    2695,  5.6, '4/27/11', '4/30/33', 34.03, 91711, 'Two 5-yr opts @ $41.17, $45.29', 'service'],
  ['200',   'Salon Lofts',                      6094,  12.6, '4/25/21', '10/31/32', 23.00, 140162, 'Three 5-yr opts @ $26.62, $29.28, $32.21', 'service'],
  ['220',   'Bonck Group',                      1275,  2.6, '6/7/24',  '6/30/29', 27.00, 34425, 'Two 5-yr opts @ $29.70, $32.67', 'office'],
  ['225',   'Amazing Lash Studio',              2250,  4.7, '11/27/11','11/30/26', 29.10, 65475, 'Expiring · 2026 mark-to-market', 'service'],
  ['230',   'Amerejuve Medspa',                 1839,  3.8, '6/1/15',  '7/31/29', 21.00, 38619, 'Steps to $24 PSF by 2028', 'wellness'],
  ['260',   'Vacant — Retail',                  2307,  4.8, null,      null,      null,  null,  '— Available for lease', 'vacant'],
  ['280',   'School of Rock',                   2462,  5.1, '2/14/19', '5/31/29', 29.70, 73121, 'One 5-yr opt @ $32.67', 'specialty'],
  ['1413A', 'Brassica Sandwiches & Salads',     3000,  6.2, '2/17/26', '2/29/36', 65.00, 195000,'New lease · steps to $70.20', 'fnb'],
  ['1413C', 'Clean Juice',                      1253,  2.6, '9/27/17', '9/30/27', 45.00, 56385, 'Two 5-yr opts @ $50.00, $55.00', 'fnb'],
  ['1413D', "Jersey Mike's Subs",               1250,  2.6, '9/22/21', '9/30/31', 40.10, 50125, 'Two 5-yr opts @ $48.52, $53.37', 'fnb'],
  ['1415',  'Proposed Church',                  3199,  6.6, '3/1/26',  '2/28/31', 3.75,  12000, '** Assumed terms (proposed)', 'other'],
  ['1417',  'Wild Fork Foods',                  4084,  8.5, '5/18/23', '5/31/33', 61.21, 249982,'Four 5-yr opts @ $74.07–$98.59', 'fnb'],
  ['6532',  'CVS Pharmacy (Ground Lease)',      13000, 0.0, '7/16/07', '1/31/33', null,  385000,'~13,000 SF building on 1.31 ac · Six 5-yr opts escalating to $491,368', 'ground'],
];

const KIND_DOT = {
  fnb: 'var(--gold)', service: '#7a8a99', specialty: '#9a8a6a',
  wellness: '#8a9a7a', fitness: '#a08a7a', office: '#6a7a8a',
  ground: 'var(--gold)', other: '#7a7a7a', vacant: '#c4c4c4',
};

const KIND_LABEL = {
  fnb:'F&B', service:'Service', specialty:'Specialty', wellness:'Wellness',
  fitness:'Fitness', office:'Office', ground:'Ground lease', other:'Other', vacant:'Vacant',
};

const fmtSF  = n => (n==null) ? '—' : n.toLocaleString();
const fmtUSD0 = n => (n==null) ? '—' : '$' + Math.round(n).toLocaleString();
const fmtPSF = n => (n==null) ? '—' : '$' + n.toFixed(2);

function RentRoll(){
  const [sortKey, setSortKey] = rrS('suite');
  const [sortDir, setSortDir] = rrS('asc');
  const [filter, setFilter] = rrS('all');

  const setSort = (k) => {
    if(sortKey===k) setSortDir(d => d==='asc' ? 'desc' : 'asc');
    else { setSortKey(k); setSortDir('asc'); }
  };

  const KIDX = {suite:0, tenant:1, sf:2, pct:3, end:5, psf:6, total:7};

  let rows = RR_TENANTS.filter(r => filter==='all' || r[9]===filter);
  rows = [...rows].sort((a,b)=>{
    const i = KIDX[sortKey];
    const av = a[i], bv = b[i];
    if(av==null) return 1; if(bv==null) return -1;
    if(typeof av === 'number') return sortDir==='asc' ? av-bv : bv-av;
    return sortDir==='asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
  });

  // Totals
  const leased = RR_TENANTS.filter(r=>r[9]!=='vacant' && r[9]!=='ground');
  const totLeasedSF = leased.reduce((s,r)=>s+r[2],0);
  const totVacantSF = RR_TENANTS.filter(r=>r[9]==='vacant').reduce((s,r)=>s+r[2],0);
  const totGLA = totLeasedSF + totVacantSF;
  const totRetailRent = leased.reduce((s,r)=>s+(r[7]||0),0);
  const totGroundRent = 385000;
  const avgPSF = totRetailRent / leased.filter(r=>r[6]).reduce((s,r)=>s+r[2],0);

  const filterOptions = [['all','All tenants'], ...Object.entries(KIND_LABEL).filter(([k])=>k!=='ground')];

  const arrow = (k) => sortKey===k ? (sortDir==='asc' ? '↑' : '↓') : '';

  // Year-end groupings
  const expiringByYear = {};
  RR_TENANTS.forEach(r=>{
    if(!r[5]) return;
    const y = r[5].split('/')[2];
    const yr = y && y.length===2 ? '20'+y : '20'+(y||'').slice(-2);
    if(!expiringByYear[yr]) expiringByYear[yr] = {sf:0, count:0};
    expiringByYear[yr].sf += r[2];
    expiringByYear[yr].count += 1;
  });

  return <section id="rentroll" style={{padding:'120px 40px', background:'var(--ivory-2)'}}>
    <div style={{maxWidth:1400, margin:'0 auto'}}>
      <SectionLabel num="03" title="Rent Roll"/>

      {/* ---------- HEADER STATS ---------- */}
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1fr', gap:24,
        marginBottom:48, paddingBottom:32, borderBottom:'1px solid rgba(11,22,60,0.12)'}}>
        <div>
          <h2 style={{fontSize:'clamp(34px, 4vw, 54px)', letterSpacing:'-0.02em', lineHeight:1.05,
            fontWeight:300, marginBottom:14, marginTop:0}}>
            21 tenants. <em style={{color:'var(--gold)'}}>$1.98M</em> in‑place rent.
          </h2>
          <p style={{color:'var(--muted)', fontSize:14, lineHeight:1.6, margin:0, maxWidth:520}}>
            Diversified across food &amp; beverage, service, wellness, and specialty retail.
            CVS on a long-dated ground lease. 5.77‑year WALT.
          </p>
        </div>
        {[
          ['Leased SF', fmtSF(totLeasedSF), '95.2% of GLA'],
          ['Vacant SF', fmtSF(totVacantSF), '4.8% · 1 suite'],
          ['Total GLA', fmtSF(totGLA), 'Building only'],
          ['In-place rent', '$1.98M', `${fmtPSF(avgPSF)} retail PSF`],
        ].map(([k,v,s])=>(
          <div key={k}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, letterSpacing:'0.2em',
              textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>{k}</div>
            <div style={{fontFamily:"'Jost',sans-serif", fontSize:32, fontWeight:300,
              letterSpacing:'-0.02em', lineHeight:1, marginBottom:6}} className="tnum">{v}</div>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
              color:'var(--muted)'}}>{s}</div>
          </div>
        ))}
      </div>

      {/* ---------- FILTER STRIP ---------- */}
      <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:20, flexWrap:'wrap'}}>
        <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.2em',
          textTransform:'uppercase', color:'var(--muted)'}}>Filter</span>
        {filterOptions.map(([k,l])=>(
          <button key={k} onClick={()=>setFilter(k)} style={{
            padding:'6px 14px', background: filter===k ? 'var(--ink)' : 'transparent',
            color: filter===k ? 'var(--ivory)' : 'var(--ink)',
            border: '1px solid ' + (filter===k ? 'var(--ink)' : 'rgba(11,22,60,0.18)'),
            fontSize:11, letterSpacing:'0.05em', cursor:'pointer',
            fontFamily:"'JetBrains Mono',ui-monospace,monospace",
          }}>{l}</button>
        ))}
        <span style={{marginLeft:'auto', fontFamily:"'JetBrains Mono',ui-monospace,monospace",
          fontSize:10, color:'var(--muted)'}}>Showing {rows.length} of {RR_TENANTS.length}</span>
      </div>

      {/* ---------- TABLE ---------- */}
      <div data-mobile-scroll="true">
      <div style={{background:'var(--ivory)', border:'1px solid rgba(11,22,60,0.08)', overflow:'hidden', minWidth:860}}>
        <div style={{display:'grid',
          gridTemplateColumns:'70px 1.2fr 14px 80px 60px 90px 70px 100px 1.4fr',
          gap:12, padding:'14px 24px', background:'var(--ink)', color:'var(--ivory)',
          fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9.5, letterSpacing:'0.18em',
          textTransform:'uppercase'}}>
          <SortHdr k="suite" cur={sortKey} dir={sortDir} onClick={setSort}>Suite</SortHdr>
          <SortHdr k="tenant" cur={sortKey} dir={sortDir} onClick={setSort}>Tenant</SortHdr>
          <span></span>
          <SortHdr k="sf" cur={sortKey} dir={sortDir} onClick={setSort} right>SF</SortHdr>
          <SortHdr k="pct" cur={sortKey} dir={sortDir} onClick={setSort} right>% GLA</SortHdr>
          <SortHdr k="end" cur={sortKey} dir={sortDir} onClick={setSort} right>Lease end</SortHdr>
          <SortHdr k="psf" cur={sortKey} dir={sortDir} onClick={setSort} right>PSF</SortHdr>
          <SortHdr k="total" cur={sortKey} dir={sortDir} onClick={setSort} right>Annual rent</SortHdr>
          <span>Notes / Options</span>
        </div>

        {rows.map((r,i)=>{
          const isVacant = r[9]==='vacant';
          const isGround = r[9]==='ground';
          return <div key={r[0]} style={{display:'grid',
            gridTemplateColumns:'70px 1.2fr 14px 80px 60px 90px 70px 100px 1.4fr',
            gap:12, padding:'14px 24px', alignItems:'baseline', fontSize:13,
            borderTop:'1px solid rgba(11,22,60,0.06)',
            background: isVacant ? 'rgba(196,196,196,0.18)' : (i%2 ? 'rgba(11,22,60,0.018)' : 'transparent'),
            opacity: isVacant ? 0.78 : 1,
          }}>
            <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11, color:'var(--muted)'}}>{r[0]}</span>
            <span style={{fontFamily:"'Jost',sans-serif", fontSize:14, fontWeight: isVacant ? 400 : 500,
              fontStyle: isVacant ? 'italic' : 'normal'}}>{r[1]}</span>
            <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%',
              background: KIND_DOT[r[9]], alignSelf:'center', marginTop:2}}
              title={KIND_LABEL[r[9]]}/>
            <span className="tnum mono" style={{textAlign:'right', fontSize:12}}>{fmtSF(r[2])}</span>
            <span className="tnum mono" style={{textAlign:'right', fontSize:12, color:'var(--muted)'}}>
              {r[3]==null ? '—' : r[3].toFixed(1)+'%'}
            </span>
            <span className="tnum mono" style={{textAlign:'right', fontSize:11, color:'var(--muted)'}}>{r[5] || '—'}</span>
            <span className="tnum mono" style={{textAlign:'right', fontSize:12,
              color: isGround ? 'var(--gold)' : 'var(--ink)'}}>{fmtPSF(r[6])}</span>
            <span className="tnum mono" style={{textAlign:'right', fontSize:13, fontWeight:500,
              color: isGround ? 'var(--gold)' : 'var(--ink)'}}>{fmtUSD0(r[7])}</span>
            <span style={{fontSize:11, color:'var(--muted)', lineHeight:1.4}}>{r[8]}</span>
          </div>;
        })}

        {/* TOTALS ROW */}
        <div style={{display:'grid',
          gridTemplateColumns:'70px 1.2fr 14px 80px 60px 90px 70px 100px 1.4fr',
          gap:12, padding:'18px 24px', background:'var(--ivory-2)',
          borderTop:'2px solid var(--ink)', alignItems:'baseline'}}>
          <span></span>
          <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--ink)', fontWeight:600}}>
            Retail subtotal
          </span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:13, fontWeight:600}}>{fmtSF(totLeasedSF)}</span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:12, color:'var(--muted)'}}>95.2%</span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:12, color:'var(--muted)'}}>
            {fmtPSF(avgPSF)}
          </span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:14, fontWeight:600}}>
            {fmtUSD0(totRetailRent)}
          </span>
          <span style={{fontSize:11, color:'var(--muted)'}}>Building leases only</span>
        </div>
        <div style={{display:'grid',
          gridTemplateColumns:'70px 1.2fr 14px 80px 60px 90px 70px 100px 1.4fr',
          gap:12, padding:'14px 24px', background:'var(--ivory-2)',
          borderTop:'1px solid rgba(11,22,60,0.08)', alignItems:'baseline'}}>
          <span></span>
          <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10,
            letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--gold)', fontWeight:600}}>
            + Ground lease (CVS)
          </span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:12, color:'var(--muted)'}}>—</span>
          <span></span>
          <span></span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:14, fontWeight:600, color:'var(--gold)'}}>
            {fmtUSD0(totGroundRent)}
          </span>
          <span style={{fontSize:11, color:'var(--muted)'}}>1.31 ac · escalates to $491K</span>
        </div>
        <div style={{display:'grid',
          gridTemplateColumns:'70px 1.2fr 14px 80px 60px 90px 70px 100px 1.4fr',
          gap:12, padding:'18px 24px', background:'var(--ink)', color:'var(--ivory)',
          alignItems:'baseline'}}>
          <span></span>
          <span style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11,
            letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:600}}>
            Total in-place rent
          </span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:13, fontWeight:600}}>{fmtSF(totGLA)}</span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:12, color:'rgba(244,242,237,0.6)'}}>100%</span>
          <span></span>
          <span></span>
          <span className="tnum mono" style={{textAlign:'right', fontSize:16, fontWeight:600, color:'var(--gold-soft)'}}>
            {fmtUSD0(totRetailRent + totGroundRent)}
          </span>
          <span style={{fontSize:11, color:'rgba(244,242,237,0.6)'}}>Year 1 gross · before opex</span>
        </div>
      </div>
      </div>

      {/* ---------- ROLLOVER SCHEDULE ---------- */}
      <div style={{marginTop:60, display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:60, alignItems:'start'}}>
        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--muted)', marginBottom:24}}>
            — Rollover schedule
          </div>
          <div style={{display:'grid', gridTemplateColumns:'70px 1fr', gap:12, alignItems:'end',
            height:240, paddingBottom:8, borderBottom:'1px solid rgba(11,22,60,0.15)'}}>
            <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
              letterSpacing:'0.15em', textTransform:'uppercase', color:'var(--muted)', alignSelf:'start'}}>
              SF expiring
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(11, 1fr)', gap:6, alignItems:'end', height:'100%'}}>
              {Array.from({length:11}).map((_,i)=>{
                const yr = String(2026+i);
                const y = expiringByYear[yr] || {sf:0, count:0};
                const maxSF = Math.max(...Object.values(expiringByYear).map(v=>v.sf), 1);
                const h = (y.sf / maxSF) * 100;
                return <div key={yr} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:6, height:'100%', justifyContent:'flex-end'}}>
                  <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9,
                    color: y.sf>0 ? 'var(--ink)' : 'transparent'}} className="tnum">
                    {y.sf>0 ? (y.sf/1000).toFixed(1)+'K' : '—'}
                  </div>
                  <div style={{width:'100%', height: h+'%', minHeight: y.sf>0 ? 4 : 0,
                    background: yr==='2033' ? 'var(--gold)' : 'var(--ink)',
                    transition:'height 0.6s ease'}}/>
                </div>;
              })}
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'70px 1fr', gap:12, marginTop:8}}>
            <div></div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(11, 1fr)', gap:6,
              fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9, color:'var(--muted)', textAlign:'center'}}>
              {Array.from({length:11}).map((_,i)=>(
                <span key={i}>'{String(26+i).padStart(2,'0')}</span>
              ))}
            </div>
          </div>
          <p style={{fontSize:12, color:'var(--muted)', marginTop:24, lineHeight:1.6, maxWidth:520}}>
            Concentrated 2033 expirations align with CVS ground lease expiry — natural inflection
            point for either renewal at significantly higher rents or ground-up redevelopment of
            the 4.54-acre site.
          </p>
        </div>

        <div>
          <div style={{fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:10, letterSpacing:'0.22em',
            textTransform:'uppercase', color:'var(--muted)', marginBottom:24}}>
            — Tenant mix
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {(()=>{
              const groups = {};
              RR_TENANTS.forEach(r=>{
                if(r[9]==='vacant') return;
                if(!groups[r[9]]) groups[r[9]] = {sf:0, count:0};
                if(r[9]!=='ground') groups[r[9]].sf += r[2];
                groups[r[9]].count += 1;
              });
              const buildingSF = totLeasedSF;
              return Object.entries(groups).map(([k,g])=>{
                const pct = k==='ground' ? 0 : (g.sf / buildingSF) * 100;
                return <div key={k}>
                  <div style={{display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:6}}>
                    <span style={{display:'flex', alignItems:'center', gap:8}}>
                      <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%',
                        background: KIND_DOT[k]}}/>
                      {KIND_LABEL[k]} <span style={{color:'var(--muted)'}}>· {g.count}</span>
                    </span>
                    <span className="tnum mono" style={{color:'var(--muted)'}}>
                      {k==='ground' ? '1.31 ac' : fmtSF(g.sf)+' SF'}
                    </span>
                  </div>
                  {k!=='ground' && <div style={{height:4, background:'rgba(11,22,60,0.06)'}}>
                    <div style={{width: pct+'%', height:'100%', background: KIND_DOT[k]}}/>
                  </div>}
                </div>;
              });
            })()}
          </div>
        </div>
      </div>

      <p style={{fontSize:10, color:'var(--muted)', marginTop:48, fontStyle:'italic',
        fontFamily:"'JetBrains Mono',ui-monospace,monospace", letterSpacing:'0.05em'}}>
        ** Suite 1415: Assumed terms for the proposed Church lease. Building SF excludes 64,417
        SF of CVS ground-leased land. Rent figures shown reflect current in-place; see
        offering model for projected NOI through Year 10.
      </p>
    </div>
  </section>;
}

function SortHdr({k, cur, dir, onClick, children, right}){
  const active = cur===k;
  return <button onClick={()=>onClick(k)} style={{
    background:'none', border:'none', color:'inherit', cursor:'pointer',
    fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:9.5, letterSpacing:'0.18em',
    textTransform:'uppercase', padding:0, textAlign: right ? 'right' : 'left',
    opacity: active ? 1 : 0.65, fontWeight: active ? 600 : 400,
  }}>
    {children}{active && <span style={{marginLeft:6, color:'var(--gold-soft)'}}>{dir==='asc'?'↑':'↓'}</span>}
  </button>;
}

Object.assign(window, { RentRoll });
