/* global React, Icon, Photo, PhotoEdit, Stars, Ticker, PRODUCT, PROBLEM_SHOTS, HERO_TEXT, SECTION_HEADERS, REVIEWS, PILLARS, STEPS, FAQ, priceDual, PDP */
const { useState: useStateLanding } = React;

function useAdminList(globalKey, fallback, firestoreDocId) {
  const [items, setItems] = useStateLanding(() => window[globalKey] || fallback);
  const [editing, setEditing] = useStateLanding(null);
  const [draft, setDraft] = useStateLanding({});
  const [saving, setSaving] = useStateLanding(false);
  const persist = async (newItems) => {
    setSaving(true);
    try {
      if (window.kDb) await window.kDb.collection("content").doc(firestoreDocId).set({ items: newItems });
      setItems(newItems);
      window[globalKey] = newItems;
      setEditing(null);
      setDraft({});
    } catch(e) { alert("Save failed: " + e.message); }
    setSaving(false);
  };
  const startEdit = (i) => { setEditing(i); setDraft({ ...items[i] }); };
  const cancelEdit = () => { setEditing(null); setDraft({}); };
  const save = () => persist(items.map((it, i) => i === editing ? draft : it));
  const del = (i) => { if (confirm("Delete this item?")) persist(items.filter((_, j) => j !== i)); };
  const setField = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  const addNew = (blank) => { const next = [...items, blank]; setItems(next); setEditing(next.length - 1); setDraft(blank); };
  return { items, editing, draft, saving, startEdit, cancelEdit, save, del, setField, addNew, persist };
}

function useAdminSection(key) {
  const [text, setText] = useStateLanding(() => Object.assign({}, SECTION_HEADERS[key]));
  const [editing, setEditing] = useStateLanding(false);
  const [draft, setDraft] = useStateLanding({});
  const [saving, setSaving] = useStateLanding(false);
  const startEdit = () => { setEditing(true); setDraft({ ...text }); };
  const cancelEdit = () => { setEditing(false); setDraft({}); };
  const setField = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  const handleSave = async () => {
    setSaving(true);
    try {
      if (window.kDb) await window.kDb.collection("content").doc("sections").set({ [key]: draft }, { merge: true });
      Object.assign(SECTION_HEADERS[key], draft);
      setText({ ...draft });
      setEditing(false);
      setDraft({});
    } catch(e) { alert("Save failed: " + e.message); }
    setSaving(false);
  };
  return { text, editing, draft, saving, startEdit, cancelEdit, setField, handleSave };
}

const ADMIN_TA = {
  width: "100%", fontFamily: "inherit", fontSize: 13, lineHeight: 1.55,
  padding: "10px 12px", border: "1px solid var(--line-strong)", borderRadius: 6,
  background: "var(--bg)", color: "var(--fg)", resize: "vertical",
};

function SectionEditPanel({ label, saving, onSave, onCancel, children }) {
  return (
    <div style={{ border: "2px solid var(--accent)", borderRadius: 10, padding: "20px 24px", marginBottom: 24, background: "var(--bg)" }}>
      <div className="col gap-12">
        <div className="row justify-between items-center">
          <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>{label}</span>
          <button onClick={onCancel} style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-muted)", fontSize: 20, lineHeight: 1 }}>×</button>
        </div>
        {children}
        <div className="row gap-8 items-center">
          <button className="btn btn-primary" onClick={onSave} disabled={saving} style={{ fontSize: "var(--text-xs)" }}>{saving ? "Saving…" : "Save"}</button>
          <button className="btn" onClick={onCancel} style={{ fontSize: "var(--text-xs)" }}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

function AdminEditBtn({ onClick, label }) {
  return (
    <button onClick={onClick} className="btn"
      style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: "var(--text-2xs)", padding: "6px 14px" }}>
      <Icon name="pencil" size={12} /> {label}
    </button>
  );
}


