/* global React, ReactDOM, Nav, Footer, Contact, useReveal, SectionHeader, useState */

function KontaktPage() {
  return (
    <>
      <Nav />
      <main>
        <KontaktHero />
        <VideoHowItWorks />
        <Contact />
        <ResponseInfo />
      </main>
      <Footer />
    </>
  );
}

function KontaktHero() {
  return (
    <section style={{ position: "relative", paddingTop: 160, paddingBottom: 40, overflow: "hidden" }}>
      <div className="blob" style={{ width: 500, height: 500, background: "#a78bfa", top: -100, left: -150, opacity: 0.3 }} />
      <div className="blob" style={{ width: 500, height: 500, background: "#f9a8d4", top: 60, right: -200, opacity: 0.3 }} />

      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <span className="pill pill-grad" style={{ marginBottom: 24 }}>Kontakt</span>
        <h1 className="hero-fade" style={{
          fontSize: "clamp(48px, 8vw, 110px)",
          fontWeight: 600,
          letterSpacing: "-0.05em",
          lineHeight: 0.95,
          marginBottom: 24,
          textWrap: "balance",
        }}>
          Schreiben Sie mir.<br />
          <span className="ital grad-text">Ich antworte schnell.</span>
        </h1>
        <p style={{
          fontSize: "clamp(18px, 1.9vw, 22px)",
          color: "var(--muted)",
          maxWidth: 620,
          margin: "0 auto",
          lineHeight: 1.45,
        }}>
          Am schnellsten geht es per WhatsApp — meist antworte ich innerhalb weniger Stunden, oft sogar Minuten.
        </p>
        <style>{`
          .hero-fade {
            opacity: 0;
            transform: translateY(20px);
            animation: hero-in 1s cubic-bezier(.22,.61,.36,1) forwards;
          }
          @keyframes hero-in {
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </div>
    </section>
  );
}

const VIDEO_STEPS = [
  {
    n: "01",
    title: "Anfrage",
    desc: "Sie schreiben mir kurz was nicht funktioniert — per WhatsApp, E-Mail oder mit dem Formular weiter unten.",
    visual: "msg",
  },
  {
    n: "02",
    title: "Terminvorschlag",
    desc: "Ich melde mich zurück und wir einigen uns auf einen Zeitpunkt der für Sie passt — auch abends.",
    visual: "cal",
  },
  {
    n: "03",
    title: "Sie klicken den Link",
    desc: "Pünktlich zum Termin bekommen Sie einen Link für FaceTime, Jitsi oder Google Meet. Ein Klick reicht — keine App nötig.",
    visual: "link",
  },
  {
    n: "04",
    title: "Bildschirm teilen",
    desc: "Im Video-Call zeigen Sie mir Ihr Problem. Ich führe Sie Schritt für Schritt zur Lösung — Sie sehen alles mit.",
    visual: "share",
  },
];

function VideoHowItWorks() {
  return (
    <section className="section" style={{ background: "var(--bg-soft)", position: "relative", overflow: "hidden", paddingTop: 80 }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="So läuft's ab"
          title={<>Video-Hilfe in <span className="ital grad-text">4 Schritten.</span></>}
          sub="Keine komplizierten Apps, kein Tech-Wissen nötig. Wenn Sie auf einen Link klicken können, schaffen Sie es."
        />

        <div className="vh-grid">
          {VIDEO_STEPS.map((s, i) => <VHStep key={s.n} {...s} index={i} />)}
        </div>

        <div style={{ marginTop: 60, padding: 32, background: "#fff", border: "1px solid var(--line)", borderRadius: 24 }}>
          <div style={{ display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
            <div style={{ flexShrink: 0 }}>
              <ShieldIcon />
            </div>
            <div style={{ flex: 1, minWidth: 240 }}>
              <h3 style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 8 }}>Sicher und transparent</h3>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 620 }}>
                Ich sehe nur was Sie mir freiwillig zeigen. Wenn Sie das Teilen beenden, ist die Verbindung weg. Ich notiere keine Passwörter, speichere keine Daten und schicke keine Werbung. Versprochen.
              </p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .vh-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        @media (max-width: 980px) { .vh-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .vh-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function VHStep({ n, title, desc, visual, index }) {
  const ref = useReveal();
  return (
    <div ref={ref} className={"reveal reveal-delay-" + (index + 1)} style={{
      background: "#fff",
      border: "1px solid var(--line)",
      borderRadius: 24,
      padding: 24,
      transition: "all .35s cubic-bezier(.22,.61,.36,1)",
      position: "relative",
      overflow: "hidden",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 12px 32px rgba(124,58,237,0.08)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 36 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, color: "var(--muted-2)" }}>{n}</span>
        <VHVisual name={visual} />
      </div>
      <h3 style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 10, lineHeight: 1.2 }}>{title}</h3>
      <p style={{ fontSize: 13.5, color: "var(--muted)", lineHeight: 1.5 }}>{desc}</p>
    </div>
  );
}

function VHVisual({ name }) {
  const fill = "url(#vh)";
  const wrap = (children) => (
    <div style={{ width: 56, height: 56, borderRadius: 16, background: "var(--grad-soft)", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
        <defs><linearGradient id="vh" x1="0" y1="0" x2="32" y2="32"><stop stopColor="#7c3aed" /><stop offset="1" stopColor="#ec4899" /></linearGradient></defs>
        {children}
      </svg>
    </div>
  );
  switch (name) {
    case "msg":
      return wrap(<path d="M5 11c0-3 2.5-5 5.5-5h11c3 0 5.5 2 5.5 5v7c0 3-2.5 5-5.5 5H16l-5 4v-4h-.5C7.5 23 5 21 5 18v-7Z" stroke={fill} strokeWidth="2" strokeLinejoin="round" />);
    case "cal":
      return wrap(<>
        <rect x="5" y="7" width="22" height="20" rx="3" stroke={fill} strokeWidth="2" />
        <path d="M5 12h22M11 4v6M21 4v6M11 17h3M11 21h6M17 17h3" stroke={fill} strokeWidth="2" strokeLinecap="round" />
      </>);
    case "link":
      return wrap(<>
        <path d="M13 19l6-6" stroke={fill} strokeWidth="2" strokeLinecap="round" />
        <path d="M11 22l-2 2a4 4 0 1 1-6-6l2-2M21 10l2-2a4 4 0 1 1 6 6l-2 2" stroke={fill} strokeWidth="2" strokeLinecap="round" />
      </>);
    case "share":
      return wrap(<>
        <rect x="3" y="6" width="26" height="18" rx="2.5" stroke={fill} strokeWidth="2" />
        <path d="M11 28h10M16 24v4" stroke={fill} strokeWidth="2" strokeLinecap="round" />
        <path d="M11 16 16 12 16 14 19 14 19 18 16 18 16 20Z" fill={fill} />
      </>);
    default: return wrap(null);
  }
}

function ShieldIcon() {
  return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <defs><linearGradient id="sg" x1="0" y1="0" x2="48" y2="48"><stop stopColor="#7c3aed" /><stop offset="1" stopColor="#ec4899" /></linearGradient></defs>
      <path d="M24 4 L8 10 V24 C8 33 14 40 24 44 C34 40 40 33 40 24 V10 Z" fill="url(#sg)" />
      <path d="M16 24 L22 30 L33 18" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ResponseInfo() {
  return (
    <section className="section" style={{ background: "var(--ink)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="blob" style={{ width: 500, height: 500, background: "#7c3aed", top: -100, left: -150, opacity: 0.4 }} />
      <div className="blob" style={{ width: 500, height: 500, background: "#ec4899", bottom: -150, right: -100, opacity: 0.35 }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>Erreichbarkeit</span>
          <h2 className="section-title" style={{ color: "#fff" }}>
            Wann Sie mit einer <span className="ital" style={{ background: "linear-gradient(120deg, #c4b5fd, #f9a8d4)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>Antwort</span> rechnen können.
          </h2>
          <p className="section-sub" style={{ color: "rgba(255,255,255,0.7)" }}>
            Ich mache das nach der Schule und am Wochenende — aber ich antworte schnell.
          </p>
        </div>

        <div className="resp-grid">
          <RespCard k="Mo–Fr" v="15:00 – 21:00" subv="meist sofort online" />
          <RespCard k="Samstag" v="10:00 – 21:00" subv="auch tagsüber erreichbar" />
          <RespCard k="Sonntag" v="10:00 – 18:00" subv="entspannte Termine" />
          <RespCard k="Schulzeit" v="kann etwas dauern" subv="Antwort meist abends" />
        </div>
      </div>

      <style>{`
        .resp-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 980px) { .resp-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .resp-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

function RespCard({ k, v, subv }) {
  return (
    <div style={{
      background: "rgba(255,255,255,0.04)",
      border: "1px solid rgba(255,255,255,0.08)",
      backdropFilter: "blur(20px)",
      borderRadius: 20,
      padding: 24,
    }}>
      <div style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>{k}</div>
      <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>{v}</div>
      <div style={{ fontSize: 13, color: "rgba(255,255,255,0.6)" }}>{subv}</div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<KontaktPage />);