/* Mereka v2 — Create Program wizard */

const PROGRAM_STEPS = [
  { key: 'basic', label: 'Basic Info', to: '/app/program/create/basic' },
  { key: 'timeline', label: 'Timeline', to: '/app/program/create/timeline' },
  { key: 'collaborators', label: 'Collaborators', to: '/app/program/create/collaborators' },
  { key: 'structure', label: 'Structure', to: '/app/program/create/structure' },
  { key: 'landing', label: 'Landing Page', to: '/app/program/create/landing' },
  { key: 'publish', label: 'Publish', to: '/app/program/create/publish' },
];

/* ============ Shell ============ */
function CreateProgramShell({ active, children, footer }) {
  return (
    <div className="min-h-screen bg-neutral-50">
      <HomeHeader />
      <main className="max-w-[min(2560px,95vw)] mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] gap-8">
          {/* Sidebar */}
          <aside>
            <Link to="/app/dashboard/overview" className="inline-flex items-center justify-center w-8 h-8 rounded-full hover:bg-neutral-100 text-neutral-600 mb-4" aria-label="Back">
              <Icon name="chevronLeft" size={18} />
            </Link>
            <h2 className="text-xl font-bold mb-6">Create Program</h2>
            <nav className="space-y-1">
              {PROGRAM_STEPS.map(s => {
                const isActive = active === s.key;
                return (
                  <Link key={s.key} to={s.to}
                    className={`block w-fit px-4 py-2 rounded-full text-sm transition-colors ${isActive ? 'bg-neutral-900 text-white font-semibold' : 'text-neutral-700 hover:bg-neutral-100'}`}>
                    {s.label}
                  </Link>
                );
              })}
            </nav>
          </aside>

          {/* Content */}
          <div>
            {children}
            {footer && <div className="mt-3 bg-white border border-neutral-200 rounded-2xl px-6 py-4">{footer}</div>}
          </div>
        </div>
      </main>
    </div>
  );
}

function PageCard({ title, subtitle, tips, children, tipsPlaceholder = true }) {
  return (
    <div className="bg-white border border-neutral-200 rounded-2xl p-8">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-10">
        <div>
          <h1 className="text-xl font-bold tracking-tight">{title}</h1>
          {subtitle && <p className="text-sm text-neutral-500 mt-1.5">{subtitle}</p>}
          <div className="mt-8 space-y-7 lg:border-r lg:border-neutral-200 lg:pr-10 lg:-mr-10">
            {children}
          </div>
        </div>
        {tips && (
          <div className="lg:pt-1">
            <TipsBlock {...tips} placeholder={tipsPlaceholder} />
          </div>
        )}
      </div>
    </div>
  );
}

function TipsBlock({ title = 'TIPS', body, placeholder = true, after }) {
  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <span className="text-neutral-700"><Icon name="spark" size={16} /></span>
        <span className="text-xs font-bold text-neutral-700 tracking-widest uppercase">{title}</span>
      </div>
      {body || (
        <p className="text-sm text-neutral-700 leading-relaxed">
          Make your title descriptive and exciting! Use key words that your clients would likely use to search for services like yours.
          <span className="block mt-4">E.g. LinkedIn Zero to Hero: LinkedIn Profile Review &amp; Optimisation</span>
        </p>
      )}
      {placeholder && <div className="mt-4 aspect-[4/3] bg-neutral-200 rounded-lg" />}
      {after}
    </div>
  );
}

