// Marius Pop — index sections, part 2
const { useState: useState2 } = React;

function Testimonial() {
  const T = window.DATA.testimonial;
  return (
    <Section id="karriere" pad={96}>
      <div style={{
        maxWidth: 820, margin: "0 auto", textAlign: "center",
        borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        padding: "clamp(48px,6vw,80px) 0",
      }}>
        <p style={{
          fontFamily: "var(--font-head)", fontWeight: 600,
          fontSize: "clamp(26px, 3.6vw, 42px)", lineHeight: 1.22,
          letterSpacing: "-0.03em", color: "var(--ink)", margin: 0,
          textWrap: "balance",
        }}>
          „{T.quote}"
        </p>
        <div style={{ marginTop: "clamp(32px,4vw,48px)", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <img src={T.photo} alt={T.name} style={{
            width: 80, height: 80, borderRadius: "50%", objectFit: "cover",
            border: "3px solid var(--bg-soft)",
          }} />
          <div>
            <div style={{ fontFamily: "var(--font-head)", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em", color: "var(--ink)" }}>{T.name}, {T.age}</div>
            <div style={{ fontFamily: "var(--font-head)", fontSize: 15, color: "var(--ink-soft)", marginTop: 3 }}>{T.since}</div>
          </div>
        </div>
      </div>
    </Section>
  );
}

function Fit() {
  const F = window.DATA.fit;
  const Col = ({ data, good }) => (
    <div style={{ background: good ? "#fff" : "var(--bg-soft)", borderRadius: 24, padding: "clamp(30px,3.4vw,40px)", border: good ? "2px solid var(--ink)" : "1px solid var(--line)" }}>
      <h3 style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 23, letterSpacing: "-0.03em", margin: "0 0 24px" }}>{data.title}</h3>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 15 }}>
        {data.items.map((it, i) => (
          <li key={i} style={{ display: "flex", gap: 13, alignItems: "flex-start" }}>
            <span style={{ flex: "0 0 auto", width: 25, height: 25, borderRadius: 25, marginTop: 1, background: good ? "var(--accent)" : "transparent", border: good ? "none" : "1.5px solid var(--line-strong)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              {good
                ? <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                : <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="var(--ink-soft)" strokeWidth="2.4" strokeLinecap="round" /></svg>}
            </span>
            <span style={{ fontFamily: "var(--font-head)", fontSize: 16, lineHeight: 1.5, color: good ? "var(--ink)" : "var(--ink-soft)", textWrap: "pretty" }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
  return (
    <Section bg="var(--bg-soft)" pad={104}>
      <div style={{ marginBottom: 44 }}><Eyebrow>{F.eyebrow}</Eyebrow></div>
      <div className="vt-fit" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        <Col data={F.yes} good />
        <Col data={F.no} />
      </div>
    </Section>
  );
}

function Compare() {
  const C = window.DATA.compare;
  return (
    <Section pad={104}>
      <div style={{ textAlign: "center", marginBottom: 48 }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}><Eyebrow center>{C.eyebrow}</Eyebrow></div>
        <Heading center max={620}>{C.title}</Heading>
        <div style={{ marginTop: 16 }}><Lede center>{C.sub}</Lede></div>
      </div>
      <div style={{ background: "#fff", borderRadius: 24, border: "1px solid var(--line)", overflow: "hidden", maxWidth: 940, margin: "0 auto", boxShadow: "0 10px 30px rgba(0,0,0,.04)" }}>
        <div className="vt-cmp-head" style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr 1.05fr" }}>
          <div style={{ padding: "22px 26px" }} />
          <div style={{ padding: "22px 26px", textAlign: "center", fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 15.5, color: "var(--ink-soft)" }}>{C.colA}</div>
          <div style={{ padding: "22px 26px", textAlign: "center", background: "var(--ink)", color: "#fff", fontFamily: "var(--font-head)", fontWeight: 700, fontSize: 15.5, letterSpacing: "-0.02em" }}>{C.colB}</div>
        </div>
        {C.rows.map((r, i) => (
          <div key={i} className="vt-cmp-row" style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr 1.05fr", borderTop: "1px solid var(--line)" }}>
            <div className="vt-cmp-label" style={{ padding: "18px 26px", fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", display: "flex", alignItems: "center" }}>{r.label}</div>
            <div style={{ padding: "18px 26px", textAlign: "center", fontFamily: "var(--font-head)", fontSize: 14.5, color: "var(--ink-soft)", display: "flex", alignItems: "center", justifyContent: "center" }}>{r.a}</div>
            <div style={{ padding: "18px 26px", textAlign: "center", fontFamily: "var(--font-head)", fontSize: 14.5, color: "var(--ink)", fontWeight: 500, background: "color-mix(in oklab, var(--accent) 24%, #fff)", display: "flex", alignItems: "center", justifyContent: "center", textWrap: "pretty" }}>{r.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Pfad({ onApply }) {
  const P = window.DATA.pfad;
  return (
    <Section pad={112} className="pfad-dark">
      <div style={{ position: "relative", zIndex: 1 }}>
        <div style={{ marginBottom: 56, maxWidth: 620 }}>
          <div style={{ marginBottom: 18 }}><span className="pfad-eyebrow">{P.eyebrow}</span></div>
          <h2 style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(30px,4vw,48px)", lineHeight: 1.08, letterSpacing: "-0.04em", margin: 0, color: "#fff", textWrap: "balance" }}>{P.title}</h2>
          <p style={{ fontFamily: "var(--font-head)", fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,.7)", margin: "16px 0 0", maxWidth: 540, textWrap: "pretty" }}>{P.sub}</p>
        </div>
        <div style={{ display: "grid", gap: 0, maxWidth: 760 }}>
          {P.steps.map((s, i) => {
            const last = i === P.steps.length - 1;
            return (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 26 }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                  <div style={{ width: 54, height: 54, borderRadius: 54, flex: "0 0 auto", background: last ? "var(--accent)" : "rgba(255,255,255,.08)", color: "#fff", border: last ? "none" : "1px solid rgba(255,255,255,.18)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: 15, fontWeight: 500 }}>{s.n}</div>
                  {!last && <div style={{ width: 2, flex: 1, background: "linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.06))", margin: "6px 0", minHeight: 20 }} />}
                </div>
                <div className="vt-pfad-card" style={{ paddingBottom: last ? 0 : 24, display: "grid", gridTemplateColumns: "0.42fr 1fr", gap: 22, alignItems: "baseline", paddingTop: 11 }}>
                  <h3 style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(19px,1.9vw,23px)", letterSpacing: "-0.03em", margin: 0, lineHeight: 1.2, color: "#fff" }}>{s.t}</h3>
                  <p style={{ fontFamily: "var(--font-head)", fontSize: 16, lineHeight: 1.55, color: "rgba(255,255,255,.7)", margin: 0, textWrap: "pretty" }}>{s.d}</p>
                </div>
              </div>
            );
          })}
        </div>
        <div className="vt-pfad-earn" style={{ marginTop: 56, maxWidth: 760, display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center", padding: "26px 30px", borderRadius: 22, background: "linear-gradient(180deg, rgba(37,99,235,.14), rgba(37,99,235,.03))", border: "1px solid rgba(96,165,250,.35)" }}>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 10 }}>Realistisches Rechenbeispiel</span>
            <span style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(40px,5vw,64px)", letterSpacing: "-0.04em", color: "#fff" }}>5.400&thinsp;€<span style={{ fontSize: "0.42em", color: "rgba(255,255,255,.6)", fontWeight: 500, marginLeft: 8, letterSpacing: 0 }}>brutto / Monat</span></span>
          </div>
          <div style={{ borderLeft: "1px solid rgba(255,255,255,.14)", paddingLeft: 28 }}>
            <p style={{ fontFamily: "var(--font-head)", fontSize: 17, fontWeight: 500, lineHeight: 1.45, color: "#fff", margin: 0, textWrap: "balance" }}>Du brauchst nur <span style={{ color: "var(--accent)" }}>4 Kunden im Monat</span>, um 5.400&thinsp;€ brutto zu verdienen.</p>
            <p style={{ fontFamily: "var(--font-head)", fontSize: 13.5, lineHeight: 1.5, color: "rgba(255,255,255,.55)", margin: "8px 0 0", textWrap: "pretty" }}>Beispielrechnung – keine Verdienstgarantie. Dein tatsächliches Einkommen hängt von Einsatz, Entwicklung und Verantwortung ab.</p>
          </div>
        </div>
        <div style={{ marginTop: 36 }}>
          <PillButton onClick={onApply} mono={false} style={{ padding: "8px 8px 8px 24px", fontSize: 15 }}>Jetzt deinen Weg starten</PillButton>
        </div>
      </div>
    </Section>
  );
}

function Skills() {
  const S = window.DATA.skills;
  return (
    <Section pad={104}>
      <div className="vt-skills" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ marginBottom: 18 }}><Eyebrow>{S.eyebrow}</Eyebrow></div>
          <Heading max={460}>{S.title}</Heading>
          <div style={{ marginTop: 16 }}><Lede max={460}>{S.lead}</Lede></div>
          <div style={{ marginTop: 26, borderLeft: "3px solid var(--accent-strong)", paddingLeft: 20 }}>
            <p style={{ fontFamily: "var(--font-head)", fontSize: 17, fontStyle: "italic", lineHeight: 1.55, color: "var(--ink)", margin: 0, textWrap: "pretty" }}>{S.quote}</p>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {S.items.map((it, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: "var(--font-head)", fontSize: 15, fontWeight: 500, letterSpacing: "-0.01em", padding: "11px 18px", borderRadius: 999, background: "#fff", border: "1px solid var(--line-strong)" }}>
              <span style={{ width: 6, height: 6, borderRadius: 6, background: "var(--accent-strong)" }} />{it}
            </span>
          ))}
        </div>
      </div>
    </Section>
  );
}

function Quer() {
  const Q = window.DATA.quer;
  return (
    <Section bg="var(--ink)" pad={104}>
      <div className="vt-quer" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }}>
        <div>
          <div style={{ marginBottom: 18 }}><Eyebrow dark>{Q.eyebrow}</Eyebrow></div>
          <h2 style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(28px,3.4vw,42px)", lineHeight: 1.08, letterSpacing: "-0.04em", margin: 0, color: "#fff", textWrap: "balance" }}>{Q.title}</h2>
          <p style={{ fontFamily: "var(--font-head)", fontWeight: 500, fontSize: 18, color: "var(--accent)", margin: "18px 0 0" }}>{Q.sub}</p>
          {Q.body.map((p, i) => (
            <p key={i} style={{ fontFamily: "var(--font-head)", fontSize: 16.5, lineHeight: 1.6, color: "rgba(255,255,255,.72)", margin: "16px 0 0", textWrap: "pretty" }}>{p}</p>
          ))}
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,.5)", marginBottom: 18 }}>{Q.chipsLabel}</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {Q.chips.map((c, i) => (
              <span key={i} style={{ fontFamily: "var(--font-head)", fontSize: 14.5, fontWeight: 500, padding: "10px 16px", borderRadius: 999, border: "1px solid rgba(255,255,255,.2)", color: "#fff", background: "rgba(255,255,255,.04)" }}>{c}</span>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function About() {
  const A = window.DATA.about;
  return (
    <Section id="ueber" pad={104}>
      <div className="vt-about" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }}>
        <div className="vt-about-stack" style={{ position: "relative" }}>
          <img src="marius-meeting.png" alt="Marius Pop im Gespräch" style={{ display: "block", width: "100%", height: 460, objectFit: "cover", objectPosition: "50% 20%", borderRadius: 24 }} />
          <img src="marius-presenting.png" alt="Marius Pop in der Präsentation" style={{ position: "absolute", right: -28, bottom: -36, width: 180, height: 230, objectFit: "cover", objectPosition: "50% 18%", borderRadius: 16, boxShadow: "0 22px 50px -10px rgba(0,0,0,.28), 0 0 0 6px #fff", zIndex: 2 }} />
          <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=400&h=300&fit=crop" alt="Geschäftsmeeting" style={{ position: "absolute", left: -28, top: -28, width: 160, height: 130, objectFit: "cover", objectPosition: "50% 50%", borderRadius: 14, boxShadow: "0 18px 40px -8px rgba(0,0,0,.25), 0 0 0 5px #fff", zIndex: 2 }} />
        </div>
        <div>
          <div style={{ marginBottom: 18 }}><Eyebrow>{A.eyebrow}</Eyebrow></div>
          <Heading max={480}>{A.headline}</Heading>
          {A.body.map((p, i) => (
            <p key={i} style={{ fontFamily: "var(--font-head)", fontSize: 16.5, lineHeight: 1.62, color: "var(--ink-soft)", margin: "20px 0 0", maxWidth: 520, textWrap: "pretty" }}>{p}</p>
          ))}
          <div style={{ marginTop: 28 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 12 }}>{A.fieldsLabel}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
              {A.fields.map((f) => (
                <span key={f} style={{ fontFamily: "var(--font-head)", fontSize: 14, fontWeight: 500, padding: "8px 15px", borderRadius: 999, border: "1px solid var(--line-strong)", color: "var(--ink)" }}>{f}</span>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 22, display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-soft)" }}>{A.langLabel}</span>
            <span style={{ fontFamily: "var(--font-head)", fontSize: 15.5, color: "var(--ink)", fontWeight: 500 }}>{A.languages}</span>
          </div>
        </div>
      </div>
    </Section>
  );
}

function FAQ() {
  const F = window.DATA.faq;
  const [open, setOpen] = useState2(0);
  return (
    <Section id="faq" bg="var(--bg-soft)" pad={104}>
      <div className="vt-faq" style={{ display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 56, alignItems: "start" }}>
        <div className="vt-faq-aside" style={{ position: "sticky", top: 96 }}>
          <div style={{ marginBottom: 18 }}><Eyebrow>{F.eyebrow}</Eyebrow></div>
          <Heading max={320}>{F.title}</Heading>
        </div>
        <div style={{ display: "grid", gap: 12 }}>
          {F.items.map((it, i) => {
            const on = open === i;
            return (
              <div key={i} style={{ background: "#fff", borderRadius: 18, border: "1px solid var(--line)", overflow: "hidden" }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{ width: "100%", textAlign: "left", padding: "22px 24px", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 16 }}>
                  <span style={{ flex: 1, fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 16.5, letterSpacing: "-0.02em", color: "var(--ink)" }}>{it.q}</span>
                  <span style={{ flex: "0 0 auto", width: 30, height: 30, borderRadius: 30, background: on ? "var(--accent)" : "var(--bg-soft)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .2s ease" }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ transform: on ? "rotate(45deg)" : "none", transition: "transform .2s ease" }}><path d="M12 5v14M5 12h14" stroke={on ? "#fff" : "#0a0a0a"} strokeWidth="2.2" strokeLinecap="round" /></svg>
                  </span>
                </button>
                <div style={{ maxHeight: on ? 260 : 0, overflow: "hidden", transition: "max-height .3s ease" }}>
                  <p style={{ fontFamily: "var(--font-head)", fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-soft)", margin: 0, padding: "0 24px 24px", textWrap: "pretty" }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}

function FinalCta({ onApply }) {
  const C = window.DATA.finalCta;
  return (
    <Section pad={96}>
      <div style={{ background: `linear-gradient(rgba(19,19,19,0.80),rgba(19,19,19,0.80)), url('cta-bg.png') center/cover no-repeat`, borderRadius: 28, padding: "clamp(44px,6vw,84px)", textAlign: "center" }}>
        <h2 style={{ fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(28px,3.8vw,46px)", letterSpacing: "-0.04em", lineHeight: 1.12, margin: 0, color: "#fff", maxWidth: 820, marginInline: "auto", textWrap: "balance" }}>{C.title}</h2>
        <p style={{ fontFamily: "var(--font-head)", fontSize: 17.5, lineHeight: 1.6, color: "rgba(255,255,255,.7)", margin: "22px auto 34px", maxWidth: 660, textWrap: "pretty" }}>{C.body}</p>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <PillButton onClick={onApply} variant="primary" mono={false} style={{ padding: "8px 8px 8px 26px", fontSize: 15.5 }}>{C.cta}</PillButton>
        </div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,.5)", margin: "24px 0 0" }}>{C.reassure}</p>
      </div>
    </Section>
  );
}

function Footer({ onApply }) {
  const D = window.DATA;
  return (
    <footer style={{ borderTop: "1px solid var(--line)", padding: "44px 0 40px" }}>
      <div style={{ maxWidth: 1160, margin: "0 auto", padding: "0 32px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
        <div>
          <img src="logo.svg" alt="Marius Pop · Vertrieb" style={{ height: 46, display: "block" }} />
          <div style={{ fontFamily: "var(--font-head)", fontSize: 13.5, color: "var(--ink-soft)", marginTop: 10 }}>Vertrieb Karriere · Günzburg</div>
        </div>
        <span style={{ fontFamily: "var(--font-head)", fontSize: 13, color: "var(--ink-soft)" }}>© {new Date().getFullYear()} {D.brand}</span>
        <div style={{ display: "flex", gap: 22 }}>
          {["Impressum", "Datenschutz", "Cookies"].map((l) => (
            <a key={l} href="#" style={{ fontFamily: "var(--font-head)", fontSize: 13.5, color: "var(--ink-soft)", textDecoration: "none" }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonial, Fit, Compare, Pfad, Skills, Quer, About, FAQ, FinalCta, Footer });
