// Landing page
const { useState: useState_L, useEffect: useEffect_L, useMemo: useMemo_L } = React;

// Mini bell curve inline
function MiniBell({ highlight = 0.82, h = 90, w = 260 }) {
  const pts = [];
  const N = 60;
  const mean = 0.55, sd = 0.18;
  for (let i = 0; i <= N; i++) {
    const x = i / N;
    const y = Math.exp(-((x - mean) ** 2) / (2 * sd * sd));
    pts.push([x, y]);
  }
  const maxY = Math.max(...pts.map(p => p[1]));
  const path = pts.map(([x, y], i) => {
    const px = x * w;
    const py = h - (y / maxY) * (h - 8) - 2;
    return `${i === 0 ? "M" : "L"}${px.toFixed(1)},${py.toFixed(1)}`;
  }).join(" ");
  const markerY = h - (Math.exp(-((highlight - mean) ** 2) / (2 * sd * sd)) / maxY) * (h - 8) - 2;
  const markerX = highlight * w;
  return (
    <svg width={w} height={h} style={{ display: "block" }}>
      <defs>
        <linearGradient id="bellGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="var(--indigo)" stopOpacity="0.14" />
          <stop offset="1" stopColor="var(--indigo)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={`${path} L${w},${h} L0,${h} Z`} fill="url(#bellGrad)" />
      <path d={path} fill="none" stroke="var(--indigo)" strokeWidth="1.5" />
      <line x1={markerX} x2={markerX} y1={markerY} y2={h} stroke="var(--ink-1)" strokeDasharray="2 2" strokeWidth="1" />
      <circle cx={markerX} cy={markerY} r="5" fill="var(--amber)" stroke="var(--ink-1)" strokeWidth="1.5" />
    </svg>
  );
}

function HeroCard() {
  // Mock dashboard preview card for hero right side
  const topicsPreview = [
    { name: "Fractions & decimals", acc: 0.45, ko: "분수·소수" },
    { name: "Algebra & number machines", acc: 0.55, ko: "대수" },
    { name: "Dates, times & timetables", acc: 0.60, ko: "시간·시간표" },
    { name: "Four operations", acc: 0.92, ko: "사칙연산" },
    { name: "2D shapes, perimeter & area", acc: 0.88, ko: "평면도형" },
  ];
  const { t, lang } = useT();
  // Live cohort size for paper 04 (falls back to 1,284 if RPC unavailable).
  const [cohort, setCohort] = React.useState(1284);
  React.useEffect(() => {
    if (!window._sb) return;
    let cancelled = false;
    window._sb.rpc("get_paper_score_distribution", { p_paper_id: 4 })
      .then(({ data }) => {
        if (cancelled || !Array.isArray(data) || data.length === 0) return;
        setCohort(data.length);
      });
    return () => { cancelled = true; };
  }, []);
  return (
    <div style={{
      background: "white", border: "1px solid var(--line)",
      borderRadius: 16, boxShadow: "var(--shadow-lg)",
      padding: 22, width: "100%",
    }}>
      {/* Window header */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        paddingBottom: 14, borderBottom: "1px solid var(--line)"
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            MOCK PAPER 04 / {lang === "ko" ? "결과" : "RESULTS"}
          </div>
          <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, marginTop: 4 }}>
            Angelina · <span className="tabular" style={{ color: "var(--indigo)" }}>42 / 50</span>
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="mono tabular" style={{ fontSize: 28, color: "var(--ink-1)", lineHeight: 1 }}>84<span style={{ color: "var(--ink-4)", fontSize: 18 }}>%</span></div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", marginTop: 4, letterSpacing: "0.06em", textTransform: "uppercase" }}>TOP 18%</div>
        </div>
      </div>

      {/* Bell curve */}
      <div style={{ marginTop: 16 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 6 }}>
          <div style={{ fontSize: 12, color: "var(--ink-2)" }}>{lang === "ko" ? `응시자 ${cohort.toLocaleString()}명 대비` : `vs ${cohort.toLocaleString()} students`}</div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>KS2 · YR5</div>
        </div>
        <MiniBell highlight={0.82} h={78} w={280} />
      </div>

      {/* Topic bars */}
      <div style={{ marginTop: 14 }}>
        <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 10 }}>
          {lang === "ko" ? "유형별 정답률" : "Accuracy by topic"}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {topicsPreview.map((tp, i) => {
            const weak = tp.acc < 0.65;
            return (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 10, fontSize: 12 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                  <div style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    {lang === "ko" ? tp.ko : tp.name}
                  </div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <div style={{ width: 110, height: 6, background: "var(--paper-3)", borderRadius: 4, overflow: "hidden" }}>
                    <div style={{
                      width: `${tp.acc * 100}%`, height: "100%",
                      background: weak ? "var(--rose)" : "var(--emerald)"
                    }} />
                  </div>
                  <div className="mono tabular" style={{ width: 32, textAlign: "right", color: weak ? "var(--rose)" : "var(--ink-2)" }}>
                    {Math.round(tp.acc * 100)}%
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{
        marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)",
        display: "flex", alignItems: "center", gap: 8,
        fontSize: 12, color: "var(--ink-2)"
      }}>
        <svg width="14" height="14" viewBox="0 0 20 20" fill="none">
          <circle cx="10" cy="10" r="8" stroke="var(--amber)" strokeWidth="1.5" />
          <path d="M10 6v4.5M10 13.5v.01" stroke="var(--amber)" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
        <span>{lang === "ko" ? "3개 취약 유형에 맞춘 유사 문제 12개가 준비됐어요." : "12 parameter-shifted practice questions ready for 3 weak topics."}</span>
      </div>
    </div>
  );
}

