/* ============================================================
   NemakiWare — page sections
   ============================================================ */

function SectionHead({ eyebrow, title, sub, center = false, badge = null }) {
  return (
    <div className="sec-head" style={center ? { marginInline: "auto", textAlign: "center" } : null}>
      <div style={{ display: "flex", gap: 12, alignItems: "center", justifyContent: center ? "center" : "flex-start", flexWrap: "wrap" }}>
        <span className="eyebrow">{eyebrow}</span>
        {badge}
      </div>
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

/* ---- 0a. Pain strip (top of page, below hero) ------------------ */
function PainStrip({ t }) {
  const p = t.pains;
  return (
    <section className="section section--tight" id="pains">
      <div className="wrap">
        <Reveal>
          <h2 className="pains-head">{p.eyebrow}</h2>
          <div className="pain-grid">
            {p.items.map((x, i) => (
              <div key={i} className="pain-card">
                <span className="pain-mark" aria-hidden="true">“</span>
                <p>{x}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- 0. Foundation (general principle) ------------------------ */
function FoundationSection({ t }) {
  const f = t.foundation;
  return (
    <section className="section" id="foundation" style={{ background: "var(--bg-tint)" }}>
      <div className="wrap">
        <Reveal><SectionHead eyebrow={f.eyebrow} title={f.title} sub={f.body} /></Reveal>
        <div className="foundation-points">
          {f.points.map((p, i) => (
            <Reveal key={i} delay={(i % 3) * 70} className="foundation-point">
              <span className="foundation-num mono">0{i + 1}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- 1. The RAG problem (was: shift) -------------------------- */
function ShiftSection({ t }) {
  const s = t.shift;
  return (
    <section className="section" id="shift">
      <div className="wrap">
        <Reveal>
          <div className="sec-head shift-head">
            <span className="eyebrow">{s.eyebrow}</span>
            <p className="shift-intro">{s.intro}</p>
            <h2>{s.title}</h2>
            <p>{s.body}</p>
          </div>
        </Reveal>
        <div className="shift-grid">
          <Reveal className="shift-col shift-col--before">
            <div className="shift-tag">{s.before_label}</div>
            <ul className="shift-list">
              {s.before.map((x, i) => (
                <li key={i}><span className="shift-x">×</span>{x}</li>
              ))}
            </ul>
          </Reveal>
          <Reveal delay={90} className="shift-col shift-col--after">
            <div className="shift-tag shift-tag--accent">{s.after_label}</div>
            <ul className="shift-list">
              {s.after.map((x, i) => (
                <li key={i}><span className="shift-check"><Icon name="check" size={14} /></span>{x}</li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- 2. Pillars ----------------------------------------------- */
function PillarsSection({ t }) {
  const p = t.pillars;
  const icons = ["search", "layers", "plug", "cube", "cycle", "monitor"];
  return (
    <section className="section" id="features" style={{ background: "var(--bg-tint)" }}>
      <div className="wrap">
        <Reveal><SectionHead eyebrow={p.eyebrow} title={p.title} sub={p.sub} /></Reveal>
        <div className="pillar-grid">
          {p.items.map((it, i) => (
            <Reveal key={i} delay={(i % 3) * 70} className="card pillar-card">
              <div className="icon-tile"><Icon name={icons[i]} size={22} /></div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- 3. Permission model + flow ------------------------------- */
function PermissionSection({ t }) {
  const p = t.perm;
  const flowIcons = ["users", "search", "shield", "check"];
  const steps = [
    { ic: "users", label: p.flow_user, sub: p.flow_q },
    { ic: "search", label: p.flow_search, sub: null },
    { ic: "shield", label: p.flow_acl, sub: p.flow_acl_d, accent: true },
    { ic: "check", label: p.flow_result, sub: null },
  ];
  return (
    <section className="section dark" id="security">
      <div className="wrap">
        <Reveal><SectionHead eyebrow={p.eyebrow} title={p.title} sub={p.body} /></Reveal>

        <Reveal className="flow" delay={60}>
          {steps.map((st, i) => (
            <React.Fragment key={i}>
              <div className={`flow-node ${st.accent ? "flow-node--accent" : ""}`}>
                <div className="flow-ic"><Icon name={st.ic} size={22} /></div>
                <div className="flow-label">{st.label}</div>
                {st.sub && <div className="flow-sub mono">{st.sub}</div>}
              </div>
              {i < steps.length - 1 && <div className="flow-arrow"><Icon name="arrow" size={20} /></div>}
            </React.Fragment>
          ))}
        </Reveal>

        <div className="perm-points">
          {p.points.map((pt, i) => (
            <Reveal key={i} delay={(i % 2) * 80} className="perm-point">
              <div className="perm-point-ic"><Icon name={["lock", "tree", "users", "eye"][i]} size={20} /></div>
              <div>
                <h4>{pt.t}</h4>
                <p>{pt.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- 4. MCP & RAG --------------------------------------------- */
function McpSection({ t }) {
  const m = t.mcp;
  return (
    <section className="section" id="mcp">
      <div className="wrap">
        <Reveal><SectionHead eyebrow={m.eyebrow} title={m.title} sub={m.sub} /></Reveal>
        <div className="mcp-grid">
          <Reveal className="mcp-tools card">
            <div className="card-kicker mono"><Icon name="plug" size={15} /> {m.tools_label}</div>
            <ul className="tool-list">
              {m.tools.map((tool, i) => (
                <li key={i}>
                  <code className="tool-name">{tool.n}</code>
                  <span className="tool-desc">{tool.d}</span>
                </li>
              ))}
            </ul>
            <div className="mcp-proto mono">JSON-RPC 2.0 · HTTP / SSE</div>
          </Reveal>

          <div className="mcp-side">
            <Reveal delay={70} className="card mcp-rest">
              <div className="card-kicker mono"><Icon name="bolt" size={15} /> {m.api_label}</div>
              <pre className="rest-snippet mono">{`POST /api/v1/cmis/repositories
        /bedroom/rag/search

{ "query": "annual report",
  "topK": 5, "minScore": 0.6 }`}</pre>
            </Reveal>
            <Reveal delay={130} className="card mcp-providers">
              <div className="card-kicker mono"><Icon name="cube" size={15} /> {m.providers_label}</div>
              {m.providers.map((pr, i) => (
                <div key={i} className="prov-row">
                  <div className="prov-top">
                    <span className="prov-name">{pr.n}</span>
                    <span className={`pill ${pr.t.toLowerCase().includes("beta") ? "pill--beta" : ""}`} style={{ fontSize: 10 }}>{pr.t}</span>
                  </div>
                  <p className="prov-desc">{pr.d}</p>
                </div>
              ))}
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- 5. Team sharing → Lineage (Beta) ------------------------- */
function LineageSection({ t }) {
  const l = t.lineage;
  const importIcons = { "Slack": "users", "Box": "cube", "Google Drive": "database", "OneDrive": "database" };
  return (
    <section className="section dark" id="lineage">
      <div className="wrap">
        <Reveal>
          <SectionHead
            eyebrow={l.eyebrow}
            title={l.title}
            sub={l.body}
            badge={<span className="pill pill--beta" data-beta-badge><span className="dot"></span>{l.betaNote}</span>}
          />
        </Reveal>

        <Reveal delay={60} className="lineage-diagram">
          <div className="lin-col">
            <div className="lin-col-label mono">{l.import_label}</div>
            {l.import.map((s, i) => (
              <div key={i} className="lin-chip">
                <Icon name={importIcons[s] || "doc"} size={16} /> {s}
              </div>
            ))}
          </div>

          <div className="lin-flowarr"><Icon name="import" size={22} /></div>

          <div className="lin-center">
            <div className="lin-center-mark"><Logo onDark /></div>
            <div className="lin-center-d mono">{l.mid_d}</div>
          </div>

          <div className="lin-flowarr"><Icon name="link" size={22} /></div>

          <div className="lin-col">
            <div className="lin-col-label mono">{l.lineage_label}</div>
            {l.lineageTargets.map((s, i) => (
              <div key={i} className="lin-chip lin-chip--out">
                <Icon name="tree" size={16} /> {s}
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={120}>
          <p className="lineage-caption mono">{l.caption}</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- 6. CMIS heritage ----------------------------------------- */
function CmisSection({ t }) {
  const c = t.cmis;
  return (
    <section className="section" id="cmis" style={{ background: "var(--bg-tint)" }}>
      <div className="wrap cmis-wrap">
        <Reveal className="cmis-left">
          <SectionHead eyebrow={c.eyebrow} title={c.title} sub={c.body} />
          <div className="cmis-bind">
            <span className="cmis-bind-label mono">{c.bind_label}</span>
            <div className="cmis-bind-chips">
              {c.bindings.map((b, i) => <span key={i} className="pill pill--accent">{b}</span>)}
            </div>
          </div>
        </Reveal>
        <Reveal delay={80} className="cmis-grid">
          {c.items.map((it, i) => (
            <div key={i} className="cmis-item">
              <span className="cmis-check"><Icon name="check" size={14} /></span>{it}
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---- 7. Architecture / stack ---------------------------------- */
function StackSection({ t }) {
  const s = t.stack;
  const d = s.diagram;
  return (
    <section className="section" id="architecture">
      <div className="wrap">
        <Reveal><SectionHead eyebrow={s.eyebrow} title={s.title} sub={s.sub} /></Reveal>

        <Reveal delay={60} className="arch">
          <div className="arch-row">
            <div className="arch-box arch-box--agent"><Icon name="spark" size={18} /><span>{d.agent}</span><em className="mono">{d.agentSub}</em></div>
            <div className="arch-conn"><Icon name="arrow" size={18} /></div>
            <div className="arch-core">
              <div className="arch-ui mono"><Icon name="monitor" size={14} /> {d.ui} · {d.uiSub}</div>
              <div className="arch-core-main">
                <strong>{d.core}</strong>
                <em className="mono">{d.coreSub}</em>
              </div>
            </div>
            <div className="arch-conn"><Icon name="arrow" size={18} /></div>
            <div className="arch-box arch-box--emb"><Icon name="cube" size={18} /><span>{d.emb}</span><em className="mono">{d.embSub}</em></div>
          </div>
          <div className="arch-down">
            <div className="arch-box arch-box--db"><Icon name="database" size={18} /><span>{d.db}</span><em className="mono">{d.dbSub}</em></div>
            <div className="arch-box arch-box--solr"><Icon name="search" size={18} /><span>{d.solr}</span><em className="mono">{d.solrSub}</em></div>
          </div>
        </Reveal>

        <div className="stack-cols">
          <Reveal className="stack-table-wrap">
            <table className="stack-table">
              <tbody>
                {s.stackTable.map((row, i) => (
                  <tr key={i}>
                    <td className="mono">{row.k}</td>
                    <td>{row.v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Reveal>
          <Reveal delay={80} className="auth-card card">
            <div className="card-kicker mono"><Icon name="key" size={15} /> {s.auth_label}</div>
            <ul className="auth-list">
              {s.auth.map((a, i) => (
                <li key={i}><span className="cmis-check"><Icon name="check" size={13} /></span>{a}</li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- 8. Quickstart / open source ------------------------------ */
function QuickStartSection({ t }) {
  const q = t.quick;
  return (
    <section className="section dark" id="opensource">
      <div className="wrap">
        <Reveal><SectionHead eyebrow={q.eyebrow} title={q.title} sub={q.sub} /></Reveal>
        <div className="quick-grid">
          <div className="quick-steps">
            {q.steps.map((st, i) => (
              <Reveal key={i} delay={i * 70} className="quick-step">
                <span className="quick-n mono">{st.n}</span>
                <div className="quick-step-body">
                  <div className="quick-step-t">{st.t}</div>
                  <code className="quick-step-c mono">{st.c}</code>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={120} className="quick-ports card">
            <div className="card-kicker mono"><Icon name="database" size={15} /> {q.ports_label}</div>
            <table className="ports-table">
              <tbody>
                {q.ports.map((p, i) => (
                  <tr key={i}>
                    <td className="ports-s">{p.s}</td>
                    <td className="ports-p mono">:{p.p}</td>
                    <td className="ports-d">{p.d}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <a className="btn btn--ondark" href="https://github.com/aegif/NemakiWare" target="_blank" rel="noopener" style={{ marginTop: 18 }}>
              <Icon name="github" size={17} /> github.com/aegif/NemakiWare
            </a>
          </Reveal>
        </div>
        <Reveal delay={60}><div className="quick-license mono">{q.license}</div></Reveal>
      </div>
    </section>
  );
}

/* ---- 9. Contact ----------------------------------------------- */
function ContactSection({ t }) {
  const c = t.contact;
  return (
    <section className="section" id="contact">
      <div className="wrap">
        <div className="contact-card">
          <div className="contact-glow" aria-hidden="true"></div>
          <div className="contact-inner">
            <Reveal className="contact-lead">
              <span className="eyebrow">{c.eyebrow}</span>
              <h2>{c.title}</h2>
              <p>{c.body}</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 30 }}>
                <a className="btn btn--primary btn--lg" href="https://nemakiware.com/contact.php" target="_blank" rel="noopener">
                  {c.cta} <Icon name="arrow" size={17} />
                </a>
                <a className="btn btn--ghost btn--lg" href="http://nemakiware.org/" target="_blank" rel="noopener">
                  {c.cta2}
                </a>
              </div>
            </Reveal>
            <div className="contact-services">
              {c.services.map((sv, i) => (
                <Reveal key={i} delay={i * 70} className="contact-service">
                  <h4>{sv.t}</h4>
                  <p>{sv.d}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  PainStrip, FoundationSection, ShiftSection, PillarsSection, PermissionSection, McpSection,
  LineageSection, CmisSection, StackSection, QuickStartSection, ContactSection,
});