const { Button, Input, Select, IconButton, Asterisk, IndexTag } = window.MartiniVastgoedDesignSystem_adb8d1;

function ValuationBand({ onOpen }) {
  return (
    <section id="waardebepaling" style={{ background: 'var(--mv-ink)', color: 'var(--mv-bone)', borderTop: '3px solid var(--mv-ink)', borderBottom: '3px solid var(--mv-ink)', padding: 'clamp(3rem,6vw,5rem) var(--gutter)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 'var(--space-7)', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <p style={{ margin: 0, font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--mv-green)' }}>Gratis &amp; vrijblijvend</p>
          <h2 style={{ margin: '16px 0 0', maxWidth: '18ch', font: '900 var(--fs-h1)/0.96 var(--font-display)', letterSpacing: 'var(--ls-display)' }}>Benieuwd wat jouw woning waard is?</h2>
        </div>
        <Button variant="primary" size="lg" onClick={onOpen} iconRight={<span aria-hidden="true">→</span>}>Start waardebepaling</Button>
      </div>
    </section>
  );
}

function ValuationModal({ open, onClose }) {
  const [done, setDone] = React.useState(false);
  React.useEffect(() => { if (!open) setDone(false); }, [open]);
  if (!open) return null;
  return (
    <div role="dialog" aria-modal="true" onClick={onClose}
      style={{ position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(22,18,58,0.55)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()}
        style={{ width: 'min(520px,100%)', maxHeight: '90vh', overflow: 'auto', background: 'var(--mv-bone)', border: '3px solid var(--mv-ink)', boxShadow: 'var(--shadow-xl)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 22px', borderBottom: '3px solid var(--mv-ink)', background: 'var(--mv-ink)', color: 'var(--mv-bone)' }}>
          <IndexTag label="Waardebepaling" accent="green" style={{ color: 'var(--mv-bone)' }} />
          <IconButton label="Sluiten" variant="ghost" size="sm" onClick={onClose} style={{ color: 'var(--mv-bone)' }}><span>✕</span></IconButton>
        </div>
        <div style={{ padding: 22 }}>
          {done ? (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <Asterisk size="3.5rem" color="var(--mv-green)" spin />
              <h3 style={{ margin: '18px 0 8px', font: '900 var(--fs-h3)/1 var(--font-display)', letterSpacing: 'var(--ls-heading)', color: 'var(--mv-ink)' }}>Dank je wel!</h3>
              <p style={{ margin: 0, font: '400 var(--fs-body)/1.5 var(--font-body)', color: 'var(--mv-ink-70)' }}>We nemen binnen één werkdag contact op met een scherpe waardebepaling van jouw woning.</p>
              <div style={{ marginTop: 22 }}><Button variant="ink" onClick={onClose}>Sluiten</Button></div>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setDone(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <p style={{ margin: 0, font: '500 var(--fs-body)/1.5 var(--font-body)', color: 'var(--mv-ink)' }}>Vul je gegevens in. Je krijgt binnen één werkdag een gratis waardebepaling.</p>
              <Input label="Adres" placeholder="Straatnaam + huisnummer" required />
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <Input label="Postcode" placeholder="9711 AA" wrapStyle={{ flex: '1 1 130px' }} required />
                <Select label="Type" options={['Appartement', 'Studio', 'Huis', 'Kamer']} wrapStyle={{ flex: '1 1 150px' }} />
              </div>
              <Input label="E-mail" type="email" placeholder="jij@voorbeeld.nl" required />
              <Button type="submit" variant="primary" size="lg" full iconRight={<span aria-hidden="true">→</span>}>Vraag waardebepaling aan</Button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { ValuationBand, ValuationModal });