function AboutSection() {
  return (
    <section id="studio" style={{
      background: "var(--ink)", color: "var(--cream)",
      paddingTop: 56, paddingBottom: 64,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 20px" }}>
        <h2 className="serif" style={{
          fontSize: "clamp(34px, 9vw, 54px)", lineHeight: 1.02,
          fontWeight: 300, letterSpacing: "-.01em", color: "var(--cream)",
          textWrap: "balance",
          paddingBottom: ".08em",
        }}>
          Über <span className="italic" style={{ color: "var(--rose)" }}>mich</span>
        </h2>

        <div className="about-grid" style={{
          marginTop: 28,
          display: "grid", gridTemplateColumns: "1fr", gap: 28,
          alignItems: "start",
        }}>
          <div style={{
            position: "relative",
            aspectRatio: "1/1",
            width: "100%",
            maxWidth: 420,
            overflow: "hidden",
            background: "rgba(244,234,220,.06)",
            borderRadius: "50%",
          }}>
            <img
              src="assets/portrait.webp"
              alt="Porträt der Kosmetikerin"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              loading="lazy"
            />
          </div>

          <div>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "rgba(244,234,220,.85)", maxWidth: 560 }}>
              Ich bin <span style={{ color: "var(--cream)" }}>[Name]</span>, Kosmetikerin aus
              Berlin mit <span style={{ color: "var(--cream)" }}>[X]</span> Jahren Erfahrung.
              Meine Leidenschaft gilt gesunder, strahlender Haut — ganz gleich, welches
              Anliegen du mitbringst.
            </p>
            <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.7, color: "rgba(244,234,220,.85)", maxWidth: 560 }}>
              Bei mir bist du in guten Händen: Ich nehme mir Zeit für dich, arbeite mit
              hochwertigen Produkten und berate dich ehrlich — ohne Druck, ohne
              Verkaufsgespräch.
            </p>

            <div style={{ marginTop: 26, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, maxWidth: 440 }}>
              {[
                ["Ausbildung", "Kosmetik-Institut"],
                ["Spezialisiert", "Problemhaut & IPL"],
                ["Seit", "2017 in Berlin"],
                ["Termine", "1:1, nach Vereinbarung"],
              ].map(([k, v]) => (
                <div key={k} style={{ borderTop: "1px solid rgba(244,234,220,.14)", paddingTop: 10 }}>
                  <div style={{ fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "rgba(244,234,220,.5)" }}>{k}</div>
                  <div className="serif" style={{ fontSize: 17, marginTop: 5, fontStyle: "italic" }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (min-width: 880px) {
          .about-grid { grid-template-columns: .8fr 1.2fr !important; gap: 56px !important; align-items: center; }
        }
      `}</style>
    </section>
  );
}

function AblaufSection() {
  const steps = [
    { n: "I.", title: "Ankommen", body: "Ankommen, kurz durchatmen und in Ruhe Platz nehmen." },
    { n: "II.", title: "Anamnese", body: "Wir besprechen deine Haut, deine Wünsche und das passende Vorgehen." },
    { n: "III.", title: "Behandlung", body: "Das abgestimmte Protokoll — präzise ausgeführt, stets im Austausch mit dir." },
  ];
  return (
    <section id="ablauf" style={{ paddingTop: 56, paddingBottom: 64 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 20px" }}>
        <h2 className="serif" style={{
          fontSize: "clamp(32px, 9vw, 54px)", fontWeight: 300, lineHeight: 1.02,
          letterSpacing: "-.01em", textWrap: "balance", maxWidth: 780,
          paddingBottom: ".08em",
        }}>
          So läuft eine <span className="italic" style={{ color: "var(--rose-deep)" }}>Behandlung</span> ab.
        </h2>

        <div className="ablauf-grid" style={{
          marginTop: 32,
          display: "grid", gridTemplateColumns: "1fr", gap: 1,
          background: "var(--hair)",
          border: "1px solid var(--hair)",
        }}>
          {steps.map((s) => (
            <div key={s.n} style={{ background: "var(--cream)", padding: "22px 20px 24px", minHeight: 160 }}>
              <div className="serif italic" style={{ fontSize: 30, color: "var(--rose-deep)", lineHeight: 1 }}>{s.n}</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 12, fontWeight: 400 }}>{s.title}</div>
              <p style={{ marginTop: 8, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)" }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (min-width: 720px) {
          .ablauf-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2px !important; }
        }
      `}</style>
    </section>
  );
}

function QuoteSection() {
  return (
    <section style={{ padding: "32px 20px 64px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <svg width="28" height="22" viewBox="0 0 28 22" style={{ opacity: .35 }}>
          <path d="M0 22V14C0 6 4 1 12 0L13 3C8 4 5 7 5 11H12V22H0ZM15 22V14C15 6 19 1 27 0L28 3C23 4 20 7 20 11H27V22H15Z" fill="#B88A6D"/>
        </svg>
        <p className="serif italic" style={{
          fontSize: "clamp(24px, 5vw, 36px)",
          lineHeight: 1.28, fontWeight: 300,
          color: "var(--ink)", marginTop: 18,
          textWrap: "balance",
        }}>
          „Ich fand es — wie soll ich sagen — durchaus ansprechend. Meine Haut danach ebenfalls.“
        </p>
        <div style={{ marginTop: 18, fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--ink-3)" }}>
          Frau H., Stammgast seit 2021
        </div>
      </div>
    </section>
  );
}

const ROTATOR_WORDS = [
  "einen Termin",
  "strahlende Haut",
  "ein neues Lebensgefühl",
  "den ersten Eindruck",
  "mehr Selbstvertrauen",
  "dein Spiegelbild",
  "eine Auszeit",
  "sichtbare Veränderung",
  "den Moment danach",
];

function Rotator() {
  const [wordIdx, setWordIdx] = React.useState(0);
  const [text, setText] = React.useState("");
  const [phase, setPhase] = React.useState("typing"); // typing | holding | deleting

  React.useEffect(() => {
    const word = ROTATOR_WORDS[wordIdx];
    let t;

    if (phase === "typing") {
      if (text.length < word.length) {
        t = setTimeout(() => setText(word.slice(0, text.length + 1)), 65 + Math.random() * 45);
      } else {
        t = setTimeout(() => setPhase("holding"), 100);
      }
    } else if (phase === "holding") {
      t = setTimeout(() => setPhase("deleting"), 1800);
    } else if (phase === "deleting") {
      if (text.length > 0) {
        t = setTimeout(() => setText(word.slice(0, text.length - 1)), 35);
      } else {
        setWordIdx((wordIdx + 1) % ROTATOR_WORDS.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(t);
  }, [text, phase, wordIdx]);

  return (
    <span style={{ whiteSpace: "nowrap" }}>
      <span
        className="italic"
        style={{
          color: "var(--rose-deep)",
          fontFamily: "var(--serif)", fontStyle: "italic",
        }}
      >
        {text}
      </span>
      <span
        aria-hidden="true"
        style={{
          display: "inline-block",
          width: ".06em",
          height: ".85em",
          background: "var(--rose-deep)",
          verticalAlign: "-.05em",
          marginLeft: ".04em",
          animation: "rotator-blink 1s step-end infinite",
        }}
      />
      <style>{`
        @keyframes rotator-blink {
          0%, 50% { opacity: 1; }
          50.01%, 100% { opacity: 0; }
        }
      `}</style>
    </span>
  );
}

function BookingCTA({ label }) {
  return (
    <section id="kontakt" style={{
      background: "var(--cream-2)",
      padding: "64px 20px 72px",
      borderTop: "1px solid var(--hair-soft)",
      textAlign: "center",
    }}>
      <h2 className="serif" style={{
        fontSize: "clamp(30px, 8vw, 52px)", fontWeight: 300, lineHeight: 1.15,
        letterSpacing: "-.015em",
        maxWidth: 760, margin: "0 auto",
        paddingBottom: ".08em",
      }}>
        Bereit für <Rotator />?
      </h2>
      <a
        href="https://wa.me/493055550184"
        target="_blank"
        rel="noreferrer"
        style={{
          marginTop: 32,
          display: "inline-flex", alignItems: "center", gap: 12,
          background: "var(--ink)", color: "var(--cream)",
          padding: "18px 28px",
          fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase",
          borderRadius: 999,
        }}
      >
        <WAIcon size={16} color="var(--rose)" />
        {label || "Termin buchen"}
      </a>

      <div style={{
        marginTop: 56, paddingTop: 22,
        borderTop: "1px solid var(--hair-soft)",
        maxWidth: 1280, margin: "56px auto 0",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--ink-3)",
      }}>
        <div>© Maison Velours · 2026</div>
        <div style={{ display: "flex", gap: 18 }}>
          <a href="Impressum-Datenschutz.html">Impressum</a>
          <a href="Impressum-Datenschutz.html#datenschutz">Datenschutz</a>
        </div>
      </div>
    </section>
  );
}

window.AboutSection = AboutSection;
window.AblaufSection = AblaufSection;
window.QuoteSection = QuoteSection;
window.BookingCTA = BookingCTA;