/* Map placeholder with a pin — used by the "PIN IT" tip on Basic Info */
function ProgramMapPlaceholder() {
  return (
    <div className="relative w-full aspect-[5/4] rounded-lg overflow-hidden border border-neutral-200"
         style={{
           backgroundColor: '#e9efe6',
           backgroundImage:
             'linear-gradient(90deg, rgba(255,255,255,0.9) 2px, transparent 2px), ' +
             'linear-gradient(0deg, rgba(255,255,255,0.9) 2px, transparent 2px), ' +
             'linear-gradient(115deg, #cfe0ef 0 14%, transparent 14%), ' +
             'linear-gradient(200deg, #d8e8cf 0 22%, transparent 22%)',
           backgroundSize: '34px 34px, 34px 34px, 100% 100%, 100% 100%',
         }}>
      {/* a couple of "roads" */}
      <div className="absolute top-1/2 left-0 right-0 h-2 bg-white/80 -translate-y-1/2 -rotate-6" />
      <div className="absolute top-0 bottom-0 left-1/3 w-2 bg-white/80 rotate-3" />
      {/* center pin */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-full flex flex-col items-center">
        <span className="w-5 h-5 rounded-full bg-red-500 border-[3px] border-white shadow-md" />
        <span className="w-0 h-0 -mt-0.5 border-l-[5px] border-r-[5px] border-t-[7px] border-l-transparent border-r-transparent border-t-red-500" />
      </div>
      <button className="absolute bottom-2.5 right-2.5 w-7 h-7 rounded-md bg-white/90 border border-neutral-200 flex items-center justify-center text-neutral-600 hover:bg-white">
        <Icon name="external" size={13} />
      </button>
      <div className="absolute bottom-1 left-1.5 text-[11px] text-neutral-500/80">Map data</div>
    </div>
  );
}

function PinItTips() {
  return (
    <div className="mt-8 space-y-3">
      <div className="flex items-center gap-2">
        <span className="text-neutral-700"><Icon name="spark" size={16} /></span>
        <span className="text-xs font-bold text-neutral-700 tracking-widest uppercase">Pin it</span>
      </div>
      <p className="text-sm text-neutral-700">Is this pinned to the correct location?</p>
      <ProgramMapPlaceholder />
    </div>
  );
}

function ContinueFooter({ next, label = 'Save & Continue', primary = true }) {
  return (
    <div className="flex items-center justify-end gap-3">
      <Link to={next}>
        <button className={`inline-flex items-center px-6 h-11 rounded-full text-sm font-semibold transition-colors ${primary ? 'bg-neutral-900 text-white hover:bg-neutral-800' : 'bg-blue-500 text-white hover:bg-blue-600'}`}>
          {label}
        </button>
      </Link>
    </div>
  );
}

/* ============ Reusable form atoms ============ */
function FieldLabel({ children, optional, className = '' }) {
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <h3 className="text-lg font-bold text-neutral-900">{children}</h3>
      {optional && <span className="text-[11px] font-semibold bg-neutral-200 text-neutral-600 px-2 py-0.5 rounded uppercase tracking-wide">Optional</span>}
    </div>
  );
}

function FieldHelp({ children, className = '' }) {
  return <p className={`text-sm text-neutral-500 ${className}`}>{children}</p>;
}

function PgmInput({ value, placeholder, type = 'text', className = '' }) {
  return (
    <input type={type} defaultValue={value} placeholder={placeholder}
           className={`w-full h-12 px-4 text-sm border border-neutral-300 rounded-lg bg-white focus:outline-none focus:border-neutral-500 ${className}`} />
  );
}

function PgmTextarea({ value, placeholder, rows = 3, className = '' }) {
  return (
    <textarea rows={rows} defaultValue={value} placeholder={placeholder}
              className={`w-full px-4 py-3 text-sm border border-neutral-300 rounded-lg bg-white focus:outline-none focus:border-neutral-500 resize-none ${className}`} />
  );
}

function Toggle({ on = false, label, onChange, sublabel }) {
  return (
    <button onClick={onChange} className="inline-flex items-center gap-2.5">
      <span className={`relative inline-block w-9 h-5 rounded-full transition-colors ${on ? 'bg-neutral-900' : 'bg-neutral-300'}`}>
        <span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform ${on ? 'translate-x-4' : ''}`} />
      </span>
      {label && <span className="text-sm font-medium text-neutral-900">{label}</span>}
      {sublabel && <span className="text-xs text-neutral-500">{sublabel}</span>}
    </button>
  );
}

function RadioRow({ label, sublabel, checked }) {
  return (
    <label className="flex items-start gap-3 cursor-pointer py-1.5">
      <span className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${checked ? 'border-neutral-900' : 'border-neutral-400'}`}>
        {checked && <span className="w-2.5 h-2.5 rounded-full bg-neutral-900" />}
      </span>
      <span className="flex-1">
        <span className="block text-sm font-medium text-neutral-900">{label}</span>
        {sublabel && <span className="block text-xs text-neutral-500 mt-0.5">{sublabel}</span>}
      </span>
    </label>
  );
}

function CheckboxRow({ label, checked, onChange }) {
  return (
    <label className="flex items-center gap-2.5 cursor-pointer">
      <span onClick={onChange} className={`w-5 h-5 rounded-md border flex items-center justify-center flex-shrink-0 ${checked ? 'bg-neutral-900 border-neutral-900 text-white' : 'border-neutral-400 bg-white'}`}>
        {checked && <Icon name="check" size={14} strokeWidth={3} />}
      </span>
      <span className="text-sm text-neutral-800">{label}</span>
    </label>
  );
}

function UploadField({ placeholder = 'Upload here' }) {
  return (
    <div className="relative">
      <input type="text" placeholder={placeholder} readOnly
             className="w-full h-12 pl-4 pr-12 text-sm border border-neutral-300 rounded-lg bg-white text-neutral-500" />
      <Icon name="upload" size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-500" />
    </div>
  );
}

