// edit-page.jsx — the captured "McFIT · Angebote" page, fully data-driven so Leo's
// edits mutate state and re-render live. Every editable node carries data-eid (stable id),
// data-elabel (human label) and data-etype (copy | image | button | section).
// Exports: EditPage, CASCADE_INITIAL (alias MCFIT_INITIAL), SECTION_LABELS, DEFAULT_ORDER

const M = {
  yellow: "#FFCC00", yellowLt: "#FDDB4C", yellowDk: "#EBB800",
  ink: "#232E3C", slate: "#3A4654", sub: "#5B6573", faint: "#8A93A0",
  line: "#E4E7EB", soft: "#F4F5F6", white: "#fff",
  display: "'Anton', 'Archivo', system-ui, sans-serif",
  font: "'Archivo', system-ui, -apple-system, sans-serif",
};

const HERO_IMAGES = {
  athlete: { src: "assets/mcfit-hero.webp", pos: "calc(100% + 40px) center", tint: "#FFCC00", rgb: "255,204,0" },
  moah:    { src: "assets/mcfit-hero-orange.png", pos: "calc(100% + 120px) center", tint: "#FB8E42", rgb: "251,142,66" },
  moah2:   { src: "assets/mcfit-hero-orange2.png", pos: "calc(100% + 60px) center", tint: "#FA883F", rgb: "250,136,63" },
};
window.HERO_IMAGES = HERO_IMAGES;

const MCFIT_INITIAL = {
  navCta: "Mitglied werden",
  heroEyebrow: "MITGLIEDSCHAFT",
  heroHeadline: "TRAINIEREN, WIE DU WILLST",
  heroSubhead: "Über 250 Studios in ganz Deutschland. Modernste Geräte, Kurse und Cycling inklusive.",
  heroCta: "Mitglied werden",
  heroCta2: "Studio finden",
  heroImage: "athlete",
  offersHeadline: "WÄHLE DEINEN TARIF",
  offer2Name: "BASIC",
  offer2Price: "19,90 €",
  offerCta: "Tarif wählen",
  benefitsHeadline: "WARUM McFIT?",
  footerHeadline: "BEREIT LOSZULEGEN?",
  footerCta: "Mitglied werden",
  // course-hype section (cheeky McFIT voice)
  hypeKicker: "30+ KURSE INKLUSIVE",
  hypeHeadline: "BAUCH BEINE BOAH",
  hypeSub: "Schwitzen, lachen, wiederkommen. Von Cycling bis Functional – deine Ausreden bleiben draußen.",
  hypeCta: "Kursplan ansehen",
  // added-section content (member proof)
  testimonialHeadline: "Das sagen unsere Mitglieder",
};
// keep the historical export name so studio-data's `BASE` keeps resolving
const CASCADE_INITIAL = MCFIT_INITIAL;

const SECTION_LABELS = {
  nav: "Navigation", hero: "Hero", proof: "Mitglieder-Beweis",
  offers: "Tarife", hype: "Kurs-Hype", benefits: "Vorteile", footer: "Footer CTA",
};
const DEFAULT_ORDER = ["nav", "hero", "offers", "benefits", "footer"];

window.MCFIT_INITIAL = MCFIT_INITIAL;
window.CASCADE_INITIAL = CASCADE_INITIAL;
window.SECTION_LABELS = SECTION_LABELS;
window.DEFAULT_ORDER = DEFAULT_ORDER;

// ---- editable wrapper ----
function Ed({ eid, label, etype = "copy", as = "div", style, children, onPick }) {
  const Tag = as;
  return (
    <Tag data-eid={eid} data-elabel={label} data-etype={etype} data-editable="1"
      onClick={onPick ? (e) => { e.stopPropagation(); onPick(eid, etype); } : undefined}
      style={style}>{children}</Tag>
  );
}

function Bullet({ children, mobile }) {
  return (
    <div style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: mobile ? 13 : 13.5, color: M.slate, lineHeight: 1.4 }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={M.ink} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none", marginTop: 1 }}><polyline points="20 6 9 17 4 12" /></svg>
      <span>{children}</span>
    </div>
  );
}

