{label}

onChange(e.target.value)} rows={rows} className={textareaCls} />
    </div>
  );
}

return (
    <details open className="border border-slate-200 rounded-xl overflow-hidden mb-3">
      <summary className="flex items-center gap-2 px-3 py-2 bg-slate-100 cursor-pointer list-none">
        <input
          type="checkbox"
          checked={section.enabled !== false}
          onChange={(e) => set("enabled", e.target.checked)}
          onClick={(e) => e.stopPropagation()}
          title="Show section"
        />
        <span className="text-sm font-semibold text-slate-800 flex-1 truncate">
          {section.number ? `${section.number} ` : ""}
          {section.title || "Untitled section"}
        </span>
        <span className="text-[10px] text-slate-500 uppercase">{SECTION_TYPE_LABELS[section.type]}</span>
        <button type="button" onClick={(e) => { e.preventDefault(); onMove(-1); }} disabled={index === 0} className="p-1 rounded hover:bg-white disabled:opacity-30" title="Move up">
          <ChevronUp size={16} />
        </button>
        <button type="button" onClick={(e) => { e.preventDefault(); onMove(1); }} disabled={index === total - 1} className="p-1 rounded hover:bg-white disabled:opacity-30" title="Move down">
          <ChevronDown size={16} />
        </button>
        <button type="button" onClick={(e) => { e.preventDefault(); onRemove(); }} className="p-1 text-red-600 hover:bg-red-50 rounded" title="Remove section">
          <Trash2 size={16} />
        </button>
      </summary>

<div className="p-3 space-y-3 bg-white">
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className={labelCls}>Section number</label>
            <Input value={section.number ?? ""} onChange={(e) => set("number", e.target.value)} placeholder="e.g. 1." />
          </div>
          <div>
            <label className={labelCls}>Section title</label>
            <Input value={section.title} onChange={(e) => set("title", e.target.value)} placeholder="Section title" />
          </div>
        </div>
        <p className="text-[10px] text-slate-500">Use {"{course}"} or {"{gradeBand}"} in titles for dynamic text.</p>

{(section.type === "text" || section.type === "table" || section.type === "promise-snapshot" || section.type === "related" || section.type === "home-support") && (
          <Field label="Body / intro text" value={section.body ?? ""} onChange={(v) => set("body", v)} rows={section.type === "text" ? 4 : 2} />
        )}

{section.type === "home-support" ? (
          <Field label="Secondary paragraph" value={section.bodySecondary ?? ""} onChange={(v) => set("bodySecondary", v)} />
        ) : null}

{section.type === "related" ? (
          <Field label="Related courses suffix" value={section.relatedSuffix ?? ""} onChange={(v) => set("relatedSuffix", v)} rows={1} />
        ) : null}

{(section.type === "promise-snapshot" || section.type === "table") && (
          <TableEditor
            headers={section.tableHeaders ?? []}
            rows={section.tableRows ?? []}
            onChangeHeaders={(h) => set("tableHeaders", h)}
            onChangeRows={(r) => set("tableRows", r)}
          />
        )}

{section.type === "portrait-spider" && (
          <>
            <Field label="Portrait subtitle" value={section.portraitSubtitle ?? ""} onChange={(v) => set("portraitSubtitle", v)} rows={1} />
            <Field label="Portrait note" value={section.portraitNote ?? ""} onChange={(v) => set("portraitNote", v)} rows={2} />
            <div className={panelCls}>
              <label className={labelCls}>Portrait dimensions (label + score)</label>
              {(section.portraitLabels ?? []).map((label, i) => (
                <div key={i} className="flex gap-2 items-center mb-2">
                  <Input
                    value={label}
                    onChange={(e) => {
                      const labels = [...(section.portraitLabels ?? [])];
                      labels[i] = e.target.value;
                      set("portraitLabels", labels);
                    }}
                    className="flex-1 text-sm"
                    placeholder="Dimension label"
                  />
                  <Input
                    type="number"
                    min={0}
                    max={100}
                    value={section.portraitScores?.[i] ?? 70}
                    onChange={(e) => {
                      const scores = [...(section.portraitScores ?? [])];
                      scores[i] = Math.max(0, Math.min(100, Number(e.target.value) || 0));
                      set("portraitScores", scores);
                    }}
                    className="w-16 text-sm"
                  />
                  <button
                    type="button"
                    onClick={() => {
                      set("portraitLabels", (section.portraitLabels ?? []).filter((_, j) => j !== i));
                      set("portraitScores", (section.portraitScores ?? []).filter((_, j) => j !== i));
                    }}
                    className="p-1 text-red-600 hover:bg-red-50 rounded"
                  >
                    <Trash2 size={14} />
                  </button>
                </div>
              ))}
              <button
                type="button"
                onClick={() => {
                  set("portraitLabels", [...(section.portraitLabels ?? []), "New dimension"]);
                  set("portraitScores", [...(section.portraitScores ?? []), 70]);
                }}
                className="text-xs inline-flex items-center gap-1 px-2 py-1 border rounded-md"
              >
                <Plus size={12} /> Add dimension
              </button>
            </div>
          </>
        )}

{section.type === "learner-list" && (
          <div className={panelCls}>
            <label className={labelCls}>Learner statements</label>
            {(section.learnerItems ?? []).map((item, i) => (
              <div key={i} className="p-2 border border-slate-200 rounded-lg bg-white space-y-2 mb-2">
                <div className="flex gap-1">
                  <EmojiPickerField
                    compact
                    className="w-36"
                    value={item.icon ?? ""}
                    onChange={(v) => {
                      const items = [...(section.learnerItems ?? [])];
                      items[i] = { ...items[i], icon: v };
                      set("learnerItems", items);
                    }}
                    placeholder="Icon"
                  />
                  <Input value={item.text} onChange={(e) => {
                    const items = [...(section.learnerItems ?? [])];
                    items[i] = { ...items[i], text: e.target.value };
                    set("learnerItems", items);
                  }} placeholder="I can..." className="flex-1 text-sm" />
                  <button type="button" onClick={() => set("learnerItems", (section.learnerItems ?? []).filter((_, j) => j !== i))} className="p-1 text-red-600">
                    <Trash2 size={14} />
                  </button>
                </div>
                <textarea value={item.detail ?? ""} onChange={(e) => {
                  const items = [...(section.learnerItems ?? [])];
                  items[i] = { ...items[i], detail: e.target.value };
                  set("learnerItems", items);
                }} rows={2} placeholder="Detail (optional)" className={textareaCls} />
                <div className="grid grid-cols-3 gap-1">
                  <ColorField label="Card bg" value={item.backgroundColor ?? ""} onChange={(v) => {
                    const items = [...(section.learnerItems ?? [])];
                    items[i] = { ...items[i], backgroundColor: v };
                    set("learnerItems", items);
                  }} />
                  <ColorField label="Text" value={item.textColor ?? ""} onChange={(v) => {
                    const items = [...(section.learnerItems ?? [])];
                    items[i] = { ...items[i], textColor: v };
                    set("learnerItems", items);
                  }} />
                  <ColorField label="Border" value={item.borderColor ?? ""} onChange={(v) => {
                    const items = [...(section.learnerItems ?? [])];
                    items[i] = { ...items[i], borderColor: v };
                    set("learnerItems", items);
                  }} />
                </div>
              </div>
            ))}
            <button type="button" onClick={() => set("learnerItems", [...(section.learnerItems ?? []), { text: "", detail: "" }])} className="text-xs inline-flex items-center gap-1 px-2 py-1 border rounded-md">
              <Plus size={12} /> Add learner item
            </button>
          </div>
        )}

<StyleEditor
          label="Section styling"
          style={style}
          onChange={(s) => set("style", s)}
          mode="section"
          showCard={section.type === "portrait-spider"}
          showTable={section.type === "table" || section.type === "promise-snapshot"}
          showPills={section.type === "portrait-spider"}
          showChart={section.type === "portrait-spider"}
          showLearnerDefaults={section.type === "learner-list"}
        />
      </div>
    </details>
  );
}