/* ============ STEP 1: BASIC INFO ============ */
function ProgramCreateBasicPage() {
  const [type, setType] = useState('Physical');
  const [visibility, setVisibility] = useState('Public');
  return (
    <CreateProgramShell active="basic" footer={<ContinueFooter next="/app/program/create/timeline" />}>
      <PageCard title="Basic info" subtitle="Start by defining the core identity of your program."
        tips={{ after: type === 'Physical' ? <PinItTips /> : null }}>
        <div>
          <FieldLabel>Program Name</FieldLabel>
          <FieldHelp className="mt-1">
            Short, clear name of what the program is about<br />
            Example: "AI4U" / "Video Editing Services"
          </FieldHelp>
          <div className="mt-3">
            <PgmInput placeholder="Title" />
            <div className="mt-1 text-xs text-neutral-400">0/70 max</div>
          </div>
        </div>

        <div>
          <FieldLabel>Describe your program</FieldLabel>
          <FieldHelp className="mt-1">One or two sentences describing your program.</FieldHelp>
          <div className="mt-3 border border-neutral-300 rounded-lg overflow-hidden bg-white">
            <textarea rows={4} placeholder="Description"
              className="w-full px-4 py-3 text-sm focus:outline-none resize-none border-0" />
            <div className="px-3 py-2 border-t border-neutral-200 flex items-center gap-3 text-neutral-500">
              <button className="font-bold text-sm w-7 h-7 hover:bg-neutral-100 rounded">B</button>
              <button className="italic text-sm w-7 h-7 hover:bg-neutral-100 rounded">I</button>
              <button className="underline text-sm w-7 h-7 hover:bg-neutral-100 rounded">U</button>
              <span className="w-px h-4 bg-neutral-200" />
              <button className="w-7 h-7 hover:bg-neutral-100 rounded flex items-center justify-center"><Icon name="paperclip" size={14} /></button>
              <button className="w-7 h-7 hover:bg-neutral-100 rounded flex items-center justify-center"><Icon name="menu" size={14} /></button>
              <button className="w-7 h-7 hover:bg-neutral-100 rounded flex items-center justify-center text-xs">1.</button>
            </div>
          </div>
        </div>

        <div>
          <FieldLabel>Are you hosting your Program physically or online?</FieldLabel>
          <FieldHelp className="mt-1">
            Online Programs can be hosted from anywhere via video conferencing software such as Zoom or Google Meet,
            whereas physical Programs must be conducted in either your own space or any venue you are approved to use.
          </FieldHelp>
          <div className="mt-3 space-y-1">
            <div onClick={() => setType('Physical')}><RadioRow label="Physical" checked={type === 'Physical'} /></div>
            <div onClick={() => setType('Online')}><RadioRow label="Online" checked={type === 'Online'} /></div>
          </div>
        </div>

        {type === 'Physical' && (
        <div>
          <FieldLabel>Share the location of your Program!</FieldLabel>
          <div className="mt-5 grid grid-cols-1 gap-4">
            <LabeledInput label="Street Address" />
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <LabeledInput label="Country" />
              <LabeledInput label="State (if any)" />
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <LabeledInput label="Town/City" />
              <LabeledInput label="Postcode" />
            </div>
          </div>
        </div>
        )}

        <div>
          <FieldLabel>Program Visibility</FieldLabel>
          <div className="mt-3 space-y-1">
            <div onClick={() => setVisibility('Public')}><RadioRow label="Public – Anyone can join" checked={visibility === 'Public'} /></div>
            <div onClick={() => setVisibility('Private')}><RadioRow label="Private - Invite only access" checked={visibility === 'Private'} /></div>
          </div>
        </div>

        <div>
          <FieldLabel optional>Keyword tags</FieldLabel>
          <FieldHelp className="mt-1">Tag your service with relevant keywords to the program you offer. Maximum 5 tags.</FieldHelp>
          <div className="mt-3 flex items-center gap-2">
            <button className="px-3 h-8 rounded-full border border-neutral-300 text-sm text-neutral-700">Type Tags</button>
            <button className="w-8 h-8 rounded-full border border-neutral-300 flex items-center justify-center hover:bg-neutral-50">
              <Icon name="plus" size={14} />
            </button>
          </div>
        </div>

        <div>
          <FieldLabel>Program Completion Certificate</FieldLabel>
          <div className="mt-3">
            <UploadField placeholder="Upload certificate here" />
          </div>
        </div>
      </PageCard>
    </CreateProgramShell>
  );
}

function LabeledInput({ label, value, placeholder }) {
  return (
    <div>
      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">{label}</label>
      <PgmInput value={value} placeholder={placeholder} />
    </div>
  );
}

