const INTERESSES = [
  'Spouwmuurisolatie', 'Dakisolatie', 'Gevelisolatie', 'Bodemisolatie', 'Vloerisolatie',
  'Airconditioning', 'Gevelreiniging', 'Impregneren', 'Dakkapel', 'Dakraam', 'Afbouw en renovatie', 'Anders',
];

function InteresseChip(props) {
  const { label, active, onToggle } = props;
  const [hover, setHover] = React.useState(false);
  return React.createElement('button', {
    type: 'button', onClick: onToggle, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: {
      display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
      padding: '9px 15px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
      background: active ? 'var(--brand-primary)' : '#fff',
      color: active ? '#fff' : 'var(--ink-900)',
      border: '1px solid ' + (active ? 'var(--brand-primary)' : (hover ? 'var(--brand-primary)' : 'var(--border-default)')),
      transition: 'all var(--dur-fast) var(--ease-standard)',
    },
  }, React.createElement('span', { style: { fontWeight: 700 } }, active ? '✓' : '+'), React.createElement('span', null, label));
}

function ContactRow(props) {
  const { icon, label, value, href } = props;
  const [hover, setHover] = React.useState(false);
  const inner = React.createElement(React.Fragment, null,
    React.createElement('div', { style: { width: 40, height: 40, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
      React.createElement('img', { src: 'https://unpkg.com/lucide-static@latest/icons/' + icon + '.svg', alt: '', style: { width: 18, height: 18, filter: 'brightness(0) invert(1)' } })),
    React.createElement('div', { style: { minWidth: 0 } },
      React.createElement('div', { style: { fontSize: 12, textTransform: 'uppercase', letterSpacing: 'var(--ls-caps)', color: 'var(--text-secondary)', fontWeight: 700 } }, label),
      React.createElement('div', { style: { fontSize: 15, color: hover && href ? 'var(--brand-primary)' : 'var(--ink-900)', fontWeight: 600, marginTop: 2 } }, value)));
  const style = { display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--border-default)', textDecoration: 'none' };
  return href
    ? React.createElement('a', { href: href, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: { ...style, cursor: 'pointer' } }, inner)
    : React.createElement('div', { style: style }, inner);
}


function submitNetlify(formEl, type, picked, setSent) {
  var labels = ['naam', 'telefoon', 'email', 'postcode'];
  var texts = formEl.querySelectorAll('input[type="text"], input[type="tel"], input[type="email"]');
  var data = { 'form-name': 'contact', type: type, interesses: picked.join(', ') };
  for (var i = 0; i < texts.length && i < labels.length; i++) data[labels[i]] = texts[i].value;
  var ta = formEl.querySelector('textarea');
  data.vraag = ta ? ta.value : '';
  var body = Object.keys(data).map(function (k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
  }).join('&');
  fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: body })
    .then(function () { setSent(true); })
    .catch(function () { setSent(true); });
}