export function ParentCourseOverviewForm({ content, onChange }: Props) {
  const normalized = useMemo(() => normalizeParentCourseOverviewContent(content), [content]);

const update = (patch: Partial<typeof normalized>) => {
    onChange({ ...normalized, ...patch } as BlockContent);
  };

const updateSections = (sections: PCOSection[]) => update({ sections });

const updateSection = (index: number, section: PCOSection) => {
    const sections = [...(normalized.sections ?? [])];
    sections[index] = section;
    updateSections(sections);
  };

const moveSection = (index: number, dir: -1 | 1) => {
    const sections = [...(normalized.sections ?? [])];
    const j = index + dir;
    if (j < 0 || j >= sections.length) return;
    [sections[index], sections[j]] = [sections[j], sections[index]];
    updateSections(sections);
  };

const heroStyle = normalized.hero?.style ?? {};
  const footerStyle = normalized.footer?.style ?? {};
  const globalStyle = normalized.globalStyle ?? {};

return (
    <>
      <div className={panelCls}>
        <p className="text-xs font-semibold text-slate-700 uppercase tracking-wide">Global defaults</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <ColorField label="Default card background" value={normalized.cardColor ?? ""} onChange={(v) => update({ cardColor: v })} />
          <ColorField label="Default card border" value={normalized.cardBorderColor ?? ""} onChange={(v) => update({ cardBorderColor: v })} />
        </div>
        <StyleEditor label="Global document styling" style={globalStyle} onChange={(s) => update({ globalStyle: s })} mode="global" showCard={false} showIcon={false} />
      </div>

<div className={panelCls}>
        <p className="text-xs font-semibold text-slate-700 uppercase tracking-wide mb-2">Hero</p>
        <Field label="Eyebrow (use {gradeBand})" value={normalized.hero?.eyebrow ?? ""} onChange={(v) => update({ hero: { ...normalized.hero!, eyebrow: v } })} rows={1} />
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className={labelCls}>Course name</label>
            <Input value={normalized.hero?.course ?? ""} onChange={(e) => update({ hero: { ...normalized.hero!, course: e.target.value }, course: e.target.value })} />
          </div>
          <div>
            <label className={labelCls}>Grade band</label>
            <Input value={normalized.hero?.gradeBand ?? ""} onChange={(e) => update({ hero: { ...normalized.hero!, gradeBand: e.target.value }, gradeBand: e.target.value })} />
          </div>
        </div>
        <Field label="Hero promise / subtitle" value={normalized.hero?.promise ?? ""} onChange={(v) => update({ hero: { ...normalized.hero!, promise: v }, promise: v })} />
        <StyleEditor label="Hero styling" style={heroStyle} onChange={(s: PCOStyle) => update({ hero: { ...normalized.hero!, style: s } })} mode="hero" showCard={false} />
      </div>

<div className="mb-3">
        <div className="flex items-center justify-between mb-2">
          <p className="text-xs font-semibold text-slate-700 uppercase tracking-wide">Sections ({normalized.sections?.length ?? 0})</p>
          <div className="flex gap-1 flex-wrap justify-end">
            {(Object.keys(SECTION_TYPE_LABELS) as PCOSection["type"][]).map((type) => (
              <button
                key={type}
                type="button"
                onClick={() => updateSections([...(normalized.sections ?? []), createEmptySection(type, normalized.sections?.length ?? 0)])}
                className="text-[10px] px-2 py-1 border border-slate-300 rounded-md bg-white hover:bg-slate-50"
              >
                + {SECTION_TYPE_LABELS[type]}
              </button>
            ))}
          </div>
        </div>

{(normalized.sections ?? []).map((section, index) => (
          <SectionEditor
            key={section.id}
            section={section}
            index={index}
            total={normalized.sections?.length ?? 0}
            onChange={(s) => updateSection(index, s)}
            onRemove={() => updateSections((normalized.sections ?? []).filter((_, i) => i !== index))}
            onMove={(dir) => moveSection(index, dir)}
          />
        ))}
      </div>

<div className={panelCls}>
        <p className="text-xs font-semibold text-slate-700 uppercase tracking-wide mb-2">Footer</p>
        <Field label="Footer text" value={normalized.footer?.text ?? ""} onChange={(v) => update({ footer: { ...normalized.footer!, text: v }, footerNote: v })} rows={2} />
        <StyleEditor label="Footer styling" style={footerStyle} onChange={(s) => update({ footer: { ...normalized.footer!, style: s } })} mode="footer" showIcon={false} />
      </div>
    </>
  );
}