const useReveal = () => {
  React.useEffect(() => {
    const run = () => {
      const els = document.querySelectorAll('[data-reveal]');
      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            const delay = parseInt(e.target.dataset.delay || 0) * 80;
            setTimeout(() => e.target.setAttribute('data-revealed', ''), delay);
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.04, rootMargin: '0px 0px -20px 0px' });
      els.forEach(el => obs.observe(el));
      return obs;
    };
    const timer = setTimeout(() => { run(); }, 60);
    return () => clearTimeout(timer);
  }, []);
};

// ── Blinking cursor ────────────────────────────────────────────────
const BlinkCursor = () => {
  const [on, setOn] = React.useState(true);
  React.useEffect(() => {
    const t = setInterval(() => setOn(v => !v), 550);
    return () => clearInterval(t);
  }, []);
  return React.createElement('span', {
    style: { display: 'inline-block', width: 2, height: '0.85em', background: on ? '#B8922A' : 'transparent', marginLeft: 3, verticalAlign: 'middle', transition: 'background 80ms' },
  });
};

// ── KPI Block ─────────────────────────────────────────────────────
const KPIBlock = ({ number, label }) =>
  React.createElement('div', {
    style: { padding: '24px 22px', border: '1px solid rgba(44,44,42,0.14)', background: '#EAE6DE' },
  },
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 38, fontWeight: 300, color: '#2C2C2A', lineHeight: 1 } }, number),
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8A8A85', marginTop: 8 } }, label)
  );

// ── Investment card (summary) ──────────────────────────────────────
const SummaryCard = ({ tag, title, desc, roi, horizon }) => {
  const [hov, setHov] = React.useState(false);
  return React.createElement('div', {
    onMouseEnter: () => setHov(true),
    onMouseLeave: () => setHov(false),
    style: {
      position: 'relative', padding: '36px 28px 32px',
      border: `1px solid ${hov ? 'rgba(44,44,42,0.25)' : 'rgba(44,44,42,0.16)'}`,
      background: hov ? 'rgba(44,44,42,0.03)' : 'transparent',
      transition: 'border-color 300ms, background 300ms', overflow: 'hidden',
    },
  },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 } },
      React.createElement('div', { style: { width: 12, height: 1, background: '#B8922A' } }),
      React.createElement('span', {
        style: { fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B8922A', border: '1px solid #B8922A', padding: '2px 7px' },
      }, tag)
    ),
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 22, fontWeight: 300, color: '#2C2C2A', marginBottom: 14, lineHeight: 1.3 } }, title),
    React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.85, marginBottom: 24 } }, desc),
    React.createElement('div', { style: { borderTop: '1px solid rgba(44,44,42,0.1)', paddingTop: 18 } },
      [['Est. ROI', roi], ['Horizon', horizon]].map(([l, v]) =>
        React.createElement('div', {
          key: l,
          style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '6px 0' },
        },
          React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#B8B5AE' } }, l),
          React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 16, fontWeight: 300, color: '#2C2C2A' } }, v)
        )
      )
    ),
    // Gold bottom bar
    React.createElement('div', {
      style: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: '#B8922A', transform: hov ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left', transition: 'transform 320ms ease' },
    })
  );
};

