const FormField = ({ label, type = 'text', textarea, value, onChange }) => {
  const [focused, setFocused] = React.useState(false);
  const active = focused || value.length > 0;

  const baseInput = {
    width: '100%', background: 'none', border: 'none', outline: 'none',
    fontFamily: "'DM Mono',monospace", fontSize: 11, color: '#2C2C2A',
    padding: '8px 0', lineHeight: 1.6,
  };

  return React.createElement('div', { style: { position: 'relative', paddingTop: 22, marginBottom: 32 } },
    React.createElement('label', {
      style: {
        position: 'absolute',
        top: active ? 0 : 26,
        left: 0,
        fontFamily: "'DM Mono',monospace",
        fontSize: active ? 7 : 9,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: active ? (focused ? '#B8922A' : '#8A8A85') : '#B8B5AE',
        transition: 'top 200ms ease, font-size 200ms ease, color 200ms ease',
        pointerEvents: 'none',
      },
    }, label),

    textarea
      ? React.createElement('textarea', {
          value, onChange, rows: 3,
          onFocus: () => setFocused(true),
          onBlur:  () => setFocused(false),
          style: { ...baseInput, resize: 'none', borderBottom: '1px solid rgba(44,44,42,0.22)' },
        })
      : React.createElement('input', {
          type, value, onChange,
          onFocus: () => setFocused(true),
          onBlur:  () => setFocused(false),
          style: { ...baseInput, borderBottom: '1px solid rgba(44,44,42,0.22)' },
        }),

    // Animated gold line
    React.createElement('div', {
      style: {
        position: 'absolute', bottom: 0, left: 0, height: 1,
        width: focused ? '100%' : '0%',
        background: '#B8922A',
        transition: 'width 280ms ease',
      },
    })
  );
};

const CONTACT_DETAILS = [
  { label: 'Headquarters',     value: 'Panama City, Republic of Panama' },
  { label: 'European Contact', value: 'Dortmund, Germany' },
  { label: 'Markets',          value: 'Panama · Dominican Republic' },
  { label: 'Languages',        value: 'English · Deutsch · Nederlands · Español' },
  { label: 'Response time',    value: 'Within 24 business hours' },
];

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

  const [form, setForm] = React.useState({ name: '', email: '', country: '', range: '', objective: '' });
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k) => (e) => setForm(prev => ({ ...prev, [k]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSubmitted(true);
  };

  const profileLabel = selectedProfile
    ? (PROFILES.find(p => p.id === selectedProfile)?.title || selectedProfile)
    : null;

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

    // ── Introduction ──────────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '100px 0 80px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { maxWidth: 680 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'Contact'),
          React.createElement('h1', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(32px,5vw,72px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.1, marginBottom: 20 } },
            'Let\'s begin', React.createElement('br'), React.createElement('em', null, 'the right conversation.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9 } },
            'Not a sales call. A qualified conversation between an investor and an intelligence firm. Tell us what you\'re trying to achieve — and we\'ll tell you if and how we can help.'
          )
        )
      )
    ),

    // ── 2-column body ─────────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 120px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' } },

        // ── Left: Contact details ─────────────────────────────
        React.createElement('div', { 'data-reveal': '' },
          React.createElement('div', { style: { marginBottom: 48 } },
            CONTACT_DETAILS.map((d, i) =>
              React.createElement('div', { key: i, style: { padding: '18px 0', borderBottom: '1px solid rgba(44,44,42,0.1)', display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16 } },
                React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#B8B5AE', paddingTop: 2 } }, d.label),
                React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: '#2C2C2A', lineHeight: 1.6 } }, d.value)
              )
            )
          ),

          // Social links
          React.createElement('div', { style: { display: 'flex', gap: 20, marginBottom: 56 } },
            ['LinkedIn', 'Instagram', 'WhatsApp'].map(s =>
              React.createElement('a', {
                key: s, href: '#',
                style: {
                  fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.12em',
                  textTransform: 'uppercase', color: '#8A8A85', textDecoration: 'none',
                  borderBottom: '1px solid transparent',
                  transition: 'border-color 200ms, color 200ms',
                  paddingBottom: 2,
                },
                onMouseEnter: e => { e.target.style.borderColor = '#B8922A'; e.target.style.color = '#B8922A'; },
                onMouseLeave: e => { e.target.style.borderColor = 'transparent'; e.target.style.color = '#8A8A85'; },
              }, s)
            )
          ),

          // Staircase sketch
          React.createElement('div', { style: { width: 160, opacity: 0.55 } },
            React.createElement(StaircaseSketch)
          )
        ),

        // ── Right: Form ───────────────────────────────────────
        React.createElement('div', { 'data-reveal': '', 'data-delay': '2' },

          // Profile badge
          React.createElement('div', {
            style: {
              background: '#EAE6DE', border: '1px solid rgba(44,44,42,0.14)',
              padding: '14px 18px', marginBottom: 40,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            },
          },
            React.createElement('div', null,
              React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#B8B5AE', marginBottom: 4 } }, 'Your Investor Profile'),
              React.createElement('div', {
                style: {
                  fontFamily: "'DM Mono',monospace", fontSize: 10,
                  color: profileLabel ? '#2C2C2A' : '#B8B5AE',
                  cursor: profileLabel ? 'default' : 'pointer',
                },
                onClick: !profileLabel ? () => navigate('investment') : undefined,
              },
                profileLabel
                  ? profileLabel
                  : React.createElement('span', { style: { textDecoration: 'underline', textDecorationColor: '#B8B5AE' } }, 'Not yet selected — select on Investment page')
              )
            ),
            profileLabel && React.createElement('div', { style: { width: 6, height: 6, borderRadius: '50%', background: '#B8922A', flexShrink: 0 } })
          ),

          // Success state
          submitted
            ? React.createElement('div', {
                style: { padding: '48px 0', textAlign: 'center', animation: 'fadeIn 400ms ease' },
              },
                React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'Received'),
                React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 36, fontWeight: 300, color: '#2C2C2A', marginBottom: 16 } }, 'Your inquiry is with us.'),
                React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, maxWidth: 360, margin: '0 auto' } },
                  "We'll reach out within 24 business hours with something relevant — not a template."
                )
              )

            // Form
            : React.createElement('form', { onSubmit: handleSubmit },
                React.createElement(FormField, { label: 'Full Name', value: form.name, onChange: set('name') }),
                React.createElement(FormField, { label: 'Email Address', type: 'email', value: form.email, onChange: set('email') }),
                React.createElement(FormField, { label: 'Country of Residence', value: form.country, onChange: set('country') }),
                React.createElement(FormField, { label: 'Approximate Investment Range', value: form.range, onChange: set('range') }),
                React.createElement(FormField, { label: 'What are you looking to achieve?', textarea: true, value: form.objective, onChange: set('objective') }),

                React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', marginTop: 8 } },
                  React.createElement('button', { type: 'submit', className: 'btn-primary' },
                    React.createElement('span', null, 'Begin the Conversation →')
                  ),
                  React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, color: '#B8B5AE', lineHeight: 2, letterSpacing: '0.04em' } },
                    'No cold calls.', React.createElement('br'),
                    'No unsolicited follow-ups.', React.createElement('br'),
                    'One qualified response.'
                  )
                )
              )
        )
      )
    )
  );
};

Object.assign(window, { ContactPage, FormField });