// landing.jsx — marketing landing page

// The <Trust /> testimonial carousel is hidden until we have real, consented customer
// quotes. The eight quotes behind it (Trust.review* in strings-landing.jsx) are written
// marketing copy, and publishing invented consumer reviews is an explicitly listed unfair
// commercial practice under the UWG annex implementing the EU Omnibus Directive — the
// hardcoded five-star row on each card makes it a rating claim too.
//
// The component, its strings and its styles are deliberately left intact so the section
// can come back: replace the Trust.review* strings with genuine quotes, restore the
// matching block in index.html's static crawler fallback, and flip this to true. Any
// aggregateRating markup must stay out until the quotes on the page are real (see the
// parked block in index.html).
const SHOW_TESTIMONIALS = false;

const Landing = ({ onLaunch, heroVariant, onHome, onPartnerLogin }) => {
  return (
    <>
      <Header onLaunch={onLaunch} view="landing" onHome={onHome} onPartnerLogin={onPartnerLogin} />
      <Hero onLaunch={onLaunch} variant={heroVariant} />
      <HowItWorks />
      <DemoStrip onLaunch={onLaunch} />
      <DIYvsPro />
      <QuotesPreview onLaunch={onLaunch} />
      {SHOW_TESTIMONIALS && <Trust />}
      <Footer />
    </>);

};

// ─────────────────────────────────────────────────────────────────────────────
// HERO — three variants

const Hero = ({ onLaunch, variant = "split" }) => {
  if (variant === "centered") return <HeroCentered onLaunch={onLaunch} />;
  if (variant === "report") return <HeroReportFirst onLaunch={onLaunch} />;
  return <HeroSplit onLaunch={onLaunch} />;
};

const HeroBadge = () =>
<span className="pill" style={{ background: "var(--paper)", border: "1px solid var(--rule)" }}>
    <span className="dot" style={{ background: "var(--accent)" }} />
    {t("HeroBadge.text")}
  </span>;


const HeroSplit = ({ onLaunch }) =>
<section style={{ minHeight: "calc(100vh - 64px)", display: "flex", alignItems: "center", padding: "80px 0" }}>
    <div className="wrap hero-wrap" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,1fr)", gap: 96, alignItems: "center", width: "100%" }}>
      <div className="hero-split-text">
        <div style={{ marginBottom: 28 }}>
          <Logo size={56} />
        </div>
        <h1 className="h1" style={{ fontSize: "clamp(34px, 5.2vw, 72px)" }}>
          {t("LandingHero.titleA")} <span style={{ color: "var(--accent)" }}>{t("LandingHero.titleB")}</span>
        </h1>
        <p className="lead" style={{ marginTop: 22 }}>{t("LandingHero.sub")}

      </p>
      <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
        {[t("LandingHero.badgeFree"), t("LandingHero.badgeNoSignup")].map((label) =>
        <span key={label} style={{
          display: "inline-flex", alignItems: "center", gap: 11,
          height: 48, padding: "0 22px 0 12px", borderRadius: 999,
          background: "var(--paper)", border: "1px solid var(--rule)",
          fontSize: 17, fontWeight: 500, color: "var(--ink-2)",
          boxShadow: "var(--shadow-sm)"
        }}>
            <span style={{
            width: 28, height: 28, borderRadius: 50, background: "var(--accent)",
            color: "#fff", display: "grid", placeItems: "center", flexShrink: 0
          }}>
              <Ic.check width="17" height="17" />
            </span>
            {label}
          </span>
        )}
      </div>
      </div>
      <HeroIntakeForm onSubmit={onLaunch} />
    </div>
    <style>{`
      @media (max-width:880px){
        .hero-wrap{ grid-template-columns: 1fr !important; gap: 48px !important; }
      }
    `}</style>
  </section>;


const HeroCentered = ({ onLaunch }) =>
<section style={{ minHeight: "calc(100vh - 64px)", display: "flex", alignItems: "center", padding: "80px 0", textAlign: "center" }}>
    <div className="wrap" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 24, width: "100%" }}>
      <HeroBadge />
      <h1 className="h1" style={{ maxWidth: "16ch" }}>
        {t("HeroCentered.titleA")} <em style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{t("HeroCentered.titleB")}</em>
      </h1>
      <p className="lead" style={{ textAlign: "center", margin: "0 auto" }}>
        {t("HeroCentered.sub")}
      </p>
      <div style={{ display: "flex", gap: 10, marginTop: 8 }}>
        <button className="btn btn-accent btn-lg" onClick={onLaunch}>
          <Ic.camera width="16" height="16" /> {t("HeroCentered.btnTry")}
        </button>
        <button className="btn btn-ghost btn-lg">{t("HeroCentered.btnHow")}</button>
      </div>
      <div style={{ width: "100%", maxWidth: 920, marginTop: 48 }}>
        <HeroVisual variant="wide" />
      </div>
    </div>
  </section>;


