// Booking kit — pricing + contact + booking flow with screen routing.

const PRICING = [
  {
    id: 'start', name: 'Start', price: '500', sub: 'eenmalig',
    blurb: 'Een professionele website om direct online te staan. Helder, snel en op maat.',
    features: ['Tot 5 pagina\'s op maat', 'Professioneel design', 'Mobiel vriendelijk', 'Contactformulier', 'Eigen domein en hosting', 'Live binnen 3 weken'],
    cta: 'Kies Start',
  },
  {
    id: 'groei', name: 'Groei', price: '1.250', sub: 'eenmalig', featured: true,
    blurb: 'Volledige website met content, vindbaarheid en een boekingssysteem.',
    features: ['Tot 8 pagina\'s op maat', 'Copywriting inbegrepen', 'SEO setup en zoekmachine optimalisatie', 'Blog of nieuwssectie', 'Boekingssysteem (Cal.com)', 'Google Analytics koppeling', '2 feedbackrondes', 'Live binnen 4 weken'],
    cta: 'Kies Groei',
  },
  {
    id: 'maatwerk', name: 'Maatwerk', price: 'Op aanvraag', sub: '',
    blurb: 'Voor ondernemers met specifieke wensen. Webshop, koppelingen of een volledig digitaal platform.',
    features: ['Onbeperkt aantal pagina\'s', 'Webshop met betaalopties', 'Externe koppelingen (CRM, agenda, betaal)', 'Boekings en reserveringssystemen', 'Toegewijd projectteam', 'Onbeperkte revisies'],
    cta: 'Plan gesprek',
  },
];

const PriceCard = ({ plan, onSelect }) => {
  const dark = plan.featured;
  return (
    <div style={{
      background: dark ? 'var(--forest-950)' : 'var(--bg-elevated)',
      color: dark ? 'var(--cream-50)' : 'var(--ink-900)',
      border: dark ? 'none' : '1px solid var(--border-1)',
      borderRadius: 24, padding: 32, position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', gap: 24,
      boxShadow: dark ? '0 24px 48px -16px rgba(11,20,16,0.25)' : 'var(--shadow-sm)',
    }}>
      {dark && <div style={{ position: 'absolute', inset: 'auto -60px -60px auto', width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(74,222,128,0.35), transparent 70%)' }}/>}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ font: '700 22px var(--font-display)', letterSpacing: '-0.015em' }}>{plan.name}</div>
        {plan.featured && <Badge variant="accent">Aanbevolen</Badge>}
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ font: '800 56px var(--font-display)', letterSpacing: '-0.035em', lineHeight: 1 }}>
          {plan.price === 'Op aanvraag' ? plan.price : <><span style={{ fontSize: 32, verticalAlign: 'top', marginRight: 4, fontWeight: 600 }}>€</span>{plan.price}</>}
        </div>
        {plan.sub && <div style={{ font: '500 13px var(--font-body)', color: dark ? 'var(--fg-on-dark-3)' : 'var(--fg-3)', marginTop: 6 }}>{plan.sub} · excl. btw</div>}
      </div>
      <p style={{ font: '400 15px var(--font-body)', lineHeight: 1.5, color: dark ? 'var(--fg-on-dark-2)' : 'var(--fg-2)', position: 'relative' }}>{plan.blurb}</p>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
        {plan.features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, font: '500 15px var(--font-body)' }}>
            <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: '50%', background: dark ? 'var(--lime-500)' : 'var(--forest-50)', color: dark ? 'var(--forest-950)' : 'var(--forest-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}>
              <Icon name="check" size={12}/>
            </span>
            {f}
          </li>
        ))}
      </ul>
      <Button
        variant={dark ? 'accent' : 'outline'}
        size="lg"
        onClick={() => onSelect(plan)}
        style={{ width: '100%', justifyContent: 'center', position: 'relative' }}
      >{plan.cta}</Button>
    </div>
  );
};

const PricingScreen = ({ onSelect }) => (
  <Section>
    <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
      <Eyebrow>Pakketten</Eyebrow>
      <h1 style={{ font: '800 72px var(--font-display)', letterSpacing: '-0.035em', lineHeight: 0.98, margin: '16px 0 20px', textWrap: 'balance' }}>
        Eén prijs. Eén deadline.<br/>Geen verrassingen.
      </h1>
      <p style={{ font: '400 19px var(--font-body)', lineHeight: 1.5, color: 'var(--fg-2)' }}>
        Wij werken op vaste prijzen. Je weet vooraf wat je krijgt en wanneer het live staat.
      </p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
      {PRICING.map(p => <PriceCard key={p.id} plan={p} onSelect={onSelect}/>)}
    </div>
    <div style={{ marginTop: 64, textAlign: 'center', font: '500 14px var(--font-body)', color: 'var(--fg-3)' }}>
      Alle pakketten zijn inclusief domein, hosting voor 1 jaar en 1 maand gratis ondersteuning na oplevering.
    </div>
  </Section>
);

