// ─── ProjectDetail page ──────────────────────────────────────────────
// Full project page: hero, drop-in image gallery, district map, and a
// single panel with two modes — "Live it" and "Invest in it".

const usd = (n) => '$' + Math.round(n).toLocaleString('en-US');
const usdK = (n) => '$' + Math.round(n / 1000) + 'K';

// ── small shared bits ───────────────────────────────────────────────
const PDEyebrow = ({ children, dark }) =>
  React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: dark ? 'rgba(244,241,236,0.4)' : '#8A8A85', marginBottom: 16 } }, children);

const PDTag = ({ label, gold }) =>
  React.createElement('span', {
    style: {
      display: 'inline-block', padding: '3px 8px', fontFamily: "'DM Mono',monospace",
      fontSize: 7, letterSpacing: '0.12em', textTransform: 'uppercase',
      border: gold ? '1px solid #B8922A' : '1px solid rgba(44,44,42,0.22)',
      color: gold ? '#B8922A' : '#8A8A85',
    },
  }, label);

// ── Gallery (drop-in image slots) ────────────────────────────────────
const PDGallery = ({ project }) => {
  const s = slug(project.name);
  const caps = ['Facade — street view', 'Rooftop & pool deck', 'Lobby & arrival', 'Model unit — living', 'View / amenity'];
  const slot = (key, cap, style) =>
    React.createElement('image-slot', {
      key, id: `gal-${s}-${key}`, shape: 'rect', placeholder: cap,
      style: { display: 'block', width: '100%', height: '100%', background: '#EAE6DE', ...style },
    });
  return React.createElement('div', {
    style: { display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridTemplateRows: '232px 232px', gap: 2 },
  },
    React.createElement('div', { style: { gridColumn: '1', gridRow: '1 / 3' } }, slot('lead', caps[0])),
    React.createElement('div', { style: { gridColumn: '2', gridRow: '1' } }, slot('a', caps[1])),
    React.createElement('div', { style: { gridColumn: '3', gridRow: '1' } }, slot('b', caps[2])),
    React.createElement('div', { style: { gridColumn: '2', gridRow: '2' } }, slot('c', caps[3])),
    React.createElement('div', { style: { gridColumn: '3', gridRow: '2' } }, slot('d', caps[4]))
  );
};

// ── Stat block ───────────────────────────────────────────────────────
const PDStat = ({ label, value, sub, dark }) =>
  React.createElement('div', null,
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: dark ? 'rgba(244,241,236,0.35)' : '#B8B5AE', marginBottom: 10 } }, label),
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 40, fontWeight: 300, color: dark ? '#D4AF6A' : '#2C2C2A', lineHeight: 1 } }, value),
    sub && React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, color: dark ? 'rgba(244,241,236,0.4)' : '#8A8A85', marginTop: 8, letterSpacing: '0.06em' } }, sub)
  );