const HeroReportFirst = ({ onLaunch }) =>
<section style={{ minHeight: "calc(100vh - 64px)", display: "flex", alignItems: "center", padding: "80px 0", background: "var(--bg-2)", borderBottom: "1px solid var(--rule)" }}>
    <div className="wrap" style={{ width: "100%" }}>
      <div className="hero-wrap" style={{ display: "grid", gridTemplateColumns: "minmax(0,.85fr) minmax(0,1.15fr)", gap: 112, alignItems: "center" }}>
        <div>
          <HeroBadge />
          <h1 className="h1" style={{ marginTop: 20, fontSize: "clamp(36px, 5.4vw, 72px)" }}>
            {t("HeroReportFirst.title")}
          </h1>
          <p className="lead" style={{ marginTop: 18 }}>
            {t("HeroReportFirst.sub")}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
            <button className="btn btn-accent btn-lg" onClick={onLaunch}>
              {t("HeroReportFirst.btnStart")}
            </button>
          </div>
        </div>
        <SampleReportCard />
      </div>
    </div>
  </section>;


// Hero intake form — interactive entry point in the split hero
const CAR_MAKES = ["Audi", "BMW", "Mercedes-Benz", "Volkswagen", "Porsche", "Opel", "Ford", "Tesla", "Other"];
const CAR_MODELS = {
  "Audi": ["A3", "A4", "A6", "Q3", "Q5", "Q7", "e-tron"],
  "BMW": ["1 Series", "3 Series", "5 Series", "X1", "X3", "X5", "i4"],
  "Mercedes-Benz": ["A-Class", "C-Class", "E-Class", "S-Class", "GLA", "GLC", "EQE"],
  "Volkswagen": ["Golf", "Polo", "Passat", "Tiguan", "T-Roc", "ID.3", "ID.4"],
  "Porsche": ["911", "Cayenne", "Macan", "Panamera", "Taycan"],
  "Opel": ["Astra", "Corsa", "Insignia", "Mokka", "Grandland"],
  "Ford": ["Fiesta", "Focus", "Kuga", "Puma", "Mustang Mach-E"],
  "Tesla": ["Model 3", "Model Y", "Model S", "Model X"],
  "Other": ["—"]
};
const CAR_YEARS = Array.from({ length: 15 }, (_, i) => String(2026 - i));

