const PROJECTS = [
  {
    id: 'sfb',
    name: 'San Francisco Bay',
    location: 'Panama City — Pacific Coast',
    tagline: 'A thesis about where Panama City is growing.',
    tags: [{ label: 'LISTA CERO', gold: true }, { label: 'OFF-MARKET', gold: true }, { label: 'GROWTH' }],
    metrics: ['From $185K', '~32% Est. ROI', 'Q2 2027 Delivery', 'SFERA'],
    metricLabels: ['Entry', 'ROI', 'Delivery', 'Developer'],
    story: `San Francisco Bay is not just a property. It is a thesis about where Panama City is growing — westward, along the Pacific coast, toward the neighbourhoods that will define the city's next decade. Developed by SFERA, one of Panama's most consistent delivery track records, this project enters at Lista Cero — before the first public announcement, before pricing adjusts to market demand.\n\nThe unit mix is designed for the investor: 1 and 2-bedroom configurations with short-term rental yields supported by Panama City's growing tourism and business travel infrastructure.\n\nThis is not a bet on Panama. It is a position in a specific micro-market, at a specific moment, with a specific developer, structured for a specific outcome.`,
    data: [
      { label: 'Location', value: 'Pacific Coast, Panama City' },
      { label: 'Developer', value: 'SFERA' },
      { label: 'Access Tier', value: 'Lista Cero', highlight: true },
      { label: 'Entry Price', value: '$185,000' },
      { label: 'Unit Types', value: '1BR, 2BR' },
      { label: 'Delivery', value: 'Q2 2027' },
      { label: 'Est. ROI', value: '~32%', highlight: true },
      { label: 'Annualised', value: '~12% p.a.' },
      { label: 'Capital Commitment', value: '30% during construction' },
      { label: 'Investment Type', value: 'Growth' },
    ],
  },
  {
    id: 'bioma',
    name: 'BIOMA',
    location: 'Panama City — Costa del Este',
    tagline: 'The safety-first investment profile.',
    tags: [{ label: 'SAFETY' }, { label: 'CEDEIRA' }],
    metrics: ['From $220K', '~28% Est. ROI', '2026 Delivery', 'CEDEIRA'],
    metricLabels: ['Entry', 'ROI', 'Delivery', 'Developer'],
    story: `Costa del Este is Panama City's most established premium residential and commercial district — the financial heartland of the republic. BIOMA is positioned at its core, developed by CEDEIRA, with a portfolio of completed deliveries and no history of delays.\n\nThis project represents the safety-first investment profile: reliable appreciation, strong rental demand, established infrastructure. The investor here wants USD-denominated exposure to a fundamentally sound market, with consistent income and a clear 6-year exit window.`,
    data: [
      { label: 'Location', value: 'Costa del Este, Panama City' },
      { label: 'Developer', value: 'CEDEIRA' },
      { label: 'Entry Price', value: '$220,000' },
      { label: 'Unit Types', value: 'Studio, 1BR, 2BR' },
      { label: 'Delivery', value: '2026' },
      { label: 'Est. ROI', value: '~28% total', highlight: true },
      { label: 'Investment Type', value: 'Financial Safety' },
    ],
  },
  {
    id: 'mova',
    name: 'MOVA',
    location: 'Punta Cana — Dominican Republic',
    tagline: 'Access to a life made possible through smart timing.',
    tags: [{ label: 'LIFESTYLE' }, { label: 'O57' }],
    metrics: ['From $145K', 'Beachfront', 'Punta Cana', 'O57'],
    metricLabels: ['Entry', 'Position', 'Market', 'Developer'],
    story: `Not every investor buys a property for the spreadsheet. Some buy it for what it represents — access to a life that, through smart timing and market structure, becomes entirely possible at a price point the open market would not normally allow.\n\nMOVA in Punta Cana is that opportunity. Beachfront positioning. Developer O57's proven lifestyle-segment track record. Entry at a price point that luxury-market comparables in Europe don't approach. The return is real — 8–14% ROI adjusted for personal use patterns. But the return is not only financial.`,
    data: [
      { label: 'Location', value: 'Punta Cana, Dominican Republic' },
      { label: 'Developer', value: 'O57' },
      { label: 'Positioning', value: 'Beachfront', highlight: true },
      { label: 'Entry Price', value: '$145,000' },
      { label: 'Unit Types', value: 'Studio, 1BR' },
      { label: 'Est. ROI', value: '8–14% usage-adjusted' },
      { label: 'Investment Type', value: 'Intelligent Living', highlight: true },
    ],
  },
  {
    id: 'dovle',
    name: 'Dovle',
    location: 'Panama City — Financial District',
    tagline: 'Yield-driven. Urban. Off-market entry.',
    tags: [{ label: 'OFF-MARKET', gold: true }, { label: 'GROWTH' }],
    metrics: ['From $210K', 'Corporate Yield', 'Panama City', 'SFERA'],
    metricLabels: ['Entry', 'Profile', 'Market', 'Developer'],
    story: `Dovle is positioned in the heart of Panama City's financial district — the highest-demand rental zone in the country, driven by corporate tenants, diplomatic staff, and the regional headquarters of international firms.\n\nSFERA brings the same delivery reliability to a fundamentally different thesis: urban, professional, yield-driven. The investor here wants maximum rental coverage, minimum vacancy, and a liquid exit in a market where demand is structural, not cyclical. Off-market access means entry below the pricing that will be set at public launch.`,
    data: [
      { label: 'Location', value: 'Financial District, Panama City' },
      { label: 'Developer', value: 'SFERA' },
      { label: 'Access Tier', value: 'Off-market', highlight: true },
      { label: 'Entry Price', value: '$210,000' },
      { label: 'Unit Types', value: 'Studio, 1BR' },
      { label: 'Investment Type', value: 'Growth / Safety hybrid' },
    ],
  },
];