// ─────────────────────────────────────────────────────────────────────
// LIVE IT
// ─────────────────────────────────────────────────────────────────────
const LivePanel = ({ project }) => {
  const L = project.liveIt;
  return React.createElement('div', { style: { padding: '48px 44px 52px' } },

    // Intro + headline stats
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'start', marginBottom: 56 } },
      React.createElement('div', null,
        React.createElement('h3', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 30, fontWeight: 300, color: '#2C2C2A', lineHeight: 1.2, marginBottom: 18 } }, 'A place to actually live.'),
        React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.65)', lineHeight: 1.95, maxWidth: 480 } }, L.blurb)
      ),
      React.createElement('div', { style: { display: 'flex', gap: 40, paddingTop: 6 } },
        React.createElement(PDStat, { label: 'Total units', value: L.units }),
        React.createElement(PDStat, { label: 'Price from', value: L.priceFrom.replace(',000', 'K').replace('$', '$'), sub: L.priceRange })
      )
    ),

    // Distribution
    React.createElement('div', { style: { marginBottom: 52 } },
      React.createElement(PDEyebrow, null, 'The distribution'),
      React.createElement('div', { style: { borderTop: '1px solid rgba(44,44,42,0.16)' } },
        // header row
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.6fr 1.4fr 1fr 0.8fr 1.2fr', gap: 16, padding: '12px 4px', borderBottom: '1px solid rgba(44,44,42,0.1)' } },
          ['Type', 'Configuration', 'Area', 'Units', 'Price'].map((h, i) =>
            React.createElement('span', { key: i, style: { fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B8B5AE', textAlign: i >= 3 ? 'right' : 'left' } }, h)
          )
        ),
        L.distribution.map((u, i) =>
          React.createElement('div', { key: i, style: { display: 'grid', gridTemplateColumns: '1.6fr 1.4fr 1fr 0.8fr 1.2fr', gap: 16, padding: '16px 4px', borderBottom: '1px solid rgba(44,44,42,0.07)', alignItems: 'baseline' } },
            React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 20, fontWeight: 300, color: '#2C2C2A' } }, u.type),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, color: '#8A8A85', letterSpacing: '0.04em' } }, u.cfg),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, color: '#8A8A85' } }, u.sqm),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, color: '#8A8A85', textAlign: 'right' } }, u.count),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, color: '#2C2C2A', textAlign: 'right' } }, u.price)
          )
        )
      )
    ),

    // Amenities + Nearby
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 } },
      React.createElement('div', null,
        React.createElement(PDEyebrow, null, 'Amenities'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 32px' } },
          L.amenities.map((a, i) =>
            React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'baseline', gap: 10, padding: '11px 0', borderBottom: '1px solid rgba(44,44,42,0.08)' } },
              React.createElement('span', { style: { width: 5, height: 5, flexShrink: 0, background: 'var(--accent)', transform: 'rotate(45deg)', marginTop: 1 } }),
              React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(44,44,42,0.72)', lineHeight: 1.5 } }, a)
            )
          )
        )
      ),
      React.createElement('div', null,
        React.createElement(PDEyebrow, null, 'What is nearby'),
        L.nearby.map((n, i) =>
          React.createElement('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '12px 0', borderBottom: '1px solid rgba(44,44,42,0.08)' } },
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(44,44,42,0.72)' } }, n.name),
            React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 17, fontWeight: 300, color: '#2C2C2A' } }, n.dist)
          )
        )
      )
    )
  );
};