const HeroIntakeForm = ({ onSubmit }) => {
  // Lookup data from the API; null until loaded. If the API is unreachable
  // (e.g. CORS during local dev) we fall back to the static lists and the
  // Start button keeps its demo behavior.
  const [makes, setMakes] = React.useState(null);
  const [models, setModels] = React.useState(null);
  const [years, setYears] = React.useState(null);
  const [apiDown, setApiDown] = React.useState(false);

  const [make, setMake] = React.useState("");
  const [model, setModel] = React.useState("");
  const [year, setYear] = React.useState("");
  const [zip, setZip] = React.useState("");
  const [dragOver, setDragOver] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const inputRef = React.useRef(null);
  const interacted = React.useRef(false);
  const signalInteract = () => {
    if (interacted.current) return;
    interacted.current = true;
    window.dispatchEvent(new Event("ok:interact"));
  };

  React.useEffect(() => {
    let alive = true;
    OK_API.getMakes()
      .then((list) => { if (alive) setMakes(list); })
      .catch(() => { if (alive) { setApiDown(true); setMake("Audi"); setModel("A4"); setYear("2021"); } });
    return () => { alive = false; };
  }, []);

  // Load models when make changes (API mode)
  React.useEffect(() => {
    if (apiDown || !make) return;
    let alive = true;
    setModels(null); setModel(""); setYears(null); setYear("");
    OK_API.getModels(make)
      .then((list) => { if (alive) setModels(list); })
      .catch(() => { if (alive) setModels([]); });
    return () => { alive = false; };
  }, [make, apiDown]);

  // Load years when model changes (API mode)
  React.useEffect(() => {
    if (apiDown || !model) return;
    let alive = true;
    setYears(null); setYear("");
    OK_API.getModelYears(model)
      .then((res) => {
        if (!alive) return;
        const ys = (res.years || []).slice().sort((a, b) => b - a);
        setYears(ys);
      })
      .catch(() => { if (alive) setYears([]); });
    return () => { alive = false; };
  }, [model, apiDown]);

  // Static fallback: reset model when make changes
  React.useEffect(() => {
    if (!apiDown) return;
    const list = CAR_MODELS[make] || [];
    if (!list.includes(model)) setModel(list[0] || "");
  }, [make, apiDown]);

  const handleFile = (f) => {
    if (!f) return;
    setFiles((prev) => prev.length >= 1 ? prev : [...prev, f]);
  };
  const removeFile = (idx) => setFiles((prev) => prev.filter((_, i) => i !== idx));
  const valid = make && model && year && zip.length >= 4 && (apiDown || files.length >= 1);

  const handleStart = async () => {
    if (submitting) return;
    if (apiDown) { onSubmit(); return; } // demo mode — keep static flow
    if (!valid) {
      setError(files.length < 1 ? t("HeroForm.errorNoPhoto") : t("HeroForm.errorFillAll"));
      return;
    }
    setError(null);
    setSubmitting(true);
    try {
      const id = await OK_API.submitEstimate({
        makeId: make, modelId: model, year, zipCode: zip, countryCode: "DE", photos: files,
      });
      onSubmit(typeof id === "string" ? id.replace(/"/g, "") : id, files[0]);
    } catch (e) {
      setError(e.message || t("HeroForm.errorGeneric"));
      setSubmitting(false);
    }
  };

  return (
    <div className="hero-intake" data-testid="hero-form" style={{ position: "relative" }} onFocus={signalInteract} onPointerDown={signalInteract}>
      <div className="card" style={{ padding: 28, borderRadius: 20, boxShadow: "var(--shadow-lg)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 }}>
          <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.018em" }}>{t("HeroForm.cardTitle")}

          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1.1fr 90px", gap: 12, marginBottom: 12 }}>
          <FormField label={t("HeroForm.labelMake")}>
            {apiDown ? (
              <Select value={make} onChange={(e) => setMake(e.target.value)}>
                {CAR_MAKES.map((m) => <option key={m} value={m}>{m}</option>)}
              </Select>
            ) : (
              <Select value={make} onChange={(e) => setMake(e.target.value)} isEmpty={!make}>
                <option value="" disabled>{t("HeroForm.placeholderMake")}</option>
                {(makes || []).map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
              </Select>
            )}
          </FormField>
          <FormField label={t("HeroForm.labelModel")}>
            {apiDown ? (
              <Select value={model} onChange={(e) => setModel(e.target.value)}>
                {(CAR_MODELS[make] || []).map((m) => <option key={m} value={m}>{m}</option>)}
              </Select>
            ) : (
              <Select value={model} onChange={(e) => setModel(e.target.value)} isEmpty={!model}>
                <option value="" disabled>{t("HeroForm.placeholderModel")}</option>
                {(models || []).map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
              </Select>
            )}
          </FormField>
          <FormField label={t("HeroForm.labelYear")}>
            {apiDown ? (
              <Select value={year} onChange={(e) => setYear(e.target.value)}>
                {CAR_YEARS.map((y) => <option key={y} value={y}>{y}</option>)}
              </Select>
            ) : (
              <Select value={year} onChange={(e) => setYear(e.target.value)} isEmpty={!year}>
                <option value="" disabled>{t("HeroForm.placeholderYear")}</option>
                {(years || []).map((y) => <option key={y} value={y}>{y}</option>)}
              </Select>
            )}
          </FormField>
        </div>

        <FormField label={t("HeroForm.labelZip")}>
          <input
            type="text" inputMode="numeric" maxLength={5}
            value={zip} onChange={(e) => setZip(e.target.value.replace(/\D/g, ""))}
            placeholder="20095"
            data-testid="hero-zip"
            className="hero-input" />
          
        </FormField>

        <div style={{ marginTop: 28 }}>
          <div className="form-label">{t("HeroForm.labelPhoto")}</div>
          <div
            onDragOver={(e) => {e.preventDefault();setDragOver(true);}}
            onDragLeave={() => setDragOver(false)}
            onDrop={(e) => {
              e.preventDefault();setDragOver(false);
              const list = Array.from(e.dataTransfer?.files || []);
              list.slice(0, 1 - files.length).forEach(handleFile);
            }}
            onClick={() => files.length < 1 && inputRef.current?.click()}
            style={{
              marginTop: 8,
              border: `1.5px dashed ${dragOver ? "var(--accent)" : "var(--rule-2)"}`,
              background: dragOver ? "var(--accent-tint)" : "var(--bg)",
              borderRadius: 12, padding: "26px 18px",
              textAlign: "center", cursor: "default",
              transition: "all .15s ease",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
              opacity: files.length >= 1 ? 0.55 : 1
            }}>
            
            <input
              ref={inputRef} type="file" accept="image/*" multiple
              data-testid="hero-photo-input"
              style={{ display: "none" }}
              onChange={(e) => {
                Array.from(e.target.files || []).slice(0, 1 - files.length).forEach(handleFile);
                e.target.value = "";
              }} />

            <div style={{
              width: 40, height: 40, borderRadius: 10, background: "var(--paper)",
              border: "1px solid var(--rule)", display: "grid", placeItems: "center"
            }}>
              <Ic.upload width="18" height="18" style={{ color: "var(--ink-2)" }} />
            </div>
            <div>
              <div data-testid="hero-photo-state" data-empty={files.length < 1 ? "true" : "false"} style={{ fontSize: 14.5, fontWeight: 500 }}>
                {files.length >= 1 ? t("HeroForm.photoSelected") : t("HeroForm.photoDrag")}
              </div>
              <div className="tiny" style={{ marginTop: 3 }}>{t("HeroForm.photoHint")}</div>
            </div>
          </div>

          {files.length > 0 &&
          <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {files.map((f, i) =>
            <span key={i} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 6px 6px 12px", borderRadius: 999,
              background: "var(--accent-tint)", color: "var(--accent-ink)",
              fontSize: 13, fontWeight: 500, maxWidth: "100%",
              border: "1px solid rgba(16,161,113,.22)"
            }}>
                  <Ic.check width="13" height="13" style={{ flexShrink: 0 }} />
                  <span style={{
                whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                maxWidth: 200
              }}>{f.name}</span>
                  <button
                onClick={() => removeFile(i)}
                aria-label={`Remove ${f.name}`}
                data-testid="hero-photo-remove"
                style={{
                  appearance: "none", border: 0, background: "rgba(11,110,79,.14)",
                  color: "var(--accent-ink)", width: 20, height: 20, borderRadius: 50,
                  display: "grid", placeItems: "center", cursor: "default", flexShrink: 0,
                  padding: 0
                }}>
                    <Ic.x width="11" height="11" />
                  </button>
                </span>
            )}
            </div>
          }
        </div>

        {error && (
          <div style={{
            marginTop: 14, padding: "10px 14px", borderRadius: 8,
            background: "var(--danger-tint, #FFF1F2)", color: "var(--danger, #BE123C)",
            fontSize: 13, lineHeight: 1.5,
          }}>
            {error}
          </div>
        )}

        <button
          className="btn btn-accent btn-lg"
          onClick={handleStart}
          disabled={submitting}
          data-testid="hero-submit"
          style={{ width: "100%", marginTop: 18, justifyContent: "center", opacity: submitting ? 0.75 : 1 }}>

          {submitting
            ? <>{t("HeroForm.btnStarting")}</>
            : <>{t("HeroForm.btnStart")} <Ic.arrow width="15" height="15" /></>}
        </button>

        <div style={{ display: "flex", gap: 6, alignItems: "center", justifyContent: "center", marginTop: 14, color: "var(--mute)", fontSize: 12 }}>
          <Ic.shield width="13" height="13" /> {t("HeroForm.privacy")}
        </div>
      </div>

      {/* Floating chip */}

      <style>{`
        .hero-input, .hero-select{
          appearance: none; -webkit-appearance: none;
          width: 100%; height: 44px; padding: 0 14px;
          background: var(--paper); color: var(--ink);
          border: 1px solid var(--rule-2); border-radius: 10px;
          font: inherit; font-size: 14.5px;
          transition: border-color .15s ease, box-shadow .15s ease;
        }
        .hero-input::placeholder{ color: var(--mute-2); }
        .hero-input:focus, .hero-select:focus{
          outline: none; border-color: var(--accent);
          box-shadow: 0 0 0 3px var(--accent-tint);
        }
        .hero-select-wrap{ position: relative; }
        .hero-select{ padding-right: 36px; cursor: default; }
        .hero-select--empty{ color: var(--mute-2); -webkit-text-fill-color: var(--mute-2); }
        .hero-select-wrap > svg{
          position:absolute; right:12px; top:50%; transform:translateY(-50%);
          pointer-events:none; color: var(--mute);
        }
        .form-label{
          font-size: 12px; font-weight: 500; color: var(--ink-3);
          margin-bottom: 6px; letter-spacing: 0;
        }
      `}</style>
    </div>);

};

const FormField = ({ label, children }) =>
<label style={{ display: "block" }}>
    <div className="form-label">{label}</div>
    {children}
  </label>;


const Select = ({ value, onChange, children, isEmpty }) =>
<div className="hero-select-wrap">
    <select className={`hero-select${isEmpty ? " hero-select--empty" : ""}`} value={value} onChange={onChange}>
      {children}
    </select>
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 9l6 6 6-6" />
    </svg>
  </div>;


const HeroVisual = ({ variant }) =>
<div className="hero-visual" style={{ position: "relative" }}>
    <div className="card" style={{ padding: 14, borderRadius: 18, boxShadow: "var(--shadow-lg)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "4px 6px 12px" }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span style={{ width: 9, height: 9, borderRadius: 50, background: "#FF5F57" }} />
          <span style={{ width: 9, height: 9, borderRadius: 50, background: "#FEBC2E" }} />
          <span style={{ width: 9, height: 9, borderRadius: 50, background: "#28C840" }} />
        </div>
        <div className="mono tiny">ottoklar.de/inspect/9F2K-A1</div>
        <Ic.more width="16" height="16" style={{ color: "var(--mute)" }} />
      </div>
      <CarPhoto severity="moderate" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 12, marginTop: 14, alignItems: "end" }}>
        <div>
          <div className="eyebrow">{t("HeroVisual.estimatedRepair")}</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 4 }}>
            <span className="mono num" style={{ fontSize: 38, letterSpacing: "-0.02em", fontWeight: 500 }}>€1,420</span>
            <span className="tiny">– €1,820</span>
          </div>
        </div>
        <span className="pill pill-warn">{t("HeroVisual.pillModerate")}</span>
      </div>
    </div>
    {/* Floating chip */}
    <div className="card" style={{
    position: "absolute", left: -22, bottom: 38, padding: "10px 12px",
    display: "flex", alignItems: "center", gap: 10, borderRadius: 12,
    boxShadow: "var(--shadow-md)"
  }}>
      <div style={{
      width: 28, height: 28, borderRadius: 8, background: "var(--accent-tint)",
      display: "grid", placeItems: "center", color: "var(--accent-ink)"
    }}><Ic.shield width="16" height="16" /></div>
      <div>
        <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t("HeroVisual.chipTitle")}</div>
        <div className="tiny">{t("HeroVisual.chipSub")}</div>
      </div>
    </div>
  </div>;


const SampleReportCard = () =>
<div className="card" style={{ padding: 22, borderRadius: 18, boxShadow: "var(--shadow-lg)" }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
      <span className="eyebrow">{t("SampleReport.eyebrow")}</span>
      <span className="pill pill-accent"><Ic.check width="12" height="12" /> {t("SampleReport.verified")}</span>
    </div>
    <CarPhoto severity="moderate" />
    <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
      <MiniStat label={t("SampleReport.labelTotal")} value={t("SampleReport.valueTotal")} mono />
      <MiniStat label={t("SampleReport.labelSeverity")} value={t("SampleReport.valueSeverity")} />
      <MiniStat label={t("SampleReport.labelLabor")} value={t("SampleReport.valueLabor")} mono />
      <MiniStat label={t("SampleReport.labelRec")} value={t("SampleReport.valueRec")} />
    </div>
  </div>;


const MiniStat = ({ label, value, mono }) =>
<div>
    <div className="tiny" style={{ marginBottom: 2 }}>{label}</div>
    <div className={mono ? "mono num" : ""} style={{ fontSize: 16, fontWeight: 500 }}>{value}</div>
  </div>;


const Stat = ({ n, label }) =>
<div>
    <div className="mono num" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.01em" }}>{n}</div>
    <div className="tiny">{label}</div>
  </div>;


// ─────────────────────────────────────────────────────────────────────────────
// HOW IT WORKS

const HowItWorks = () =>
<section id="how" className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
    <div className="wrap">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 56, gap: 24, flexWrap: "wrap" }}>
        <div>
          <div className="eyebrow">{t("HowItWorks.eyebrow")}</div>
          <h2 className="h2" style={{ marginTop: 10, maxWidth: "16ch" }}>{t("HowItWorks.heading")}</h2>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)", borderRadius: 16, overflow: "hidden" }} className="how-grid">
        <Step n={1} title={t("HowItWorks.step1Title")} body={t("HowItWorks.step1Body")} icon={<Ic.camera width="20" height="20" />} />
        <Step n={2} title={t("HowItWorks.step2Title")} body={t("HowItWorks.step2Body")} icon={<Ic.sparkle width="20" height="20" />} />
        <Step n={3} title={t("HowItWorks.step3Title")} body={t("HowItWorks.step3Body")} icon={<Ic.wrench width="20" height="20" />} />
      </div>
    </div>
    <style>{`@media (max-width:880px){.how-grid{grid-template-columns:1fr !important}}`}</style>
  </section>;


