// RulesFooter.jsx — dark AI principles footer
function RulesFooter({ onOpen }) {
  const { principles, glossary } = CONTENT;
  const hero = principles.filter(p => p.hero);
  return (
    <section className="relative border-t border-[color:var(--line)]">
      <div className="max-w-[1440px] mx-auto px-8 py-16">
        <div className="mb-10">
          <div className="eyebrow">03 · Rules &amp; principles</div>
          <h2 className="font-display text-[34px] font-medium mt-2 text-[color:var(--ink)]">
            The <span className="font-serif italic font-normal">spine</span> of the operating model.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-10">
          {hero.map(p => (
            <button key={p.id} onClick={() => onOpen({ type: "principle", id: p.id })}
              className="principle-card text-left p-7 hover:-translate-y-0.5 transition-transform">
              <div className="eyebrow mb-3">Principle</div>
              <h3 className="font-display text-[22px] font-medium text-[color:var(--ink)] leading-snug">{p.name}</h3>
              <p className="mt-3 text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{p.summary}</p>
            </button>
          ))}
        </div>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 pt-8 border-t border-[color:var(--line)]">
          <div>
            <div className="eyebrow mb-2">Glossary</div>
            <p className="text-[12.5px] text-[color:var(--ink-dim)] leading-relaxed">
              Hover any dashed term to see its definition. Authoritative source — glossary entries from the MKS+SDD context pack.
            </p>
          </div>
          <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-0.5">
            {Object.keys(glossary).slice(0, 10).map(k => (
              <div key={k} className="text-[12.5px] py-1.5 border-b border-[color:var(--line)]">
                <span className="font-mono text-[11px] font-medium text-[color:var(--ink)] mr-2">{k}</span>
                <span className="text-[color:var(--ink-dim)]">{glossary[k].split(".")[0]}.</span>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-14 pt-6 border-t border-[color:var(--line)] flex flex-wrap items-center gap-6 text-[10.5px] font-mono uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">
          <span>Reason Consulting · Internal training</span>
          <span>MKS+SDD Execution Guide · v0.1</span>
          <span className="ml-auto flex items-center gap-2"><span className="live-dot" /> AI-first reimagination</span>
        </div>
      </div>
    </section>
  );
}
window.RulesFooter = RulesFooter;