/* =========== Contact (cleaner, single-column flow) =========== */
function Contact(){
  const t = useT();
  useDocumentMeta({
    title: t('Contact · plan een vrijblijvend gesprek','Contact · book a no-obligation call'),
    description: t('Vraag uw trouwfotografie of cinematische video aan bij Wedding Visions. Antwoord binnen 24u. Vrijblijvend en zonder verplichting. Roeselare, België.','Request your wedding photography or cinematic video from Wedding Visions. Reply within 24h. Free and without obligation. Roeselare, Belgium.'),
  });
  useJsonLd('faq', {
    '@context':'https://schema.org',
    '@type':'FAQPage',
    mainEntity: (SITE.faq||[]).map(f=>({ '@type':'Question', name:f.q, acceptedAnswer:{ '@type':'Answer', text:f.a } })),
  });
  const [form, setForm] = useState({
    name:'', partner:'', email:'', phone:'', date:'', location:'',
    services:[], message:''
  });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const [mode, setMode] = useState('plan'); // 'plan' = zelf inplannen, 'bericht' = formulier

  const toggle = (arr, v)=> arr.includes(v) ? arr.filter(x=>x!==v) : [...arr, v];
  const update = (k,v)=> setForm(f=> ({...f, [k]:v}));

  const reset = ()=> setForm({name:'',partner:'',email:'',phone:'',date:'',location:'',services:[],message:''});

  const submit = async (e)=>{
    e.preventDefault();
    setSending(true); setError('');
    try {
      const res = await fetch('/api/contact', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(form)
      });
      if(!res.ok) throw new Error('send-failed');
      setSent(true);
    } catch(err){
      setError(t('Er is iets misgegaan. Probeer opnieuw of mail ons rechtstreeks.','Something went wrong. Please try again or email us directly.'));
    } finally {
      setSending(false);
    }
  };

  return (
    <Page label="Contact">
      <Nav current="/contact" solid/>

      {/* HERO */}
      <section style={{paddingTop:160, paddingBottom:40}}>
        <div className="wrap" style={{maxWidth:920}}>
          <div className="reveal" style={{textAlign:'center'}}>
            <div className="h-number">CONTACT</div>
            <h1 className="h-display" style={{fontSize:'clamp(48px,7vw,96px)', marginTop:32, lineHeight:.95}}>
              {t(<>Laten we<br/><span className="italic-serif">kennismaken</span>.</>,
                 <>Let's get to<br/><span className="italic-serif">know each other</span>.</>)}
            </h1>
            <p style={{fontSize:16, lineHeight:1.7, color:'var(--ink-60)', marginTop:32, maxWidth:560, margin:'32px auto 0'}}>
              {t('Vul het formulier in of stuur ons een bericht. We antwoorden steeds binnen 24u, vrijblijvend en zonder enige verplichting.','Fill in the form or send us a message. We always reply within 24h, free and without any obligation.')}
            </p>
          </div>
        </div>
      </section>

      {/* QUICK CONTACT INFO STRIP */}
      <section style={{padding:'40px 0 0'}}>
        <div className="wrap" style={{maxWidth:920}}>
          <div className="contact-strip">
            <a href={'mailto:'+SITE.contact.email} className="contact-strip__item" data-cursor="hover">
              <span className="h-number">{t('E-MAIL','EMAIL')}</span>
              <span className="contact-strip__value">{SITE.contact.email}</span>
            </a>
            <a href={SITE.contact.phoneLink} className="contact-strip__item" data-cursor="hover">
              <span className="h-number">{t('TELEFOON','PHONE')}</span>
              <span className="contact-strip__value">{SITE.contact.phone}</span>
            </a>
            <div className="contact-strip__item">
              <span className="h-number">STUDIO</span>
              <span className="contact-strip__value">{SITE.contact.address1}, {SITE.contact.address2}</span>
            </div>
          </div>
        </div>
      </section>

      {/* AFSPRAAK: zelf inplannen of bericht sturen (toggle) */}
      <section style={{padding:'72px 0 120px'}}>
        <div className="wrap" style={{maxWidth:760}}>
          <div className="contact-toggle reveal">
            {[['plan',t('Plan zelf een moment','Schedule a moment')],['bericht',t('Stuur een bericht','Send a message')]].map(([k,l])=>(
              <button key={k} type="button" onClick={()=>setMode(k)} data-cursor="hover"
                className={mode===k ? 'active' : ''}>
                {l}
              </button>
            ))}
          </div>

          {mode === 'plan' ? (
            <div className="reveal" style={{marginTop:40}}>
              <p style={{textAlign:'center', fontSize:15, lineHeight:1.7, color:'var(--ink-60)', maxWidth:520, margin:'0 auto 28px'}}>
                {t('Kies meteen een vrij moment in onze agenda voor een vrijblijvend kennismakingsgesprek. Liever per mail? Wissel hierboven naar “Stuur een bericht”.','Pick an available moment in our calendar right away for a no-obligation introductory call. Prefer email? Switch to “Send a message” above.')}
              </p>
              <div className="gcal-embed">
                <iframe
                  src="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3IDuHd6jvohFSUu92LdQSflAg738ikfPxzwx8g9_MQvI4p50NGylRMoD8sVxibEtkFEWahMmYU?gv=true"
                  title="Plan een kennismakingsgesprek met Wedding Visions"
                  style={{border:0, width:'100%', height:'700px'}}
                  frameBorder="0"
                  loading="lazy"
                />
              </div>
            </div>
          ) : (
            <div style={{marginTop:40}}>
          {sent ? (
            <div className="thank-card reveal">
              <div className="h-hand" style={{fontSize:48, color:'var(--gold)', marginBottom:16}}>{t('Bedankt!','Thank you!')}</div>
              <h3 className="h-display" style={{fontSize:'clamp(36px,5vw,56px)', lineHeight:1.05, marginBottom:20}}>
                {t(<>Uw bericht is<br/><span className="italic-serif">verzonden</span>.</>,
                   <>Your message has<br/>been <span className="italic-serif">sent</span>.</>)}
              </h3>
              <p style={{color:'var(--ink-60)', fontSize:15, maxWidth:420, margin:'0 auto', lineHeight:1.7}}>
                {t('We nemen binnen 24u contact met u op','We\'ll get in touch within 24h')}{form.name ? ', '+form.name : ''}. {t('Tot snel.','Talk soon.')}
              </p>
              <button onClick={()=>{setSent(false); reset();}} className="btn btn-primary" style={{marginTop:36}} data-cursor="hover">
                {t('Stuur nog een bericht','Send another message')} <span className="arrow"></span>
              </button>
            </div>
          ) : (
            <form onSubmit={submit} className="wv-form reveal">
              <div className="grid-2">
                <Field label={t('Uw naam','Your name')} value={form.name} onChange={v=>update('name',v)} required/>
                <Field label={t('Naam partner','Partner\'s name')} value={form.partner} onChange={v=>update('partner',v)}/>
                <Field label={t('E-mailadres','Email address')} type="email" value={form.email} onChange={v=>update('email',v)} required/>
                <Field label={t('Telefoon','Phone')} type="tel" value={form.phone} onChange={v=>update('phone',v)}/>
                <Field label={t('Trouwdatum','Wedding date')} type="date" value={form.date} onChange={v=>update('date',v)}/>
                <Field label={t('Locatie of feestzaal','Venue or location')} value={form.location} onChange={v=>update('location',v)}/>
              </div>

              <div className="form-section">
                <div className="field-label">{t('Welke diensten zoekt u? (optioneel)','Which services are you looking for? (optional)')}</div>
                <div className="chip-grid">
                  {[['Fotografie','Photography'],['Videografie','Videography'],['Foto + Video combi','Photo + Video combo'],['Photobooth','Photobooth'],['Koppelshoot','Couple shoot'],['Fotoboek','Photo album'],['Nog niet zeker','Not sure yet']].map(([s,en])=>(
                    <label key={s} className={"chip-check "+(form.services.includes(s)?'active':'')} data-cursor="hover">
                      <input type="checkbox" checked={form.services.includes(s)} onChange={()=>update('services', toggle(form.services,s))}/>
                      <span>{t(s,en)}</span>
                    </label>
                  ))}
                </div>
              </div>

              <Field
                label={t('Uw bericht','Your message')}
                textarea
                value={form.message}
                onChange={v=>update('message',v)}
                placeholder={t('Vertel ons over uw dag, stijl, verwachtingen...','Tell us about your day, style, expectations...')}
                required
              />

              {error && <div className="form-error">{error}</div>}

              <div className="form-foot">
                <p>
                  {t('Door te verzenden gaat u akkoord met onze verwerking van uw gegevens voor contactname. Lees de ','By submitting, you agree to our processing of your data to get in touch. Read the ')}<Link to="/voorwaarden" style={{textDecoration:'underline'}}>{t('privacyverklaring','privacy statement')}</Link>.
                </p>
                <button type="submit" disabled={sending} className="btn btn-primary" data-cursor="hover">
                  {sending ? t('Versturen...','Sending...') : t('Verstuur bericht','Send message')} <span className="arrow"></span>
                </button>
              </div>
            </form>
          )}
            </div>
          )}
        </div>
      </section>

      {/* FAQ */}
      <section style={{background:'var(--paper)', padding:'120px 0'}}>
        <div className="wrap" style={{maxWidth:920}}>
          <div className="reveal" style={{marginBottom:48, textAlign:'center'}}>
            <div className="h-number">{t('FREQUENT GESTELD','FREQUENTLY ASKED')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16, lineHeight:.95}}>
              {t(<>Vragen en <span className="italic-serif">antwoorden</span>.</>,
                 <>Questions and <span className="italic-serif">answers</span>.</>)}
            </h2>
          </div>
          <div className="reveal" style={{maxWidth:720, margin:'0 auto'}}>
            {SITE.faq.map((f,i)=> <Faq key={i} q={tphrase(f.q)}>{tphrase(f.a)}</Faq>)}
          </div>
        </div>
      </section>

      <Footer/>

      <style>{`
        /* Afspraak-toggle (plan zelf / stuur bericht) */
        .contact-toggle{
          display:flex; gap:6px; padding:5px; margin:0 auto; width:fit-content; max-width:100%;
          background:var(--paper); border:1px solid var(--rule); border-radius:999px;
        }
        .contact-toggle button{
          padding:13px 26px; border-radius:999px; font-size:11px; letter-spacing:.2em;
          text-transform:uppercase; color:var(--ink-60); transition:background .3s, color .3s; white-space:nowrap;
        }
        .contact-toggle button.active{background:var(--ink); color:var(--ivory)}
        .gcal-embed{border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--ivory)}
        @media (max-width:560px){
          .contact-toggle{width:100%; flex-direction:column; border-radius:14px}
          .contact-toggle button{width:100%}
        }

        /* Quick contact strip */
        .contact-strip{
          display:grid;
          grid-template-columns:repeat(3, 1fr);
          gap:0;
          border-top:1px solid var(--ink);
          border-bottom:1px solid var(--ink);
        }
        .contact-strip__item{
          padding:24px 24px;
          display:flex;
          flex-direction:column;
          gap:8px;
          border-right:1px solid var(--rule);
          text-decoration:none;
          color:var(--ink);
          transition:background .25s;
        }
        .contact-strip__item:last-child{border-right:none}
        a.contact-strip__item:hover{background:var(--paper)}
        .contact-strip__value{
          font-family:var(--serif);
          font-size:18px;
          line-height:1.3;
        }
        @media (max-width:700px){
          .contact-strip{grid-template-columns:1fr}
          .contact-strip__item{border-right:none; border-bottom:1px solid var(--rule); padding:20px 16px}
          .contact-strip__item:last-child{border-bottom:none}
        }

        /* Form */
        .wv-form{display:flex; flex-direction:column; gap:48px}
        .form-section{display:flex; flex-direction:column; gap:8px}
        .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px 24px}
        @media (max-width:700px){.grid-2{grid-template-columns:1fr; gap:24px}}

        .field{position:relative}
        .field-label{
          font-size:11px;
          letter-spacing:.25em;
          text-transform:uppercase;
          color:var(--ink-60);
          margin-bottom:10px;
        }
        .field input, .field textarea{
          width:100%;
          background:transparent;
          border:none;
          border-bottom:1px solid var(--ink-20);
          padding:10px 0;
          font-family:var(--sans);
          font-size:16px;
          color:var(--ink);
          outline:none;
          transition:border-color .3s;
        }
        .field textarea{min-height:140px; resize:vertical}
        .field input:focus, .field textarea:focus{border-bottom-color:var(--ink)}

        .chip-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
        .chip-check{
          display:inline-flex;
          align-items:center;
          padding:9px 16px;
          border:1px solid var(--ink-20);
          border-radius:999px;
          font-size:12px;
          letter-spacing:.12em;
          cursor:pointer;
          transition:all .25s;
          user-select:none;
          color:var(--ink-80);
        }
        .chip-check:hover{border-color:var(--ink); color:var(--ink)}
        .chip-check.active{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
        .chip-check input{display:none}

        .form-error{
          color:#c0392b;
          font-size:14px;
          padding:12px 16px;
          background:#fee2e2;
          border-radius:4px;
        }

        .form-foot{
          display:flex;
          justify-content:space-between;
          align-items:center;
          gap:24px;
          padding-top:24px;
          border-top:1px solid var(--rule);
          flex-wrap:wrap;
        }
        .form-foot p{
          font-size:12px;
          color:var(--ink-60);
          line-height:1.6;
          max-width:380px;
          margin:0;
        }
        .form-foot a{color:var(--ink)}
        @media (max-width:600px){
          .form-foot{flex-direction:column; align-items:stretch}
          .form-foot .btn{justify-content:center}
        }

        /* Thank-you card */
        .thank-card{
          background:var(--paper);
          color:var(--ink);
          text-align:center;
          padding:80px 40px;
          border:1px solid var(--rule);
          border-radius:6px;
        }

        /* Geen horizontale scroll */
        .contact-strip, .wv-form, .chip-grid{max-width:100%}
        .contact-strip__value{word-break:break-word}

        /* iPad / tablet */
        @media (max-width:1024px){
          .wv-form{gap:40px}
          .thank-card{padding:64px 40px}
        }

        /* Groot mobiel / kleine tablet */
        @media (max-width:900px){
          .wv-form{gap:36px}
          .form-foot{gap:20px}
          .thank-card{padding:56px 32px}
        }

        /* Mobiel */
        @media (max-width:600px){
          .contact-strip__value{font-size:16px}
          .chip-check{padding:9px 14px; font-size:11px}
          .thank-card{padding:48px 22px}
        }

        /* Liggende telefoon */
        @media (orientation:landscape) and (max-height:520px){
          .wv-form{gap:28px}
          .thank-card{padding:40px 32px}
        }
      `}</style>
    </Page>
  );
}

