// components.jsx — MakeMemory.com homepage building blocks
// Diagrams, sources, CTA. Source "logos" are abstract colored swatches with the
// brand stroke color from the brief — drop-in slots for the real SVG marks.

// The connectors a real-economy company actually lives in. Outlook, Teams and
// SharePoint carry no `logo` on purpose: the official Microsoft SVGs are not in the repo
// yet, and the brand guidelines forbid redrawing a third-party mark, so they render
// through the coloured-swatch path below until we have the real assets.
const SOURCES = {
  outlook: { name: "Outlook", short: "Outlook", color: "#0078D4", abbr: "Ou" },
  teams: { name: "Microsoft Teams", short: "Teams", color: "#6264A7", abbr: "Te" },
  sharepoint: { name: "SharePoint", short: "SharePoint", color: "#036C70", abbr: "SP" },
  gmail: { name: "Gmail", short: "Gmail", color: "#EA4335", abbr: "G", logo: "logos/gmail.svg" },
  drive: { name: "Google Drive", short: "Drive", color: "#34A853", abbr: "D", logo: "logos/drive.svg" },
  gcal: { name: "Google Calendar", short: "Calendar", color: "#4285F4", abbr: "C", logo: "logos/gcal.svg" },
  notion: { name: "Notion", short: "Notion", color: "#191919", abbr: "N", logo: "logos/notion.svg" },
  slack: { name: "Slack", short: "Slack", color: "#4A154B", abbr: "#", logo: "logos/slack.svg" }
};

// Source swatch (abstract stand-in — swap for real SVG mark from each company's brand kit).
// Lift very-dark brand colors so dashed strokes and accent rules stay legible
// against the dark Paper. Colors with sufficient luminance pass through untouched.
function brandStroke(hex, dark) {
  if (!dark || !hex || hex[0] !== "#") return hex;
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  if (lum > 0.38) return hex;
  // Blend the color 55% toward paper #E5E2DA so it keeps brand identity
  // (Notion stays dark-warm, Slack stays purple, GitHub stays neutral)
  // but reads cleanly against the dark background.
  const target = { r: 0xE5, g: 0xE2, b: 0xDA };
  const mix = 0.62;
  const nr = Math.round(r + (target.r - r) * mix);
  const ng = Math.round(g + (target.g - g) * mix);
  const nb = Math.round(b + (target.b - b) * mix);
  return `rgb(${nr}, ${ng}, ${nb})`;
}

// Source swatch — renders the real brand SVG when available; falls back to a
// colored square with an initial for sources without a logo.
function SrcSwatch({ id, shape = "square", size = 28, short = false }) {
  const s = SOURCES[id];
  if (!s) return null;
  return (
    <div
      className={`src ${shape}${short ? " compact" : ""}`}
      title={s.name}
      aria-label={s.name}>
      
      {s.logo ?
      <img
        src={s.logo}
        alt={s.name}
        width={size}
        height={size}
        className="logo-img"
        draggable="false" /> :


      <div className="swatch" style={{ background: s.color, width: size, height: size }}>
          {s.abbr}
        </div>
      }
      <div className="name">{short ? s.short : s.name}</div>
    </div>);

}

