/* global React, Icon */
const { useState: useStateContact } = React;

const FAQ_CONTACT = [
  ['Wat kost het en wat zit erbij in?', 'De E-Vito Koeler rijd je vanaf €950 per maand; voor de overige voertuigen uit onze vloot ontvang je een maatwerktarief. Onderhoud, APK, banden, pechhulp en verzekering zitten altijd standaard in het maandtarief — zonder verrassingen achteraf.'],
  ['Hoe flexibel is het contract?', 'Volledig flexibel: je huurt per maand en zegt maandelijks op. Geen langlopende leasecontracten van vier jaar. Langer nodig? Je verlengt eenvoudig per maand.'],
  ['Hoe snel kan ik een voertuig beschikbaar hebben?', 'In de meeste gevallen is de bus binnen een paar werkdagen rijklaar voor je klaarstaat. We leveren volgeladen, verzekerd en onderhouden — ophalen bij ons of laten bezorgen.'],
  ['Hoe zit het met onderhoud en pech?', 'Daar heb je geen omkijken naar. Wij regelen service, APK en banden in onze eigen werkplaats. Schade of pech onderweg? Ook dat lossen we intern op, zodat je snel weer rijdt.'],
  ['Mag ik echt elke emissiezone in?', 'Ja. Onze hele vloot is volledig elektrisch en valt in de schoonste categorie. Je rijdt zonder ontheffing of boetes alle Nederlandse zero-emissiezones in.'],
  ['Heb ik een speciaal rijbewijs nodig?', 'Nee. Al onze bussen rijd je met een gewoon rijbewijs B. Een C-rijbewijs is niet nodig.'],
];

function ContactForm() {
  const [form, setForm] = useStateContact({ naam: '', bedrijf: '', tel: '', email: '', bericht: '' });
  const [sent, setSent] = useStateContact(false);
  const [error, setError] = useStateContact('');

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

  const submit = (e) => {
    e.preventDefault();
    if (!form.naam || !form.email || !form.bericht) {
      setError('Vul naam, e-mailadres en bericht in.');
      return;
    }
    setError('');
    setSent(true);
  };

  if (sent) {
    return (
      <div style={{ padding: '40px 32px', background: 'var(--teal-50)', borderRadius: 'var(--r-lg)', textAlign: 'center' }}>
        <span style={{ color: 'var(--accent)', display: 'block', marginBottom: 12 }}><Icon name="check" style={{ width: 36, height: 36 }} /></span>
        <h3 style={{ marginBottom: 8 }}>Bericht verstuurd!</h3>
        <p style={{ color: 'var(--muted)', margin: 0 }}>We nemen zo snel mogelijk contact met je op, uiterlijk binnen één werkdag.</p>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit} noValidate>
      <div className="contact-form__row">
        <label className="contact-form__field">
          <span>Naam <span aria-hidden="true" style={{ color: 'var(--accent)' }}>*</span></span>
          <input type="text" value={form.naam} onChange={set('naam')} placeholder="Jan de Vries" autoComplete="name" />
        </label>
        <label className="contact-form__field">
          <span>Bedrijfsnaam</span>
          <input type="text" value={form.bedrijf} onChange={set('bedrijf')} placeholder="Mijn BV" autoComplete="organization" />
        </label>
      </div>
      <div className="contact-form__row">
        <label className="contact-form__field">
          <span>Telefoonnummer</span>
          <input type="tel" value={form.tel} onChange={set('tel')} placeholder="06 12 34 56 78" autoComplete="tel" />
        </label>
        <label className="contact-form__field">
          <span>E-mailadres <span aria-hidden="true" style={{ color: 'var(--accent)' }}>*</span></span>
          <input type="email" value={form.email} onChange={set('email')} placeholder="jan@bedrijf.nl" autoComplete="email" />
        </label>
      </div>
      <label className="contact-form__field">
        <span>Bericht <span aria-hidden="true" style={{ color: 'var(--accent)' }}>*</span></span>
        <textarea value={form.bericht} onChange={set('bericht')} rows="5" placeholder="Vertel ons waar we je mee kunnen helpen — bijv. gewenste startdatum, stad of type voertuig." />
      </label>
      {error && <p style={{ color: '#e53935', fontSize: 14, margin: '0 0 4px' }}><Icon name="x" style={{ width: 14, height: 14 }} /> {error}</p>}
      <button className="btn btn--primary btn--lg" type="submit" style={{ width: '100%' }}>
        <Icon name="mail" /> Verstuur bericht
      </button>
      <p style={{ fontSize: 13, color: 'var(--muted-2)', margin: '10px 0 0', textAlign: 'center' }}>We reageren binnen één werkdag.</p>
    </form>
  );
}