const Modal = ({ project, onClose, onEnquire }) => {
  React.useEffect(() => {
    const esc = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', esc);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', esc);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  if (!project) return null;

  return React.createElement('div', {
    style: {
      position: 'fixed', inset: 0, zIndex: 2000,
      background: 'rgba(244,241,236,0.97)',
      overflowY: 'auto',
      animation: 'fadeIn 350ms ease',
    },
    onClick: e => { if (e.target === e.currentTarget) onClose(); },
  },
    React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '48px 52px 80px' } },

      // Close
      React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 40 } },
        React.createElement('button', {
          onClick: onClose,
          style: {
            background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: "'DM Mono',monospace", fontSize: 9, color: '#8A8A85',
            letterSpacing: '0.16em', textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 8,
          },
        }, 'CLOSE ×')
      ),

      // Header
      React.createElement('div', { style: { marginBottom: 52, borderBottom: '1px solid rgba(44,44,42,0.12)', paddingBottom: 40 } },
        React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, project.location),
        React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(32px,5vw,64px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.1, marginBottom: 12 } }, project.name),
        React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, fontStyle: 'italic', color: '#8A8A85' } }, project.tagline),
        React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 20 } },
          project.tags.map((t, i) =>
            React.createElement('span', {
              key: i,
              style: {
                display: 'inline-block', padding: '3px 8px',
                fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.12em', textTransform: 'uppercase',
                border: t.gold ? '1px solid #B8922A' : '1px solid rgba(44,44,42,0.22)',
                color: t.gold ? '#B8922A' : '#8A8A85',
              },
            }, t.label)
          )
        )
      ),

      // 2-col body
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72 } },

        // Story
        React.createElement('div', null,
          project.story.split('\n\n').map((p, i) =>
            React.createElement('p', {
              key: i,
              style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.7)', lineHeight: 1.9, marginBottom: 24 },
            }, p)
          )
        ),

        // Data table + actions
        React.createElement('div', null,
          project.data.map((row, i) =>
            React.createElement('div', {
              key: i,
              style: {
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                padding: '12px 14px',
                borderBottom: '1px solid rgba(44,44,42,0.1)',
                background: row.highlight ? '#EAE6DE' : 'transparent',
              },
            },
              React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#8A8A85' } }, row.label),
              React.createElement('span', { style: { fontFamily: row.highlight ? "'Cormorant Garamond',serif" : "'DM Mono',monospace", fontSize: row.highlight ? 17 : 10, fontWeight: 300, color: '#2C2C2A' } }, row.value)
            )
          ),
          React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 32 } },
            React.createElement('button', {
              onClick: () => onEnquire(project),
              className: 'btn-primary',
            }, React.createElement('span', null, 'Enquire about this project')),
            React.createElement('button', {
              onClick: onClose,
              className: 'btn-ghost',
              style: { marginLeft: 4 },
            }, 'Close')
          )
        )
      )
    )
  );
};

Object.assign(window, { PROJECTS, Modal });