/* ============ STEP 2: TIMELINE ============ */
function ProgramCreateTimelinePage() {
  const [cohort, setCohort] = useState('cohort');
  const [appOn, setAppOn] = useState(true);
  return (
    <CreateProgramShell active="timeline" footer={<ContinueFooter next="/app/program/create/collaborators" />}>
      <PageCard title="Timeline" subtitle="Outline when your program runs and how learners will experience it." tips={{}}>
        <div>
          <FieldLabel>Program Timeline</FieldLabel>
          <div className="mt-3 space-y-1">
            <div onClick={() => setCohort('cohort')}><RadioRow label="Cohort-based (fixed start/end)" checked={cohort === 'cohort'} /></div>
            <div onClick={() => setCohort('rolling')}><RadioRow label="Rolling intake" checked={cohort === 'rolling'} /></div>
          </div>
        </div>

        <div>
          <FieldLabel>Program Date</FieldLabel>
          <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
            <DateField label="Start Date" value="05/02/2026" />
            <DateField label="End Date" value="05/02/2027" />
          </div>
        </div>

        <div>
          <FieldLabel optional>Program Application</FieldLabel>
          <FieldHelp className="mt-1">Gather key details to help determine if the applicant is suitable for this program.</FieldHelp>
          <div className="mt-3">
            <Toggle on={appOn} label="Require application form" onChange={() => setAppOn(!appOn)} />
          </div>
          {appOn && (
            <div className="mt-3">
              <PgmInput placeholder="Insert application form link here" />
              <div className="mt-3 flex justify-center">
                <Link to="/app/forms/builder/new/content" className="text-sm font-semibold text-neutral-700 inline-flex items-center gap-1.5 hover:text-neutral-900">
                  Create application form <Icon name="edit" size={14} />
                </Link>
              </div>
              <FieldHelp className="mt-2">You can edit or complete this step after program creation.</FieldHelp>
            </div>
          )}
        </div>
      </PageCard>
    </CreateProgramShell>
  );
}

function DateField({ label, value }) {
  return (
    <div>
      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">{label}</label>
      <div className="relative">
        <input type="text" defaultValue={value} className="w-full h-12 px-4 pr-11 text-sm border border-neutral-300 rounded-lg bg-white focus:outline-none focus:border-neutral-500" />
        <Icon name="calendar" size={16} className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-500" />
      </div>
    </div>
  );
}

/* ============ STEP 3: COLLABORATORS ============ */
function ProgramCreateCollaboratorsPage() {
  return (
    <CreateProgramShell active="collaborators" footer={<ContinueFooter next="/app/program/create/structure" />}>
      <PageCard title="Program Partnership" subtitle="Invite partner hubs and define how you'll build this program together." tips={{}}>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Hub</label>
            <div className="h-12 px-3 border border-neutral-300 rounded-lg flex items-center gap-2">
              <Avatar name="Mereka" size={28} />
              <span className="text-sm font-medium flex-1">Add Hub</span>
              <Icon name="trash" size={14} className="text-neutral-400" />
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Role</label>
            <div className="h-12 px-4 border border-neutral-300 rounded-lg flex items-center justify-between">
              <div>
                <div className="text-sm font-medium">Viewer</div>
                <div className="text-[12px] text-neutral-500 -mt-0.5">View program structure &amp; track progress.</div>
              </div>
              <Icon name="chevronDown" size={14} className="text-neutral-500" />
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Hub</label>
            <div className="h-12 px-3 border border-neutral-300 rounded-lg flex items-center gap-2 text-neutral-400">
              <div className="w-7 h-7 rounded-full bg-neutral-200" />
              <span className="text-sm flex-1">Select Hub</span>
              <Icon name="chevronDown" size={14} />
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Role</label>
            <div className="h-12 px-4 border border-neutral-300 rounded-lg flex items-center justify-between text-neutral-400">
              <div className="text-sm">Select Role</div>
              <Icon name="chevronDown" size={14} />
            </div>
          </div>
        </div>
      </PageCard>
    </CreateProgramShell>
  );
}

/* ============ STEP 4: STRUCTURE ============ */
const PROGRAM_LIBRARY = [
  { id: 'l1', t: 'Generative AI Fundamentals', kind: 'Course', host: 'Bijibiji initiative', hue: 0 },
  { id: 'l2', t: 'Image Gen Crash Course', kind: 'Experiences', host: 'Bijibiji initiative', hue: 1 },
  { id: 'l3', t: 'AI Product Management', kind: 'Expertise', host: 'Bijibiji initiative', hue: 2 },
  { id: 'l4', t: 'UX Design Principles', kind: 'Course', host: 'Bijibiji initiative', hue: 3 },
  { id: 'l5', t: 'UX Mentorship', kind: 'Expertise', host: 'Bijibiji initiative', hue: 4 },
];