// ================================================================
// SCIENCE — how it works
// ================================================================
function Science({ isAdmin }) {
  const hdr = useAdminSection("science");
  const { items: steps, editing, draft, saving, startEdit, cancelEdit, save, del, setField, addNew } = useAdminList("STEPS", STEPS, "steps");
  const ta = {
    width: "100%", fontFamily: "inherit", fontSize: 13, lineHeight: 1.55,
    padding: "10px 12px", border: "1px solid var(--line-strong)", borderRadius: 6,
    background: "var(--bg)", color: "var(--fg)", resize: "vertical",
  };
  return (
    <section id="science" style={{ padding: "96px 0", background: "var(--bg-2)", borderBlock: "1px solid var(--line)" }}>
      <div className="wrap">
        {isAdmin && hdr.editing && (
          <SectionEditPanel label="EDITING · SCIENCE HEADER" saving={hdr.saving} onSave={hdr.handleSave} onCancel={hdr.cancelEdit}>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EYEBROW</label><input value={hdr.draft.eyebrow || ""} onChange={e => hdr.setField("eyebrow", e.target.value)} style={{ ...ADMIN_TA, resize: "none" }} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ចំណងជើងខ្មែរ · KH HEADING</label><textarea className="km-sans" rows={2} value={hdr.draft.h2Kh || ""} onChange={e => hdr.setField("h2Kh", e.target.value)} style={ADMIN_TA} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EN HEADING</label><textarea rows={2} value={hdr.draft.h2En || ""} onChange={e => hdr.setField("h2En", e.target.value)} style={ADMIN_TA} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ការពិពណ៌នាខ្មែរ · KH BODY</label><RichEditor isKh value={hdr.draft.bodyKh || ""} onChange={v => hdr.setField("bodyKh", v)} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EN BODY</label><RichEditor value={hdr.draft.bodyEn || ""} onChange={v => hdr.setField("bodyEn", v)} /></div>
          </SectionEditPanel>
        )}
        <div className="col gap-8" style={{ marginBottom: 48 }}>
          <span className="eyebrow">{hdr.text.eyebrow}</span>
          <h2 className="display-lg km" style={{ whiteSpace: "pre-line" }}>{hdr.text.h2Kh}</h2>
          <span className="serif" style={{ fontSize: 28, color: "var(--fg-muted)", lineHeight: 1.1 }}>
            <em>{hdr.text.h2En}</em>
          </span>
          <div style={{ maxWidth: 520, margin: "8px 0 0", fontSize: 14 }}>
            <div className="km-sans pdp-rich" style={{ color: "var(--fg)", marginBottom: 6 }} dangerouslySetInnerHTML={renderRich(hdr.text.bodyKh)} />
            <div className="pdp-rich text-muted" dangerouslySetInnerHTML={renderRich(hdr.text.bodyEn)} />
          </div>
          <div className="row gap-12 items-center" style={{ marginTop: 4 }}>
            {isAdmin && !hdr.editing && <AdminEditBtn onClick={hdr.startEdit} label="Edit header" />}
            {isAdmin && (
              <button className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }}
                onClick={() => addNew({ n: String(steps.length + 1).padStart(2, "0"), tKh: "ជំហានថ្មី", t: "New step", dKh: "", d: "", meta: "" })}>
                + Add step
              </button>
            )}
          </div>
        </div>

        <div className="col">
            {steps.map((s, i) => {
              if (editing === i) {
                return (
                  <div key={i} style={{ border: "2px solid var(--accent)", borderRadius: 10, padding: "20px", marginBottom: 4, background: "var(--bg)" }}>
                    <div className="col gap-10">
                      <div className="row justify-between items-center">
                        <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>EDITING · STEP {s.n}</span>
                        <button onClick={cancelEdit} style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-muted)", fontSize: 20, lineHeight: 1 }}>×</button>
                      </div>
                      <div className="col gap-4">
                        <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>STEP NUMBER</label>
                        <input value={draft.n || ""} onChange={e => setField("n", e.target.value)} style={{ ...ta, resize: "none" }} />
                      </div>
                      <div className="col gap-4">
                        <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ចំណងជើងខ្មែរ · KHMER TITLE</label>
                        <textarea className="km-sans" rows={2} value={draft.tKh || ""} onChange={e => setField("tKh", e.target.value)} style={ta} />
                      </div>
                      <div className="col gap-4">
                        <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ENGLISH TITLE</label>
                        <textarea rows={2} value={draft.t || ""} onChange={e => setField("t", e.target.value)} style={ta} />
                      </div>
                      <div className="col gap-4">
                        <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ការពិពណ៌នាខ្មែរ · KHMER DESC</label>
                        <RichEditor isKh value={draft.dKh || ""} onChange={v => setField("dKh", v)} />
                      </div>
                      <div className="col gap-4">
                        <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ENGLISH DESCRIPTION</label>
                        <RichEditor value={draft.d || ""} onChange={v => setField("d", v)} />
                      </div>
                      <div className="row gap-8 items-center">
                        <button className="btn btn-primary" onClick={save} disabled={saving} style={{ fontSize: "var(--text-xs)" }}>{saving ? "Saving…" : "Save"}</button>
                        <button className="btn" onClick={cancelEdit} style={{ fontSize: "var(--text-xs)" }}>Cancel</button>
                        <button onClick={() => del(i)} style={{ marginLeft: "auto", background: "transparent", border: 0, cursor: "pointer", color: "var(--accent)", fontSize: "var(--text-xs)", fontFamily: "var(--font-mono)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Delete</button>
                      </div>
                    </div>
                  </div>
                );
              }
              return (
                <div key={i} style={{
                  borderTop: i === 0 ? "1px solid var(--line-strong)" : "none",
                  borderBottom: "1px solid var(--line-strong)"
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "22px 4px" }}>
                    <div className="col gap-4" style={{ flex: 1, minWidth: 0 }}>
                      <div className="row gap-16 items-start">
                        <span className="serif" style={{ fontSize: "var(--text-5xl)", color: "var(--accent)", lineHeight: 1, flexShrink: 0 }}>
                          {s.n}
                        </span>
                        <div className="col gap-2" style={{ flex: 1, minWidth: 0 }}>
                          <span className="km" style={{ fontSize: 20, lineHeight: 1.3 }}>{s.tKh}</span>
                          <span className="serif text-muted" style={{ fontSize: 20, lineHeight: 1.15 }}><em>{s.t}</em></span>
                          {(s.dKh || s.d) && (
                            <div style={{ marginTop: 4 }}>
                              {s.dKh && <div className="km-sans pdp-rich" style={{ marginBottom: 4, fontSize: 14, color: "var(--fg)", lineHeight: 1.6 }} dangerouslySetInnerHTML={renderRich(s.dKh)} />}
                              {s.d && <div className="pdp-rich" style={{ fontSize: 14, color: "var(--fg-muted)" }} dangerouslySetInnerHTML={renderRich(s.d)} />}
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                    {isAdmin && (
                      <button type="button" onClick={() => startEdit(i)} title="Edit step"
                        style={{ width: 32, height: 32, borderRadius: 999, flexShrink: 0, border: "1px solid var(--line)", background: "transparent", cursor: "pointer", display: "grid", placeItems: "center", color: "var(--fg-muted)" }}>
                        <Icon name="pencil" size={13} />
                      </button>
                    )}
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </section>
  );
}

// ================================================================
// FAQ
// ================================================================
function FAQSection({ isAdmin }) {
  const hdr = useAdminSection("faq");
  const [open, setOpen] = useStateLanding(-1);
  const [items, setItems] = useStateLanding(() => window.FAQ || FAQ);
  const [editing, setEditing] = useStateLanding(null);
  const [draft, setDraft] = useStateLanding({});
  const [saving, setSaving] = useStateLanding(false);

  const ta = {
    width: "100%", fontFamily: "inherit", fontSize: 13, lineHeight: 1.55,
    padding: "10px 12px", border: "1px solid var(--line-strong)", borderRadius: 6,
    background: "var(--bg)", color: "var(--fg)", resize: "vertical",
  };

  const persist = async (newItems) => {
    setSaving(true);
    try {
      if (window.kDb) await window.kDb.collection("content").doc("faq").set({ items: newItems });
      setItems(newItems);
      window.FAQ = newItems;
      setEditing(null);
      setDraft({});
    } catch(e) { alert("Save failed: " + e.message); }
    setSaving(false);
  };

  const startEdit = (i) => { setEditing(i); setDraft({ ...items[i] }); setOpen(-1); };
  const cancelEdit = () => { setEditing(null); setDraft({}); };
  const handleSave = () => persist(items.map((it, i) => i === editing ? draft : it));
  const handleDelete = (i) => { if (confirm("Delete this FAQ?")) persist(items.filter((_, idx) => idx !== i)); };
  const handleAdd = () => {
    const blank = { qKh: "សំណួរថ្មី", q: "New question", aKh: "", a: "" };
    const next = [...items, blank];
    setItems(next);
    setEditing(next.length - 1);
    setDraft(blank);
    setOpen(-1);
  };

  return (
    <section id="learn" style={{ padding: "96px 0", background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        {isAdmin && hdr.editing && (
          <SectionEditPanel label="EDITING · FAQ HEADER" saving={hdr.saving} onSave={hdr.handleSave} onCancel={hdr.cancelEdit}>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EYEBROW</label><input value={hdr.draft.eyebrow || ""} onChange={e => hdr.setField("eyebrow", e.target.value)} style={{ ...ADMIN_TA, resize: "none" }} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ចំណងជើងខ្មែរ · KH HEADING</label><textarea className="km-sans" rows={2} value={hdr.draft.h2Kh || ""} onChange={e => hdr.setField("h2Kh", e.target.value)} style={ADMIN_TA} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EN HEADING</label><textarea rows={2} value={hdr.draft.h2En || ""} onChange={e => hdr.setField("h2En", e.target.value)} style={ADMIN_TA} /></div>
          </SectionEditPanel>
        )}
        <div className="col gap-8" style={{ marginBottom: 48 }}>
          <span className="eyebrow">{hdr.text.eyebrow}</span>
          <h2 className="display-lg km">{hdr.text.h2Kh}</h2>
          <span className="serif" style={{ fontSize: 28, color: "var(--fg-muted)", lineHeight: 1.1 }}>
            <em>{hdr.text.h2En}</em>
          </span>
          <div className="row gap-12 items-center" style={{ marginTop: 4 }}>
            <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)" }}>{items.length} QUESTIONS</span>
            {isAdmin && !hdr.editing && <AdminEditBtn onClick={hdr.startEdit} label="Edit header" />}
            {isAdmin && (
              <button className="btn" style={{ fontSize: "var(--text-2xs)", padding: "6px 14px" }} onClick={handleAdd}>
                + Add question
              </button>
            )}
          </div>
        </div>
        <div className="col">
          {items.map((f, i) => {
            const isOpen = open === i;
            const isEdit = editing === i;

            if (isEdit) {
              return (
                <div key={i} style={{
                  border: "2px solid var(--accent)", borderRadius: 10,
                  padding: "20px 24px", marginBottom: 4, background: "var(--bg)"
                }}>
                  <div className="col gap-14">
                    <div className="row justify-between items-center">
                      <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>
                        EDITING · {String(i + 1).padStart(2, "0")}
                      </span>
                      <button onClick={cancelEdit} style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-muted)", fontSize: 20, lineHeight: 1 }}>×</button>
                    </div>
                    <div className="col gap-4">
                      <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>សំណួរខ្មែរ · KHMER QUESTION</label>
                      <textarea className="km-sans" rows={2} value={draft.qKh || ""}
                        onChange={e => setDraft({ ...draft, qKh: e.target.value })} style={ta} />
                    </div>
                    <div className="col gap-4">
                      <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ENGLISH QUESTION</label>
                      <textarea rows={2} value={draft.q || ""}
                        onChange={e => setDraft({ ...draft, q: e.target.value })} style={ta} />
                    </div>
                    <div className="col gap-4">
                      <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ចម្លើយខ្មែរ · KHMER ANSWER</label>
                      <RichEditor isKh value={draft.aKh || ""} onChange={v => setDraft({ ...draft, aKh: v })} />
                    </div>
                    <div className="col gap-4">
                      <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ENGLISH ANSWER</label>
                      <RichEditor value={draft.a || ""} onChange={v => setDraft({ ...draft, a: v })} />
                    </div>
                    <div className="row gap-8 items-center">
                      <button className="btn btn-primary" onClick={handleSave} disabled={saving}
                        style={{ fontSize: "var(--text-xs)" }}>
                        {saving ? "Saving…" : "Save"}
                      </button>
                      <button className="btn" onClick={cancelEdit} style={{ fontSize: "var(--text-xs)" }}>Cancel</button>
                      <button onClick={() => handleDelete(i)} style={{
                        marginLeft: "auto", background: "transparent", border: 0, cursor: "pointer",
                        color: "var(--accent)", fontSize: "var(--text-xs)",
                        fontFamily: "var(--font-mono)", letterSpacing: "0.08em", textTransform: "uppercase"
                      }}>Delete</button>
                    </div>
                  </div>
                </div>
              );
            }

            return (
              <div key={i} style={{
                borderTop: i === 0 ? "1px solid var(--line-strong)" : "none",
                borderBottom: "1px solid var(--line-strong)"
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen}
                    style={{
                      flex: 1, textAlign: "left", padding: "22px 4px",
                      background: "transparent", border: 0, cursor: "pointer",
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      gap: 20, font: "inherit", color: "inherit"
                    }}
                  >
                    <div className="col gap-4" style={{ minWidth: 0 }}>
                      <div className="row gap-16 items-start">
                        <span className="serif" style={{ fontSize: "var(--text-5xl)", color: "var(--accent)", lineHeight: 1, flexShrink: 0 }}>
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <div className="col gap-2" style={{ flex: 1, minWidth: 0 }}>
                          <span className="km" style={{ fontSize: 20, lineHeight: 1.3 }}>{f.qKh}</span>
                          <span className="serif text-muted" style={{ fontSize: 20, lineHeight: 1.15 }}><em>{f.q}</em></span>
                        </div>
                      </div>
                    </div>
                    <span style={{
                      width: 32, height: 32, borderRadius: 999,
                      border: "1px solid var(--line-strong)", display: "grid", placeItems: "center",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                      transition: "transform 200ms ease", flexShrink: 0
                    }}>
                      <Icon name="plus" size={14} />
                    </span>
                  </button>
                  {isAdmin && (
                    <button onClick={() => startEdit(i)} title="Edit this FAQ"
                      style={{
                        width: 32, height: 32, borderRadius: 999, flexShrink: 0,
                        border: "1px solid var(--line)", background: "transparent",
                        cursor: "pointer", display: "grid", placeItems: "center",
                        color: "var(--fg-muted)", marginRight: 4
                      }}>
                      <Icon name="pencil" size={13} />
                    </button>
                  )}
                </div>
                <div style={{
                  overflow: "hidden",
                  maxHeight: isOpen ? 2000 : 0,
                  transition: "max-height 260ms ease, padding 260ms ease",
                  padding: isOpen ? "0 4px 22px" : "0 4px 0",
                }}>
                  <div className="row gap-16">
                    <span aria-hidden="true" className="serif" style={{ fontSize: "var(--text-5xl)", lineHeight: 1, flexShrink: 0, opacity: 0, pointerEvents: "none" }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      {f.aKh && <div className="km-sans pdp-rich" style={{ marginBottom: 10, fontSize: 14, maxWidth: 720, lineHeight: 1.65 }} dangerouslySetInnerHTML={renderRich(f.aKh)} />}
                      <div className="pdp-rich text-muted" style={{ fontSize: 14, maxWidth: 720, lineHeight: 1.55 }} dangerouslySetInnerHTML={renderRich(f.a)} />
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Footer({ isAdmin }) {
  const hdr = useAdminSection("footer");

  const parseCol = (text) =>
    (text || "").split("\n").filter(Boolean).map(line => {
      const idx = line.indexOf("|");
      return idx === -1 ? [line.trim(), null] : [line.slice(0, idx).trim(), line.slice(idx + 1).trim()];
    });

  const cols = [
    [hdr.text.c0h || "SHOP / ទិញ",   parseCol(hdr.text.c0)],
    [hdr.text.c1h || "HELP / ជំនួយ", parseCol(hdr.text.c1)],
    [hdr.text.c2h || "PICKUP / ហាង", parseCol(hdr.text.c2)],
  ];

  return (
    <footer style={{ padding: "56px 0 32px", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        {isAdmin && hdr.editing && (
          <SectionEditPanel label="EDITING · FOOTER" saving={hdr.saving} onSave={hdr.handleSave} onCancel={hdr.cancelEdit}>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>ស្លាកខ្មែរ · KH TAGLINE</label><RichEditor isKh value={hdr.draft.tagKh || ""} onChange={v => hdr.setField("tagKh", v)} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>EN TAGLINE</label><RichEditor value={hdr.draft.tagEn || ""} onChange={v => hdr.setField("tagEn", v)} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>COPYRIGHT LINE</label><input value={hdr.draft.copyright || ""} onChange={e => hdr.setField("copyright", e.target.value)} style={{ ...ADMIN_TA, resize: "none" }} /></div>
            <div className="col gap-4"><label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>SHIP LINE</label><input value={hdr.draft.shipLine || ""} onChange={e => hdr.setField("shipLine", e.target.value)} style={{ ...ADMIN_TA, resize: "none" }} /></div>
            {[["c0h","c0","SHOP COLUMN"], ["c1h","c1","HELP COLUMN"], ["c2h","c2","PICKUP COLUMN"]].map(([kh, ki, lab]) => (
              <React.Fragment key={kh}>
                <div className="col gap-4">
                  <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>{lab} — HEADER</label>
                  <input aria-label={`${lab} header`} value={hdr.draft[kh] || ""} onChange={e => hdr.setField(kh, e.target.value)} style={{ ...ADMIN_TA, resize: "none" }} />
                </div>
                <div className="col gap-4">
                  <label className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.1em" }}>{lab} — ITEMS · one per line, label|url for links</label>
                  <textarea aria-label={`${lab} items`} rows={4} value={hdr.draft[ki] || ""} onChange={e => hdr.setField(ki, e.target.value)} style={ADMIN_TA} />
                </div>
              </React.Fragment>
            ))}
          </SectionEditPanel>
        )}
        <div className="footer-grid">
          <div className="col gap-12">
            <div className="brand">
              <span className="brand-mark" />
              <span>KSHOP24.NET</span>
            </div>
            <div className="km-sans pdp-rich" style={{ maxWidth: 320, fontSize: 13, color: "var(--fg)" }} dangerouslySetInnerHTML={renderRich(hdr.text.tagKh)} />
            <div className="pdp-rich text-muted" style={{ maxWidth: 320, fontSize: 13, lineHeight: 1.5 }} dangerouslySetInnerHTML={renderRich(hdr.text.tagEn)} />
            {isAdmin && !hdr.editing && <AdminEditBtn onClick={hdr.startEdit} label="Edit footer" />}
          </div>
          {cols.map(([h, items]) => (
            <div key={h} className="col gap-8">
              <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.14em" }}>
                {h.toUpperCase()}
              </span>
              {items.map(([label, href]) => (
                href
                  ? <a key={label} href={href} target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener noreferrer" : undefined} style={{ color: "var(--fg)", textDecoration: "none", fontSize: "var(--text-xs)", lineHeight: 1.5 }}>{label}</a>
                  : <span key={label} style={{ color: "var(--fg-muted)", fontSize: "var(--text-xs)", lineHeight: 1.5 }}>{label}</span>
              ))}
            </div>
          ))}
        </div>
        <div className="row justify-between items-center flex-wrap gap-12" style={{ marginTop: 48, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
          <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>
            {hdr.text.copyright}
          </span>
          <span className="mono text-muted" style={{ fontSize: "var(--text-2xs)", letterSpacing: "0.12em" }}>
            {hdr.text.shipLine}
          </span>
        </div>
      </div>
    </footer>
  );
}

// ================================================================
// Page
// ================================================================
function LandingPage({ onAddToCart, isAdmin }) {
  return (
    <main>
      <Ticker isAdmin={isAdmin} />
      <div id="shop">
        <PDP initialSize="" onBack={() => {}} onAddToCart={onAddToCart} isAdmin={isAdmin} />
      </div>
      <Science isAdmin={isAdmin} />
      <FAQSection isAdmin={isAdmin} />
      <Footer isAdmin={isAdmin} />
    </main>
  );
}

Object.assign(window, { LandingPage });