// ── Completion bar : Lista Cero → Delivered ──────────────────────────
const STAGES = ['Lista Cero', 'Pre-sale', 'Foundations', 'Structure', 'Finishes', 'Delivered'];
const stageLabel = (pct) => {
  if (pct < 8) return 'Lista Cero';
  if (pct < 30) return 'Pre-sale';
  if (pct < 50) return 'Foundations';
  if (pct < 70) return 'Structure';
  if (pct < 92) return 'Finishes';
  return 'Delivered';
};
const CompletionBar = ({ pct }) => {
  const cur = stageLabel(pct);
  return React.createElement('div', null,
    React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 } },
      React.createElement('div', null,
        React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: '#F4F1EC' } }, 'Current state'),
        React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#D4AF6A', marginLeft: 14 } }, cur)
      ),
      React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 28, fontWeight: 300, color: '#D4AF6A' } }, `${pct}%`)
    ),
    // track
    React.createElement('div', { style: { position: 'relative', height: 3, background: 'rgba(244,241,236,0.14)', margin: '34px 0 14px' } },
      React.createElement('div', { style: { position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`, background: '#D4AF6A', transition: 'width 900ms cubic-bezier(0.4,0,0.2,1)' } }),
      // stage ticks
      STAGES.map((st, i) => {
        const x = (i / (STAGES.length - 1)) * 100;
        const reached = pct >= (i / (STAGES.length - 1)) * 100 - 1;
        return React.createElement('div', { key: i, style: { position: 'absolute', left: `${x}%`, top: -4, transform: 'translateX(-50%)' } },
          React.createElement('div', { style: { width: 1, height: 11, background: reached ? '#D4AF6A' : 'rgba(244,241,236,0.28)' } })
        );
      }),
      // marker
      React.createElement('div', { style: { position: 'absolute', left: `${pct}%`, top: '50%', transform: 'translate(-50%,-50%) rotate(45deg)', width: 11, height: 11, background: '#F4F1EC', border: '1px solid #D4AF6A', transition: 'left 900ms cubic-bezier(0.4,0,0.2,1)' } })
    ),
    // stage labels
    React.createElement('div', { style: { position: 'relative', height: 16 } },
      STAGES.map((st, i) => {
        const x = (i / (STAGES.length - 1)) * 100;
        const reached = pct >= (i / (STAGES.length - 1)) * 100 - 1;
        const anchor = i === 0 ? 'left' : i === STAGES.length - 1 ? 'right' : 'center';
        return React.createElement('span', { key: i, style: {
          position: 'absolute', left: `${x}%`,
          transform: anchor === 'left' ? 'none' : anchor === 'right' ? 'translateX(-100%)' : 'translateX(-50%)',
          fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: '0.08em', textTransform: 'uppercase',
          color: reached ? 'rgba(244,241,236,0.7)' : 'rgba(244,241,236,0.3)', whiteSpace: 'nowrap',
        } }, st);
      })
    )
  );
};

// ── Payment plan ─────────────────────────────────────────────────────
const PaymentPlan = ({ price, months }) => {
  const reservation = price * 0.05;
  const during = price * 0.15;
  const delivery = price * 0.80;
  const monthly = during / months;
  const blocks = [
    { pct: '5%', label: 'Reservation', amt: usd(reservation), note: 'Down payment to secure the unit' },
    { pct: '15%', label: 'During construction', amt: usd(during), note: `${usd(monthly)} / mo · ${months} months` },
    { pct: '80%', label: 'On delivery', amt: usd(delivery), note: 'Balance / mortgage at handover' },
  ];
  return React.createElement('div', null,
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: '#F4F1EC', marginBottom: 6 } }, 'Payment plan'),
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, color: 'rgba(244,241,236,0.4)', letterSpacing: '0.1em', marginBottom: 24 } }, `On an entry of ${usd(price)} · ${months}-month build`),
    // allocation bar
    React.createElement('div', { style: { display: 'flex', height: 8, gap: 2, marginBottom: 28 } },
      React.createElement('div', { style: { width: '5%', background: '#D4AF6A' } }),
      React.createElement('div', { style: { width: '15%', background: 'rgba(212,175,106,0.55)' } }),
      React.createElement('div', { style: { width: '80%', background: 'rgba(244,241,236,0.14)' } })
    ),
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 } },
      blocks.map((b, i) =>
        React.createElement('div', { key: i, style: { border: '1px solid rgba(244,241,236,0.1)', padding: '20px 18px', background: i < 2 ? 'rgba(212,175,106,0.05)' : 'transparent' } },
          React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 34, fontWeight: 300, color: '#D4AF6A', lineHeight: 1, marginBottom: 12 } }, b.pct),
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.7)', marginBottom: 8 } }, b.label),
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, color: '#F4F1EC', marginBottom: 6 } }, b.amt),
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, color: 'rgba(244,241,236,0.4)', lineHeight: 1.6 } }, b.note)
        )
      )
    )
  );
};

// ── Projection chart ─────────────────────────────────────────────────
const ProjectionChart = ({ price, years, rate = 0.07 }) => {
  const W = 520, H = 200, pad = 8;
  const vals = Array.from({ length: years + 1 }, (_, y) => price * Math.pow(1 + rate, y));
  const max = vals[vals.length - 1], min = vals[0] * 0.92;
  const X = (i) => pad + (i / years) * (W - pad * 2);
  const Y = (v) => H - pad - ((v - min) / (max - min)) * (H - pad * 2 - 24);
  const line = vals.map((v, i) => `${i === 0 ? 'M' : 'L'} ${X(i).toFixed(1)} ${Y(v).toFixed(1)}`).join(' ');
  const area = `${line} L ${X(years).toFixed(1)} ${H - pad} L ${X(0).toFixed(1)} ${H - pad} Z`;
  const exit = vals[years], gain = exit - price;
  return React.createElement('div', null,
    React.createElement('svg', { viewBox: `0 0 ${W} ${H}`, width: '100%', style: { display: 'block', overflow: 'visible' } },
      React.createElement('defs', null,
        React.createElement('linearGradient', { id: 'pdArea', x1: 0, y1: 0, x2: 0, y2: 1 },
          React.createElement('stop', { offset: '0%', stopColor: 'rgba(212,175,106,0.28)' }),
          React.createElement('stop', { offset: '100%', stopColor: 'rgba(212,175,106,0)' })
        )
      ),
      ...vals.map((v, i) => React.createElement('line', { key: `g${i}`, x1: X(i), y1: pad, x2: X(i), y2: H - pad, stroke: 'rgba(244,241,236,0.06)', strokeWidth: 0.5 })),
      React.createElement('path', { d: area, fill: 'url(#pdArea)' }),
      React.createElement('path', { d: line, fill: 'none', stroke: '#D4AF6A', strokeWidth: 1.4 }),
      ...vals.map((v, i) => React.createElement('circle', { key: `d${i}`, cx: X(i), cy: Y(v), r: i === 0 || i === years ? 3 : 1.8, fill: i === 0 || i === years ? '#D4AF6A' : 'rgba(244,241,236,0.5)' })),
      // endpoint labels
      React.createElement('text', { x: X(0), y: Y(vals[0]) - 12, fontFamily: "'DM Mono',monospace", fontSize: 9, fill: 'rgba(244,241,236,0.6)' }, 'Entry'),
      React.createElement('text', { x: X(years), y: Y(exit) - 12, textAnchor: 'end', fontFamily: "'DM Mono',monospace", fontSize: 9, fill: '#D4AF6A' }, `Year ${years}`),
      ...vals.map((v, i) => React.createElement('text', { key: `x${i}`, x: X(i), y: H + 4, textAnchor: 'middle', fontFamily: "'DM Mono',monospace", fontSize: 7.5, fill: 'rgba(244,241,236,0.3)' }, `Y${i}`))
    ),
    React.createElement('div', { style: { display: 'flex', gap: 36, marginTop: 28, flexWrap: 'wrap' } },
      [['Entry value', usd(price)], ['Projected exit', usd(exit)], ['Net appreciation', '+' + usd(gain)]].map(([l, v], i) =>
        React.createElement('div', { key: i },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 7.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.35)', marginBottom: 8 } }, l),
          React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: i === 2 ? '#D4AF6A' : '#F4F1EC' } }, v)
        )
      )
    ),
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 7, color: 'rgba(244,241,236,0.22)', marginTop: 22, lineHeight: 1.9, letterSpacing: '0.06em' } },
      `Indicative model · ${(rate * 100).toFixed(0)}% annual appreciation assumed over ${years} years. Past performance does not guarantee future results. Not financial advice.`)
  );
};

// ── Best matching investor profile ───────────────────────────────────
const BestProfile = ({ profileId, navigate }) => {
  const p = (window.PROFILES || []).find(x => x.id === profileId) || (window.PROFILES || [])[0];
  if (!p) return null;
  return React.createElement('div', { style: { border: '1px solid rgba(244,241,236,0.14)', padding: '28px 26px', background: 'rgba(244,241,236,0.02)' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 } },
      React.createElement('div', { style: { width: 12, height: 1, background: '#D4AF6A' } }),
      React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#D4AF6A', border: '1px solid #D4AF6A', padding: '2px 7px' } }, p.tag)
    ),
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.35)', marginBottom: 10 } }, 'Best matched to'),
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 300, color: '#F4F1EC', lineHeight: 1.2, marginBottom: 4 } }, p.title),
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 15, fontStyle: 'italic', color: 'rgba(244,241,236,0.55)', marginBottom: 18 } }, p.subtitle),
    React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, fontWeight: 300, color: 'rgba(244,241,236,0.5)', lineHeight: 1.85, marginBottom: 22 } }, p.desc),
    React.createElement('button', {
      onClick: () => navigate('contact'),
      style: {
        display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none',
        border: '1px solid #D4AF6A', color: '#D4AF6A', fontFamily: "'DM Mono',monospace",
        fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', padding: '11px 18px',
        cursor: 'pointer', transition: 'background 200ms, color 200ms',
      },
      onMouseEnter: e => { e.currentTarget.style.background = '#D4AF6A'; e.currentTarget.style.color = '#2C2C2A'; },
      onMouseLeave: e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = '#D4AF6A'; },
    }, `Speak to us as a ${p.tag.toLowerCase()} investor →`)
  );
};

// ─────────────────────────────────────────────────────────────────────
// INVEST IT
// ─────────────────────────────────────────────────────────────────────
const InvestPanel = ({ project, navigate }) => {
  const I = project.investIt;
  return React.createElement('div', { style: { background: '#2C2C2A', padding: '48px 44px 52px' } },

    // headline stats
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32, paddingBottom: 40, marginBottom: 44, borderBottom: '1px solid rgba(244,241,236,0.1)' } },
      React.createElement(PDStat, { dark: true, label: 'Est. ROI', value: I.estRoi, sub: I.annualized }),
      React.createElement(PDStat, { dark: true, label: 'Horizon', value: `${I.horizon}yr`, sub: 'Suggested hold' }),
      React.createElement(PDStat, { dark: true, label: 'Access tier', value: I.accessTier, sub: I.currency + '-denominated' }),
      React.createElement(PDStat, { dark: true, label: 'Delivery', value: I.delivery, sub: `${I.constructionMonths}-month build` })
    ),

    // completion
    React.createElement('div', { style: { marginBottom: 52 } }, React.createElement(CompletionBar, { pct: I.completionPct })),

    // payment plan
    React.createElement('div', { style: { marginBottom: 52 } }, React.createElement(PaymentPlan, { price: I.entryPrice, months: I.constructionMonths })),

    // projections + best profile
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'start' } },
      React.createElement('div', null,
        React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: '#F4F1EC', marginBottom: 24 } }, 'Projections'),
        React.createElement(ProjectionChart, { price: I.entryPrice, years: I.horizon, rate: I.appreciation || 0.07 })
      ),
      React.createElement(BestProfile, { profileId: project.bestProfileId, navigate })
    )
  );
};

// ─────────────────────────────────────────────────────────────────────
// PAGE
// ─────────────────────────────────────────────────────────────────────
const ProjectDetailPage = ({ projectName, navigate, t }) => {
  useReveal();
  const accent = (t && t.accent) || '#B8922A';
  const [mode, setMode] = React.useState((t && t.projectDefaultTab) || 'live');
  React.useEffect(() => { setMode((t && t.projectDefaultTab) || 'live'); }, [projectName]);

  const project = getProjectDetail(projectName);
  const I = project.investIt;

  const ModeBtn = ({ id, label, sub }) =>
    React.createElement('button', {
      onClick: () => setMode(id),
      'data-hover': '',
      style: {
        flex: 1, textAlign: 'left', cursor: 'pointer',
        background: mode === id ? '#2C2C2A' : 'transparent',
        border: '1px solid ' + (mode === id ? '#2C2C2A' : 'rgba(44,44,42,0.2)'),
        padding: '22px 26px', transition: 'background 250ms, border-color 250ms',
      },
    },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 7 } },
        React.createElement('span', { style: { width: 7, height: 7, background: mode === id ? '#D4AF6A' : 'rgba(44,44,42,0.3)', transform: 'rotate(45deg)' } }),
        React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 300, color: mode === id ? '#F4F1EC' : '#2C2C2A', whiteSpace: 'nowrap' } }, label)
      ),
      React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.1em', color: mode === id ? 'rgba(244,241,236,0.5)' : '#8A8A85' } }, sub)
    );

  return React.createElement('div', { style: { paddingTop: 66 } },

    // ── Hero ──────────────────────────────────────────────────
    React.createElement('section', { style: { background: '#EAE6DE', padding: '40px 0 56px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('button', {
          onClick: () => navigate('portfolio'), 'data-hover': '',
          style: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 36, display: 'inline-flex', alignItems: 'center', gap: 8 },
        }, '← Back to portfolio'),
        React.createElement('div', { className: 'pd-rise' },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 18 } },
            React.createElement(DeveloperLogo, { name: project.developer, height: 28 }),
            React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#8A8A85' } }, project.location)
          ),
          React.createElement('h1', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(36px,6vw,84px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.02, marginBottom: 14 } }, project.name),
          React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(18px,2.4vw,26px)', fontWeight: 300, fontStyle: 'italic', color: '#8A8A85', maxWidth: 620, marginBottom: 24 } }, project.tagline),
          React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
            React.createElement(PDTag, { label: I.accessTier, gold: true }),
            React.createElement(PDTag, { label: project.bestType, gold: false }),
            React.createElement(PDTag, { label: I.currency + ' priced', gold: false })
          )
        )
      )
    ),

    // ── Quick metric strip ────────────────────────────────────
    React.createElement('section', { style: { background: '#2C2C2A' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' } },
          [['Entry', project.liveIt.priceFrom], ['Est. ROI', I.estRoi], ['Delivery', I.delivery], ['Units', project.liveIt.units]].map(([l, v], i) =>
            React.createElement('div', { key: i, style: { padding: '28px 0', borderLeft: i === 0 ? 'none' : '1px solid rgba(244,241,236,0.1)', paddingLeft: i === 0 ? 0 : 32 } },
              React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.35)', marginBottom: 10 } }, l),
              React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 30, fontWeight: 300, color: '#F4F1EC' } }, v)
            )
          )
        )
      )
    ),

    // ── Gallery ───────────────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '64px 0 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { className: 'pd-rise', style: { marginBottom: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 12 } },
          React.createElement('div', null,
            React.createElement(PDEyebrow, null, 'The project'),
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,3vw,38px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.2, whiteSpace: 'nowrap' } }, 'See it.')
          ),
          React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#B8B5AE' } }, 'Drag your renders onto any frame')
        ),
        React.createElement('div', { className: 'pd-rise' }, React.createElement(PDGallery, { project }))
      )
    ),

    // ── Map ───────────────────────────────────────────────────
    React.createElement('section', { style: { background: '#2C2C2A', padding: '80px 0', marginTop: 64 } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { className: 'pd-rise', style: { marginBottom: 40 } },
          React.createElement(PDEyebrow, { dark: true }, 'Location'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,3vw,40px)', fontWeight: 300, color: '#F4F1EC', lineHeight: 1.2 } },
            'Where it ', React.createElement('em', null, 'sits.'))
        ),
        React.createElement('div', { className: 'pd-rise' }, React.createElement(ProjectMap, { project }))
      )
    ),

    // ── Dual panel : Live it / Invest in it ───────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '80px 0 96px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { className: 'pd-rise', style: { marginBottom: 32 } },
          React.createElement(PDEyebrow, null, 'Two ways to read this project'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3.5vw,48px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.12 } },
            'Are you here to ', React.createElement('em', null, 'live it'), ', or to ', React.createElement('em', null, 'invest in it?'))
        ),
        // the panel
        React.createElement('div', { className: 'pd-rise', style: { border: '1px solid rgba(44,44,42,0.16)' } },
          // toggle
          React.createElement('div', { style: { display: 'flex', gap: 2, padding: 2, background: 'rgba(44,44,42,0.04)' } },
            React.createElement(ModeBtn, { id: 'live', label: 'Live it', sub: 'Amenities · units · what is nearby' }),
            React.createElement(ModeBtn, { id: 'invest', label: 'Invest in it', sub: 'Projections · payment plan · timeline' })
          ),
          // content
          mode === 'live'
            ? React.createElement(LivePanel, { project })
            : React.createElement(InvestPanel, { project, navigate })
        )
      )
    ),

    // ── CTA ───────────────────────────────────────────────────
    React.createElement('section', { style: { background: '#2C2C2A', padding: '80px 0', borderTop: '1px solid rgba(244,241,236,0.08)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 } },
        React.createElement('div', null,
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,3vw,40px)', fontWeight: 300, color: '#F4F1EC', lineHeight: 1.2, marginBottom: 8 } },
            `Take a position in ${project.name}.`),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: 'rgba(244,241,236,0.45)', lineHeight: 1.85, maxWidth: 460 } },
            `Entry from ${project.liveIt.priceFrom} · ${I.accessTier} access · ${I.currency}-denominated. The conversation starts with you.`)
        ),
        React.createElement('button', { onClick: () => navigate('contact'), className: 'btn-primary', style: { borderColor: accent } },
          React.createElement('span', null, 'Discuss this project →'))
      )
    )
  );
};

Object.assign(window, { ProjectDetailPage });