// ── Moments track ─────────────────────────────────────────────────
const MomentRow = ({ num, title, desc, badge, delay }) => {
  const [hov, setHov] = React.useState(false);
  return React.createElement('div', {
    'data-reveal': '', 'data-delay': delay,
    style: { display: 'flex', gap: 0, borderTop: '1px solid rgba(44,44,42,0.1)', paddingTop: 22, paddingBottom: 22 },
  },
    // Left: number + dot track
    React.createElement('div', { style: { width: 32, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 4 } },
      React.createElement('div', {
        onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
        style: {
          width: 8, height: 8, borderRadius: '50%',
          border: '1px solid #B8B5AE', background: hov ? '#B8922A' : '#F4F1EC',
          boxShadow: hov ? '0 0 0 4px rgba(184,146,42,0.15)' : 'none',
          transition: 'background 200ms, box-shadow 200ms', flexShrink: 0,
        },
      })
    ),
    // Label
    React.createElement('div', { style: { width: 140, flexShrink: 0, paddingRight: 24, paddingTop: 2 } },
      React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#B8B5AE' } }, `0${num}`)
    ),
    // Content
    React.createElement('div', { style: { flex: 1 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 } },
        React.createElement('span', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 19, fontWeight: 300, color: '#2C2C2A' } }, title),
        badge && React.createElement('span', {
          style: {
            fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: '2px 7px', border: badge.gold ? '1px solid #B8922A' : '1px solid rgba(44,44,42,0.22)',
            color: badge.gold ? '#B8922A' : '#8A8A85',
          },
        }, badge.label)
      ),
      React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.85 } }, desc)
    )
  );
};