function Hero({ setView }) {
  const { t, lang } = useT();
  return (
    <section style={{ padding: "72px 28px 48px" }}>
      <div style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, alignItems: "center"
      }}>
        <div>
          <div className="pill" style={{ color: "var(--indigo)", background: "var(--indigo-tint)", borderColor: "color-mix(in oklab, var(--indigo) 20%, transparent)" }}>
            <span className="dot" />
            {t("hero_badge")}
          </div>
          <h1 style={{
            fontSize: "clamp(40px, 5vw, 60px)", lineHeight: 1.05, marginTop: 22,
            letterSpacing: "-0.022em", fontWeight: 500,
          }}>
            {t("hero_title_a")}
            <br />
            <span style={{ color: "var(--indigo)", fontStyle: "italic" }}>{t("hero_title_b")}</span>
          </h1>
          <p style={{ fontSize: 17, color: "var(--ink-2)", marginTop: 20, maxWidth: 540, lineHeight: 1.55 }}>
            {t("hero_sub")}
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
            <button className="btn btn-primary" style={{ padding: "12px 20px", fontSize: 15 }} onClick={() => setView("sample")}>
              {t("hero_cta")}
              <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M5 10h10m0 0l-4-4m4 4l-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
            <button className="btn btn-ghost" style={{ padding: "12px 20px", fontSize: 15 }} onClick={() => setView("results-demo")}>
              {t("hero_cta_2")}
            </button>
          </div>
          <div style={{ display: "flex", gap: 24, marginTop: 28, fontSize: 13, color: "var(--ink-3)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M4 10l4 4 8-8" stroke="var(--emerald)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              {t("hero_meta_free")}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M4 10l4 4 8-8" stroke="var(--emerald)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              {t("hero_meta_price")}
            </div>
          </div>
        </div>
        <div>
          <HeroCard />
        </div>
      </div>
    </section>
  );
}

