"use client"

import { useState } from "react"
import Image from "next/image"

const C = {
  dark: "#1C2420",
  green: "#2D4A3E",
  greenLight: "#3D5C4E",
  cognac: "#A06040",
  cognacLight: "#C4845A",
  parchment: "#F0EBE1",
  parchmentMid: "#E8E0D4",
  parchmentDark: "#DDD4C4",
  brown: "#1A1210",
  textDark: "#2A2218",
  textMuted: "#7A6E62",
  white: "#FDFAF6",
  sage: "#EBF0ED",
}

function StrataDecor({ color = C.cognac, opacity = 0.2 }: { color?: string; opacity?: number }) {
  return (
    <svg width="280" height="40" viewBox="0 0 280 40" fill="none" aria-hidden="true">
      <path d="M0 10 Q70 5 140 12 Q210 19 280 8" stroke={color} strokeWidth="1.5" fill="none" opacity={opacity + 0.08} />
      <path d="M0 20 Q70 15 140 22 Q210 29 280 18" stroke={color} strokeWidth="1" fill="none" opacity={opacity} />
      <path d="M0 30 Q70 25 140 32 Q210 39 280 28" stroke={color} strokeWidth="0.75" fill="none" opacity={opacity - 0.08} />
    </svg>
  )
}

const body: React.CSSProperties = {
  fontFamily: "var(--font-dm-sans, system-ui, sans-serif)",
  color: C.textDark,
  lineHeight: 1.7,
}

const serif: React.CSSProperties = {
  fontFamily: "var(--font-cormorant, Georgia, serif)",
}