function ContactDetails() {
  const items = [
    { ic: 'phone', label: 'Bel ons', value: '085 - 000 12 34', href: 'tel:+31850001234' },
    { ic: 'chat',  label: 'WhatsApp', value: 'Stuur een bericht', href: 'https://wa.me/31612345678' },
    { ic: 'mail',  label: 'E-mail', value: 'hallo@zerogo.nl', href: 'mailto:hallo@zerogo.nl' },
  ];
  return (
    <div className="contact-details">
      <div className="section-head" style={{ marginBottom: 28 }}>
        <span className="eyebrow"><Icon name="phone" style={{ width: 15, height: 15 }} /> Direct contact</span>
        <h2 style={{ fontSize: 'clamp(24px,3vw,34px)', marginTop: 10 }}>Hoe kunnen we je helpen?</h2>
        <p style={{ color: 'var(--muted)', marginTop: 10, fontSize: 17 }}>Heb je een vraag, wil je een offerte of wil je gewoon even sparren? We staan voor je klaar.</p>
      </div>
      <div className="contact-channels">
        {items.map(({ ic, label, value, href }) => (
          <a key={label} href={href} className="contact-channel" target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}>
            <span className="contact-channel__ic"><Icon name={ic} /></span>
            <span>
              <strong>{label}</strong>
              <small>{value}</small>
            </span>
            <span className="contact-channel__arrow"><Icon name="arrow" style={{ width: 18, height: 18 }} /></span>
          </a>
        ))}
      </div>
      <div className="contact-hours">
        <div className="contact-hours__row">
          <span><Icon name="clock" style={{ width: 15, height: 15 }} /> Bereikbaarheid</span>
        </div>
        <div className="contact-hours__grid">
          <span>Maandag – vrijdag</span><span>08:00 – 18:00</span>
          <span>Zaterdag</span><span>09:00 – 13:00</span>
          <span>Zondag</span><span>Gesloten</span>
        </div>
      </div>
    </div>
  );
}

function ContactFaq() {
  const [open, setOpen] = useStateContact(null);
  return (
    <section className="section section--tint" id="faq">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><Icon name="chat" style={{ width: 15, height: 15 }} /> Veelgestelde vragen</span>
          <h2>Nog even iets uitzoeken?</h2>
        </div>
        <div className="faq">
          {FAQ_CONTACT.map(([q, a], i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={q}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                {q}<span className="faq-q__ic"><Icon name="plus" /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 280 : 0 }}>
                <div className="faq-a__inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactPage({ go }) {
  return (
    <main>
      <section className="section" id="top" style={{ paddingTop: 'clamp(48px,6vw,80px)' }}>
        <div className="container">
          <div className="contact-grid">
            <ContactDetails />
            <div>
              <div className="section-head" style={{ marginBottom: 28 }}>
                <span className="eyebrow"><Icon name="mail" style={{ width: 15, height: 15 }} /> Contactformulier</span>
                <h2 style={{ fontSize: 'clamp(24px,3vw,34px)', marginTop: 10 }}>Stuur ons een bericht</h2>
              </div>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>
      <ContactFaq />
      <section className="section section--tight">
        <div className="container">
          <div className="cta-banner">
            <div className="cta-banner__inner">
              <div>
                <h2>Liever direct starten?</h2>
                <p>Bekijk de beschikbaarheid en vraag meteen een offerte aan.</p>
              </div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn--primary btn--lg" onClick={() => go('reserve', 'top')}><Icon name="calendar" /> Beschikbaarheid bekijken</button>
                <button className="btn btn--light btn--lg" onClick={() => go('fleet', 'top')}>Bekijk de vloot</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;