// Octopus — the connectivity diagram, condensed and tidier.
// Cards compact. Labels close to the cards. Protocols line up under the hub.
// Thicker connection lines.

function ArchitectureV2() {
  const sources = [
    { code: 'HR', name: 'HR Systems',          count: '20+',  countLabel: 'vendors' },
    { code: 'TA', name: 'Time & Attendance',   count: '25+',  countLabel: 'vendors' },
    { code: 'PR', name: 'Payroll',             count: '10+',  countLabel: 'vendors' },
    { code: 'BN', name: 'Benefits Admin',      count: '5+',   countLabel: 'vendors' },
    { code: 'MR', name: 'Medical Records',     count: '15+',  countLabel: 'vendors' },
  ];
  const dests = [
    { code: 'PA', name: 'Policy Admin' },
    { code: 'UW', name: 'Underwriting' },
    { code: 'CL', name: 'Claims' },
    { code: 'CS', name: 'Customer Service' },
    { code: 'DT', name: 'Distribution' },
  ];

  const VW = 1200, VH = 520;
  const CX = 600, CY = 220;
  const CARD_W = 268, CARD_H = 56;
  const colY = (i, n, top=22, bottom=388) => {
    const usable = bottom - top - CARD_H;
    return top + (usable * i) / (n - 1);
  };
  const leftCardX = 16;
  const rightCardX = VW - 16 - CARD_W;
  const hubR = 86;

  const leftPaths = sources.map((_, i) => {
    const y = colY(i, sources.length) + CARD_H / 2;
    const sx = leftCardX + CARD_W, sy = y;
    const ex = CX - hubR + 2, ey = CY;
    const c1x = sx + 220, c1y = sy;
    const c2x = ex - 140, c2y = ey + (sy - ey) * 0.18;
    return `M ${sx},${sy} C ${c1x},${c1y} ${c2x},${c2y} ${ex},${ey}`;
  });
  const rightPaths = dests.map((_, i) => {
    const y = colY(i, dests.length) + CARD_H / 2;
    const sx = CX + hubR - 2, sy = CY;
    const ex = rightCardX, ey = y;
    const c1x = sx + 140, c1y = sy + (ey - sy) * 0.18;
    const c2x = ex - 220, c2y = ey;
    return `M ${sx},${sy} C ${c1x},${c1y} ${c2x},${c2y} ${ex},${ey}`;
  });

  // Protocols in TWO rows of three, directly beneath the hub.
  const protocolRowY1 = CY + hubR + 44;
  const protocolRowY2 = CY + hubR + 76;
  const protocolsRow1 = ['REST', 'XML', 'SOAP'];
  const protocolsRow2 = ['JSON', 'EDI',  'CSV'];
  const pillW = 68, pillGap = 14;
  const rowTotalW = 3 * pillW + 2 * pillGap;
  const rowStart = CX - rowTotalW / 2 + pillW / 2;

  return (
    <section className="flat dense fiber-bg arch-section watery flat-bottom">
      <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <span className="eyebrow-chip green">Agentic Data Orchestration</span>
          <h2 style={{
            fontSize: 'clamp(30px, 3.2vw, 44px)',
            margin: 0, fontWeight: 700, letterSpacing: '-0.02em',
            color: 'var(--fg-1)', maxWidth: 920, lineHeight: 1.1,
          }}>
            Any-to-any data connectivity,<br/>
            sculpted into <span style={{ color: 'var(--accent)' }}>one agentic layer</span>.
          </h2>
          <p style={{ color: 'var(--fg-2)', fontSize: 15.5, margin: 0, maxWidth: 660, lineHeight: 1.55 }}>
            Five categories of source. Five systems of record. Every
            protocol in between.
          </p>
        </div>

        <div className="arch-diagram" style={{ position: 'relative', width: '100%', aspectRatio: `${VW} / ${VH}` }}>
          <svg viewBox={`0 0 ${VW} ${VH}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            <defs>
              {/* Shadow opacity fades along each path: dense near the card
                  (signals height above the surface) and zero at the hub
                  (line is touching the hub, no gap to cast). */}
              <linearGradient id="shadowFadeL" x1="296" y1="0" x2="506" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor="#000000" stopOpacity="0.65"/>
                <stop offset="100%" stopColor="#000000" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="shadowFadeR" x1="694" y1="0" x2="904" y2="0" gradientUnits="userSpaceOnUse">
                <stop offset="0%"   stopColor="#000000" stopOpacity="0"/>
                <stop offset="100%" stopColor="#000000" stopOpacity="0.65"/>
              </linearGradient>
              <filter id="shadowBlur" x="-10%" y="-50%" width="120%" height="200%">
                <feGaussianBlur stdDeviation="2.5"/>
              </filter>
            </defs>

            {/* Shadows BEHIND the green lines — offset down 12px,
                fading to zero at the hub edge. */}
            {leftPaths.map((d, i) => (
              <path key={'LS'+i} d={d} fill="none"
                    stroke="url(#shadowFadeL)" strokeWidth="3" strokeLinecap="round"
                    transform="translate(0, 12)" filter="url(#shadowBlur)"/>
            ))}
            {rightPaths.map((d, i) => (
              <path key={'RS'+i} d={d} fill="none"
                    stroke="url(#shadowFadeR)" strokeWidth="3" strokeLinecap="round"
                    transform="translate(0, 12)" filter="url(#shadowBlur)"/>
            ))}

            {/* Connection paths on top */}
            {leftPaths.map((d, i) => (
              <path key={'L'+i} d={d} fill="none" stroke="#10C880" strokeWidth="1.75" strokeOpacity="0.7" strokeLinecap="round"/>
            ))}
            {rightPaths.map((d, i) => (
              <path key={'R'+i} d={d} fill="none" stroke="#10C880" strokeWidth="1.75" strokeOpacity="0.7" strokeLinecap="round"/>
            ))}

            {/* CENTRAL HUB — the bug (logo mark), not the shorthand */}
            <g transform={`translate(${CX},${CY})`}>
              <circle r={hubR} fill="#343434" stroke="#10C880" strokeWidth="1.5"/>
              <image href="/assets/logo-mark.svg" x="-40" y="-40" width="80" height="80"/>
              <text x="0" y="54" textAnchor="middle" fill="rgba(199,245,221,0.7)"
                    fontFamily="IBM Plex Mono, ui-monospace, monospace"
                    fontSize="8.5" fontWeight="500" letterSpacing="0.32em">AGENTIC LAYER</text>
            </g>

            {/* Protocol pills — two rows of three beneath the hub */}
            <g>
              <text x={CX} y={protocolRowY1 - 22} textAnchor="middle"
                    fontFamily="IBM Plex Mono, ui-monospace, monospace"
                    fontSize="9" fontWeight="500" letterSpacing="0.32em"
                    fill="rgba(232,243,236,0.45)">PROTOCOLS</text>
              {[
                ...protocolsRow1.map((p, i) => ({ p, x: rowStart + i*(pillW+pillGap), y: protocolRowY1 })),
                ...protocolsRow2.map((p, i) => ({ p, x: rowStart + i*(pillW+pillGap), y: protocolRowY2 })),
              ].map(({ p, x, y }) => (
                <g key={p+y} transform={`translate(${x},${y})`}>
                  <rect x={-pillW/2} y="-12" width={pillW} height="24" rx="12" ry="12"
                        fill="#484848" stroke="#10C880" strokeOpacity="0.5" strokeWidth="1"/>
                  <text x="0" y="4" textAnchor="middle" fill="#FFFFFF"
                        fontFamily="IBM Plex Mono, ui-monospace, monospace"
                        fontSize="10" fontWeight="500" letterSpacing="0.14em">{p}</text>
                </g>
              ))}
            </g>
          </svg>

          <SideColumn side="left"  items={sources} cardW={CARD_W} cardH={CARD_H} colYFn={(i)=>colY(i, sources.length)} label="Employer ecosystem" vh={VH}/>
          <SideColumn side="right" items={dests}   cardW={CARD_W} cardH={CARD_H} colYFn={(i)=>colY(i, dests.length)}   label="Carrier / TPA systems" vh={VH}/>
        </div>

        {/* Closing line — lives inside the section so vertical rhythm is
            governed by the container gap, not a sibling section. */}
        <div style={{
          textAlign: 'center',
          fontSize: 'clamp(20px, 2.2vw, 30px)',
          fontWeight: 600,
          letterSpacing: '-0.015em',
          lineHeight: 1.25,
          color: 'var(--fg-1)',
          marginTop: 8,
        }}>
          If your customer has it, we connect to it.
          <br/>
          <span style={{ color: 'var(--accent)' }}>Your backlog is our roadmap.</span>
        </div>

      </div>
    </section>
  );
}

function SideColumn({ side, items, cardW, cardH, colYFn, label, vh }) {
  return (
    <div style={{
      position: 'absolute',
      top: 0, bottom: 0,
      [side === 'left' ? 'left' : 'right']: '1.33%',
      width: `${(cardW / 1200) * 100}%`,
    }}>
      {/* Label raised further above the cards */}
      <div style={{
        position: 'absolute',
        top: `${((colYFn(0) - 44) / vh) * 100}%`,
        [side === 'left' ? 'left' : 'right']: 0,
      }}>
        <span className="eyebrow-chip green" style={{ fontSize: 10 }}>{label}</span>
      </div>

      {items.map((it, i) => {
        const yPct = (colYFn(i) / vh) * 100;
        return (
          <div key={it.code} style={{
            position: 'absolute',
            top: `${yPct}%`,
            left: 0, right: 0,
            height: cardH,
            padding: '8px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
            flexDirection: side === 'left' ? 'row' : 'row-reverse',
            background: 'var(--bg-elev-1)',
            border: '1px solid var(--border-1)',
            borderRadius: 4,
            boxShadow: '0 14px 28px -8px rgba(0,0,0,0.65), 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05)',
          }}>
            <div style={{
              width: 34, height: 34, borderRadius: 4,
              border: '1px solid var(--accent)',
              color: 'var(--accent)',
              fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
              display: 'grid', placeItems: 'center',
              flexShrink: 0,
              letterSpacing: '0.04em',
            }}>{it.code}</div>
            <div style={{ flex: 1, textAlign: side === 'left' ? 'left' : 'right', minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--fg-1)', letterSpacing: '-0.005em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</div>
              {(it.count || it.tail) && (
                <div style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--attention)' }}>
                  {it.count && <span style={{ fontWeight: 600 }}>{it.count}</span>}
                  {it.countLabel && <span> {it.countLabel}</span>}
                  {it.tail && <span>{it.count ? ' · ' : ''}{it.tail}</span>}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.ArchitectureV2 = ArchitectureV2;