// Primary rainbow-border CTA.
function CTA({ children = "Open in Claude", href = "#" }) {
  return (
    <a className="cta-primary" href={href} role="button">
      <span>{children}</span>
      <span className="arrow" aria-hidden="true">→</span>
    </a>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Diagram 1 — Hero flux. Arc of source logos → Make Memory node → Claude node.
// ─────────────────────────────────────────────────────────────────────────────

function HeroFluxDiagram({ shape = "square", dark = false }) {
  // Vertical flow: source logos in a row at the top, dashed lines pour down
  // through the Make Memory node, then one thicker line continues down to Claude.
  // Sits comfortably beside the hero text on wide screens, stacks under on narrow.
  const W = 640,H = 620;
  const cx = W / 2;
  const sourcesY = 60; // center of source row
  const memoryY = 320; // center of Make Memory node
  const claudeY = H - 60; // center of Claude node

  const arr = [
  "outlook", "teams", "sharepoint", "gmail",
  "drive", "gcal", "notion", "slack"];

  const leftX = 50,rightX = W - 50;
  const nodes = arr.map((id, i) => {
    const t = arr.length === 1 ? 0.5 : i / (arr.length - 1);
    const x = leftX + (rightX - leftX) * t;
    return { id, x, y: sourcesY, color: SOURCES[id].color };
  });

  return (
    <div className="diagram" aria-label="Hero diagram: your tools at the top, Make Memory in the middle, Claude at the bottom.">
      <div style={{ position: "relative", width: "100%", aspectRatio: `${W}/${H}` }}>
        <svg
          viewBox={`0 0 ${W} ${H}`}
          width="100%" height="100%"
          style={{ display: "block", position: "absolute", inset: 0 }}
          aria-hidden="true">
          
          {/* S-curve bezier flows from each source down into Make Memory */}
          {nodes.map((n, i) => {
            const startY = sourcesY + 50; // clear the label
            const endY = memoryY - 78; // arrive just above the ring
            const c1y = startY + (endY - startY) * 0.55;
            const c2y = endY - (endY - startY) * 0.15;
            return (
              <path
                key={n.id}
                className="flow-line"
                d={`M ${n.x} ${startY} C ${n.x} ${c1y}, ${cx} ${c2y}, ${cx} ${endY}`}
                stroke={brandStroke(n.color, dark)}
                style={{ animationDelay: `${i % 5 * -0.4}s` }} />);


          })}
          {/* Make Memory node soft ring */}
          <circle cx={cx} cy={memoryY} r="62" fill="none" stroke="currentColor" strokeOpacity="0.12" strokeWidth="1" />
          {/* Make Memory → Claude */}
          <path
            className="flow-line thick"
            d={`M ${cx} ${memoryY + 78} L ${cx} ${claudeY - 28}`}
            stroke="currentColor" />
          
        </svg>

        {/* Source nodes — horizontal row at the top */}
        {nodes.map((n) =>
        <div
          key={n.id}
          style={{
            position: "absolute",
            left: `${n.x / W * 100}%`,
            top: `${n.y / H * 100}%`,
            transform: "translate(-50%, -50%)"
          }}>
          
            <SrcSwatch id={n.id} shape={shape} size={30} short />
          </div>
        )}

        {/* Make Memory node */}
        <div style={{
          position: "absolute",
          left: `${cx / W * 100}%`,
          top: `${memoryY / H * 100}%`,
          transform: "translate(-50%, -50%)"
        }}>
          <span className="node lg">
            MakeMemory<span className="ext" style={{ margin: "1px 0px 0px" }}>.com</span>
          </span>
        </div>

        {/* Claude node — official Spark mark beside the label */}
        <div style={{
          position: "absolute",
          left: `${cx / W * 100}%`,
          top: `${claudeY / H * 100}%`,
          transform: "translate(-50%, -50%)",
          display: "flex",
          alignItems: "center",
          gap: 8
        }}>
          <img src="logos/claude.svg" alt="Claude"
          width={32} height={32}
          className="logo-img" draggable="false" />
          <span style={{
            fontFamily: "var(--serif-display)",
            fontWeight: 600,
            fontSize: 20,
            color: "var(--ink)",
            letterSpacing: "-0.01em"
          }}>Claude</span>
        </div>
      </div>
      <p className="diagram-caption">
        Your tools at the top. Make Memory in the middle. Claude at the bottom.
      </p>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Diagram 2 — Entity resolution. Four corners → center "Project Meridian".
// ─────────────────────────────────────────────────────────────────────────────

function EntityResolutionDiagram({ shape = "square", dark = false }) {
  const W = 720,H = 340;
  const cx = W / 2,cy = H / 2;
  const corners = [
  { id: "outlook", label: '"Chantier Meridian"', x: 90, y: 70 },
  { id: "sharepoint", label: '"2026-04 — Ilot Meridian"', x: W - 90, y: 70 },
  { id: "teams", label: '"#meridian"', x: 90, y: H - 70 },
  { id: "drive", label: '"Photos Meridian"', x: W - 90, y: H - 70 }];

  return (
    <div className="diagram" aria-label="Entity resolution diagram: four names across four tools, one project.">
      <div style={{ position: "relative", width: "100%", maxWidth: 720, margin: "0", aspectRatio: `${W}/${H}` }}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%"
        style={{ display: "block", position: "absolute", inset: 0 }} aria-hidden="true">
          {corners.map((c, i) => {
            const dx = cx - c.x,dy = cy - c.y;
            const len = Math.hypot(dx, dy);
            const ux = dx / len,uy = dy / len;
            // start a bit outside the swatch, end just before the center node
            const x1 = c.x + ux * 32,y1 = c.y + uy * 32;
            const x2 = cx - ux * 80,y2 = cy - uy * 22;
            // Bezier control points pulled toward the center horizontally —
            // gives each line a gentle inward curve toward Project Meridian.
            const c1x = x1 + (x2 - x1) * 0.55;
            const c1y = y1;
            const c2x = x2 - (x2 - x1) * 0.15;
            const c2y = y2;
            return (
              <path
                key={c.id}
                d={`M ${x1} ${y1} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`}
                className="flow-line"
                stroke={brandStroke(SOURCES[c.id].color, dark)}
                style={{ animationDelay: `${i * -0.5}s` }} />);


          })}
        </svg>

        {corners.map((c) =>
        <div key={c.id} style={{
          position: "absolute",
          left: `${c.x / W * 100}%`,
          top: `${c.y / H * 100}%`,
          transform: "translate(-50%, -50%)",
          display: "flex", flexDirection: "column", alignItems: "center", gap: 8
        }}>
            <SrcSwatch id={c.id} shape={shape} size={28} />
            <span style={{
            fontFamily: "var(--mono)", fontSize: 12, color: "var(--graphite)",
            maxWidth: 180, textAlign: "center", lineHeight: 1.4
          }}>{c.label}</span>
          </div>
        )}

        <div style={{
          position: "absolute", left: "50%", top: "50%",
          transform: "translate(-50%, -50%)"
        }}>
          <span className="node lg">Project Meridian</span>
        </div>
      </div>
      <p className="diagram-caption">
        An example. Four names for the same project, across four tools. Make Memory resolves them.
      </p>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Diagram 3 — How it works horizontal track: Install → Connect → Ask
// ─────────────────────────────────────────────────────────────────────────────

function HowItWorksDiagram({ shape = "square" }) {
  const W = 880,H = 220;
  // Drop the dashed line slightly below the geometric mid so it visually centers
  // with the node + label column (the label hangs below the node).
  const y = H / 2 - 4;
  const x1 = 80,x2 = W * 0.46,x3 = W - 130;

  const cluster = ["outlook", "teams", "sharepoint", "drive", "notion"];

  return (
    <div className="diagram" aria-label="How it works: install Make Memory, connect your sources, ask anything.">
      <div style={{ position: "relative", width: "100%", maxWidth: 880, margin: "0", aspectRatio: `${W}/${H}` }}>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%"
        style={{ display: "block", position: "absolute", inset: 0 }} aria-hidden="true">
          {/* Claude pill ends ~x=190, swatch cluster spans ~80px each side of x2,
               bubble center x3. Lines sit with 20px margin off each node. */}
          <line x1={x1 + 50} y1={y} x2={x2 - 95} y2={y}
          className="flow-line" stroke="currentColor" />
          <line x1={x2 + 95} y1={y} x2={x3 - 40} y2={y}
          className="flow-line" stroke="currentColor"
          style={{ animationDelay: "-1.2s" }} />
        </svg>

        {/* Node 1 — Install (Claude Spark + Claude label + badge) */}
        <div style={nodePos(x1, y, W, H)}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 8 }}>
              <img src="logos/claude.svg" alt="Claude"
              width={32} height={32}
              className="logo-img" draggable="false" />
              <span style={{
                fontFamily: "var(--serif-display)",
                fontWeight: 600,
                fontSize: 17,
                color: "var(--ink)",
                letterSpacing: "-0.01em"
              }}>Claude</span>
              <span style={{
                position: "absolute", right: -14, top: -10,
                width: 22, height: 22, borderRadius: 999,
                background: "var(--ink)", color: "var(--paper)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--sans)", fontSize: 14, fontWeight: 600, lineHeight: 1
              }}>+</span>
            </div>
            <span style={stepLabelStyle}>Install Make Memory MCP</span>
          </div>
        </div>

        {/* Node 2 — Connect (cluster of real source logos) */}
        <div style={nodePos(x2, y, W, H)}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              {cluster.map((id) =>
              <img key={id} src={SOURCES[id].logo} alt={SOURCES[id].name}
              title={SOURCES[id].name}
              width={26} height={26}
              className="logo-img" draggable="false" />
              )}
            </div>
            <span style={stepLabelStyle}>Connect</span>
          </div>
        </div>

        {/* Node 3 — Ask (speech bubble) */}
        <div style={nodePos(x3, y, W, H)}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <svg className="bubble-icon" viewBox="0 0 24 24" width="32" height="32" aria-hidden="true">
              <path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H10l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z" />
            </svg>
            <span style={stepLabelStyle}>Ask</span>
          </div>
        </div>
      </div>
    </div>);

}

function nodePos(x, y, W, H) {
  return {
    position: "absolute",
    left: `${x / W * 100}%`,
    top: `${y / H * 100}%`,
    transform: "translate(-50%, -50%)"
  };
}
const stepLabelStyle = {
  fontFamily: "var(--mono)",
  fontSize: 12,
  letterSpacing: "0.08em",
  textTransform: "uppercase",
  color: "var(--graphite)"
};

// ─────────────────────────────────────────────────────────────────────────────
// Sources grid pill
// ─────────────────────────────────────────────────────────────────────────────

function SourcePill({ id, shape = "square" }) {
  const s = SOURCES[id];
  if (!s) return null;
  return (
    <div className="src-pill">
      {s.logo ?
      <img src={s.logo} alt={s.name} width={22} height={22}
      className="logo-img pill-logo" draggable="false" /> :

      <div className="swatch" style={{
        background: s.color,
        borderRadius: shape === "dot" ? 999 : 5
      }}>{s.abbr}</div>
      }
      <span>{s.name}</span>
    </div>);

}

// Export to window so other Babel scripts can grab them.
Object.assign(window, {
  SOURCES,
  brandStroke,
  SrcSwatch,
  SourcePill,
  CTA,
  HeroFluxDiagram,
  EntityResolutionDiagram,
  HowItWorksDiagram
});