window.HandbookSections = (() => {
  const C = window.HandbookComponents;
  const data = window.HandbookData;

  function CoverSection() {
    return (
      <section id="cover" className="cover-section">
        <C.SectionLabel>OsteosOnline - Marketing Handboek</C.SectionLabel>
        <div className="cover-hero">
          <div className="cover-copy">
            <img className="cover-logo" src={data.assets.logoWhite} alt="OsteosOnline" />
            <div className="eyebrow">{data.meta.version}</div>
            <h1>
              Marketing die werkt
              <span>zoals het merk belooft.</span>
            </h1>
            <p>
              Dit handboek stuurt partnergroei, contentproductie en agent-output
              voor OsteosOnline.
            </p>
            <div className="cover-actions">
              <a href="#templates">Content templates</a>
              <a href="#agents">Agent instructies</a>
            </div>
          </div>
          <div className="cover-media" aria-label="OsteosOnline website visual">
            <img src={data.assets.hero} alt="Osteopaat behandelt baby" />
            <div className="media-caption">
              <span>Live website signal</span>
              <strong>Forest, echte zorgbeelden, kalme autoriteit.</strong>
            </div>
          </div>
          <div className="cover-meta">
            <span>{data.meta.updated}</span>
            <span>{data.meta.liveUrl}</span>
          </div>
        </div>
        <div className="signal-strip">
          {data.siteSignals.map((signal) => (
            <div className="signal" key={signal.label}>
              <strong>{signal.value}</strong>
              <span>{signal.label}</span>
            </div>
          ))}
        </div>
        <p className="lead">
          Dit is geen losse pagina. Dit is een document-workspace: data,
          componenten, documentcompositie en agent-instructies zijn gescheiden.
        </p>
      </section>
    );
  }

  function BrandSection() {
    return (
      <section id="merkidentiteit">
        <C.SectionLabel number="01">Merkidentiteit</C.SectionLabel>
        <h2>Wie OsteosOnline is.</h2>
        <p className="section-intro">{data.brand.position}</p>

        <div className="grid grid-3">
          {data.brand.principles.map((principle) => (
            <C.Principle key={principle.title} {...principle} />
          ))}
        </div>

        <div className="palette">
          {data.brand.colors.map((color) => (
            <C.Swatch key={color.name} color={color} />
          ))}
        </div>

        <div className="do-dont">
          <div className="do-box">
            <h3>Wel</h3>
            <C.BulletList items={data.brand.do} variant="plain" />
          </div>
          <div className="dont-box">
            <h3>Niet</h3>
            <C.BulletList items={data.brand.dont} variant="plain" />
          </div>
        </div>

        <div className="website-cue">
          <div>
            <div className="block-label">Website ritme</div>
            <h3>Donkere foto-oppervlakken dragen het merk.</h3>
            <p>
              De publieke site werkt omdat forest niet decoratief is maar dragend:
              hero, testimonials, video en footer voelen als een systeem. Dit
              handboek gebruikt datzelfde ritme.
            </p>
          </div>
          <img src={data.assets.video} alt="OsteosOnline video thumbnail" />
        </div>
      </section>
    );
  }

  function PropositionSection() {
    return (
      <section id="propositie">
        <C.SectionLabel number="02">Propositie</C.SectionLabel>
        <h2>Wat OsteosOnline belooft.</h2>
        <p className="section-intro">
          De propositie is scherp: exclusiviteit per regio, meetbaar resultaat,
          geen vage beloftes.
        </p>

        <div className="positioning-block">
          <div className="block-label">Positioning statement</div>
          <p className="statement">{data.proposition.statement}</p>
          <p className="statement-sub">{data.proposition.explainer}</p>
          <div className="moat-grid">
            {data.proposition.moat.map((item) => (
              <div className="moat-item" key={item.label}>
                <div className="moat-number">{item.number}</div>
                <div className="moat-label">{item.label}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="grid grid-2">
          {data.proposition.promises.map((promise) => (
            <C.Card key={promise.title} title={promise.title} body={promise.body} />
          ))}
        </div>
      </section>
    );
  }

  function AudiencesSection() {
    return (
      <section id="doelgroepen">
        <C.SectionLabel number="03">Doelgroepen</C.SectionLabel>
        <h2>Voor wie communiceren we.</h2>
        <p className="section-intro">
          OsteosOnline heeft twee verschillende doelgroepen. De boodschap,
          toon en kanaalkeuze mogen niet door elkaar lopen.
        </p>

        <div className="grid grid-2">
          {data.audiences.map((audience) => (
            <C.PersonaCard key={audience.title} audience={audience} />
          ))}
        </div>

        <div className="icp-block">
          <h3>Ideaal partnerprofiel</h3>
          <div className="grid grid-3">
            {data.icp.map((item) => (
              <C.Card key={item.title} title={item.title} body={item.body} tone="white" />
            ))}
          </div>
        </div>
      </section>
    );
  }

  function ChannelsSection() {
    return (
      <section id="kanalen">
        <C.SectionLabel number="04">Kanaalstrategie</C.SectionLabel>
        <h2>Zes kanalen, een verhaal.</h2>
        <p className="section-intro">
          Elk kanaal heeft een rol in de funnel. Gebruik geen kanaalformat buiten
          zijn functie.
        </p>
        <div className="funnel-band">
          <div>
            <span>Bewustzijn</span>
            <strong>SEO, Meta, LinkedIn</strong>
          </div>
          <div>
            <span>Overweging</span>
            <strong>Google Ads, e-mail</strong>
          </div>
          <div>
            <span>Beslissing</span>
            <strong>Referral, gesprek, zone-check</strong>
          </div>
        </div>
        <div className="grid grid-2">
          {data.channels.map((channel) => (
            <C.ChannelCard key={channel.title} channel={channel} />
          ))}
        </div>
      </section>
    );
  }

  function TemplatesSection() {
    return (
      <section id="templates">
        <C.SectionLabel number="05">Content templates</C.SectionLabel>
        <h2>Klaar om te gebruiken.</h2>
        <p className="section-intro">
          De templates zijn geen inspiratie. Ze zijn startpunten voor herhaalbare
          contentproductie.
        </p>
        <div className="grid grid-2">
          {data.templates.map((template) => (
            <C.TemplateCard key={template.label} template={template} />
          ))}
        </div>
      </section>
    );
  }

  function AgentsSection() {
    return (
      <section id="agents">
        <C.SectionLabel number="06">Voor agents</C.SectionLabel>
        <h2>Hoe agents dit handboek gebruiken.</h2>
        <p className="section-intro">
          Een agent leest eerst `AGENTS.md`, gebruikt daarna deze bronstructuur
          en maakt drafts op basis van doelgroep, kanaal en template.
        </p>
        <div className="agents-block">
          {data.agentRules.map((rule) => (
            <C.AgentRule key={rule.title} rule={rule} />
          ))}
        </div>
      </section>
    );
  }

  function DesignPrinciplesSection() {
    return (
      <section id="principes">
        <C.SectionLabel number="07">Ontwerpprincipes</C.SectionLabel>
        <h2>De regels achter het ontwerp.</h2>
        <p className="section-intro">
          V3 maakt expliciet waarom het handboek eruitziet zoals het eruitziet.
          Dit voorkomt dat een volgende agent opnieuw vanaf smaak of losse
          inspiratie begint.
        </p>

        <div className="principle-ledger">
          <div className="principle-feature">
            <div className="block-label">Design doctrine</div>
            <h3>De website is het bewijs, niet het moodboard.</h3>
            <p>
              OsteosOnline heeft al een herkenbare productie-taal: forest,
              echte behandelbeelden, kalme typografie en bewijs boven druk.
              Deze laag vertaalt die taal naar een document dat mensen en
              agents kunnen gebruiken.
            </p>
            <img src={data.assets.testimonial} alt="OsteosOnline testimonial" />
          </div>

          <div className="principle-list">
            {data.designPrinciples.map((principle) => (
              <article className="design-principle" key={principle.title}>
                <span>{principle.label}</span>
                <div>
                  <h4>{principle.title}</h4>
                  <p>{principle.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function ComponentSystemSection() {
    return (
      <section id="componenten">
        <C.SectionLabel number="08">Componenten</C.SectionLabel>
        <h2>Wat waar hoort.</h2>
        <p className="section-intro">
          De componentencatalogus maakt de Dries-structuur zichtbaar:
          compositie, data, secties, templates en gates zijn aparte lagen.
        </p>

        <div className="component-catalog">
          {data.componentSystem.map((component) => (
            <article className="component-row" key={component.name}>
              <div>
                <div className="component-type">{component.type}</div>
                <h4>{component.name}</h4>
              </div>
              <p>{component.purpose}</p>
              <div className="component-rule">{component.rule}</div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  function PromptBuilderSection() {
    const [audienceIndex, setAudienceIndex] = React.useState(0);
    const [channelIndex, setChannelIndex] = React.useState(0);
    const [task, setTask] = React.useState(data.promptBuilder.tasks[0]);

    const audience = data.audiences[audienceIndex];
    const channel = data.channels[channelIndex];
    const prompt = [
      "Je maakt marketingcontent voor OsteosOnline.",
      `Opdracht: ${task}.`,
      `Doelgroep: ${audience.title}.`,
      `Kanaal: ${channel.title} (${channel.role}).`,
      `Propositie: ${data.proposition.statement}`,
      "",
      "Gebruik deze constraints:",
      ...data.promptBuilder.constraints.map((constraint) => `- ${constraint}`),
      "",
      "Lever een draft op met placeholders waar bewijs ontbreekt. Publiceer niets."
    ].join("\n");

    return (
      <section id="builder">
        <C.SectionLabel number="09">Prompt builder</C.SectionLabel>
        <h2>Van handboek naar agentprompt.</h2>
        <p className="section-intro">
          Dit is de praktische laag: kies doelgroep, kanaal en opdracht. De
          output is een startprompt die de agentregels van dit handboek meeneemt.
        </p>

        <div className="builder-shell">
          <div className="builder-controls" aria-label="Prompt instellingen">
            <label className="builder-field">
              <span>Doelgroep</span>
              <select
                value={audienceIndex}
                onChange={(event) => setAudienceIndex(Number(event.target.value))}
              >
                {data.audiences.map((item, index) => (
                  <option value={index} key={item.title}>{item.title}</option>
                ))}
              </select>
            </label>

            <label className="builder-field">
              <span>Kanaal</span>
              <select
                value={channelIndex}
                onChange={(event) => setChannelIndex(Number(event.target.value))}
              >
                {data.channels.map((item, index) => (
                  <option value={index} key={item.title}>{item.title}</option>
                ))}
              </select>
            </label>

            <label className="builder-field">
              <span>Opdracht</span>
              <select
                value={task}
                onChange={(event) => setTask(event.target.value)}
              >
                {data.promptBuilder.tasks.map((item) => (
                  <option value={item} key={item}>{item}</option>
                ))}
              </select>
            </label>

            <div className="builder-context">
              <div className="block-label">Context</div>
              <strong>{audience.label}: {audience.title}</strong>
              <p>{audience.body}</p>
              <strong>{channel.title}: {channel.role}</strong>
              <p>{channel.body}</p>
            </div>
          </div>

          <div className="builder-output">
            <div className="block-label">Agentprompt</div>
            <pre>{prompt}</pre>
          </div>
        </div>
      </section>
    );
  }

  function QualityGatesSection() {
    return (
      <section id="gates">
        <C.SectionLabel number="10">Quality gates</C.SectionLabel>
        <h2>Wanneer iets klaar is.</h2>
        <p className="section-intro">
          Dit zijn de checks voor wijzigingen aan het handboek of afgeleide
          marketingoutput. Zo blijft v3 bruikbaar als menselijk document en als
          agent-workspace.
        </p>

        <div className="quality-gates">
          {data.qualityGates.map((gate, index) => (
            <article className="gate-card" key={gate.gate}>
              <div className="gate-index">{String(index + 1).padStart(2, "0")}</div>
              <h4>{gate.gate}</h4>
              <ul className="gate-checks">
                {gate.checks.map((check) => (
                  <li key={check}>{check}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>
    );
  }

  return {
    AgentsSection,
    AudiencesSection,
    BrandSection,
    ChannelsSection,
    ComponentSystemSection,
    CoverSection,
    DesignPrinciplesSection,
    PropositionSection,
    PromptBuilderSection,
    QualityGatesSection,
    TemplatesSection
  };
})();