// Contact.jsx — form with validation + map mock + Footer

const { useState: cUseState } = React;

function Contact({ witty }) {
  const [form, setForm] = cUseState({ name: '', email: '', phone: '', addr: '', msg: '', consent: false });
  const [errors, setErrors] = cUseState({});
  const [sent, setSent] = cUseState(false);

  const set = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm({ ...form, [k]: v });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Votre nom, s\'il vous plaît';
    if (!form.email.match(/^\S+@\S+\.\S+$/)) errs.email = 'E-mail invalide';
    if (!form.msg.trim() || form.msg.length < 8) errs.msg = 'Quelques mots de plus ?';
    if (!form.consent) errs.consent = 'Consentement requis';
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  };

  return (
    <section className="ntr-section ntr-contact" data-screen-label="Contact">
      <div className="ntr-contact-grid">
        <div className="ntr-contact-form-wrap">
          <div className="ntr-eyebrow ntr-eyebrow--inverse"><span className="ntr-rule ntr-rule--inverse" /> Rencontrons-nous</div>
          <h2 className="ntr-contact-h2">
            {witty ?
            <>Le café est offert.<br />Le <em style={{ color: "rgb(1, 26, 8)" }}>conseil</em> aussi.</> :
            <>Parlons de votre <em>projet.</em></>}
          </h2>
          <p className="ntr-contact-lead">Un message, un appel ou un café.
Maxime répond personnellement sous 24 h ouvrées.
          </p>
          {sent ?
          <div className="ntr-contact-sent">
              <div className="ntr-contact-sent-icon">✓</div>
              <h3>Message reçu, {form.name}.</h3>
              <p>Maxime vous recontacte sous 24 h ouvrées. À très vite.</p>
            </div> :

          <form className="ntr-contact-form" onSubmit={submit} noValidate>
              <div className="ntr-contact-row">
                <Field label="Nom" err={errors.name}>
                  <input className="ntr-contact-input" value={form.name} onChange={set('name')} placeholder="Votre nom" />
                </Field>
                <Field label="Téléphone" err={errors.phone}>
                  <input className="ntr-contact-input" value={form.phone} onChange={set('phone')} placeholder="06 00 00 00 00" />
                </Field>
              </div>
              <Field label="E-mail" err={errors.email}>
                <input className="ntr-contact-input" type="email" value={form.email} onChange={set('email')} placeholder="vous@exemple.fr" />
              </Field>
              <Field label="Adresse du bien (facultatif)" err={errors.addr}>
                <input className="ntr-contact-input" value={form.addr} onChange={set('addr')} placeholder="Commune, lieu-dit…" />
              </Field>
              <Field label="Votre message" err={errors.msg}>
                <textarea className="ntr-contact-input ntr-contact-textarea" rows="4" value={form.msg} onChange={set('msg')}
              placeholder="Dites-nous quelques mots de votre projet…" />
              </Field>
              <label className={'ntr-contact-consent' + (errors.consent ? ' is-err' : '')}>
                <input type="checkbox" checked={form.consent} onChange={set('consent')} />
                <span>J'accepte que NOSTERRA conserve ces informations pour me recontacter (RGPD).</span>
              </label>
              <div className="ntr-contact-submit-row">
                <button type="submit" className="ntr-btn ntr-btn--inverse">Envoyer le message</button>
                <span className="ntr-contact-foot">Réponse sous 24 h ouvrées</span>
              </div>
            </form>
          }
        </div>
        <div className="ntr-contact-side">
          <div className="ntr-contact-map">
            <MapMock />
            <div className="ntr-contact-pin">
              <div className="ntr-contact-pin-dot" />
              <div className="ntr-contact-pin-pulse" />
            </div>
            <div className="ntr-contact-map-tag">
              <div className="ntr-contact-map-tag-eyebrow">Bureau</div>
              <div className="ntr-contact-map-tag-name">Châteauneuf-de-Vernoux</div>
              <div className="ntr-contact-map-tag-meta">29 route des Cols · 07240</div>
            </div>
          </div>
          <div className="ntr-contact-coords">
            <div className="ntr-contact-coord">
              <div className="ntr-contact-coord-eyebrow">Téléphone</div>
              <a href="tel:0636250010" className="ntr-contact-coord-value">06 36 25 00 10</a>
            </div>
            <div className="ntr-contact-coord">
              <div className="ntr-contact-coord-eyebrow">E-mail</div>
              <a href="mailto:maxime@nosterra.fr" className="ntr-contact-coord-value">maxime@nosterra.fr</a>
            </div>
            <div className="ntr-contact-coord">
              <div className="ntr-contact-coord-eyebrow">Secteur</div>
              <div className="ntr-contact-coord-value">Bassin de Vernoux-en-Vivarais
Bassin de Lamastre
Ardèche
Drôme</div>
            </div>
          </div>
        </div>
      </div>
    </section>);}
function Field({ label, err, children }) {
  return (
    <label className={'ntr-contact-field' + (err ? ' is-err' : '')}>
      <span className="ntr-contact-field-label">{label}</span>
      {children}
      {err && <span className="ntr-contact-field-err">{err}</span>}
    </label>);

}

