// BlueprintReport.jsx
// Page primitives, cover, section opener, pillar opener.

const { useEffect: useEffR, useRef: useRefR, useState: useStR } = React;

// ─── Eclipse mark, quiet brand anchor ────────────────────────────
function ReportEclipse() {
  return (
    <span className="rp-cover__mark-glyph" aria-hidden="true">
      <span className="disc disc--light"></span>
      <span className="disc disc--dark"></span>
    </span>
  );
}

// ─── Page primitive, header + footer + body slot ─────────────────
function ReportPage({ children, headerRight, page, total, cover, opener, accent }) {
  const className = ["rp-page", cover ? "rp-page--cover" : "", opener ? "rp-page--opener" : ""]
    .filter(Boolean)
    .join(" ");

  return (
    <article className={className} data-screen-label={`${String(page).padStart(2, "0")} ${headerRight || ""}`}>
      {!cover && (
        <div className="rp-page__header">
          <span><em>Hartwell &amp; Sons Ltd</em>  ·  AI Blueprint  ·  Confidential</span>
          <span>{headerRight}</span>
        </div>
      )}
      <div className="rp-page__body">{children}</div>
      {!cover && (
        <div className="rp-page__footer">
          <span>MoonBoots Consultancy UK Ltd</span>
          <span>Page {String(page).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
        </div>
      )}
    </article>
  );
}

// ─── Cover page ───────────────────────────────────────────────────
function CoverPage() {
  return (
    <ReportPage cover>
      <div className="rp-cover">
        <div className="rp-cover__top">
          <div className="rp-cover__mark">
            <window.BrandMark variant="primary" size={22} accent={true} />
          </div>
          <div className="rp-cover__coord">
            52.5705° N · 1.1198° E<br/>
            Wymondham, Norfolk
          </div>
        </div>

        <div className="rp-cover__centre">
          <div className="rp-cover__eyebrow">AI Blueprint</div>
          <h1 className="rp-cover__client">
            Hartwell<br/>&amp; Sons<i className="stop">.</i>
          </h1>
          <p className="rp-cover__sub">
            A twelve-month plan to embed AI across operations,
            built around the <em className="emph">five pillars</em> of the
            MoonBoots Blueprint method.
          </p>
        </div>

        <div className="rp-cover__bottom">
          <div>
            <div className="rp-cover__field-label">Prepared for</div>
            <div className="rp-cover__field-value">
              Robert Hartwell
              <small>Managing Director</small>
            </div>
          </div>
          <div>
            <div className="rp-cover__field-label">Blueprint Day</div>
            <div className="rp-cover__field-value">
              17 April 2026
              <small>Document v1.0</small>
            </div>
          </div>
          <div>
            <div className="rp-cover__field-label">Status</div>
            <div className="rp-cover__field-value">
              Confidential
              <small>For named recipients only</small>
            </div>
          </div>
        </div>
      </div>
    </ReportPage>
  );
}

// ─── Section opener (full-bleed editorial) ────────────────────────
function SectionOpener({ num, title, standfirst, page, total, headerRight }) {
  return (
    <ReportPage page={page} total={total} headerRight={headerRight} opener>
      <div className="rp-opener">
        <div style={{display: "flex", flexDirection: "column", justifyContent: "flex-end", flex: "1 1 auto"}}>
          <div className="eyebrow" style={{marginBottom: "16pt"}}>Section {String(num).padStart(2, "0")}</div>
          <h2 className="rp-opener__num">{String(num).padStart(2, "0")}<i className="stop">.</i></h2>
        </div>
        <div className="rp-opener__bottom">
          <h3 className="rp-opener__title">{title}</h3>
          <p className="rp-opener__standfirst">{standfirst}</p>
        </div>
      </div>
    </ReportPage>
  );
}

// ─── Pillars connected loop SVG (active highlighted, others ghosted)
function PillarsLoopSVG({ active = 1 }) {
  // 5 nodes around a horizontal arc, connected by a single line.
  // Layout: 5 evenly spaced points on a soft, lifted arc.
  const w = 600;
  const h = 200;
  const nodes = [
    { x: 70,  y: 130, name: "Assess"     },
    { x: 200, y: 80,  name: "Prioritise" },
    { x: 330, y: 60,  name: "Govern"     },
    { x: 460, y: 80,  name: "Deploy"     },
    { x: 590, y: 130, name: "Evolve"     },
  ];
  // Smooth path through the 5 nodes via a quadratic-ish curve
  const path = `
    M ${nodes[0].x} ${nodes[0].y}
    Q ${(nodes[0].x + nodes[1].x) / 2} ${nodes[0].y - 10}, ${nodes[1].x} ${nodes[1].y}
    Q ${(nodes[1].x + nodes[2].x) / 2} ${nodes[1].y - 14}, ${nodes[2].x} ${nodes[2].y}
    Q ${(nodes[2].x + nodes[3].x) / 2} ${nodes[2].y - 14}, ${nodes[3].x} ${nodes[3].y}
    Q ${(nodes[3].x + nodes[4].x) / 2} ${nodes[3].y - 10}, ${nodes[4].x} ${nodes[4].y}
  `;

  return (
    <svg viewBox={`-30 0 ${w + 60} ${h}`} xmlns="http://www.w3.org/2000/svg">
      {/* Connection path */}
      <path d={path} fill="none" stroke="var(--ink-900)" strokeOpacity="0.15" strokeWidth="1" />

      {/* Loop-back hint, a slim arc beneath, evolve→assess */}
      <path
        d={`M ${nodes[4].x} ${nodes[4].y + 10} Q ${(nodes[0].x + nodes[4].x) / 2} ${h + 30}, ${nodes[0].x} ${nodes[0].y + 10}`}
        fill="none"
        stroke="var(--ink-900)"
        strokeOpacity="0.08"
        strokeWidth="1"
        strokeDasharray="2 4"
      />

      {/* Nodes */}
      {nodes.map((n, i) => {
        const isActive = i + 1 === active;
        const r = isActive ? 14 : 8;
        return (
          <g key={i}>
            {isActive && (
              <circle cx={n.x} cy={n.y} r={r + 8} fill="var(--ember-600)" fillOpacity="0.08" />
            )}
            <circle
              cx={n.x}
              cy={n.y}
              r={r}
              fill={isActive ? "var(--ember-600)" : "var(--paper-100)"}
              stroke={isActive ? "var(--ember-600)" : "var(--ink-900)"}
              strokeOpacity={isActive ? 1 : 0.35}
              strokeWidth="1.2"
            />
            <text
              x={n.x}
              y={n.y + r + 18}
              textAnchor="middle"
              fontFamily="var(--font-mono)"
              fontSize="9"
              letterSpacing="2"
              fill={isActive ? "var(--ember-600)" : "var(--ink-900)"}
              fillOpacity={isActive ? 1 : 0.5}
              style={{textTransform: "uppercase"}}
            >
              {n.name.toUpperCase()}
            </text>
            <text
              x={n.x}
              y={n.y + 4}
              textAnchor="middle"
              fontFamily="var(--font-mono)"
              fontSize="9"
              fill={isActive ? "var(--paper-100)" : "var(--ink-900)"}
              fillOpacity={isActive ? 1 : 0.55}
            >
              {String(i + 1).padStart(2, "0")}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

// ─── Pillar opener page (e.g. Pillar 3, Govern) ──────────────────
function PillarOpener({ num, title, standfirst, page, total, headerRight }) {
  const pillars = ["Assess", "Prioritise", "Govern", "Deploy", "Evolve"];
  return (
    <ReportPage page={page} total={total} headerRight={headerRight}>
      <div className="rp-pillar">
        <div className="rp-pillar__head">
          <h2 className="rp-pillar__num">
            {String(num).padStart(2, "0")}<em>.</em>
          </h2>
          <div className="rp-pillar__title-wrap">
            <div className="eyebrow">Pillar {num} of 5</div>
            <h3 className="rp-pillar__title">
              {title}
            </h3>
            <p className="rp-pillar__standfirst">{standfirst}</p>
          </div>
        </div>

        <div className="rp-pillar__loop">
          <PillarsLoopSVG active={num} />
        </div>

        <div className="rp-pillar__legend">
          {pillars.map((name, i) => (
            <div
              key={name}
              className={"rp-pillar__legend-item" + (i + 1 === num ? " is-active" : "")}
            >
              <div className="rp-pillar__legend-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="rp-pillar__legend-name">{name}</div>
            </div>
          ))}
        </div>
      </div>
    </ReportPage>
  );
}

// Export
window.ReportPage = ReportPage;
window.CoverPage = CoverPage;
window.SectionOpener = SectionOpener;
window.PillarOpener = PillarOpener;
window.PillarsLoopSVG = PillarsLoopSVG;