// ---------- Contact step ----------
const ContactScreen = ({ plan, data, onChange, onNext, onBack }) => {
  const [errors, setErrors] = React.useState({});
  const submit = () => {
    const e = {};
    if (!data.name) e.name = 'Vul je naam in';
    if (!data.email || !data.email.includes('@')) e.email = 'Vul een geldig e-mailadres in';
    if (!data.company) e.company = 'Vul de bedrijfsnaam in';
    setErrors(e);
    if (Object.keys(e).length === 0) onNext();
  };
  return (
    <Section style={{ paddingTop: 56 }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <Button variant="ghost" icon="arrow-left" onClick={onBack} style={{ paddingLeft: 8, marginBottom: 24 }}>Terug naar pakketten</Button>
        <Eyebrow>Stap 2 van 3</Eyebrow>
        <h1 style={{ font: '700 48px var(--font-display)', letterSpacing: '-0.03em', margin: '16px 0 12px', lineHeight: 1.02 }}>Vertel ons over jezelf.</h1>
        <p style={{ font: '400 18px var(--font-body)', color: 'var(--fg-2)', marginBottom: 12 }}>Je hebt <strong>{plan?.name || 'Groei'}</strong> gekozen. We hebben een paar dingen nodig om je gesprek voor te bereiden.</p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 32 }}>
          <Field label="Naam" placeholder="Je volledige naam" value={data.name} onChange={e => onChange({ name: e.target.value })} error={errors.name}/>
          <Field label="Bedrijfsnaam" placeholder="Bedrijfsnaam" value={data.company} onChange={e => onChange({ company: e.target.value })} error={errors.company}/>
          <Field label="E-mail" type="email" placeholder="je@bedrijf.nl" value={data.email} onChange={e => onChange({ email: e.target.value })} error={errors.email}/>
          <Field label="Telefoon" placeholder="06 12 34 56 78" value={data.phone} onChange={e => onChange({ phone: e.target.value })} hint="Optioneel"/>
          <div style={{ gridColumn: '1 / -1' }}>
            <Field
              label="Branche" as="select" value={data.industry} onChange={e => onChange({ industry: e.target.value })}
              options={[
                { value: '', label: 'Kies een branche' },
                { value: 'accountant', label: 'Accountancy' },
                { value: 'advocaat', label: 'Advocatuur' },
                { value: 'consultant', label: 'Consultancy' },
                { value: 'notaris', label: 'Notariaat' },
                { value: 'anders', label: 'Anders' },
              ]}
            />
          </div>
          <div style={{ gridColumn: '1 / -1' }}>
            <Field label="Waar gaat het over?" as="textarea" placeholder="Een paar zinnen over jullie en wat je zoekt." value={data.message} onChange={e => onChange({ message: e.target.value })} rows={4}/>
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ font: '500 13px var(--font-body)', color: 'var(--fg-3)' }}>We bellen niet ongevraagd. Beloofd.</span>
          <Button variant="primary" size="lg" iconRight="arrow-right" onClick={submit}>Kies een tijd</Button>
        </div>
      </div>
    </Section>
  );
};