function ContactScreen(props) {
  const { Card, Input, Select, Textarea, Checkbox, Button, Badge } = window.ISOKNIGDesignSystem_b5ec1b;
  const { onNavigate } = props;
  const [sent, setSent] = React.useState(false);
  const [picked, setPicked] = React.useState([]);
  const [type, setType] = React.useState('Particulier');
  const ICON = (n) => 'https://unpkg.com/lucide-static@latest/icons/' + n + '.svg';
  const toggle = (label) => setPicked((p) => (p.indexOf(label) > -1 ? p.filter((x) => x !== label) : p.concat(label)));

  const USPS = [
    { icon: 'clipboard-check', t: 'Gratis inspectie aan huis' },
    { icon: 'clock', t: 'Offerte binnen 48 uur' },
    { icon: 'piggy-bank', t: 'Wij helpen u met de ISDE-subsidie' },
    { icon: 'shield-check', t: '10 jaar garantie op vochtdoorslag' },
  ];

  return React.createElement('div', null,
    React.createElement('section', { style: { background: 'var(--ink-900)', color: '#fff' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '64px 40px' } },
        React.createElement(Badge, { tone: 'brand' }, 'Reactie binnen 1 werkdag'),
        React.createElement('h1', { style: { fontFamily: 'var(--font-display)', fontSize: 'var(--fs-display-lg)', margin: '16px 0 12px' } }, 'Vrijblijvend advies'),
        React.createElement('p', { style: { color: 'var(--ink-200)', fontSize: 'var(--fs-body-lg)', maxWidth: '58ch', margin: '0 0 28px', lineHeight: 'var(--lh-body)' } },
          'Vul het formulier in en onze adviseur neemt contact met u op voor een kosteloze inspectie aan huis. Liever direct schakelen? Bel of stuur ons een WhatsApp-bericht.'),
        React.createElement('div', { style: { display: 'flex', gap: 24, flexWrap: 'wrap' } },
          USPS.map((u) => React.createElement('div', { key: u.t, style: { display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-100)', fontSize: 14, fontWeight: 600 } },
            React.createElement('img', { src: ICON(u.icon), alt: '', style: { width: 17, height: 17, filter: 'invert(1)', opacity: 0.85 } }), u.t)))
      )
    ),

    React.createElement('section', { style: { background: 'var(--ink-50)' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '56px 40px 72px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,360px)', gap: 40, alignItems: 'start' } },

        React.createElement(Card, { padding: 'var(--space-6)' },
          sent
            ? React.createElement('div', { style: { textAlign: 'center', padding: '48px 0' } },
                React.createElement('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--brand-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' } },
                  React.createElement('img', { src: ICON('check'), alt: '', style: { width: 26, height: 26, filter: 'brightness(0) invert(1)' } })),
                React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 24, marginBottom: 8 } }, 'Bedankt!'),
                React.createElement('div', { style: { color: 'var(--text-secondary)', fontSize: 15 } }, 'We nemen binnen 1 werkdag contact met u op.'))
            : React.createElement('form', { style: { display: 'flex', flexDirection: 'column', gap: 22 }, onSubmit: (e) => { e.preventDefault(); submitNetlify(e.target, type, picked, setSent); } },
                React.createElement('div', null,
                  React.createElement('div', { style: { fontSize: 13, fontWeight: 700, marginBottom: 8, color: 'var(--ink-900)' } }, 'Ik ben'),
                  React.createElement('div', { style: { display: 'flex', gap: 10 } },
                    ['Particulier', 'Zakelijk'].map((t) => React.createElement('button', {
                      key: t, type: 'button', onClick: () => setType(t),
                      style: {
                        flex: 1, padding: '11px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 14,
                        background: type === t ? 'var(--ink-900)' : '#fff', color: type === t ? '#fff' : 'var(--ink-900)',
                        border: '1px solid ' + (type === t ? 'var(--ink-900)' : 'var(--border-default)'),
                        transition: 'all var(--dur-fast) var(--ease-standard)',
                      },
                    }, t)))
                ),

                React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: 16 } },
                  React.createElement(Input, { label: 'Naam', required: true, placeholder: 'Uw volledige naam' }),
                  React.createElement(Input, { label: 'Telefoonnummer', type: 'tel', required: true, placeholder: '06 12 34 56 78' }),
                  React.createElement(Input, { label: 'E-mailadres', type: 'email', required: true, placeholder: 'naam@voorbeeld.nl' }),
                  React.createElement(Input, { label: 'Postcode + huisnummer', required: true, placeholder: '1234 AB 1' })
                ),

                React.createElement('div', null,
                  React.createElement('div', { style: { fontSize: 13, fontWeight: 700, marginBottom: 4, color: 'var(--ink-900)' } }, 'Waar heeft u interesse in?'),
                  React.createElement('div', { style: { fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 } }, 'U kunt meerdere opties kiezen.'),
                  React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 10 } },
                    INTERESSES.map((i) => React.createElement(InteresseChip, { key: i, label: i, active: picked.indexOf(i) > -1, onToggle: () => toggle(i) })))
                ),

                React.createElement(Textarea, { label: 'Uw vraag (optioneel)', placeholder: 'Vertel ons kort over uw situatie...' }),
                React.createElement(Checkbox, { label: 'Ik ga akkoord met het privacybeleid', required: true }),
                React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' } },
                  React.createElement(Button, { type: 'submit', variant: 'primary', size: 'lg' }, 'Aanvraag versturen'),
                  React.createElement('span', { style: { fontSize: 13, color: 'var(--text-secondary)' } }, 'Wij nemen binnen 1 werkdag contact met u op.'))
              )
        ),

        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 20 } },
          React.createElement(Card, { padding: 'var(--space-6)' },
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 20, margin: '0 0 8px' } }, 'Direct contact'),
            React.createElement(ContactRow, { icon: 'phone', label: 'Telefoon', value: '+31 24 792 00 23', href: 'tel:+31247920023' }),
            React.createElement(ContactRow, { icon: 'message-circle', label: 'WhatsApp', value: 'Stuur een bericht', href: 'https://wa.me/31639486037' }),
            React.createElement(ContactRow, { icon: 'mail', label: 'E-mail', value: 'info@isokonig-onderhoud.nl', href: 'mailto:info@isokonig-onderhoud.nl' }),
            React.createElement(ContactRow, { icon: 'map-pin', label: 'Adres', value: 'Hulsbroek 17 G & J, 6562 JG Groesbeek', href: 'https://maps.google.com/?q=Hulsbroek+17+6562+JG+Groesbeek' }),
            React.createElement(ContactRow, { icon: 'clock', label: 'Openingstijden', value: 'Ma–vr 08:00–17:00' })
          ),
          React.createElement(Card, { padding: 'var(--space-6)', style: { background: 'var(--orange-50)', border: 'none' } },
            React.createElement('h3', { style: { fontFamily: 'var(--font-display)', fontSize: 18, margin: '0 0 8px' } }, 'Eerst uw subsidie berekenen?'),
            React.createElement('p', { style: { margin: '0 0 14px', fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--lh-body)' } },
              'In een paar stappen ziet u wat isoleren oplevert en op welke ISDE-subsidie u recht heeft.'),
            React.createElement('a', { onClick: () => onNavigate('subsidie'), style: { color: 'var(--brand-primary)', fontWeight: 700, fontSize: 14, cursor: 'pointer' } }, 'Naar de rekentool →')
          )
        )
      )
    )
  );
}
window.ContactScreen = ContactScreen;