function TariffCard({ name, price, term, bullets, cta, popular, badge, mobile, onPick, nameEid, priceEid, ctaEid }) {
  const pk = onPick;
  return (
    <div style={{ position: "relative", background: M.white, border: popular ? `2.5px solid ${M.yellow}` : `1.5px solid ${M.line}`,
      borderRadius: 12, padding: mobile ? "22px 18px" : "26px 22px", display: "flex", flexDirection: "column",
      boxShadow: popular ? "0 22px 44px -26px rgba(35,46,58,0.4)" : "none" }}>
      {popular && (
        <span style={{ position: "absolute", top: -13, left: 22, background: M.ink, color: M.yellow, fontFamily: M.font,
          fontWeight: 800, fontSize: 11, letterSpacing: "0.1em", padding: "5px 11px", borderRadius: 5 }}>{badge}</span>
      )}
      {nameEid
        ? <Ed eid={nameEid} label="Tarifname" etype="copy" as="div" onPick={pk} style={{ fontFamily: M.font, fontWeight: 800, fontSize: 15, letterSpacing: "0.08em", color: M.sub, textTransform: "uppercase" }}>{name}</Ed>
        : <div style={{ fontFamily: M.font, fontWeight: 800, fontSize: 15, letterSpacing: "0.08em", color: M.sub, textTransform: "uppercase" }}>{name}</div>}
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, margin: "10px 0 2px", flexWrap: "nowrap", whiteSpace: "nowrap" }}>
        {priceEid
          ? <Ed eid={priceEid} label="Tarifpreis" etype="copy" as="span" onPick={pk} style={{ fontFamily: M.display, fontSize: mobile ? 38 : 42, color: M.ink, lineHeight: 1, whiteSpace: "nowrap" }}>{price}</Ed>
          : <span style={{ fontFamily: M.display, fontSize: mobile ? 38 : 42, color: M.ink, lineHeight: 1, whiteSpace: "nowrap" }}>{price}</span>}
        <span style={{ fontFamily: M.font, fontSize: 13.5, fontWeight: 600, color: M.sub }}>/Monat</span>
      </div>
      <div style={{ fontFamily: M.font, fontSize: 12.5, fontWeight: 600, color: M.faint, marginBottom: 16 }}>{term}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9, borderTop: `1px solid ${M.line}`, paddingTop: 16, marginBottom: 20 }}>
        {bullets.map((b, i) => <Bullet key={i} mobile={mobile}>{b}</Bullet>)}
      </div>
      <div style={{ flex: 1 }} />
      {ctaEid
        ? <Ed eid={ctaEid} label="Tarif-CTA" etype="button" as="button" onPick={pk} style={btn(popular ? M.yellow : M.white, M.ink, popular ? "none" : `1.5px solid ${M.ink}`, true)}>{cta}</Ed>
        : <button style={btn(popular ? M.yellow : M.white, M.ink, popular ? "none" : `1.5px solid ${M.ink}`, true)}>{cta}</button>}
    </div>
  );
}

function btn(bg, color, brd, full) {
  return {
    background: bg, color, border: brd || "none", fontFamily: M.font, fontWeight: 800, fontSize: 14,
    letterSpacing: "0.04em", textTransform: "uppercase", padding: full ? "13px 18px" : "12px 22px",
    borderRadius: 6, cursor: "pointer", whiteSpace: "nowrap", width: full ? "100%" : "auto",
  };
}

function BenefitIcon({ kind }) {
  const s = { width: 30, height: 30, viewBox: "0 0 24 24", fill: "none", stroke: M.yellow, strokeWidth: 1.9, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "pin":    return <svg {...s}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z" /><circle cx="12" cy="10" r="3" /></svg>;
    case "weight": return <svg {...s}><path d="M6.5 6.5l11 11M21 21l-1-1M3 3l1 1M18 22l4-4M2 6l4-4M6 18l-4 4M22 18l-4-4" /></svg>;
    case "bike":   return <svg {...s}><circle cx="5.5" cy="17.5" r="3.5" /><circle cx="18.5" cy="17.5" r="3.5" /><path d="M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM12 17.5V14l-3-3 4-3 2 3h2" /></svg>;
    default:       return <svg {...s}><rect x="7" y="2" width="10" height="20" rx="2.5" /><line x1="11" y1="18" x2="13" y2="18" /></svg>;
  }
}