function Field({label, value, onChange, type='text', required, textarea, placeholder}){
  return (
    <div className="field">
      <div className="field-label">{label}{required && ' *'}</div>
      {textarea
        ? <textarea value={value} placeholder={placeholder} onChange={e=>onChange(e.target.value)} required={required}/>
        : <input type={type} value={value} placeholder={placeholder} onChange={e=>onChange(e.target.value)} required={required}/>
      }
    </div>
  );
}

function Faq({q, children}){
  const [open, setOpen] = useState(false);
  return (
    <div style={{borderTop:'1px solid var(--ink-20)'}}>
      <button onClick={()=>setOpen(!open)} data-cursor="hover" style={{width:'100%', padding:'22px 0', display:'flex', justifyContent:'space-between', alignItems:'center', textAlign:'left', gap:24}}>
        <span className="h-display" style={{fontSize:'clamp(18px,2vw,22px)', lineHeight:1.3}}>{q}</span>
        <span style={{fontSize:22, transition:'transform .3s', transform:open?'rotate(45deg)':'none', color:'var(--ink-40)', flexShrink:0}}>+</span>
      </button>
      <div style={{maxHeight:open?600:0, overflow:'hidden', transition:'max-height .5s cubic-bezier(.2,.8,.2,1)'}}>
        <p style={{paddingBottom:22, fontSize:14, lineHeight:1.7, color:'var(--ink-80)'}}>{children}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Contact });