const PROFILES = [
  {
    id: 'growth',
    tag: 'GROWTH',
    title: 'Wealth Acceleration',
    subtitle: 'Maximum upside through earliest access.',
    desc: 'Capital working harder than any European asset class. Pre-construction, off-market pricing, and developer relationships that give you access before the market is aware the opportunity exists.',
    roi: '30–45%',
    horizon: '3–5 years',
    commitment: '30% during construction',
    type: 'Off-market / Lista Cero',
  },
  {
    id: 'safety',
    tag: 'SAFETY',
    title: 'Financial Preservation',
    subtitle: 'USD-denominated growth in a stable market.',
    desc: 'Protection against European inflation. Reliable appreciation in an established district. Strong rental demand from a growing professional and tourism base. A clear exit window with liquid demand.',
    roi: '12–18%',
    horizon: '5–8 years',
    commitment: '30–40% during construction',
    type: 'Pre-sales / Established districts',
  },
  {
    id: 'lifestyle',
    tag: 'LIFESTYLE',
    title: 'Intelligent Living',
    subtitle: 'Access to a life made possible by smart timing.',
    desc: 'Not every investor buys for the spreadsheet alone. Beachfront access. Warm climate. A base in a different world — structured so that the financial return makes the personal return possible.',
    roi: '8–14%',
    horizon: 'Long-term',
    commitment: '25–35% during construction',
    type: 'Lifestyle markets / Beachfront',
  },
];

const ProfileCard = ({ profile, selected, onSelect }) => {
  const [hov, setHov] = React.useState(false);
  const active = selected || hov;

  return React.createElement('div', {
    onClick: () => onSelect(profile.id === selected ? null : profile.id),
    onMouseEnter: () => setHov(true),
    onMouseLeave: () => setHov(false),
    'data-hover': '',
    style: {
      position: 'relative', padding: '36px 28px 32px', cursor: 'pointer', overflow: 'hidden',
      border: `1px solid ${selected ? 'rgba(44,44,42,0.3)' : 'rgba(44,44,42,0.16)'}`,
      background: active ? 'rgba(44,44,42,0.03)' : 'transparent',
      transition: 'border-color 300ms, background 300ms',
    },
  },
    // Tag
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 } },
      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' },
      }, profile.tag)
    ),
    // Title
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 26, fontWeight: 300, color: '#2C2C2A', lineHeight: 1.2, marginBottom: 6 } }, profile.title),
    React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 16, fontStyle: 'italic', color: '#8A8A85', marginBottom: 18 } }, profile.subtitle),
    // Desc
    React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, marginBottom: 28 } }, profile.desc),
    // Metrics
    React.createElement('div', { style: { borderTop: '1px solid rgba(44,44,42,0.1)', paddingTop: 20 } },
      [['Est. ROI', profile.roi], ['Horizon', profile.horizon], ['Capital', profile.commitment], ['Type', profile.type]].map(([l, v]) =>
        React.createElement('div', { key: l, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '7px 0', borderBottom: '1px solid rgba(44,44,42,0.06)' } },
          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: 15, fontWeight: 300, color: '#2C2C2A' } }, v)
        )
      )
    ),
    // Selected indicator
    selected && React.createElement('div', {
      style: { position: 'absolute', top: 16, right: 16, width: 8, height: 8, borderRadius: '50%', background: '#B8922A' },
    }),
    // Gold bottom bar
    React.createElement('div', {
      style: {
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: '#B8922A',
        transform: active ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left', transition: 'transform 320ms ease',
      },
    })
  );
};

const InvestmentPage = ({ navigate, selectedProfile, setSelectedProfile }) => {
  useReveal();

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

    // ── 4.1 Introduction ──────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '100px 0 80px' } },
      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 } }, 'Investment Framework'),
          React.createElement('h1', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(28px,4vw,60px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.1 } },
            'What it really means', React.createElement('br'), React.createElement('em', null, 'to invest in real estate.')
          )
        ),
        React.createElement('div', { 'data-reveal': '', 'data-delay': '2', style: { paddingTop: 8 } },
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.6)', lineHeight: 1.9 } },
            'Most people think investing in real estate requires either a lot of money or a passion for buildings. Neither is true. It requires understanding what you want from it — and having a partner with the intelligence to structure the right entry. That\'s the entire conversation.'
          )
        )
      )
    ),

    // ── 4.2 Deep Content Block ────────────────────────────────
    React.createElement('section', { style: { padding: '0 0 80px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', {
          'data-reveal': '',
          style: { background: '#EAE6DE', padding: '48px 44px', border: '1px solid rgba(44,44,42,0.1)' },
        },
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(20px,2.5vw,32px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.25, marginBottom: 28 } },
            "It's not about the property.", React.createElement('br'), React.createElement('em', null, "It's about the position.")
          ),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 } },
            [
              'Real estate investment is not blind ownership. It is a structured position in an asset — entered at a specific price, held for a defined period, exited at a calculated moment. The property is the vehicle. The intelligence is the investment.',
              'The difference between a buyer and an investor is clarity of intent and discipline of the exit plan. A buyer hopes the market moves in their favour. An investor structures an entry that makes the outcome probable regardless.',
              'This is not reserved for those who already have wealth. It is accessible to anyone who knows what they want from capital — and is willing to be specific about it. Our role is to be specific with you.',
            ].map((p, i) =>
              React.createElement('p', {
                key: i, style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: 'rgba(44,44,42,0.65)', lineHeight: 1.95, gridColumn: i === 2 ? 'span 2' : 'auto' },
              }, p)
            )
          )
        )
      )
    ),

    // ── 4.3 Profile Selector ──────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 80px' } },
      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 } }, 'Investor Profiles'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15, marginBottom: 12 } },
            'Who are you as an investor?', React.createElement('br'), React.createElement('em', null, 'There is no wrong answer.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: '#8A8A85', lineHeight: 1.9, maxWidth: 480 } },
            'Select the profile that most closely describes your objective. It carries through to the contact form and helps us prepare a relevant response.'
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2 } },
          PROFILES.map((p, i) =>
            React.createElement('div', { key: p.id, 'data-reveal': '', 'data-delay': String(i + 1) },
              React.createElement(ProfileCard, {
                profile: p,
                selected: selectedProfile === p.id,
                onSelect: id => {
                  setSelectedProfile(id);
                },
              })
            )
          )
        ),
        selectedProfile && React.createElement('div', {
          style: { marginTop: 24, textAlign: 'center', fontFamily: "'DM Mono',monospace", fontSize: 9, color: '#B8922A', letterSpacing: '0.12em' },
        }, `Profile selected: ${PROFILES.find(p => p.id === selectedProfile)?.title || ''} — this will carry through to your contact form.`)
      )
    ),

    // ── 4.3b Investor Quiz ────────────────────────────────────
    React.createElement(InvestorQuiz, { navigate, setSelectedProfile }),

    // ── 4.4 Return Calculator ─────────────────────────────────
    React.createElement('section', { style: { 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: 32 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, 'Indicative Returns'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
            'Model your position.'
          )
        ),
        React.createElement('div', { 'data-reveal': '' },
          React.createElement(Calculator, {
            selectedProfile: selectedProfile
              ? PROFILES.find(p => p.id === selectedProfile)?.title
              : null,
          })
        ),
        React.createElement('div', { 'data-reveal': '', style: { marginTop: 48, textAlign: 'center' } },
          React.createElement('button', { className: 'btn-primary', onClick: () => navigate('contact') },
            React.createElement('span', null, 'Begin the conversation →')
          )
        )
      )
    )
  );
};

Object.assign(window, { InvestmentPage, PROFILES });