const Step = ({ n, title, body, icon }) =>
<div style={{ padding: 32, background: "var(--paper)", display: "flex", flexDirection: "column", gap: 18, minHeight: 240 }}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <StepNum n={n} />
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-tint)", color: "var(--accent-ink)", display: "grid", placeItems: "center" }}>{icon}</div>
    </div>
    <div>
      <h3 className="h3">{title}</h3>
      <p style={{ marginTop: 10, color: "var(--mute)", fontSize: 14.5, lineHeight: 1.5, textWrap: "pretty" }}>{body}</p>
    </div>
  </div>;


// ─────────────────────────────────────────────────────────────────────────────
// DEMO STRIP

const DemoStrip = ({ onLaunch }) =>
<section className="section">
    <div className="wrap breakdown-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }}>
      <div>
        <div className="eyebrow">{t("DemoStrip.eyebrow")}</div>
        <h2 className="h2" style={{ marginTop: 10 }}>
          {t("DemoStrip.heading")}
        </h2>
        <p className="lead" style={{ marginTop: 18 }}>
          {t("DemoStrip.lead")}
        </p>
        <ul style={{ listStyle: "none", padding: 0, marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          {[t("DemoStrip.bullet1"),
        t("DemoStrip.bullet2"),
        t("DemoStrip.bullet3")].
        map((bullet, i) =>
        <li key={i} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 15 }}>
              <span style={{ width: 22, height: 22, borderRadius: 50, background: "var(--accent-tint)", color: "var(--accent-ink)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                <Ic.check width="14" height="14" />
              </span>
              {bullet}
            </li>
        )}
        </ul>
      </div>
      <BreakdownPreview />
    </div>
    <style>{`@media (max-width:880px){.breakdown-grid{grid-template-columns:1fr !important;gap:40px !important}}`}</style>
  </section>;


const BreakdownPreview = () => {
  const rows = [
  ["Stoßfänger vorne (Ersatzteil)", "AUDI 8W6 807 437 P", 412.00],
  ["Stoßfängerlackierung (2K)", "Daytona Grey LZ7S", 178.00],
  ["Türblechausrichtung", "Arbeit · 1,5 Std. × 145 €", 217.50],
  ["Scheinwerferwaschanlage Deckel", "8W0 955 275 A", 38.40],
  ["Material & Verbrauchsmittel", "Spachtel, Grundierung, Klebeband", 64.20],
  ["Werkstattarbeit", "3,0 Std. × 145 € (M.-Werkstatt)", 435.00]];
  const total = rows.reduce((sum, [, , p]) => sum + p, 0);

  return (
    <div className="card" style={{ padding: 24, boxShadow: "var(--shadow-md)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <div className="eyebrow">{t("Breakdown.eyebrow")}</div>
          <div style={{ fontSize: 16, marginTop: 4 }}>{t("Breakdown.inspection")}</div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {rows.map(([name, , price], i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1fr auto", gap: 16,
          padding: "12px 0", borderTop: i === 0 ? "1px solid var(--rule)" : "1px dashed var(--rule)",
          alignItems: "center"
        }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{name}</div>
            </div>
            <div className="mono num" style={{ fontSize: 14, fontWeight: 500 }}>€ {price.toFixed(2)}</div>
          </div>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", padding: "16px 0 4px", borderTop: "1.5px solid var(--ink)", marginTop: 8 }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>{t("Breakdown.total")}</div>
          <div className="mono num" style={{ fontSize: 22, fontWeight: 500 }}>€ {total.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
        </div>
      </div>
    </div>);

};

// ─────────────────────────────────────────────────────────────────────────────
// DIY vs PRO

const DIYvsPro = () =>
<section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
    <div className="wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }} className="diy-grid">
        <div>
          <div className="eyebrow">{t("DIYvsPro.eyebrow")}</div>
          <h2 className="h2" style={{ marginTop: 12 }}>
            {t("DIYvsPro.heading")}
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>
            {t("DIYvsPro.lead")}
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
            <span className="pill" style={{ height: 32, fontSize: 14, padding: "0 14px" }}><Ic.bolt width="14" height="14" /> {t("DIYvsPro.pillDiy")}</span>
            <span className="pill" style={{ height: 32, fontSize: 14, padding: "0 14px" }}>{t("DIYvsPro.pillSaved")}</span>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }} className="diy-cards">
          <RecCard
          kind="diy"
          title={t("DIYvsPro.cardTitle")}
          price="€18.90"
          sub={t("DIYvsPro.cardSub")}
          difficulty={1}
          materials={[
            ["Sonax Lackstift", "Daytona Grey LZ7S", 11.90],
            ["2000-grit sanding pad", "Mirka Abranet 2-pack", 4.50],
            ["Microfiber polish cloth", "any brand", 2.50],
          ]}
          tips={[t("DIYvsPro.tip1"), t("DIYvsPro.tip2"), t("DIYvsPro.tip3"), t("DIYvsPro.tip4")]} />

        </div>
      </div>
    </div>
    <style>{`@media (max-width:880px){.diy-grid{grid-template-columns:1fr !important}.diy-cards{grid-template-columns:1fr !important}}`}</style>
  </section>;


const RecCard = ({ kind, title, price, sub, tips, highlighted, materials, difficulty }) =>
<div style={{
  padding: 26,
  background: highlighted ? "var(--accent)" : "var(--bg)",
  color: highlighted ? "#fff" : "var(--ink)",
  border: `1px solid ${highlighted ? "var(--accent)" : "var(--rule)"}`,
  borderRadius: 14, display: "flex", flexDirection: "column", gap: 18,
  boxShadow: highlighted ? "var(--shadow-md)" : "var(--shadow-sm)"
}}>
    {/* Title row: title + price aligned */}
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
      <div>
        <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em" }}>{title}</div>
        <div style={{ fontSize: 14, opacity: highlighted ? 0.85 : 0.65, marginTop: 4 }}>{sub}</div>
      </div>
      <div className="mono num" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", flexShrink: 0 }}>{price}</div>
    </div>

    {/* Meta chips: difficulty + time + confidence */}
    {kind === "diy" && (
      <div style={{ display: "flex", gap: 18, flexWrap: "wrap", paddingTop: 4, paddingBottom: 4, borderTop: "1px dashed var(--rule)", borderBottom: "1px dashed var(--rule)" }}>
        <DiyMeta label={t("RecCard.difficultyLabel")} value={
          <span style={{ display: "inline-flex", gap: 3 }}>
            {[1,2,3,4,5].map(i => (
              <span key={i} style={{
                width: 6, height: 14, borderRadius: 2,
                background: i <= (difficulty || 1) ? "var(--accent)" : "var(--rule-2)"
              }} />
            ))}
            <span style={{ marginLeft: 6, fontSize: 13, color: "var(--ink-2)", fontWeight: 500 }}>{t("RecCard.difficultyBeginner")}</span>
          </span>
        } />
        <DiyMeta label={t("RecCard.activeTimeLabel")} value={t("RecCard.activeTimeValue")} mono />
      </div>
    )}

    {/* Materials checklist */}
    {materials && (
      <div>
        <div className="eyebrow" style={{ marginBottom: 8 }}>{t("RecCard.materialsHeading")}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {materials.map(([name, brand, cost], i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center" }}>
              <span style={{
                width: 26, height: 26, borderRadius: 6, background: "var(--bg-2)",
                color: "var(--ink-2)", display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                <Ic.check width="13" height="13" />
              </span>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{name}</div>
              <div className="mono num" style={{ fontSize: 13.5, fontWeight: 500 }}>€{cost.toFixed(2)}</div>
            </div>
          ))}
        </div>
      </div>
    )}

    {/* Numbered steps */}
    <div>
      <div className="eyebrow" style={{ marginBottom: 8 }}>{kind === "diy" ? t("RecCard.diyHeading") : t("RecCard.proHeading")}</div>
      <ol style={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
        {tips.map((tip, i) =>
      <li key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, alignItems: "flex-start" }}>
            <span className="mono" style={{ fontSize: 11, opacity: highlighted ? 0.7 : 0.55, marginTop: 3, minWidth: 16 }}>{String(i + 1).padStart(2, "0")}</span>
            <span style={{ opacity: highlighted ? 0.95 : 0.85 }}>{tip}</span>
          </li>
      )}
      </ol>
    </div>

    {/* CTA row */}
  </div>;

const DiyMeta = ({ label, value, mono }) =>
<div>
    <div className="tiny" style={{ marginBottom: 4 }}>{label}</div>
    <div className={mono ? "mono num" : ""} style={{ fontSize: 13.5, fontWeight: 500 }}>{value}</div>
  </div>;


// ─────────────────────────────────────────────────────────────────────────────
// QUOTES FROM WORKSHOPS

const QuotesPreview = () =>
<section className="section">
    <div className="wrap quotes-section" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }}>
      <div>
        <div className="eyebrow">{t("QuotesPreview.eyebrow")}</div>
        <h2 className="h2" style={{ marginTop: 10 }}>
          {t("QuotesPreview.heading")}
        </h2>
        <p className="lead" style={{ marginTop: 18 }}>
          {t("QuotesPreview.lead")}
        </p>
        <ul style={{ listStyle: "none", padding: 0, marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
          {[t("QuotesPreview.bullet1"),
        t("QuotesPreview.bullet2"),
        t("QuotesPreview.bullet3"),
        t("QuotesPreview.bullet4")].
        map((bullet, i) =>
        <li key={i} style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 15 }}>
              <span style={{ width: 22, height: 22, borderRadius: 50, background: "var(--accent-tint)", color: "var(--accent-ink)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                <Ic.check width="14" height="14" />
              </span>
              {bullet}
            </li>
        )}
        </ul>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {(window.getWorkshops ? getWorkshops() : []).slice(0, 3).map((w, i) => <QuoteCard key={w.name} w={w} rank={i + 1} />)}
      </div>
    </div>
    <style>{`@media (max-width:880px){.quotes-section{grid-template-columns:1fr !important; gap:40px !important}}`}</style>
  </section>;


const QuoteCard = ({ w, rank }) => {
  const specialties = {
    "Karosserie Reuter": t("QuoteCard.specialty_karosserie"),
    "AutoFix Premium": t("QuoteCard.specialty_autofix"),
    "MeisterWerk Schmidt": t("QuoteCard.specialty_meisterwerk"),
    "Lack & Karosserie Möller": t("QuoteCard.specialty_moeller"),
  };
  const matchPct = [98, 94, 91][((rank || 1) - 1) % 3];
  return (
    <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", gap: 14, boxShadow: "var(--shadow-sm)" }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 12,
          background: w.color || "var(--bg-2)", color: "#fff",
          display: "grid", placeItems: "center",
          fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em", flexShrink: 0,
        }}>
          {w.name.split(" ").map((s) => s[0]).slice(0, 2).join("")}
        </div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 15.5, fontWeight: 600, letterSpacing: "-0.01em" }}>{w.name}</div>
          <div style={{ display: "flex", gap: 12, marginTop: 4, alignItems: "center", flexWrap: "wrap", fontSize: 12.5, color: "var(--mute)" }}>
            <span style={{ display: "flex", gap: 4, alignItems: "center" }}>
              <Ic.star width="12" height="12" style={{ color: "#F5B400" }} />
              <b style={{ color: "var(--ink)", fontWeight: 500 }}>{w.rating}</b>
              <span>({w.reviews})</span>
            </span>
            <span style={{ display: "flex", gap: 4, alignItems: "center" }}>
              <Ic.pin width="12" height="12" /> {w.dist} km · {w.city.split("-")[1] || w.city}
            </span>
          </div>
        </div>
        <button className="btn btn-accent btn-sm" disabled style={{ pointerEvents: "none", flexShrink: 0 }}>
          {t("QuotesPreview.btnRequest")}
        </button>
      </div>

      <div style={{ fontSize: 13, color: "var(--ink-2)", display: "flex", gap: 8, alignItems: "flex-start" }}>
        <Ic.sparkle width="14" height="14" style={{ color: "var(--accent-ink)", flexShrink: 0, marginTop: 1 }} />
        <span style={{ lineHeight: 1.45 }}>{specialties[w.name] || w.badges[0]}</span>
      </div>

    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// TRUST / LOGOS

const Trust = () => {
  const reviews = [
    { q: t("Trust.review1q"), a: t("Trust.review1a"), r: t("Trust.review1r"), c: "#8B5CF6" },
    { q: t("Trust.review2q"), a: t("Trust.review2a"), r: t("Trust.review2r"), c: "#10A171" },
    { q: t("Trust.review3q"), a: t("Trust.review3a"), r: t("Trust.review3r"), c: "#1F4FD9" },
    { q: t("Trust.review4q"), a: t("Trust.review4a"), r: t("Trust.review4r"), c: "#E25A1C" },
    { q: t("Trust.review5q"), a: t("Trust.review5a"), r: t("Trust.review5r"), c: "#0E7C8A" },
    { q: t("Trust.review6q"), a: t("Trust.review6a"), r: t("Trust.review6r"), c: "#F5B400" },
    { q: t("Trust.review7q"), a: t("Trust.review7a"), r: t("Trust.review7r"), c: "#B91C1C" },
    { q: t("Trust.review8q"), a: t("Trust.review8a"), r: t("Trust.review8r"), c: "#7A5AE0" },
  ];

  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", overflow: "hidden", paddingTop: 120, paddingBottom: 120 }}>
      <div className="wrap" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18, marginBottom: 48, textAlign: "center" }}>
        <div className="eyebrow">{t("Trust.eyebrow")}</div>
        <h2 className="h2" style={{ maxWidth: "22ch" }}>
          {t("Trust.heading")}
        </h2>
      </div>

      {/* Auto-scrolling carousel — duplicated for seamless loop */}
      <div className="testi-marquee">
        <div className="testi-track">
          {[...reviews, ...reviews].map((rev, i) => (
            <figure key={i} className="card testi-card">
              <div style={{ display: "flex", gap: 1, color: "#F5B400", marginBottom: 10 }}>
                {[1, 2, 3, 4, 5].map((s) => <Ic.star key={s} width="13" height="13" />)}
              </div>
              <blockquote style={{ margin: 0, fontSize: 14.5, lineHeight: 1.5, textWrap: "pretty", flex: 1 }}>
                "{rev.q}"
              </blockquote>
              <figcaption style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16 }}>
                <Avatar initials={rev.a.split(" ").map((s) => s[0]).join("")} color={rev.c} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{rev.a}</div>
                  <div className="tiny">{rev.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .testi-marquee{
          position: relative;
          width: 100%;
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
        .testi-track{
          display: flex;
          gap: 18px;
          width: max-content;
          animation: testi-scroll 70s linear infinite;
        }
        .testi-marquee:hover .testi-track{ animation-play-state: paused; }
        .testi-card{
          flex: 0 0 320px;
          padding: 22px;
          margin: 0;
          display: flex;
          flex-direction: column;
          min-height: 200px;
        }
        @keyframes testi-scroll{
          0%   { transform: translateX(0); }
          100% { transform: translateX(calc(-50% - 9px)); }
        }
        @media (prefers-reduced-motion: reduce){
          .testi-track{ animation: none; }
        }
      `}</style>
    </section>
  );
};


// ─────────────────────────────────────────────────────────────────────────────
// FOOTER

const Footer = () =>
<footer style={{ background: "var(--paper)", borderTop: "1px solid var(--rule)", padding: "24px 0" }}>
    <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, color: "var(--mute)", flexWrap: "wrap", gap: 12 }}>
      <div>{t("Footer.copy")}</div>
      <div style={{ display: "flex", gap: 20 }}>
        <a href="/imprint" onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("imprint"); }} style={{ color: "var(--mute)", fontSize: 12.5 }}>{t("Footer.imprint")}</a>
        <a href="/terms"   onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("terms"); }}   style={{ color: "var(--mute)", fontSize: 12.5 }}>{t("Footer.terms")}</a>
        <a href="/privacy" onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("privacy"); }} style={{ color: "var(--mute)", fontSize: 12.5 }}>{t("Footer.privacy")}</a>
      </div>
    </div>
  </footer>;


const CookieBanner = () => {
  const [visible, setVisible] = React.useState(() => !localStorage.getItem("ok_cookie_consent"));

  const accept = (type) => {
    localStorage.setItem("ok_cookie_consent", type);
    if (type === "all" && typeof window.gtag === "function") {
      window.gtag("consent", "update", { analytics_storage: "granted" });
    }
    setVisible(false);
  };

  React.useEffect(() => {
    if (!visible) return;
    const handler = () => accept("all");
    window.addEventListener("ok:interact", handler);
    return () => window.removeEventListener("ok:interact", handler);
  }, [visible]);

  if (!visible) return null;

  return (
    <div style={{
      position: "fixed", bottom: 20, left: "50%", transform: "translateX(-50%)",
      zIndex: 9999, width: "calc(100% - 56px)", maxWidth: 1280,
      background: "#fff", borderRadius: 14,
      boxShadow: "0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06)",
      padding: "16px 20px", display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
    }}>
      <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, flex: "1 1 220px", color: "var(--ink-3)" }}>
        Wir nutzen Cookies, damit diese Website reibungslos läuft, und – mit Ihrer Zustimmung – um zu verstehen, wie sie genutzt wird.{" "}
        <a href="/privacy" onClick={(e) => { e.preventDefault(); window.__nav && window.__nav("privacy"); }}
          style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}>Datenschutzerklärung</a>.
      </p>
      <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
        <button onClick={() => accept("technical")} style={{
          height: 36, padding: "0 16px", borderRadius: 8,
          border: "1px solid var(--rule)", background: "#fff",
          color: "var(--ink)", fontSize: 13, fontWeight: 500, cursor: "pointer",
          fontFamily: "inherit",
        }}>
          Nur technisch
        </button>
        <button onClick={() => accept("all")} style={{
          height: 36, padding: "0 18px", borderRadius: 8, border: "none",
          background: "var(--accent)", color: "#fff", fontSize: 13, fontWeight: 600,
          cursor: "pointer", fontFamily: "inherit",
        }}>
          Alle akzeptieren
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { Landing, Footer, CookieBanner });