function ProgramCreateStructurePage() {
  const [empty, setEmpty] = useState(false); // Show populated by default
  const [modalOpen, setModalOpen] = useState(false);
  const [openSections, setOpenSections] = useState({ Course: true, Experience: true, Expertise: true });
  return (
    <CreateProgramShell active="structure" footer={
      <div className="flex items-center justify-end gap-3">
        <button onClick={() => setEmpty(!empty)} className="px-5 h-11 rounded-full border border-neutral-300 text-sm font-semibold inline-flex items-center gap-2">
          {empty ? 'Show populated' : 'Show empty'} <Icon name="plus" size={14} />
        </button>
        <Link to="/app/program/create/landing">
          <button className="inline-flex items-center px-6 h-11 rounded-full text-sm font-semibold bg-neutral-900 text-white hover:bg-neutral-800">Save &amp; Continue</button>
        </Link>
      </div>
    }>
      <div className="bg-white border border-neutral-200 rounded-2xl p-8">
        <h1 className="text-xl font-bold">Program Structure</h1>
        <p className="text-sm text-neutral-500 mt-1.5">Assemble the learning experiences that bring your program to life.</p>

        {empty ? (
          <div className="mt-8 space-y-1">
            {['Courses (0)', 'Experience (0)', 'Expertise (0)'].map(s => (
              <button key={s} className="w-full flex items-center justify-between py-5 border-b border-neutral-100 last:border-0">
                <span className="text-xl font-bold text-neutral-900">{s}</span>
                <Icon name="chevronUp" size={16} className="text-neutral-500" />
              </button>
            ))}
            <div className="pt-12 pb-6 flex items-center justify-center">
              <button onClick={() => { setEmpty(false); setModalOpen(true); }} className="px-5 h-11 rounded-full border border-neutral-300 text-sm font-semibold inline-flex items-center gap-2 hover:bg-neutral-50">
                Add More <Icon name="plus" size={14} />
              </button>
            </div>
          </div>
        ) : (
          <div className="mt-8 space-y-8">
            <StructureSection
              title="Course (1)"
              open={openSections.Course}
              onToggle={() => setOpenSections(s => ({ ...s, Course: !s.Course }))}
              onAdd={() => setModalOpen(true)}>
              <CurriculumCard item={PROGRAM_LIBRARY[0]}
                deadline={true} badge="Badge1.pdf"
                prerequisites={['Image Gen...', 'Image Gen...']} />
            </StructureSection>

            <StructureSection
              title="Experience (1)"
              open={openSections.Experience}
              onToggle={() => setOpenSections(s => ({ ...s, Experience: !s.Experience }))}
              onAdd={() => setModalOpen(true)}>
              <CurriculumCard item={{ ...PROGRAM_LIBRARY[1], kind: 'Experience' }} deadline />
            </StructureSection>

            <StructureSection
              title="Expertise (0)"
              open={openSections.Expertise}
              onToggle={() => setOpenSections(s => ({ ...s, Expertise: !s.Expertise }))}
              onAdd={() => setModalOpen(true)}>
              <CurriculumCard item={{ ...PROGRAM_LIBRARY[1], kind: 'Experience' }} deadline />
            </StructureSection>
          </div>
        )}
      </div>

      {modalOpen && <AddCurriculumModal onClose={() => setModalOpen(false)} />}
    </CreateProgramShell>
  );
}

function StructureSection({ title, open, onToggle, onAdd, children }) {
  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <h2 className="text-xl font-bold">{title}</h2>
          <button onClick={onAdd} className="px-3 h-8 rounded-full border border-neutral-300 text-xs font-semibold inline-flex items-center gap-1.5 hover:bg-neutral-50">
            <Icon name="plus" size={12} /> Add More
          </button>
        </div>
        <button onClick={onToggle} className="w-8 h-8 flex items-center justify-center text-neutral-500">
          <Icon name={open ? 'chevronUp' : 'chevronDown'} size={16} />
        </button>
      </div>
      {open && children}
    </div>
  );
}