// ── Home page ─────────────────────────────────────────────────────
const HomePage = ({ navigate }) => {
  useReveal();

  const MOMENTS = [
    { title: 'Land Selection', desc: 'Before a developer decides, we know which parcel is being evaluated.', badge: { label: 'PRE-MARKET', gold: true } },
    { title: 'Developer Qualification', desc: 'Financial health, delivery history, bank backing — before we recommend anything.' },
    { title: 'Lista Cero — Off-Market', desc: 'Before any public announcement. Our clients access pricing the open market never sees.', badge: { label: 'EXCLUSIVE ACCESS', gold: true } },
    { title: 'Pre-Sales Launch', desc: 'Official launch. Prices still below projection.', badge: { label: 'STANDARD ACCESS' } },
    { title: 'Construction Monitoring', desc: 'We track progress and verify milestones. No surprises.' },
    { title: 'Pre-Delivery Transfers', desc: 'Selling your contract before delivery at market uplift.', badge: { label: 'SECONDARY MARKET', gold: true } },
    { title: 'Delivery & Title Registration', desc: 'Legal transfer, Registro Publico. The paperwork is complex. We make it invisible.' },
    { title: 'Post-Delivery Strategy', desc: 'Rent, hold, or sell. We model all three and execute whichever maximises your outcome.', badge: { label: 'ASSET MANAGEMENT' } },
  ];

  return React.createElement('div', null,

    // ── 1.1 Hero ──────────────────────────────────────────────
    React.createElement('section', {
      style: {
        minHeight: 'calc(100vh - 66px)', marginTop: 66,
        background: '#F4F1EC', position: 'relative', overflow: 'hidden',
        display: 'flex', alignItems: 'center',
      },
    },
      // SVG sketch — right side
      React.createElement('div', {
        'data-reveal': '',
        style: { position: 'absolute', right: 0, top: 0, bottom: 0, width: '48%', opacity: 0.8 },
      },
        React.createElement(HeroBuilding)
      ),

      // Text content
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '80px 52px', position: 'relative', zIndex: 1, width: '100%' } },
        React.createElement('div', { style: { maxWidth: '52%' } },
          React.createElement('div', {
            'data-reveal': '', 'data-delay': '1',
            style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 32 },
          }, 'Real Estate Intelligence · Panama · Colombia · Dominican Republic'),

          React.createElement('h1', {
            'data-reveal': '', 'data-delay': '2',
            style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(44px,7vw,96px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.05, margin: 0 },
          },
            'What does', React.createElement('br'),
            React.createElement('em', { style: { fontStyle: 'italic', color: '#B8B5AE' } }, 'this property'),
            React.createElement('br'),
            'mean to you?',
            React.createElement(BlinkCursor)
          ),

          // Rule
          React.createElement('div', {
            'data-reveal': '', 'data-delay': '4',
            style: { height: 1, background: 'rgba(44,44,42,0.14)', margin: '40px 0 32px' },
          }),

          React.createElement('div', {
            'data-reveal': '', 'data-delay': '5',
            style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, flexWrap: 'wrap' },
          },
            React.createElement('p', {
              style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.95, flex: '0 0 auto', maxWidth: 320 },
            },
              'We are more friends of mathematics than of architecture.', React.createElement('br'),
              'Intelligence before access. Access before the market.', React.createElement('br'),
              '$200M+ in transactions and 800+ deals closed across 10+ years.'
            ),
            React.createElement('div', { style: { display: 'flex', gap: 12, flexShrink: 0 } },
              React.createElement('button', { className: 'btn-ghost', onClick: () => navigate('about') },
                React.createElement('span', null, 'About us')
              ),
              React.createElement('button', { className: 'btn-primary', onClick: () => navigate('portfolio') },
                React.createElement('span', null, 'See portfolio →')
              )
            )
          )
        )
      ),

      // Scroll hint
      React.createElement('div', {
        'data-reveal': '', 'data-delay': '7',
        style: { position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', textAlign: 'center', zIndex: 2 },
      },
        React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B8B5AE', marginBottom: 10 } }, 'Scroll'),
        React.createElement('div', { className: 'scroll-line' })
      )
    ),


    // ── 1.1b Allies carousel ─────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '34px 0 46px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24, marginBottom: 22, flexWrap: 'wrap' } },
          React.createElement('div', null,
            React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 10 } }, 'Allies & affiliations'),
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.8vw,36px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
              'The network behind ', React.createElement('em', null, 'our access.'))
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: '#8A8A85', lineHeight: 1.8, maxWidth: 420 } },
            'Developers, institutional allies and industry guilds that help us read the market before the public launch.')
        ),
        React.createElement('div', { 'data-reveal': '', 'data-delay': '1' }, React.createElement(LogoMarquee))
      )
    ),

    // ── 1.2 Who We Are ────────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '100px 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' } },
        React.createElement('div', { 'data-reveal': '' },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'About the firm'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(28px,3.5vw,48px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15, marginBottom: 28 } },
            'Not a broker.', React.createElement('br'), React.createElement('em', null, 'An intelligence firm.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, marginBottom: 14 } },
            'Over a decade of presence in the market has generated something no marketing budget can replicate: a data layer. Transaction prices, permit timelines, developer pipelines — built over 10+ years in the Registro Publico.'
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, marginBottom: 32 } },
            'The best entry point is before the market knows the opportunity exists. That is Lista Cero — and it is the foundation of everything we do.'
          ),
          React.createElement('button', { className: 'btn-primary', onClick: () => navigate('about') },
            React.createElement('span', null, 'Learn about us →')
          )
        ),
        React.createElement('div', {
          'data-reveal': '', 'data-delay': '2',
          style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 },
        },
          React.createElement(KPIBlock, { number: '$200M+', label: 'Transaction volume' }),
          React.createElement(KPIBlock, { number: '10+', label: 'Years operating' }),
          React.createElement(KPIBlock, { number: '8', label: 'Cycle moments mapped' }),
          React.createElement(KPIBlock, { number: '3', label: 'Access tiers' })
        )
      )
    ),

    // ── 1.3 How We Work ───────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 100px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', { 'data-reveal': '', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 60, alignItems: 'start' } },
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
            'Intelligence before', React.createElement('br'), 'access. Access before', React.createElement('br'), React.createElement('em', null, 'the market.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, paddingTop: 8 } },
            'Every project passes through 8 moments in the real estate cycle. Each moment represents a different level of access, risk, and potential return. We position our investors at the earliest possible entry point — systematically, not opportunistically.'
          )
        ),
        React.createElement('div', { style: { position: 'relative', paddingLeft: 32, borderLeft: '1px solid rgba(44,44,42,0.22)' } },
          MOMENTS.map((m, i) =>
            React.createElement(MomentRow, { key: i, num: i + 1, title: m.title, desc: m.desc, badge: m.badge, delay: (i % 3) + 1 })
          )
        )
      )
    ),

    // ── 1.4 Investment Types ───────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 100px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 48 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, 'Investment Profiles'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
            'One market.', React.createElement('br'), React.createElement('em', null, 'Three investment profiles.')
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 } },
          React.createElement('div', { 'data-reveal': '', 'data-delay': '1' },
            React.createElement(SummaryCard, { tag: 'GROWTH', title: 'Wealth Acceleration', desc: 'Capital working harder than any European asset class. Pre-construction, off-market pricing, maximum upside.', roi: '30–45%', horizon: '3–5 years' })
          ),
          React.createElement('div', { 'data-reveal': '', 'data-delay': '2' },
            React.createElement(SummaryCard, { tag: 'SAFETY', title: 'Financial Preservation', desc: 'USD-denominated growth, rental yield, protection against European inflation.', roi: '12–18%', horizon: '5–8 years' })
          ),
          React.createElement('div', { 'data-reveal': '', 'data-delay': '3' },
            React.createElement(SummaryCard, { tag: 'LIFESTYLE', title: 'Intelligent Living', desc: 'Access to a way of life — beach, city, warmth — made possible through smart timing.', roi: '8–14%', horizon: 'Long-term' })
          )
        ),
        React.createElement('div', { 'data-reveal': '', style: { textAlign: 'center', marginTop: 48 } },
          React.createElement('button', { className: 'btn-primary', onClick: () => navigate('investment') },
            React.createElement('span', null, 'Explore investment in depth →')
          )
        )
      )
    ),

    // ── 1.5 Why This Geography (dark) ─────────────────────────
    React.createElement('section', { style: { background: '#2C2C2A', padding: '100px 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 60 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.35)', marginBottom: 16 } }, 'Market Intelligence'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(28px,3.5vw,52px)', fontWeight: 300, color: '#F4F1EC', lineHeight: 1.15, marginBottom: 12 } },
            'Why Panama — ', React.createElement('em', null, 'and why now.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: 'rgba(244,241,236,0.42)', lineHeight: 1.9, maxWidth: 480 } },
            'We don\'t choose geography for aesthetics. We choose it because the mathematics works — and continues to work when European markets do not.'
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' } },
          // Geo stats
          React.createElement('div', { 'data-reveal': '' },
            [
              { val: '$ USD', title: 'Currency', desc: 'No exchange rate risk. Returns in the world\'s reserve currency.' },
              { val: '0%', title: 'Foreign income tax', desc: 'Income earned outside Panama is not taxed in Panama.' },
              { val: '7%', title: 'Annual appreciation', desc: 'While European markets stagnate, Panama\'s curated micro-markets hold steady.' },
              { val: '11h', title: 'From Frankfurt', desc: 'Direct flights from Amsterdam, Frankfurt, and Madrid.' },
            ].map((s, i) =>
              React.createElement('div', { key: i, style: { padding: '28px 0', borderBottom: '1px solid rgba(244,241,236,0.08)' } },
                React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 38, fontWeight: 300, color: '#D4AF6A', lineHeight: 1, marginBottom: 6 } }, s.val),
                React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.78)', marginBottom: 8 } }, s.title),
                React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(244,241,236,0.42)', lineHeight: 1.85 } }, s.desc)
              )
            )
          ),
          // Map + quote
          React.createElement('div', { 'data-reveal': '', 'data-delay': '2' },
            React.createElement('div', { style: { marginBottom: 32, height: 240 } },
              React.createElement(PanamaMap)
            ),
            React.createElement('div', {
              style: { border: '1px solid rgba(244,241,236,0.15)', padding: '28px 24px', background: 'rgba(244,241,236,0.03)' },
            },
              React.createElement('p', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 20, fontWeight: 300, fontStyle: 'italic', color: 'rgba(244,241,236,0.75)', lineHeight: 1.5 } },
                '"Panama is not an emerging market.', React.createElement('br'), 'It is an underpriced one."'
              )
            )
          )
        )
      )
    )
  );
};

Object.assign(window, { HomePage, useReveal });