function EditPage({ content, order, mobile, pickMode, onPick }) {
  const c = content;
  const pad = mobile ? 18 : 40;
  const pk = onPick;
  const navLink = { fontFamily: M.font, fontSize: 13, color: M.ink, fontWeight: 700, letterSpacing: "0.03em", textTransform: "uppercase" };

  const sections = {
    nav: (
      <Ed key="nav" eid="sec-nav" label="Navigation" etype="section" as="div" onPick={pk}
        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: `14px ${pad}px`,
          background: M.white, borderBottom: `1px solid ${M.line}` }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <img src="assets/mcfit-logo.webp" alt="McFIT" style={{ height: 26, width: "auto", display: "block" }} />
          <span style={{ fontFamily: M.font, fontWeight: 900, fontSize: 20, color: M.ink, letterSpacing: "-0.01em" }}>McFIT</span>
        </div>
        {mobile ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {[0, 1, 2].map(i => <div key={i} style={{ width: 22, height: 2.5, background: M.ink, borderRadius: 2 }} />)}
          </div>
        ) : (
          <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
            <span style={navLink}>Angebote</span>
            <span style={navLink}>Studios</span>
            <span style={navLink}>Kurse</span>
            <span style={navLink}>App</span>
            <Ed eid="nav-cta" label="Nav button" etype="button" as="button" onPick={pk} style={btn(M.yellow, M.ink)}>{c.navCta}</Ed>
          </div>
        )}
      </Ed>
    ),
    hero: (() => { const himg = HERO_IMAGES[c.heroImage] || HERO_IMAGES.athlete; return (
      <Ed key="hero" eid="sec-hero" label="Hero" etype="section" as="div" onPick={pk}
        style={{ position: "relative", background: himg.tint, overflow: "hidden", minHeight: mobile ? 440 : 540 }}>
        <Ed eid="hero-image" label="Hero image" etype="image" as="div" onPick={pk}
          style={{ position: "absolute", inset: 0, backgroundImage: `url(${himg.src})`,
            backgroundSize: "cover", backgroundPosition: mobile ? "82% center" : himg.pos }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(255,255,255,0.12)" }} />
        <div style={{ position: "absolute", inset: 0, background: mobile
          ? `linear-gradient(180deg, rgba(${himg.rgb},0.1) 0%, rgba(${himg.rgb},0.62) 48%, ${himg.tint} 100%)`
          : `linear-gradient(90deg, ${himg.tint} 0%, ${himg.tint} 40%, rgba(${himg.rgb},0.55) 62%, rgba(${himg.rgb},0) 82%)` }} />
        <div style={{ position: "relative", padding: mobile ? `220px ${pad}px 32px` : `120px ${pad}px 110px`, maxWidth: mobile ? "none" : 580 }}>
          <Ed eid="hero-eyebrow" label="Eyebrow" etype="copy" as="div" onPick={pk}
            style={{ display: "inline-block", fontFamily: M.font, fontSize: 12, fontWeight: 800, letterSpacing: "0.1em",
              color: himg.tint, background: M.ink, padding: "6px 12px", borderRadius: 5, marginBottom: 18 }}>{c.heroEyebrow}</Ed>
          <Ed eid="hero-headline" label="Headline" etype="copy" as="h1" onPick={pk}
            style={{ fontFamily: M.display, fontSize: mobile ? 36 : 56, lineHeight: 1.0, letterSpacing: "0.01em",
              margin: "0 0 18px", color: M.ink, textTransform: "uppercase" }}>{c.heroHeadline}</Ed>
          <Ed eid="hero-subhead" label="Subhead" etype="copy" as="p" onPick={pk}
            style={{ fontFamily: M.font, fontSize: mobile ? 15 : 17, lineHeight: 1.45, fontWeight: 500, color: M.slate,
              margin: "0 0 26px", maxWidth: 400 }}>{c.heroSubhead}</Ed>
          <div style={{ display: "flex", gap: 12, flexDirection: mobile ? "column" : "row" }}>
            <Ed eid="hero-cta" label="Primary CTA" etype="button" as="button" onPick={pk} style={btn(M.ink, M.white)}>{c.heroCta}</Ed>
            <Ed eid="hero-cta2" label="Secondary CTA" etype="button" as="button" onPick={pk} style={btn("transparent", M.ink, `1.5px solid ${M.ink}`)}>{c.heroCta2}</Ed>
          </div>
        </div>
      </Ed>
    ); })(),
    proof: (
      <Ed key="proof" eid="sec-proof" label="Mitglieder-Beweis" etype="section" as="div" onPick={pk}
        style={{ padding: `${mobile ? 40 : 56}px ${pad}px`, background: M.soft, textAlign: "center", borderBottom: `1px solid ${M.line}` }}>
        <Ed eid="testi-headline" label="Mitglieder-Headline" etype="copy" as="h2" onPick={pk}
          style={{ fontFamily: M.display, fontSize: mobile ? 26 : 34, color: M.ink, textTransform: "uppercase", letterSpacing: "0.01em", margin: "0 0 6px" }}>
          {c.testimonialHeadline}</Ed>
        <div style={{ fontFamily: M.font, fontWeight: 700, fontSize: 14, color: M.sub, marginBottom: 28 }}>Über 2 Mio. Mitglieder · 4,6 ★ im App Store</div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: 14, maxWidth: 880, margin: "0 auto" }}>
          {[
            { q: "Beste Geräte, faire Preise. Ich gehe seit 3 Jahren her.", n: "Daniel K.", s: "Berlin" },
            { q: "Endlich ein Studio, das wirklich überall ist. Top!", n: "Aylin S.", s: "Köln" },
            { q: "Kurse inklusive und monatlich kündbar — genau mein Ding.", n: "Marco R.", s: "Hamburg" },
          ].map((t, i) => (
            <div key={i} style={{ background: M.white, border: `1.5px solid ${M.line}`, borderRadius: 12, padding: 20, textAlign: "left" }}>
              <div style={{ display: "flex", gap: 2, marginBottom: 10 }}>{[0,1,2,3,4].map(j => <span key={j} style={{ color: M.yellowDk, fontSize: 14 }}>★</span>)}</div>
              <div style={{ fontFamily: M.font, fontSize: 14, lineHeight: 1.5, color: M.ink, fontWeight: 500, marginBottom: 14 }}>„{t.q}“</div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 99, background: M.yellow, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: M.font, fontWeight: 800, fontSize: 13, color: M.ink }}>{t.n[0]}</div>
                <div><div style={{ fontFamily: M.font, fontSize: 12.5, fontWeight: 700, color: M.ink }}>{t.n}</div>
                  <div style={{ fontFamily: M.font, fontSize: 11.5, color: M.sub }}>{t.s}</div></div>
              </div>
            </div>
          ))}
        </div>
      </Ed>
    ),
    offers: (
      <Ed key="offers" eid="sec-offers" label="Tarife" etype="section" as="div" onPick={pk}
        style={{ padding: `${mobile ? 44 : 64}px ${pad}px`, background: M.white }}>
        <Ed eid="offers-headline" label="Tarif-Headline" etype="copy" as="h2" onPick={pk}
          style={{ fontFamily: M.display, fontSize: mobile ? 30 : 40, color: M.ink, textTransform: "uppercase", textAlign: "center", letterSpacing: "0.01em", margin: "0 0 6px" }}>
          {c.offersHeadline}</Ed>
        <p style={{ fontFamily: M.font, fontSize: 15, color: M.sub, textAlign: "center", margin: "0 0 36px", fontWeight: 500 }}>Keine versteckten Kosten. Jederzeit upgraden.</p>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: mobile ? 24 : 18, maxWidth: 960, margin: "0 auto", alignItems: "stretch" }}>
          <TariffCard mobile={mobile} onPick={pk} name="FLEX" price="29,90 €" term="Monatlich kündbar"
            bullets={["Zugang zu deinem Studio", "Kurse & Cycling", "McFIT App"]} cta="Tarif wählen" />
          <TariffCard mobile={mobile} onPick={pk} popular badge="BELIEBT" name={c.offer2Name} price={c.offer2Price} term="24 Monate Laufzeit"
            bullets={["Alle Geräte ohne Limit", "Kurse & Cycling inklusive", "App & Trainingspläne"]} cta={c.offerCta}
            nameEid="offer-name" priceEid="offer-price" ctaEid="offer-cta" />
          <TariffCard mobile={mobile} onPick={pk} name="ALL IN" price="34,90 €" term="12 Monate Laufzeit"
            bullets={["Alle 250+ Studios", "Wellness & Sauna", "Getränke-Flatrate"]} cta="Tarif wählen" />
        </div>
      </Ed>
    ),
    benefits: (
      <Ed key="benefits" eid="sec-benefits" label="Vorteile" etype="section" as="div" onPick={pk}
        style={{ padding: `${mobile ? 44 : 60}px ${pad}px`, background: M.ink }}>
        <Ed eid="benefits-headline" label="Vorteile-Headline" etype="copy" as="h2" onPick={pk}
          style={{ fontFamily: M.display, fontSize: mobile ? 28 : 38, color: M.yellow, textTransform: "uppercase", textAlign: "center", letterSpacing: "0.01em", margin: "0 0 34px" }}>
          {c.benefitsHeadline}</Ed>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4,1fr)", gap: mobile ? 22 : 18, maxWidth: 880, margin: "0 auto" }}>
          {[
            { k: "pin", t: "250+ Studios", d: "Überall in Deutschland" },
            { k: "weight", t: "Top-Geräte", d: "Modernste Marken" },
            { k: "bike", t: "Kurse & Cycling", d: "Im Tarif inklusive" },
            { k: "app", t: "McFIT App", d: "Pläne & Tracking" },
          ].map((b, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              <div style={{ display: "inline-flex", marginBottom: 12 }}><BenefitIcon kind={b.k} /></div>
              <div style={{ fontFamily: M.font, fontWeight: 800, fontSize: 15, color: M.white, marginBottom: 3 }}>{b.t}</div>
              <div style={{ fontFamily: M.font, fontSize: 12.5, color: "#A7AFBA", fontWeight: 500 }}>{b.d}</div>
            </div>
          ))}
        </div>
      </Ed>
    ),
    hype: (
      <Ed key="hype" eid="sec-hype" label="Kurs-Promo" etype="section" as="div" onPick={pk}
        style={{ position: "relative", padding: `${mobile ? 44 : 56}px ${pad}px`, background: M.ink, overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -16, right: mobile ? -28 : 24, fontFamily: M.display, fontSize: mobile ? 110 : 190,
          color: "rgba(255,204,0,0.06)", lineHeight: 0.8, pointerEvents: "none", whiteSpace: "nowrap" }}>BOAH</div>
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.1fr 0.9fr", gap: mobile ? 24 : 44,
          alignItems: "center", maxWidth: 960, margin: "0 auto" }}>
          <div>
            <div style={{ fontFamily: M.font, fontSize: 12.5, fontWeight: 800, letterSpacing: "0.12em", color: M.yellow, marginBottom: 12 }}>{c.hypeKicker}</div>
            <Ed eid="hype-headline" label="Kurs-Headline" etype="copy" as="h2" onPick={pk}
              style={{ fontFamily: M.display, fontSize: mobile ? 44 : 60, lineHeight: 0.94, color: M.yellow, textTransform: "uppercase", letterSpacing: "0.01em", margin: "0 0 14px" }}>{c.hypeHeadline}</Ed>
            <Ed eid="hype-sub" label="Kurs-Subtext" etype="copy" as="p" onPick={pk}
              style={{ fontFamily: M.font, fontSize: mobile ? 15 : 16.5, lineHeight: 1.5, fontWeight: 500, color: "#C7CDD5", margin: 0, maxWidth: 420 }}>{c.hypeSub}</Ed>
          </div>
          <div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginBottom: 22 }}>
              {["CYCLING", "HIIT", "FUNCTIONAL", "BAUCH BEINE PO", "YOGA", "ZUMBA"].map(ch => (
                <span key={ch} style={{ fontFamily: M.font, fontWeight: 800, fontSize: 12.5, letterSpacing: "0.04em", color: M.white,
                  border: `1.5px solid ${M.yellow}`, borderRadius: 999, padding: "8px 14px" }}>{ch}</span>
              ))}
            </div>
            <Ed eid="hype-cta" label="Kurs-CTA" etype="button" as="button" onPick={pk} style={{ ...btn(M.yellow, M.ink), padding: "13px 26px", fontSize: 14.5 }}>{c.hypeCta}</Ed>
          </div>
        </div>
      </Ed>
    ),
    footer: (
      <Ed key="footer" eid="sec-footer" label="Footer CTA" etype="section" as="div" onPick={pk}
        style={{ padding: `${mobile ? 48 : 64}px ${pad}px`, background: M.yellow, textAlign: "center" }}>
        <Ed eid="footer-headline" label="Footer headline" etype="copy" as="h2" onPick={pk}
          style={{ fontFamily: M.display, fontSize: mobile ? 32 : 48, color: M.ink, textTransform: "uppercase", letterSpacing: "0.01em", margin: "0 0 10px" }}>
          {c.footerHeadline}</Ed>
        <p style={{ fontFamily: M.font, fontSize: 15, color: M.slate, fontWeight: 600, margin: "0 0 26px" }}>Schließ dich über 2 Mio. Mitgliedern an. Monatlich kündbar.</p>
        <Ed eid="footer-cta" label="Final CTA" etype="button" as="button" onPick={pk} style={{ ...btn(M.ink, M.white), padding: "15px 30px", fontSize: 15 }}>{c.footerCta}</Ed>
      </Ed>
    ),
  };

  return (
    <div style={{ fontFamily: M.font, background: M.white, color: M.ink, width: "100%" }}>
      {order.map(k => sections[k]).filter(Boolean)}
    </div>
  );
}

window.EditPage = EditPage;