function CurriculumCard({ item, deadline, badge, prerequisites = [] }) {
  const [d, setD] = useState(deadline || false);
  const [b, setB] = useState(!!badge);
  const [p, setP] = useState(prerequisites.length > 0);
  return (
    <div className="bg-neutral-50/60 border border-neutral-200 rounded-xl p-5">
      <div className="flex items-start gap-3">
        <div className="w-9 h-9 rounded bg-neutral-200 flex-shrink-0" />
        <div className="flex-1">
          <h4 className="font-bold text-sm">{item.t}</h4>
          <p className="text-xs text-neutral-500 mt-0.5">{item.kind} • {item.host}</p>
        </div>
        <button className="text-neutral-400 hover:text-red-600"><Icon name="trash" size={16} /></button>
      </div>

      <div className="my-4 h-px bg-neutral-200" />

      <div className="mb-4">
        <Toggle on={false} label="Mandatory for program completion" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_1fr_auto] gap-x-4 items-center mb-3">
        <Toggle on={d} label="Deadline" onChange={() => setD(!d)} />
        <Toggle on={b} label="Badge/ Certificate" onChange={() => setB(!b)} />
        <Toggle on={p} label="Pre-requisite" onChange={() => setP(!p)} />
        <button className="text-sm text-neutral-500 hover:text-neutral-700 inline-flex items-center gap-1 whitespace-nowrap">
          <Icon name="plus" size={12} /> Add
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_1fr_auto] gap-x-4 items-center">
        <div className={`relative ${!d ? 'opacity-40' : ''}`}>
          <input type="text" defaultValue="05/02/2026" disabled={!d} className="w-full h-10 px-3 pr-9 text-sm border border-neutral-300 rounded-lg bg-white" />
          <Icon name="calendar" size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500" />
        </div>
        <div className={`relative ${!b ? 'opacity-40' : ''}`}>
          <input type="text" defaultValue={badge || ''} placeholder="Upload here" disabled={!b}
                 className="w-full h-10 px-3 pr-9 text-sm border border-neutral-300 rounded-lg bg-white text-neutral-700 placeholder:text-neutral-400" />
          <Icon name="upload" size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500" />
        </div>
        <div className={!p ? 'opacity-40' : ''}>
          {prerequisites.length > 0 ? (
            <div className="flex items-center gap-1.5 flex-wrap">
              {prerequisites.map((pre, i) => (
                <span key={i} className="inline-flex items-center gap-1 h-10 px-3 text-xs border border-neutral-300 rounded-lg bg-white">
                  {pre}
                  <button><Icon name="close" size={12} /></button>
                </span>
              ))}
            </div>
          ) : (
            <button className="h-10 px-3 text-sm border border-neutral-300 rounded-lg bg-white inline-flex items-center gap-1.5 text-neutral-400">
              <span className="w-4 h-4 rounded-full border border-neutral-300 inline-flex items-center justify-center"><Icon name="plus" size={10} /></span>
              Add
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function AddCurriculumModal({ onClose }) {
  const [tab, setTab] = useState('All');
  const [picked, setPicked] = useState(new Set([]));
  const togglePick = (id) => setPicked(prev => {
    const next = new Set(prev);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    return next;
  });
  const items = tab === 'All' ? PROGRAM_LIBRARY :
    PROGRAM_LIBRARY.filter(i => i.kind === tab || (tab === 'Experiences' && i.kind === 'Experiences'));
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
      <div onClick={e => e.stopPropagation()} className="w-full max-w-lg bg-white rounded-2xl shadow-2xl p-6">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-xl font-bold">Add Curriculum</h2>
          <button onClick={onClose} className="text-neutral-500 hover:text-neutral-900"><Icon name="close" size={18} /></button>
        </div>
        <div className="relative mb-4">
          <Icon name="search" size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
          <input placeholder="Search services" className="w-full h-12 pl-11 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none" />
        </div>
        <div className="flex items-center gap-2 mb-4">
          {['All', 'Courses', 'Experiences', 'Expertise'].map(t => (
            <button key={t} onClick={() => setTab(t)}
              className={`px-5 h-9 rounded-full text-sm font-semibold transition-colors ${tab === t ? 'bg-neutral-900 text-white' : 'bg-white text-neutral-700 border border-neutral-200 hover:bg-neutral-50'}`}>
              {t}
            </button>
          ))}
        </div>
        <div className="space-y-3 max-h-[420px] overflow-y-auto scrollbar-thin">
          {items.map(it => {
            const isPicked = picked.has(it.id);
            return (
              <button key={it.id} onClick={() => togglePick(it.id)}
                className={`w-full flex items-center gap-3 p-3 rounded-xl border transition-colors text-left ${isPicked ? 'bg-neutral-100 border-neutral-300' : 'bg-white border-neutral-200 hover:border-neutral-300'}`}>
                <div className="w-12 h-12 rounded-md bg-neutral-200 flex-shrink-0" />
                <div className="flex-1">
                  <div className="font-bold text-sm">{it.t}</div>
                  <div className="text-xs text-neutral-500">{it.kind} • {it.host}</div>
                </div>
                {isPicked ? (
                  <Icon name="check" size={18} strokeWidth={2.5} className="text-neutral-900" />
                ) : (
                  <Icon name="plus" size={18} className="text-neutral-400" />
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ============ STEP 5: LANDING PAGE ============ */
function ProgramCreateLandingPage() {
  const [keepName, setKeepName] = useState(true);
  const [keepDesc, setKeepDesc] = useState(false);
  return (
    <CreateProgramShell active="landing" footer={<ContinueFooter next="/app/program/create/publish" />}>
      <div className="bg-white border border-neutral-200 rounded-2xl p-8">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-10">
          <div className="lg:border-r lg:border-neutral-200 lg:pr-10 lg:-mr-10">
            <h1 className="text-xl font-bold">Program Landing Page Details</h1>
            <p className="text-sm text-neutral-500 mt-1.5">Complete the details for your program landing page.</p>

            <div className="mt-8 space-y-7">
              <div>
                <FieldLabel>Program Name</FieldLabel>
                <div className="mt-3">
                  <PgmInput value="AI4U Program" />
                </div>
                <div className="mt-3">
                  <CheckboxRow label="Keep detail same as basic info page." checked={keepName} onChange={() => setKeepName(!keepName)} />
                </div>
              </div>

              <div>
                <FieldLabel>Program Description</FieldLabel>
                <FieldHelp className="mt-1">One or two sentences describing your program.</FieldHelp>
                <div className="mt-3">
                  <PgmTextarea
                    rows={4}
                    value="AI4U is a FREE program dedicated to equipping 10,000 Malaysians and Indonesians with practical, real-world AI skills to boost employability, entrepreneurship, and digital resilience."
                  />
                </div>
                <div className="mt-3">
                  <CheckboxRow label="Keep detail same as basic info page." checked={keepDesc} onChange={() => setKeepDesc(!keepDesc)} />
                </div>
              </div>

              <div>
                <FieldLabel>Partner</FieldLabel>
                <div className="mt-3 bg-white border border-neutral-200 rounded-xl p-5">
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="font-bold text-sm">Partner 1</h4>
                    <button className="text-neutral-400 hover:text-red-600"><Icon name="trash" size={16} /></button>
                  </div>
                  <div className="space-y-4">
                    <div>
                      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Partner name</label>
                      <PgmInput placeholder="Insert partner name" />
                    </div>
                    <div>
                      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Logo</label>
                      <UploadField placeholder="Upload partner logo here" />
                    </div>
                    <div>
                      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">Website</label>
                      <PgmInput placeholder="Insert website link" />
                    </div>
                  </div>
                </div>
                <div className="mt-3 flex justify-center">
                  <button className="text-sm font-semibold text-neutral-700 inline-flex items-center gap-1.5 hover:text-neutral-900">
                    Add partner <Icon name="plus" size={14} />
                  </button>
                </div>
              </div>

              <div>
                <FieldLabel>Learning Outcomes</FieldLabel>
                <FieldHelp className="mt-1">List of skills or knowledge participants will acquire by the end of the program. (minimum 3)</FieldHelp>
                <div className="mt-3 space-y-2.5">
                  <PgmInput placeholder="Learning outcome" />
                  <PgmInput placeholder="Learning outcome" />
                  <PgmInput placeholder="Learning outcome" />
                </div>
                <div className="mt-3 flex justify-center">
                  <button className="text-sm font-semibold text-neutral-700 inline-flex items-center gap-1.5 hover:text-neutral-900">
                    Add learning outcome <Icon name="plus" size={14} />
                  </button>
                </div>
              </div>

              <div>
                <FieldLabel>Expert List</FieldLabel>
                <FieldHelp className="mt-1">Choose the experts involved in the program.</FieldHelp>
                <div className="mt-3 relative">
                  <Icon name="search" size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400" />
                  <input placeholder="Search expert" className="w-full h-12 pl-11 pr-4 text-sm border border-neutral-200 rounded-full bg-white focus:outline-none focus:border-neutral-400" />
                </div>
                <div className="mt-3 space-y-2.5">
                  {[
                    { n: 'Jey Bala', hub: 'Bijibiji initiative', picked: true, hue: 25 },
                    { n: 'Rashvin Pal Singh', hub: 'Bijibiji initiative', picked: false, hue: 220 },
                    { n: 'Mala K', hub: 'Bijibiji initiative', picked: false, hue: 340 },
                  ].map(e => (
                    <div key={e.n} className={`flex items-center gap-3 p-3 rounded-xl border ${e.picked ? 'bg-neutral-50 border-neutral-300' : 'bg-white border-neutral-200'}`}>
                      <Avatar name={e.n} size={40} />
                      <div className="flex-1">
                        <div className="font-bold text-sm">{e.n}</div>
                        <div className="text-xs text-neutral-500">{e.hub}</div>
                      </div>
                      {e.picked ? (
                        <Icon name="check" size={18} strokeWidth={2.5} className="text-neutral-900" />
                      ) : (
                        <button className="text-neutral-400"><Icon name="plus" size={18} /></button>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <FieldLabel>FAQ</FieldLabel>
                <div className="mt-3">
                  <PgmInput placeholder="Insert FAQ link here" />
                </div>
              </div>
            </div>
          </div>

          <div className="lg:pt-1">
            <TipsBlock />
          </div>
        </div>
      </div>
    </CreateProgramShell>
  );
}

/* ============ STEP 6: PUBLISH ============ */
function ProgramCreatePublishPage() {
  return (
    <CreateProgramShell active="publish" footer={
      <div className="flex items-center justify-end">
        <Link to="/app/program/admin/feed">
          <button className="inline-flex items-center px-8 h-11 rounded-full text-sm font-semibold bg-blue-500 text-white hover:bg-blue-600">Publish</button>
        </Link>
      </div>
    }>
      <div className="bg-white border border-neutral-200 rounded-2xl p-8">
        <h1 className="text-xl font-bold">You're almost done!</h1>
        <p className="text-sm text-neutral-500 mt-1.5">Review your program details before making it available to learners.</p>

        <div className="mt-6 border border-neutral-200 rounded-2xl p-6">
          <ReviewSection title="Program Overview" editTo="/app/program/create/basic">
            <ReviewGrid>
              <ReviewItem label="Program Name" value="AI Fluency by Microsoft" />
              <ReviewItem label="Program Visibility" value="Public" />
              <ReviewItem label="Program Type" value="Physical" />
              <ReviewItem label="Location" value="Hybrid — Kuala Lumpur Hub + Online Sessions" />
              <ReviewItem label="Program Tags" value="#AI #Microsoft" />
            </ReviewGrid>
          </ReviewSection>

          <ReviewSection title="Timeline" editTo="/app/program/create/timeline">
            <ReviewGrid>
              <ReviewItem label="Program Duration" value="6 May – 30 July 2026" />
              <ReviewItem label="Kickoff Date" value="6 May 2026" />
              <ReviewItem label="Format" value="Hybrid (In-person workshops twice a month)" />
            </ReviewGrid>
          </ReviewSection>

          <ReviewSection title="Collaborators" editTo="/app/program/create/collaborators">
            <ReviewGrid>
              <ReviewItem label="Lead Hub" value="Mereka" />
              <div>
                <div className="text-sm text-neutral-500 mb-1">Collaborating Hubs:</div>
                <div className="text-base font-bold flex items-center gap-2">Penang Innovation Hub <ReviewPill>Viewer</ReviewPill></div>
                <div className="text-base font-bold flex items-center gap-2 mt-1">Johor Tech Hub <ReviewPill>Contributor</ReviewPill></div>
              </div>
            </ReviewGrid>
          </ReviewSection>

          <ReviewSection title="Program Structure" editTo="/app/program/create/structure" last>
            <ReviewGrid>
              <div>
                <div className="text-sm text-neutral-500 mb-1">Courses</div>
                <div className="text-base font-bold flex items-center gap-2 flex-wrap">
                  Generative AI Fundamentals <ReviewPill>Mandatory</ReviewPill> <ReviewPill>Deadline</ReviewPill>
                </div>
                <div className="text-base font-bold mt-1">Image Gen Crash Course</div>
              </div>
              <div>
                <div className="text-sm text-neutral-500 mb-1">Experiences</div>
                <div className="text-base font-bold flex items-center gap-2">Image Gen Crash Course <ReviewPill>Mandatory</ReviewPill></div>
              </div>
              <div className="col-span-2">
                <div className="text-sm text-neutral-500 mb-1">Expertise</div>
                <div className="text-base font-bold">AI Product Management</div>
              </div>
            </ReviewGrid>
          </ReviewSection>
        </div>
      </div>
    </CreateProgramShell>
  );
}

function ReviewSection({ title, editTo, children, last }) {
  return (
    <div className={last ? '' : 'mb-8'}>
      <div className="flex items-center gap-2 mb-4">
        <Link to={editTo} className="inline-flex items-center gap-1.5 text-blue-500 hover:text-blue-600 font-semibold text-base">
          {title} <Icon name="edit" size={14} />
        </Link>
      </div>
      {children}
    </div>
  );
}

function ReviewGrid({ children }) {
  return <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-4">{children}</div>;
}

function ReviewItem({ label, value }) {
  return (
    <div>
      <div className="text-sm text-neutral-500 mb-1">{label}</div>
      <div className="text-base font-bold text-neutral-900">{value}</div>
    </div>
  );
}

function ReviewPill({ children }) {
  return <span className="inline-flex items-center px-2 py-0.5 bg-neutral-200 text-neutral-700 text-xs font-medium rounded">{children}</span>;
}

Object.assign(window, {
  ProgramCreateBasicPage, ProgramCreateTimelinePage, ProgramCreateCollaboratorsPage,
  ProgramCreateStructurePage, ProgramCreateLandingPage, ProgramCreatePublishPage,
});