/* Contact (form + validation) · Footer · Cookie */

/* ============================================================
   Google-Apps-Script-Webapp-URL
   ——————————————————————————————————————————————————
   Anleitung: siehe google-apps-script.gs im Projektordner.
   Hier nach Deployment die generierte /exec-URL eintragen.
   ============================================================ */
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/REPLACE_WITH_DEPLOYMENT_ID/exec';

function Contact() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [invalid, setInvalid] = React.useState({});
  const [type, setType] = React.useState(window.__ottomanService || '');
  const [prefilled, setPrefilled] = React.useState(false);

  // Preselect trade when arriving from a project's "Ähnliches Projekt anfragen"
  React.useEffect(() => {
    const onSvc = (e) => {
      const v = e.detail || '';
      setType(v);
      setInvalid((prev) => { const n = { ...prev }; delete n['f-type']; return n; });
      if (v) { setPrefilled(true); setTimeout(() => setPrefilled(false), 1600); }
    };
    window.addEventListener('ottoman:service', onSvc);
    if (window.__ottomanService) setType(window.__ottomanService);
    return () => window.removeEventListener('ottoman:service', onSvc);
  }, []);

  async function submit(e) {
    e.preventDefault();
    const f = e.target;
    // Pflichtfelder: Name, E-Mail, Projektart (Nachricht zusätzlich validiert)
    const req = ['f-name', 'f-email', 'f-type'];
    const bad = {};
    req.forEach((id) => {
      const el = f.elements[id];
      const v = (el.value || '').trim();
      if (!v) bad[id] = true;
      if (id === 'f-email' && v && !/^[^@]+@[^@]+\.[^@]+$/.test(v)) bad[id] = true;
    });
    setInvalid(bad);
    if (Object.keys(bad).length > 0) return;

    setStatus('sending');
    try {
      const fd = new FormData(f);
      // URLSearchParams → application/x-www-form-urlencoded:
      // kein CORS-Preflight nötig, Apps Script liest die Felder via e.parameter.
      const body = new URLSearchParams();
      for (const [k, v] of fd.entries()) body.append(k, v);

      // Apps Script Web-Apps antworten via 302-Redirect auf
      // script.googleusercontent.com — diese Antwort sendet keine
      // Access-Control-Allow-Origin-Header. Mit mode:'no-cors' geht
      // der POST trotzdem durch, wir können die Antwort nur nicht
      // auslesen ("opaque response"). Das reicht: kommt der Request
      // ohne Netzwerkfehler durch, hat Apps Script die Mail bereits
      // versendet.
      await fetch(GOOGLE_SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        body: body,
      });
      setStatus('sent');
      f.reset();
      setType('');
    } catch (err) {
      console.error('Formular-Fehler:', err);
      setStatus('error');
    }
  }

  return (
    <section id="contact" className="cta-section" data-screen-label="Contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-info">
            <span className="section-label" data-reveal>VI · Kontakt</span>
            <h2 data-reveal style={{ '--reveal-delay': '80ms' }}>Projekt <em>starten.</em></h2>
            <p className="response" data-reveal style={{ '--reveal-delay': '160ms' }}>Erzählen Sie uns von Ihrem Vorhaben. Wir melden uns innerhalb von 24 Stunden mit einer ersten Einschätzung — und einem Termin für die Vor-Ort-Begehung, wenn es passt.</p>
            <div className="contact-meta">
              <div className="row" data-reveal><span className="k">Adresse</span><span className="v">Freiligrathstraße 25<br />41238 Mönchengladbach</span></div>
              <div className="row" data-reveal style={{ '--reveal-delay': '80ms' }}><span className="k">E-Mail</span><span className="v">info@ottoman.pro</span></div>
              <div className="row" data-reveal style={{ '--reveal-delay': '160ms' }}><span className="k">Region</span><span className="v">Großraum Düsseldorf · NRW</span></div>
            </div>
          </div>

          <div data-reveal style={{ '--reveal-delay': '200ms' }}>
            {status !== 'sent' ? (
              <form className="form" onSubmit={submit} noValidate>
                <div className="row-2">
                  <div className={'field' + (invalid['f-name'] ? ' invalid' : '')}>
                    <label htmlFor="f-name">Name <span className="req" aria-hidden="true">*</span></label>
                    <input id="f-name" name="name" type="text" placeholder="Vor- und Nachname" required autoComplete="name" />
                    <span className="err">Bitte Namen angeben</span>
                  </div>
                  <div className={'field' + (invalid['f-email'] ? ' invalid' : '')}>
                    <label htmlFor="f-email">E-Mail <span className="req" aria-hidden="true">*</span></label>
                    <input id="f-email" name="email" type="email" placeholder="ihre@adresse.de" required autoComplete="email" />
                    <span className="err">Gültige E-Mail nötig</span>
                  </div>
                </div>
                <div className="row-2">
                  <div className="field">
                    <label htmlFor="f-phone">Telefon</label>
                    <input id="f-phone" name="phone" type="tel" placeholder="optional" autoComplete="tel" />
                  </div>
                  <div className={'field' + (invalid['f-type'] ? ' invalid' : '') + (prefilled ? ' prefilled' : '')}>
                    <label htmlFor="f-type">Projektart <span className="req" aria-hidden="true">*</span></label>
                    <select id="f-type" name="projektart" value={type} onChange={(e) => setType(e.target.value)} required>
                      <option value="">Bitte wählen</option>
                      <option>Abriss &amp; Entkernung</option>
                      <option>Sanierung &amp; Renovierung</option>
                      <option>Statik</option>
                      <option>Trockenbau</option>
                      <option>Innenausbau</option>
                      <option>Außengerüst</option>
                      <option>Malerarbeiten</option>
                      <option>Bodenarbeiten</option>
                      <option>Reinigung</option>
                      <option>Komplettprojekt / Mehrere Gewerke</option>
                      <option>Sonstiges</option>
                    </select>
                    <span className="err">Bitte auswählen</span>
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="f-msg">Nachricht</label>
                  <textarea id="f-msg" name="nachricht" placeholder="Kurz das Objekt, der Umfang, der gewünschte Zeitrahmen — alles weitere klären wir gemeinsam."></textarea>
                </div>
                {/* Honeypot — normal weggeklappt, Füllung deutet auf Bot hin und FormSubmit verwirft */}
                <input type="text" name="_honey" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
                <div className="submit-row">
                  <span className="privacy">Mit dem Absenden stimmen Sie unserer Datenschutzerklärung zu.</span>
                  <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
                    <span className="dot"></span>
                    {status === 'sending' ? 'Wird gesendet …' : 'Anfrage senden'}
                  </button>
                </div>
                {status === 'error' && (
                  <div className="form-error-banner" role="alert">
                    Senden hat nicht geklappt. Bitte direkt an <a href="mailto:info@ottoman.pro">info@ottoman.pro</a> mailen.
                  </div>
                )}
              </form>
            ) : (
              <div className="form-success">
                <div className="check">✓</div>
                <h4>Anfrage erhalten.</h4>
                <p>Wir melden uns innerhalb von 24 Stunden bei Ihnen zurück.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ onNav }) {
  const [legal, setLegal] = React.useState(null); // 'impressum' | 'datenschutz' | null
  return (
    <>
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo-wordmark.png" alt="Ottoman Projekts" />
            <p>Bau-, Sanierungs- und Gebäudeservice im Großraum Düsseldorf und Mönchengladbach. Mit eigenem Team — seit über zehn Jahren.</p>
          </div>
          <div>
            <h5>Leistungen</h5>
            <ul>
              <li><a onClick={() => onNav('services')}>Abriss &amp; Entkernung</a></li>
              <li><a onClick={() => onNav('services')}>Sanierung</a></li>
              <li><a onClick={() => onNav('services')}>Trockenbau</a></li>
              <li><a onClick={() => onNav('services')}>Malerarbeiten</a></li>
              <li><a onClick={() => onNav('services')}>Bodenarbeiten</a></li>
              <li><a onClick={() => onNav('services')}>Reinigung</a></li>
            </ul>
          </div>
          <div>
            <h5>Unternehmen</h5>
            <ul>
              <li><a onClick={() => onNav('about')}>Über uns</a></li>
              <li><a onClick={() => onNav('projects')}>Projekte</a></li>
              <li><a onClick={() => onNav('process')}>Ablauf</a></li>
              <li><a onClick={() => onNav('contact')}>Kontakt</a></li>
            </ul>
          </div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><a href="mailto:info@ottoman.pro">info@ottoman.pro</a></li>
              <li>Freiligrathstr. 25</li>
              <li>41238 Mönchengladbach</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Ottoman Projekts GmbH · Alle Rechte vorbehalten</span>
          <span>
            <a href="#impressum" onClick={(e) => { e.preventDefault(); setLegal('impressum'); }}>Impressum</a>
            &nbsp;·&nbsp;
            <a href="#datenschutz" onClick={(e) => { e.preventDefault(); setLegal('datenschutz'); }}>Datenschutz</a>
          </span>
        </div>
      </div>
    </footer>
    {legal === 'impressum' && <ImpressumModal onClose={() => setLegal(null)} />}
    {legal === 'datenschutz' && <DatenschutzModal onClose={() => setLegal(null)} />}
    </>
  );
}

/* ---------- Impressum Modal ----------------------------------- */
function ImpressumModal({ onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [onClose]);
  return (
    <div className="legal-modal" role="dialog" aria-modal="true" aria-labelledby="impressum-title" onClick={onClose}>
      <div className="legal-card" onClick={(e) => e.stopPropagation()}>
        <button className="legal-x" onClick={onClose} aria-label="Schließen">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </button>
        <div className="legal-body">
          <span className="legal-eyebrow">Rechtliches</span>
          <h3 id="impressum-title">Impressum</h3>
          <p className="legal-lede">Angaben gemäß § 5 TMG</p>

          <div className="legal-grid">
            <section className="legal-block">
              <h4>Anbieter</h4>
              <p>
                Ottoman Projekts GmbH<br/>
                Freiligrathstr. 25<br/>
                41238 Mönchengladbach<br/>
                Deutschland
              </p>
            </section>

            <section className="legal-block">
              <h4>Vertretungsberechtigt</h4>
              <p>Geschäftsführer<br/>Mustafa Nalbant</p>
            </section>

            <section className="legal-block">
              <h4>Kontakt</h4>
              <p>
                E-Mail &nbsp;<a href="mailto:info@ottoman.pro">info@ottoman.pro</a>
              </p>
            </section>

            <section className="legal-block">
              <h4>Verantwortlich für den Inhalt</h4>
              <p>nach § 18 Abs. 2 MStV<br/>Mustafa Nalbant<br/>Anschrift wie oben</p>
            </section>

            <section className="legal-block">
              <h4>Registereintrag</h4>
              <p>
                Eintragung im Handelsregister<br/>
                Registergericht &nbsp;Amtsgericht Mönchengladbach<br/>
                Handelsregisternummer &nbsp;HRB [Nummer]
              </p>
            </section>
          </div>

          <div className="legal-foot">
            <span className="legal-tag">© 2026 Ottoman Projekts GmbH</span>
            <button className="btn btn-primary" onClick={onClose}><span className="dot"></span>Schließen</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Cookie() {
  const [open, setOpen] = React.useState(true);
  if (!open) return null;
  return (
    <div className="cookie" role="dialog" aria-label="Cookie-Hinweis">
      <span>Diese Website nutzt nur technisch notwendige Cookies. Mehr in der Datenschutzerklärung.</span>
      <div className="cookie-actions">
        <button onClick={() => setOpen(false)}>Ablehnen</button>
        <button className="accept" onClick={() => setOpen(false)}>Akzeptieren</button>
      </div>
    </div>
  );
}

/* ---------- Datenschutz Modal --------------------------------- */
function DatenschutzModal({ onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
  }, [onClose]);
  return (
    <div className="legal-modal" role="dialog" aria-modal="true" aria-labelledby="datenschutz-title" onClick={onClose}>
      <div className="legal-card legal-card-wide" onClick={(e) => e.stopPropagation()}>
        <button className="legal-x" onClick={onClose} aria-label="Schließen">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
        </button>
        <div className="legal-body">
          <span className="legal-eyebrow">Rechtliches</span>
          <h3 id="datenschutz-title">Datenschutzerklärung</h3>
          <p className="legal-lede">Stand &middot; Juni 2026</p>

          <div className="legal-prose">
            <section>
              <h4>1. Verantwortlicher</h4>
              <p>
                Verantwortlich für die Datenverarbeitung auf dieser Website im Sinne der Datenschutz-Grundverordnung (DSGVO) ist:<br/>
                Ottoman Projekts GmbH, vertreten durch den Geschäftsführer Mustafa Nalbant,
                Freiligrathstr. 25, 41238 Mönchengladbach, Deutschland.<br/>
                E-Mail: <a href="mailto:info@ottoman.pro">info@ottoman.pro</a>.
              </p>
            </section>

            <section>
              <h4>2. Allgemeine Hinweise</h4>
              <p>
                Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen
                Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften (DSGVO, BDSG, TTDSG)
                sowie dieser Datenschutzerklärung. Personenbezogene Daten sind Daten, mit denen Sie persönlich
                identifiziert werden können. Eine Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener
                Daten möglich.
              </p>
            </section>

            <section>
              <h4>3. Zugriffsdaten und Server-Logfiles</h4>
              <p>
                Beim Besuch unserer Website erhebt der Provider automatisch Informationen, die Ihr Browser übermittelt
                und in Server-Logfiles speichert: Browsertyp und -version, verwendetes Betriebssystem, Referrer-URL,
                Hostname des zugreifenden Rechners, Uhrzeit der Serveranfrage und IP-Adresse. Eine Zusammenführung
                dieser Daten mit anderen Datenquellen wird nicht vorgenommen. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f
                DSGVO (berechtigtes Interesse an stabiler und sicherer Bereitstellung der Website). Die Daten werden
                nach spätestens 30 Tagen gelöscht, soweit keine sicherheitsrelevanten Vorfälle dokumentiert werden müssen.
              </p>
            </section>

            <section>
              <h4>4. Kontaktaufnahme</h4>
              <p>
                Wenn Sie uns über das Kontaktformular, per E-Mail oder per Telefon kontaktieren, werden Ihre Angaben
                (Name, E-Mail-Adresse, Telefonnummer, Projektart und Nachricht) zur Bearbeitung Ihrer Anfrage und für
                den Fall von Anschlussfragen bei uns gespeichert. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO
                (Vertragsanbahnung) bzw. Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an der Beantwortung Ihrer
                Anfrage). Diese Daten geben wir nicht ohne Ihre Einwilligung weiter. Sie werden gelöscht, sobald sie
                für den Zweck der Speicherung nicht mehr erforderlich sind oder Sie uns zur Löschung auffordern,
                soweit keine gesetzlichen Aufbewahrungspflichten entgegenstehen.
              </p>
            </section>

            <section>
              <h4>5. Cookies</h4>
              <p>
                Diese Website verwendet ausschließlich technisch notwendige Cookies, die für den Betrieb der Seite
                erforderlich sind (z. B. Speicherung Ihrer Cookie-Einwilligung). Rechtsgrundlage ist § 25 Abs. 2 Nr. 2
                TTDSG. Es werden keine Tracking- oder Marketing-Cookies eingesetzt. Sie können Ihren Browser so
                einstellen, dass Sie über das Setzen von Cookies informiert werden und einzeln über deren Annahme
                entscheiden.
              </p>
            </section>

            <section>
              <h4>6. Hosting</h4>
              <p>
                Unsere Website wird auf Servern eines Dienstleisters innerhalb der Europäischen Union gehostet. Mit
                dem Anbieter besteht ein Auftragsverarbeitungsvertrag nach Art. 28 DSGVO. Die Verarbeitung erfolgt
                auf Grundlage unseres berechtigten Interesses an einer sicheren und zuverlässigen Bereitstellung der
                Website (Art. 6 Abs. 1 lit. f DSGVO).
              </p>
            </section>

            <section>
              <h4>7. SSL-/TLS-Verschlüsselung</h4>
              <p>
                Diese Seite nutzt aus Sicherheitsgründen eine SSL-/TLS-Verschlüsselung. Eine verschlüsselte Verbindung
                erkennen Sie an der Adresszeile des Browsers („https://“) und am Schloss-Symbol.
              </p>
            </section>

            <section>
              <h4>8. Ihre Rechte als betroffene Person</h4>
              <p>
                Ihnen stehen jederzeit folgende Rechte zu: Auskunft über Ihre gespeicherten Daten (Art. 15 DSGVO),
                Berichtigung unrichtiger Daten (Art. 16), Löschung (Art. 17), Einschränkung der Verarbeitung (Art. 18),
                Datenübertragbarkeit (Art. 20) sowie Widerspruch gegen die Verarbeitung (Art. 21). Eine erteilte
                Einwilligung können Sie jederzeit mit Wirkung für die Zukunft widerrufen. Wenden Sie sich hierzu
                formlos an die im Impressum angegebenen Kontaktdaten.
              </p>
            </section>

            <section>
              <h4>9. Beschwerderecht bei der Aufsichtsbehörde</h4>
              <p>
                Sie haben das Recht, sich bei einer Datenschutz-Aufsichtsbehörde zu beschweren (Art. 77 DSGVO).
                Zuständig ist die Landesbeauftragte für Datenschutz und Informationsfreiheit Nordrhein-Westfalen,
                Kavalleriestraße 2–4, 40213 Düsseldorf.
              </p>
            </section>

            <section>
              <h4>10. Änderungen dieser Datenschutzerklärung</h4>
              <p>
                Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen rechtlichen
                Anforderungen entspricht oder um Änderungen unserer Leistungen umzusetzen. Für Ihren erneuten Besuch
                gilt dann die neue Datenschutzerklärung.
              </p>
            </section>
          </div>

          <div className="legal-foot">
            <span className="legal-tag">© 2026 Ottoman Projekts GmbH</span>
            <button className="btn btn-primary" onClick={onClose}><span className="dot"></span>Schließen</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Contact, Footer, Cookie, ImpressumModal, DatenschutzModal });