function ValueProps() {
  const { t, lang } = useT();
  const items = [
    {
      title: t("vp_1_t"), body: t("vp_1_b"),
      icon: (
        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
          <rect x="5" y="8" width="30" height="24" rx="2" stroke="var(--ink-1)" strokeWidth="1.5" fill="var(--indigo-tint)" />
          <rect x="9" y="14" width="5" height="14" fill="var(--emerald)" />
          <rect x="16" y="18" width="5" height="10" fill="var(--emerald)" />
          <rect x="23" y="12" width="5" height="16" fill="var(--rose)" />
        </svg>
      )
    },
    {
      title: t("vp_2_t"), body: t("vp_2_b"),
      icon: (
        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
          <circle cx="14" cy="20" r="7" stroke="var(--ink-1)" strokeWidth="1.5" fill="var(--rose-tint)" />
          <circle cx="26" cy="20" r="7" stroke="var(--ink-1)" strokeWidth="1.5" fill="var(--emerald-tint)" />
          <path d="M17 14l6 12" stroke="var(--ink-1)" strokeWidth="1.2" strokeDasharray="2 2" />
        </svg>
      )
    },
    {
      title: t("vp_3_t"), body: t("vp_3_b"),
      icon: (
        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
          <rect x="7" y="10" width="26" height="20" rx="2" fill="var(--amber-tint)" stroke="var(--ink-1)" strokeWidth="1.5" />
          <text x="20" y="25" textAnchor="middle" fontFamily="IBM Plex Serif" fontSize="13" fill="var(--ink-1)">£3.99</text>
        </svg>
      )
    },
  ];
  return (
    <section style={{ padding: "72px 28px", background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
          {t("vp_eyebrow")}
        </div>
        <h2 style={{ fontSize: 38, marginTop: 10, letterSpacing: "-0.02em", maxWidth: 680 }}>{t("vp_title")}</h2>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: "white", border: "1px solid var(--line)", borderRadius: 14,
              padding: 28, display: "flex", flexDirection: "column", gap: 16,
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 10,
                background: "var(--paper-2)", border: "1px solid var(--line)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>{it.icon}</div>
              <div>
                <div className="mono tabular" style={{ fontSize: 11, color: "var(--ink-4)", marginBottom: 6 }}>
                  0{i + 1}
                </div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, marginBottom: 8 }}>{it.title}</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingCompare({ onBuy }) {
  const { t, lang } = useT();
  const rows = [
    { name: t("pc_us"), us: true, single: "£3.99", pack: "£29.99 / 10", report: "yes" },
    { name: t("pc_atom"), us: false, single: "~£60 / mo", pack: "subscription", report: "partial" },
    { name: t("pc_bond"), us: false, single: "~£8.99", pack: "~£40 / 6", report: "no" },
    { name: t("pc_cgp"), us: false, single: "~£6.50", pack: "book only", report: "no" },
    { name: t("pc_eps"), us: false, single: "~£4.50", pack: "~£30 / pack", report: "no" },
  ];
  const reportIcon = (v) => {
    if (v === "yes") return <span style={{ color: "var(--emerald)", fontWeight: 500 }}>● {lang === "ko" ? "전체 유형" : "all 14 topics"}</span>;
    if (v === "partial") return <span style={{ color: "var(--amber)" }}>◐ {lang === "ko" ? "부분" : "partial"}</span>;
    return <span style={{ color: "var(--ink-4)" }}>○ {lang === "ko" ? "점수만" : "score only"}</span>;
  };
  return (
    <section style={{ padding: "72px 28px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 36 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              {t("pc_eyebrow")}
            </div>
            <h2 style={{ fontSize: 38, marginTop: 10, letterSpacing: "-0.02em" }}>{t("pc_title")}</h2>
          </div>
          <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.6, margin: 0 }}>
            {t("pc_note")}
          </p>
        </div>

        <div style={{
          background: "white", border: "1px solid var(--line)", borderRadius: 14,
          overflow: "hidden",
        }}>
          <div style={{
            display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.3fr",
            padding: "14px 22px", background: "var(--paper-2)",
            borderBottom: "1px solid var(--line)",
            fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em",
            fontFamily: "var(--font-mono)",
          }}>
            <div>{t("pc_hdr_provider")}</div>
            <div>{t("pc_hdr_single")}</div>
            <div>{t("pc_hdr_pack")}</div>
            <div>{t("pc_hdr_report")}</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.3fr",
              padding: "18px 22px",
              borderBottom: i === rows.length - 1 ? "none" : "1px solid var(--line)",
              alignItems: "center",
              background: r.us ? "color-mix(in oklab, var(--indigo-tint) 55%, white)" : "white",
              fontSize: 14,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 6,
                  background: r.us ? "var(--ink-1)" : "var(--paper-3)",
                  color: r.us ? "var(--paper)" : "var(--ink-3)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-serif)", fontSize: 11,
                }}>{r.us ? "11+" : r.name.slice(0, 1)}</div>
                <div style={{ fontWeight: r.us ? 500 : 400 }}>{r.name}</div>
                {r.us && <span className="pill" style={{ color: "var(--indigo)", background: "white" }}>You are here</span>}
              </div>
              <div className="mono tabular" style={{ color: r.us ? "var(--indigo)" : "var(--ink-2)", fontWeight: r.us ? 500 : 400 }}>{r.single}</div>
              <div className="mono tabular" style={{ color: r.us ? "var(--indigo)" : "var(--ink-2)", fontWeight: r.us ? 500 : 400 }}>{r.pack}</div>
              <div style={{ fontSize: 13 }}>{reportIcon(r.report)}</div>
            </div>
          ))}
        </div>

        {/* Pricing tiers */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 20,
        }}>
          {[
            { n: 1, price: "£3.99", per: "/ paper", tag: lang === "ko" ? "처음 써보기" : "Dip a toe in" },
            { n: 3, price: "£9.99", per: lang === "ko" ? "3회 묶음" : "3-pack", tag: lang === "ko" ? "가장 인기" : "Most popular", highlight: true },
            { n: 10, price: "£29.99", per: lang === "ko" ? "10회 묶음" : "10-pack", tag: lang === "ko" ? "회당 £3.00" : "£3.00 / paper", save: true },
          ].map((p, i) => (
            <div key={i} style={{
              border: "1px solid " + (p.highlight ? "var(--ink-1)" : "var(--line)"),
              borderRadius: 12, padding: 22, background: p.highlight ? "var(--ink-1)" : "white",
              color: p.highlight ? "var(--paper)" : "var(--ink-1)", position: "relative",
            }}>
              {p.highlight && (
                <div className="mono" style={{
                  position: "absolute", top: 14, right: 14,
                  fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
                  padding: "3px 8px", background: "var(--amber)", color: "var(--ink-1)", borderRadius: 999,
                }}>{p.tag}</div>
              )}
              <div className="mono tabular" style={{ fontSize: 11, opacity: 0.7, letterSpacing: "0.08em" }}>
                {lang === "ko" ? `묶음 · ${p.n}회` : `PACK · ${p.n} paper${p.n > 1 ? "s" : ""}`}
              </div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 44, marginTop: 8, letterSpacing: "-0.02em" }}>
                {p.price} <span style={{ fontSize: 15, opacity: 0.6 }}>{p.per}</span>
              </div>
              <div style={{ marginTop: 16, fontSize: 13, opacity: 0.85, lineHeight: 1.5 }}>
                {!p.highlight && p.tag}
                {p.save && <div style={{ marginTop: 4, color: p.highlight ? "var(--amber)" : "var(--emerald)" }}>{lang === "ko" ? "25% 절약" : "Save 25%"}</div>}
              </div>
              <button
                onClick={onBuy}
                className={p.highlight ? "btn btn-primary" : "btn btn-ghost"}
                style={{
                  width: "100%", marginTop: 20, padding: "12px", justifyContent: "center",
                  ...(p.highlight ? { background: "var(--paper)", color: "var(--ink-1)" } : {})
                }}>
                {lang === "ko" ? "구매" : "Buy"}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Story() {
  const { t, lang } = useT();
  return (
    <section style={{ padding: "80px 28px", background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)",
          gap: 48, alignItems: "center",
        }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              {t("story_eyebrow")}
            </div>
            <h2 style={{ fontSize: 32, marginTop: 12, letterSpacing: "-0.02em", lineHeight: 1.2 }}>
              {t("story_title")}
            </h2>
            <div style={{ display: "grid", gap: 14, marginTop: 24, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.65 }}>
              <p style={{ margin: 0, textWrap: "pretty" }}>{t("story_body_1")}</p>
              <p style={{ margin: 0, textWrap: "pretty" }}>{t("story_body_2")}</p>
            </div>
            <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: "var(--indigo-tint)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-serif)", color: "var(--indigo)", fontSize: 16,
                border: "1px solid color-mix(in oklab, var(--indigo) 25%, transparent)"
              }}>J</div>
              <div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em" }}>
                  {t("story_sig")}
                </div>
              </div>
            </div>
          </div>
          <div style={{
            borderRadius: 16, overflow: "hidden",
            border: "1px solid var(--line)",
            boxShadow: "0 12px 36px -16px color-mix(in oklab, var(--ink-1) 18%, transparent)",
            background: "white",
          }}>
            <img
              src="assets/story-hero.png"
              alt={lang === "ko" ? "데이터 사이언티스트 아빠와 11+ 준비하는 딸" : "A data-scientist dad helping his daughter prepare for the 11+"}
              style={{ display: "block", width: "100%", height: "auto" }}
              loading="lazy"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function SampleCTA({ setView }) {
  const { t, lang } = useT();
  return (
    <section style={{ padding: "80px 28px" }}>
      <div style={{
        maxWidth: 1100, margin: "0 auto",
        background: "var(--ink-1)", color: "var(--paper)", borderRadius: 20,
        padding: "60px 56px",
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center",
        backgroundImage: "radial-gradient(circle at 85% 0%, color-mix(in oklab, var(--indigo) 60%, var(--ink-1)) 0%, var(--ink-1) 50%)"
      }}>
        <div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.7 }}>
            {t("sample_eyebrow")}
          </div>
          <h2 style={{ fontSize: 40, marginTop: 12, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
            {t("sample_title")}
          </h2>
          <p style={{ opacity: 0.8, marginTop: 14, fontSize: 16, lineHeight: 1.55, maxWidth: 440 }}>
            {t("sample_sub")}
          </p>
          <button className="btn" style={{
            background: "var(--paper)", color: "var(--ink-1)", padding: "14px 22px", fontSize: 15, marginTop: 24,
          }} onClick={() => setView("sample")}>
            {t("sample_cta")}
            <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><path d="M5 10h10m0 0l-4-4m4 4l-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
        </div>
        <div style={{
          background: "color-mix(in oklab, white 8%, transparent)",
          border: "1px solid color-mix(in oklab, white 15%, transparent)",
          borderRadius: 12, padding: 22, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.8,
        }}>
          <div style={{ opacity: 0.6, fontSize: 11, letterSpacing: "0.08em" }}>SAMPLE · Q3 / 10</div>
          <div style={{ marginTop: 12, fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--paper)" }}>
            {lang === "ko"
              ? "한 상자에 12개의 사과가 들어있습니다. 7상자를 샀다면 사과는 모두 몇 개일까요?"
              : "A box holds 12 apples. If Angelina buys 7 boxes, how many apples does she have in total?"}
          </div>
          <div style={{ marginTop: 16, display: "grid", gap: 8 }}>
            {["72", "84", "96", "108"].map((o, i) => (
              <div key={i} style={{
                padding: "10px 14px", borderRadius: 8,
                background: i === 1 ? "color-mix(in oklab, var(--indigo) 40%, transparent)" : "color-mix(in oklab, white 5%, transparent)",
                border: "1px solid " + (i === 1 ? "var(--indigo)" : "color-mix(in oklab, white 12%, transparent)"),
                color: "var(--paper)",
              }}>
                <span style={{ opacity: 0.6, marginRight: 10 }}>{String.fromCharCode(65 + i)}</span>{o}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const { lang } = useT();
  const email = "dadlab11plus@gmail.com";
  const subject = encodeURIComponent(lang === "ko" ? "Daddy's Lab 11+ 문의" : "Daddy's Lab 11+ enquiry");
  const mailto = `mailto:${email}?subject=${subject}`;
  return (
    <section id="contact" style={{ padding: "80px 28px", borderTop: "1px solid var(--line)", background: "var(--paper)", scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
          {lang === "ko" ? "문의" : "Contact"}
        </div>
        <h2 style={{ fontSize: 32, marginTop: 12, letterSpacing: "-0.02em", lineHeight: 1.2 }}>
          {lang === "ko" ? "궁금한 점이 있으신가요?" : "Questions or feedback?"}
        </h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", lineHeight: 1.6 }}>
          {lang === "ko"
            ? "수업·결제·기술 문제 모두 환영합니다. 보통 24시간 이내 답변드립니다."
            : "Anything about the papers, billing, or how to get the most out of the platform — we'd love to hear from you. Typical reply within 24 hours."}
        </p>
        <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <a href={mailto}
            className="btn btn-dark"
            style={{ padding: "12px 22px", fontSize: 14, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
            {lang === "ko" ? "이메일 보내기" : "Send email"}
          </a>
          <a href={`mailto:${email}`}
            style={{ padding: "12px 18px", border: "1px solid var(--line)", borderRadius: 8, fontSize: 14, color: "var(--ink-1)", textDecoration: "none", fontFamily: "var(--font-mono)" }}>
            {email}
          </a>
        </div>
      </div>
    </section>
  );
}

function LandingPage({ setView, onBuy }) {
  return (
    <main>
      <Hero setView={setView} />
      <ValueProps />
      <PricingCompare onBuy={onBuy} />
      <Story />
      <SampleCTA setView={setView} />
      <Contact />
    </main>
  );
}

Object.assign(window, { LandingPage, MiniBell });