export default function OlgaDeepScanPage() {
  const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" })
  const [submitted, setSubmitted] = useState(false)

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }))
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitted(true)
  }

  return (
    <main style={body}>

      {/* ── HEADER ─────────────────────────────────────────────── */}
      <header style={{ background: C.dark, padding: "14px 32px" }}>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <p style={{
            ...serif,
            color: C.parchment,
            fontSize: "0.95rem",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            margin: 0,
            opacity: 0.75,
          }}>
            Olga Izieva &nbsp;·&nbsp; Skin Signal Method™
          </p>
        </div>
      </header>

      {/* ── HERO ───────────────────────────────────────────────── */}
      <section style={{ background: C.green, padding: "88px 32px 80px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>

          <span style={{
            display: "inline-block",
            background: C.cognac,
            color: C.white,
            fontSize: "0.7rem",
            fontWeight: 600,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            padding: "5px 14px",
            borderRadius: 2,
            marginBottom: 28,
          }}>
            Nur 5 Plätze verfügbar
          </span>

          <h1 style={{
            ...serif,
            color: C.white,
            fontSize: "clamp(2rem, 5vw, 3rem)",
            fontWeight: 500,
            lineHeight: 1.2,
            marginBottom: 24,
            maxWidth: 600,
          }}>
            In 90 Minuten weißt du endlich, was dein Körper dir die ganze Zeit sagen wollte
          </h1>

          <p style={{
            color: C.parchment,
            fontSize: "1.05rem",
            lineHeight: 1.75,
            marginBottom: 12,
            maxWidth: 540,
            opacity: 0.88,
          }}>
            Der Skin Signal Deep Scan — eine systemische Körperanalyse, die Haut, Hormone, Darm, Schlaf und Stress als ein zusammenhängendes Bild liest.
          </p>

          <p style={{
            color: C.parchment,
            fontSize: "0.85rem",
            marginBottom: 44,
            opacity: 0.6,
          }}>
            Olga Izieva &nbsp;·&nbsp; 33 Jahre klinische Erfahrung &nbsp;·&nbsp; Heilpraktikerin &nbsp;·&nbsp; Medical Cosmetology
          </p>

          <a
            href="#termin"
            style={{
              display: "inline-block",
              background: C.cognac,
              color: C.white,
              padding: "15px 38px",
              fontSize: "0.95rem",
              fontWeight: 600,
              textDecoration: "none",
              borderRadius: 3,
              letterSpacing: "0.04em",
            }}
          >
            Meinen Platz sichern →
          </a>

          <p style={{ color: C.parchment, fontSize: "0.8rem", marginTop: 14, opacity: 0.55 }}>
            Pilotpreis 197 € &nbsp;·&nbsp; persönlich bei Olga &nbsp;·&nbsp; 5 Plätze
          </p>

          <div style={{ marginTop: 48, opacity: 0.7 }}>
            <StrataDecor color={C.parchment} opacity={0.12} />
          </div>
        </div>
      </section>

      {/* ── PROBLEM ────────────────────────────────────────────── */}
      <section style={{ background: C.white, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>

          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
            Kommt dir das bekannt vor?
          </p>
          <h2 style={{
            ...serif,
            color: C.dark,
            fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)",
            fontWeight: 500,
            lineHeight: 1.25,
            marginBottom: 48,
            maxWidth: 560,
          }}>
            Du tust alles richtig — und trotzdem stimmt irgendetwas nicht.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
            {[
              ["Haut die müde wirkt", "Trotz Pflege, Supplements und clean eating — sie strahlt einfach nicht mehr so wie früher."],
              ["Ärzte sagen: alles normal", "Die Blutwerte sind unauffällig. Aber du fühlst, dass etwas nicht stimmt — und niemand kann dir sagen was."],
              ["Du hast schon alles probiert", "Keto, Yoga, Schlaftracking, Vitamin D, Kollagen. Jedes Mal kurze Besserung. Dann wieder Ausgangszustand."],
              ["Niemand sieht das Gesamtbild", "Jeder schaut auf seinen Bereich. Haut oder Hormone oder Darm. Nie alles zusammen. Nie du."],
            ].map(([title, text], i) => (
              <div key={i} style={{ padding: "24px 0", borderTop: `1.5px solid ${C.parchmentDark}` }}>
                <div style={{
                  ...serif,
                  color: C.cognac,
                  fontSize: "1.6rem",
                  fontWeight: 400,
                  marginBottom: 10,
                  opacity: 0.5,
                }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <p style={{ fontWeight: 600, color: C.textDark, fontSize: "0.95rem", marginBottom: 6 }}>{title}</p>
                <p style={{ color: C.textMuted, fontSize: "0.88rem", lineHeight: 1.65 }}>{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── EPIPHANY ───────────────────────────────────────────── */}
      <section style={{ background: C.sage, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <StrataDecor color={C.green} opacity={0.16} />
          <div style={{ height: 40 }} />

          <blockquote style={{
            ...serif,
            color: C.green,
            fontSize: "clamp(1.6rem, 4vw, 2.6rem)",
            fontStyle: "italic",
            fontWeight: 400,
            lineHeight: 1.35,
            marginBottom: 40,
            borderLeft: `3px solid ${C.cognac}`,
            paddingLeft: 32,
            maxWidth: 600,
          }}>
            „Die Haut ist keine Krankheit. Sie ist die Botschaft."
          </blockquote>

          <p style={{ color: C.textMuted, fontSize: "1rem", lineHeight: 1.8, marginBottom: 16, maxWidth: 560 }}>
            Olga Izieva sieht seit 33 Jahren, was Ärzte nicht sehen wollen: Hautprobleme sind keine Oberflächenfrage. Sie zeigen, was im Körper wirklich passiert.
          </p>
          <p style={{ color: C.textMuted, fontSize: "1rem", lineHeight: 1.8, maxWidth: 560 }}>
            Als ihre eigene Haut durch Stress zusammenbrach und niemand helfen konnte, entwickelte sie die Skin Signal Method™. Ein systemischer Ansatz, der Haut als das liest, was sie ist: das ehrlichste Diagnoseinstrument, das wir haben.
          </p>
        </div>
      </section>

      {/* ── VALUE STACK ────────────────────────────────────────── */}
      <section style={{ background: C.white, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>

          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
            Was du bekommst
          </p>
          <h2 style={{
            ...serif,
            color: C.dark,
            fontSize: "clamp(1.7rem, 3.5vw, 2.2rem)",
            fontWeight: 500,
            marginBottom: 8,
          }}>
            Skin Signal Deep Scan
          </h2>
          <p style={{ color: C.textMuted, fontSize: "0.95rem", marginBottom: 48 }}>
            90 Minuten. Vollständige systemische Analyse. Alles schriftlich.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 40, borderTop: `1.5px solid ${C.parchmentDark}` }}>
            {[
              ["Visuelle Körperanalyse", "Haut, Zunge, Nägel, Haare, Lippen — Olga liest alle äußeren Signale deines Körpers", "150 €"],
              ["Systemische Anamnese", "Hormone, Darm, Schlaf, Stress, Ernährung, Bewegung, Medikamente — beide vollständigen Fragebögen", "180 €"],
              ["Schriftliche System-Hypothese", "Olgas Einschätzung was systemisch hinter deinen Symptomen steckt — benannt, nicht vermutet", "220 €"],
              ["7-Tage-Sofortplan", "Drei bis fünf konkrete Schritte die heute noch beginnen können — schriftlich", "102 €"],
              ["Klare Einschätzung nächster Schritt", "Du weißt danach genau was als nächstes kommt — Olga schlägt die konkrete Richtung vor", "50 €"],
            ].map(([title, desc, value], i) => (
              <div key={i} style={{
                display: "flex",
                alignItems: "flex-start",
                justifyContent: "space-between",
                gap: 20,
                padding: "20px 0",
                borderBottom: `1px solid ${C.parchmentDark}`,
              }}>
                <div style={{ flex: 1 }}>
                  <p style={{ fontWeight: 600, color: C.textDark, fontSize: "0.93rem", marginBottom: 3 }}>{title}</p>
                  <p style={{ color: C.textMuted, fontSize: "0.84rem", lineHeight: 1.55 }}>{desc}</p>
                </div>
                <p style={{ color: C.cognac, fontWeight: 600, fontSize: "0.9rem", whiteSpace: "nowrap", paddingTop: 2 }}>
                  {value}
                </p>
              </div>
            ))}
          </div>

          {/* Preisblock */}
          <div style={{
            background: C.green,
            borderRadius: 6,
            padding: "32px 36px",
            marginBottom: 20,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
              <p style={{ color: C.parchment, fontSize: "0.88rem", opacity: 0.7 }}>Gesamtwert</p>
              <p style={{ ...serif, color: C.parchment, fontSize: "1.4rem", textDecoration: "line-through", opacity: 0.4 }}>702 €</p>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 8 }}>
              <p style={{ color: C.parchment, fontSize: "1rem", fontWeight: 600 }}>Pilotpreis — für 5 Bestandskundinnen</p>
              <p style={{ ...serif, color: C.white, fontSize: "2.6rem", fontWeight: 600, lineHeight: 1 }}>197 €</p>
            </div>
          </div>

          <p style={{ color: C.textMuted, fontSize: "0.83rem", lineHeight: 1.65, fontStyle: "italic", marginBottom: 40 }}>
            Das ist der erste strukturierte Durchlauf der Skin Signal Method™. Du bekommst die vollständige Analyse. Im Gegenzug nimmt sich Olga die Zeit, die sie im regulären Praxiskontext nicht hätte.
          </p>

          <div style={{ textAlign: "center" }}>
            <a
              href="#termin"
              style={{
                display: "inline-block",
                background: C.cognac,
                color: C.white,
                padding: "15px 42px",
                fontSize: "0.95rem",
                fontWeight: 600,
                textDecoration: "none",
                borderRadius: 3,
                letterSpacing: "0.04em",
              }}
            >
              Meinen Platz sichern →
            </a>
          </div>
        </div>
      </section>

      {/* ── TRANSFORMATION ─────────────────────────────────────── */}
      <section style={{ background: C.parchmentMid, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 24 }}>
            Was danach anders ist
          </p>

          <div style={{ borderLeft: `3px solid ${C.green}`, paddingLeft: 32 }}>
            <p style={{ ...serif, color: C.dark, fontSize: "clamp(1.2rem, 2.5vw, 1.5rem)", lineHeight: 1.7, marginBottom: 20, fontStyle: "italic" }}>
              „Nach diesem Gespräch weißt du endlich, was dein Körper dir die ganze Zeit sagen wollte."
            </p>
            <p style={{ color: C.textMuted, fontSize: "0.97rem", lineHeight: 1.8, marginBottom: 16 }}>
              Die Haut die müde wirkt, die Energie die fehlt, das Gewicht das sich trotz allem nicht bewegt — du verstehst jetzt das Muster dahinter. Olga hat dich als Gesamtbild gelesen: Haut, Zunge, Nägel, Haare, Darm, Hormone, Schlaf, Stress — alles zusammen.
            </p>
            <p style={{ color: C.textMuted, fontSize: "0.97rem", lineHeight: 1.8 }}>
              Du verlässt das Gespräch nicht mit einem weiteren Ratschlag. Sondern mit einer klaren Einschätzung was systemisch hinter deinen Symptomen steckt — und einem 7-Tage-Plan der heute noch startet.{" "}
              <strong style={{ color: C.dark }}>Dein Körper war nie dein Feind. Er hat nur auf Klarheit gewartet.</strong>
            </p>
          </div>
        </div>
      </section>

      {/* ── ÜBER OLGA ──────────────────────────────────────────── */}
      <section style={{ background: C.white, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 40 }}>
            Über Olga Izieva
          </p>

          <div style={{
            display: "grid",
            gridTemplateColumns: "200px 1fr",
            gap: 48,
            alignItems: "start",
          }}
          className="olga-bio-grid"
          >
            {/* Foto */}
            <div style={{ position: "relative" }}>
              <div style={{
                position: "relative",
                width: 200,
                height: 240,
                borderRadius: 4,
                overflow: "hidden",
                boxShadow: "0 8px 32px rgba(28,36,32,0.12)",
              }}>
                <Image
                  src="/olga.jpg"
                  alt="Olga Izieva"
                  fill
                  style={{ objectFit: "cover", objectPosition: "center top" }}
                  priority
                />
              </div>
              <div style={{
                position: "absolute",
                bottom: -12,
                right: -12,
                width: 80,
                height: 80,
                borderRadius: "50%",
                background: C.parchment,
                border: `3px solid ${C.cognac}`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                ...serif,
                color: C.cognac,
                fontSize: "0.65rem",
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                textAlign: "center",
                lineHeight: 1.4,
                fontWeight: 500,
                padding: 4,
              }}>
                33 Jahre<br />Erfahrung
              </div>
            </div>

            {/* Text */}
            <div>
              <h2 style={{
                ...serif,
                color: C.dark,
                fontSize: "clamp(1.6rem, 3vw, 2.2rem)",
                fontWeight: 500,
                marginBottom: 20,
                lineHeight: 1.2,
              }}>
                Die Frau, die deinen Körper liest wie niemand sonst
              </h2>

              <p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.8, marginBottom: 16 }}>
                Olga Izieva hat 33 Jahre als Kosmetikerin gearbeitet — und dabei täglich gesehen, was Ärzte nicht sehen wollten: Die Haut ist kein kosmetisches Problem. Sie ist ein systemisches Signal.
              </p>
              <p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.8, marginBottom: 28 }}>
                Sie ist Heilpraktikerin, hat Zertifikate in Ernährungswissenschaft, Psychologie und Medical Cosmetology. Sie koordiniert Ärzte, Spezialisten und Coaches — der einzige Hub, der den visuellen Diagnosezugang der Kosmetik mit systemischer Medizin verbindet.
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                  "33 Jahre klinische Praxis als Kosmetikerin",
                  "Ausgebildete Heilpraktikerin",
                  "Zertifikate in Ernährungswissenschaft & Psychologie",
                  "Medical Cosmetology",
                  "Skin Signal Method™ — aus der eigenen Praxis heraus entwickelt",
                ].map((point, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <span style={{ color: C.cognac, marginTop: 2, fontSize: "0.9rem" }}>—</span>
                    <p style={{ color: C.textDark, fontSize: "0.88rem", lineHeight: 1.5 }}>{point}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── GARANTIE ───────────────────────────────────────────── */}
      <section style={{ background: C.parchment, padding: "80px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
            Olgas Versprechen
          </p>
          <h2 style={{
            ...serif,
            color: C.dark,
            fontSize: "clamp(1.6rem, 3.5vw, 2.2rem)",
            fontWeight: 500,
            marginBottom: 48,
          }}>
            Ohne Wenn und Aber.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
            {[
              {
                label: "Klarheits-Garantie",
                text: "Wenn du nach unserem Gespräch nicht weißt, was dein nächster konkreter Schritt ist — wir machen es nochmal. Kostenlos.",
              },
              {
                label: "7-Tage-Garantie",
                text: "Setz den 7-Tage-Sofortplan um. Wenn du nach einer Woche keine spürbare Veränderung merkst, bekommst du ein kostenloses 20-Minuten-Nachgespräch dazu.",
              },
            ].map((g, i) => (
              <div key={i} style={{
                background: C.white,
                borderRadius: 4,
                padding: "28px 28px",
                borderTop: `3px solid ${C.cognac}`,
              }}>
                <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 14 }}>
                  {g.label}
                </p>
                <p style={{ ...serif, color: C.dark, fontSize: "1.05rem", lineHeight: 1.65, fontStyle: "italic" }}>
                  „{g.text}"
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── ORDER FORM ─────────────────────────────────────────── */}
      <section id="termin" style={{ background: C.sage, padding: "88px 32px 96px" }}>
        <div style={{ maxWidth: 560, margin: "0 auto" }}>
          <p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
            Platz sichern
          </p>
          <h2 style={{
            ...serif,
            color: C.dark,
            fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)",
            fontWeight: 500,
            marginBottom: 8,
            lineHeight: 1.2,
          }}>
            Dein Platz im Skin Signal Deep Scan
          </h2>
          <p style={{ color: C.textMuted, fontSize: "0.93rem", marginBottom: 6, lineHeight: 1.65 }}>
            Füll das Formular aus — Olga meldet sich persönlich bei dir für die Terminvereinbarung.
          </p>
          <p style={{ color: C.cognac, fontSize: "0.85rem", fontWeight: 600, marginBottom: 44 }}>
            Pilotpreis 197 € &nbsp;·&nbsp; 90 Minuten &nbsp;·&nbsp; 5 Plätze
          </p>

          {submitted ? (
            <div style={{
              background: C.white,
              borderRadius: 6,
              padding: "40px 36px",
              textAlign: "center",
              borderTop: `3px solid ${C.green}`,
            }}>
              <p style={{
                ...serif,
                color: C.green,
                fontSize: "1.9rem",
                fontStyle: "italic",
                marginBottom: 12,
              }}>
                Anfrage eingegangen.
              </p>
              <p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.7 }}>
                Olga meldet sich innerhalb von 24 Stunden persönlich bei dir mit allen Details zum Termin.
              </p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                { name: "name", label: "Dein Name", type: "text", placeholder: "Vorname Nachname", required: true },
                { name: "email", label: "E-Mail-Adresse", type: "email", placeholder: "deine@email.de", required: true },
                { name: "phone", label: "Telefonnummer (optional)", type: "tel", placeholder: "+49 ...", required: false },
              ].map((field) => (
                <div key={field.name}>
                  <label style={{
                    display: "block",
                    color: C.textDark,
                    fontSize: "0.85rem",
                    fontWeight: 600,
                    marginBottom: 7,
                    letterSpacing: "0.02em",
                  }}>
                    {field.label}
                  </label>
                  <input
                    type={field.type}
                    name={field.name}
                    value={formData[field.name as keyof typeof formData]}
                    onChange={handleChange}
                    placeholder={field.placeholder}
                    required={field.required}
                    style={{
                      width: "100%",
                      padding: "12px 16px",
                      border: `1.5px solid ${C.parchmentDark}`,
                      borderRadius: 3,
                      background: C.white,
                      color: C.textDark,
                      fontSize: "0.95rem",
                      outline: "none",
                      boxSizing: "border-box",
                    }}
                  />
                </div>
              ))}

              <div>
                <label style={{
                  display: "block",
                  color: C.textDark,
                  fontSize: "0.85rem",
                  fontWeight: 600,
                  marginBottom: 7,
                  letterSpacing: "0.02em",
                }}>
                  Was beschäftigt dich gerade am meisten? (optional)
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  rows={4}
                  placeholder="Beschreib kurz was dich beschäftigt — Olga bereitet sich damit auf das Gespräch vor."
                  style={{
                    width: "100%",
                    padding: "12px 16px",
                    border: `1.5px solid ${C.parchmentDark}`,
                    borderRadius: 3,
                    background: C.white,
                    color: C.textDark,
                    fontSize: "0.95rem",
                    outline: "none",
                    resize: "vertical",
                    boxSizing: "border-box",
                    fontFamily: "var(--font-dm-sans, system-ui, sans-serif)",
                  }}
                />
              </div>

              <button
                type="submit"
                style={{
                  background: C.cognac,
                  color: C.white,
                  padding: "15px 36px",
                  fontSize: "0.95rem",
                  fontWeight: 600,
                  border: "none",
                  borderRadius: 3,
                  cursor: "pointer",
                  letterSpacing: "0.04em",
                  marginTop: 4,
                  alignSelf: "flex-start",
                }}
              >
                Anfrage absenden →
              </button>

              <p style={{ color: C.textMuted, fontSize: "0.79rem", lineHeight: 1.55 }}>
                Kein automatischer Kauf. Olga meldet sich persönlich. Zahlung erfolgt nach Terminbestätigung.
              </p>
            </form>
          )}
        </div>
      </section>

      {/* ── FOOTER ─────────────────────────────────────────────── */}
      <footer style={{ background: C.dark, padding: "24px 32px" }}>
        <div style={{ maxWidth: 720, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
          <p style={{ ...serif, color: C.parchment, fontSize: "0.95rem", opacity: 0.65, letterSpacing: "0.06em" }}>
            Olga Izieva · Skin Signal Method™
          </p>
          <p style={{ color: C.parchment, fontSize: "0.75rem", opacity: 0.35 }}>
            Impressum · Datenschutz
          </p>
        </div>
      </footer>

    </main>
  )
}