// ---------- Booking calendar ----------
const BookingScreen = ({ data, onSelect, onBack }) => {
  const [day, setDay] = React.useState(0);
  const [slot, setSlot] = React.useState(null);
  const days = [
    { d: 'ma', n: 12, label: 'Maandag 12 mei' },
    { d: 'di', n: 13, label: 'Dinsdag 13 mei' },
    { d: 'wo', n: 14, label: 'Woensdag 14 mei' },
    { d: 'do', n: 15, label: 'Donderdag 15 mei' },
    { d: 'vr', n: 16, label: 'Vrijdag 16 mei' },
  ];
  const slots = ['09:00', '09:30', '10:00', '10:30', '11:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00'];
  const unavailable = day === 1 ? ['09:00', '13:00', '13:30'] : day === 3 ? ['14:30', '15:00', '15:30', '16:00'] : ['10:30'];

  return (
    <Section style={{ paddingTop: 56 }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <Button variant="ghost" icon="arrow-left" onClick={onBack} style={{ paddingLeft: 8, marginBottom: 24 }}>Terug</Button>
        <Eyebrow>Stap 3 van 3</Eyebrow>
        <h1 style={{ font: '700 48px var(--font-display)', letterSpacing: '-0.03em', margin: '16px 0 12px', lineHeight: 1.02 }}>Kies een tijd.</h1>
        <p style={{ font: '400 18px var(--font-body)', color: 'var(--fg-2)', marginBottom: 32 }}>30 minuten via video. Tijden in Europe/Amsterdam.</p>

        <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-1)', borderRadius: 20, padding: 28, display: 'grid', gridTemplateColumns: '220px 1fr', gap: 28 }}>
          <div>
            <div style={{ font: '600 12px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 16 }}>Dag</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {days.map((d, i) => (
                <button key={i} onClick={() => { setDay(i); setSlot(null); }}
                  style={{
                    padding: '12px 16px', borderRadius: 12, border: 'none', cursor: 'pointer', textAlign: 'left',
                    background: i === day ? 'var(--forest-950)' : 'transparent',
                    color: i === day ? 'var(--cream-50)' : 'var(--ink-900)',
                    font: '600 15px var(--font-body)',
                    transition: 'background 180ms',
                  }}>
                  {d.label}
                </button>
              ))}
            </div>
          </div>
          <div>
            <div style={{ font: '600 12px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 16 }}>{days[day].label}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {slots.map(s => {
                const off = unavailable.includes(s);
                const sel = slot === s;
                return (
                  <button key={s} disabled={off} onClick={() => setSlot(s)} style={{
                    padding: '14px 8px', borderRadius: 12, cursor: off ? 'not-allowed' : 'pointer',
                    border: sel ? '2px solid var(--lime-500)' : '1px solid var(--border-1)',
                    background: sel ? 'var(--forest-50)' : off ? 'var(--cream-100)' : '#fff',
                    color: off ? 'var(--fg-4)' : 'var(--ink-900)',
                    font: `${sel ? 700 : 600} 15px var(--font-body)`,
                    textDecoration: off ? 'line-through' : 'none',
                    boxShadow: sel ? '0 0 0 4px rgba(74,222,128,0.18)' : 'none',
                    transition: 'all 180ms',
                  }}>{s}</button>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ font: '500 14px var(--font-body)', color: 'var(--fg-3)' }}>
            {slot ? `${days[day].label} · ${slot} – ${parseInt(slot)+(slot.endsWith('30')?1:0)}:${slot.endsWith('30')?'00':'30'}` : 'Selecteer een tijd om door te gaan'}
          </span>
          <Button variant="primary" size="lg" disabled={!slot} iconRight="check" onClick={() => slot && onSelect({ day: days[day].label, slot })}
            style={!slot ? { opacity: 0.4, cursor: 'not-allowed' } : {}}>Bevestig afspraak</Button>
        </div>
      </div>
    </Section>
  );
};

// ---------- Success ----------
const SuccessScreen = ({ data, plan, booking, onRestart }) => (
  <Section dark style={{ minHeight: 'calc(100vh - 90px)', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: '-10% -20% auto auto', width: 800, height: 800, borderRadius: '50%', background: 'radial-gradient(circle, rgba(74,222,128,0.22), transparent 60%)' }}/>
    <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
      <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--lime-500)', color: 'var(--forest-950)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
        <Icon name="check" size={36}/>
      </div>
      <Eyebrow color="var(--lime-400)">Gelukt</Eyebrow>
      <h1 style={{ font: '800 64px var(--font-display)', letterSpacing: '-0.035em', lineHeight: 0.98, margin: '12px 0 20px', textWrap: 'balance' }}>
        Tot snel, {data.name?.split(' ')[0] || 'collega'}.
      </h1>
      <p style={{ font: '400 19px var(--font-body)', lineHeight: 1.55, color: 'var(--fg-on-dark-2)', marginBottom: 36, maxWidth: 520, margin: '0 auto 36px' }}>
        We hebben een uitnodiging gestuurd naar <strong style={{ color: 'var(--cream-50)' }}>{data.email}</strong>. Tot {booking?.day || 'donderdag'} om {booking?.slot || '14:00'}.
      </p>
      <div style={{ background: 'var(--forest-900)', border: '1px solid var(--forest-700)', borderRadius: 20, padding: 28, textAlign: 'left', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 36 }}>
        <div><Eyebrow color="var(--lime-400)">Pakket</Eyebrow><div style={{ font: '700 22px var(--font-display)', marginTop: 6 }}>{plan?.name || 'Groei'}</div></div>
        <div><Eyebrow color="var(--lime-400)">Tijd</Eyebrow><div style={{ font: '700 22px var(--font-display)', marginTop: 6 }}>{booking?.slot} – {parseInt(booking?.slot)+(booking?.slot?.endsWith('30')?1:0)}:{booking?.slot?.endsWith('30')?'00':'30'}</div></div>
        <div><Eyebrow color="var(--lime-400)">Datum</Eyebrow><div style={{ font: '700 22px var(--font-display)', marginTop: 6 }}>{booking?.day}</div></div>
        <div><Eyebrow color="var(--lime-400)">Locatie</Eyebrow><div style={{ font: '700 22px var(--font-display)', marginTop: 6 }}>Google Meet</div></div>
      </div>
      <Button variant="onDark" iconRight="arrow-up-right" onClick={onRestart} style={{ background: 'transparent', color: 'var(--cream-50)', border: '1.5px solid var(--forest-700)' }}>Terug naar pakketten</Button>
    </div>
  </Section>
);

Object.assign(window, { PRICING, PricingScreen, ContactScreen, BookingScreen, SuccessScreen });