function MapMock() {
  return (
    <svg className="ntr-map-svg" viewBox="0 0 600 360" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <pattern id="ntrgrid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M40 0H0V40" fill="none" stroke="rgba(60,54,51,.06)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="600" height="360" fill="var(--creme-warm)" />
      <rect width="600" height="360" fill="url(#ntrgrid)" />
      {/* roads */}
      <path d="M0 220 Q160 180 280 200 T600 170" stroke="rgba(60,54,51,.18)" strokeWidth="14" fill="none" />
      <path d="M0 220 Q160 180 280 200 T600 170" stroke="var(--creme)" strokeWidth="6" fill="none" />
      <path d="M120 0 Q140 120 200 200 T260 360" stroke="rgba(60,54,51,.14)" strokeWidth="8" fill="none" />
      <path d="M450 0 Q420 100 380 180 T440 360" stroke="rgba(60,54,51,.12)" strokeWidth="6" fill="none" />
      {/* river */}
      <path d="M0 80 Q200 40 320 110 T600 60" stroke="rgba(200,117,76,.18)" strokeWidth="8" fill="none" />
      {/* parcels */}
      <rect x="40" y="50" width="60" height="40" fill="rgba(200,117,76,.08)" stroke="rgba(60,54,51,.1)" />
      <rect x="490" y="240" width="80" height="60" fill="rgba(200,117,76,.08)" stroke="rgba(60,54,51,.1)" />
      <rect x="60" y="280" width="100" height="60" fill="rgba(200,117,76,.06)" stroke="rgba(60,54,51,.1)" />
      {/* labels */}
      <text x="20" y="40" fontFamily="Montserrat, sans-serif" fontSize="10" fill="rgba(60,54,51,.4)" letterSpacing="1.5">VERNOUX</text>
      <text x="450" y="320" fontFamily="Montserrat, sans-serif" fontSize="10" fill="rgba(60,54,51,.4)" letterSpacing="1.5">LAMASTRE</text>
      <text x="380" y="80" fontFamily="Montserrat, sans-serif" fontSize="10" fill="rgba(60,54,51,.4)" letterSpacing="1.5">VALENCE</text>
    </svg>);

}

function Footer() {
  return (
    <footer className="ntr-footer" data-screen-label="Footer" style={{ backgroundColor: "rgb(1, 26, 8)", color: "rgb(249, 244, 238)" }}>
      <div className="ntr-footer-top">
        <div className="ntr-footer-mark">
          <div className="ntr-footer-brand">NOSTERRA</div>
          <div className="ntr-footer-rule" />
          <p className="ntr-footer-tag">L'immobilier, l'esprit léger.</p>
          <p className="ntr-footer-blurb">Agence immobilière indépendante fondée par Maxime TEJADA, diplômé notaire.
Secteur :
Bassin de Vernoux-en-Vivarais · Bassin de Lamastre · Ardèche · Drôme.
          </p>
        </div>
        <div className="ntr-footer-col">
          <div className="ntr-footer-h" style={{ color: "rgb(200, 117, 76)" }}>Contact</div>
          <p>Maxime TEJADA<br />06 36 25 00 10<br />maxime@nosterra.fr</p>
        </div>
        <div className="ntr-footer-col">
          <div className="ntr-footer-h" style={{ color: "rgb(200, 117, 76)" }}>Adresse</div>
          <p>29 route des Cols<br />07240 Châteauneuf-de-Vernoux<br />Carte T à venir</p>
        </div>
        <div className="ntr-footer-col">
          <div className="ntr-footer-h" style={{ color: "rgb(200, 117, 76)" }}>Suivez-nous</div>
          <div className="ntr-footer-social">
            <a href="#" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
              </svg>
            </a>
            <a href="#" aria-label="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M13.5 21v-7.5h2.55l.38-2.95H13.5V8.7c0-.85.24-1.43 1.46-1.43h1.56V4.62c-.27-.04-1.2-.12-2.28-.12-2.26 0-3.8 1.38-3.8 3.9v2.16H7.88v2.95h2.56V21h3.06z" />
              </svg>
            </a>
            <a href="#" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M21.6 7.2c-.23-.86-.9-1.53-1.76-1.76C18.28 5 12 5 12 5s-6.28 0-7.84.44C3.3 5.67 2.63 6.34 2.4 7.2 2 8.76 2 12 2 12s0 3.24.4 4.8c.23.86.9 1.53 1.76 1.76C5.72 19 12 19 12 19s6.28 0 7.84-.44c.86-.23 1.53-.9 1.76-1.76.4-1.56.4-4.8.4-4.8s0-3.24-.4-4.8zM10 15V9l5.2 3-5.2 3z" />
              </svg>
            </a>
            <a href="#" aria-label="X">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 3h3.3l-7.22 8.24L22 21h-6.62l-5.18-6.78L4.27 21H.97l7.72-8.82L.5 3h6.78l4.68 6.18L17.5 3zm-1.16 16.13h1.83L7.74 4.77H5.78l10.56 14.36z" />
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div className="ntr-footer-bottom">
        <span>© 2026 NOSTERRA · Agence immobilière indépendante</span>
        <span>
          <a href="#" className="ntr-footer-link" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('ntr-go', { detail: 'legal' })); }}>Mentions légales</a>
          {' · '}
          <a href="#" className="ntr-footer-link" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('ntr-go', { detail: 'legal' })); }}>Politique de confidentialité</a>
          {' · '}
          <a href="#" className="ntr-footer-link" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('ntr-go', { detail: 'legal' })); }}>CGV</a>
          {' · '}
          <a href="#" className="ntr-footer-link" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('ntr-go', { detail: 'honoraires' })); }}>Honoraires</a>
        </span>
      </div>
    </footer>);

}

window.Contact = Contact;
window.Footer = Footer;