// ============================================================
// HERO — dark sage, atlas lines BEHIND the person cards
// ============================================================

function useAtlasLayout(contacts, w = 620, h = 520) {
  // Convert percent positions to absolute coords in the svg viewBox
  return contacts.map(c => ({ ...c, x: (c.xPct / 100) * w, y: (c.yPct / 100) * h }));
}

function Atlas({ contacts, accent = '#B5A04E' }) {
  const W = 620, H = 520;
  const nodes = useAtlasLayout(contacts, W, H);
  const hub = { x: W * 0.5, y: H * 0.46 };

  // Secondary satellite nodes (unlabeled dots) to make the mesh feel dense
  const satellites = [
    { x: 180, y: 90 }, { x: 500, y: 80 }, { x: 560, y: 240 }, { x: 540, y: 390 },
    { x: 420, y: 440 }, { x: 120, y: 400 }, { x: 80, y: 220 }, { x: 260, y: 420 },
    { x: 300, y: 70 }, { x: 390, y: 170 }, { x: 220, y: 260 }, { x: 420, y: 290 },
    { x: 150, y: 320 }, { x: 360, y: 380 },
  ];

  // Edges
  const spokes = nodes.map((n, i) => ({ from: hub, to: n, key: 'spoke-' + i }));
  const satSpokes = satellites.map((n, i) => ({ from: hub, to: n, key: 'sat-' + i }));
  // A few cross-links between contact nodes (warm edges)
  const cross = [
    [0, 1], [1, 2], [2, 3], [4, 5], [5, 6], [0, 4], [3, 6], [6, 7], [7, 4],
  ].map(([a, b], i) => ({ from: nodes[a], to: nodes[b], key: 'cross-' + i }));

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet"
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <radialGradient id="atlas-hub-glow">
          <stop offset="0%"  stopColor={accent} stopOpacity="0.55" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* concentric rings */}
      <g fill="none" stroke={accent} strokeWidth="0.6" opacity="0.22">
        <circle cx={hub.x} cy={hub.y} r="80"  />
        <circle cx={hub.x} cy={hub.y} r="150" />
        <circle cx={hub.x} cy={hub.y} r="220" />
        <circle cx={hub.x} cy={hub.y} r="290" />
      </g>
      {/* hub glow */}
      <circle cx={hub.x} cy={hub.y} r="80" fill="url(#atlas-hub-glow)" />

      {/* spokes */}
      <g stroke={accent} strokeWidth="0.7" fill="none" opacity="0.55">
        {spokes.map(s => <line key={s.key} x1={s.from.x} y1={s.from.y} x2={s.to.x} y2={s.to.y} />)}
      </g>
      <g stroke={accent} strokeWidth="0.5" fill="none" opacity="0.35">
        {satSpokes.map(s => <line key={s.key} x1={s.from.x} y1={s.from.y} x2={s.to.x} y2={s.to.y} />)}
      </g>
      <g stroke={accent} strokeWidth="0.5" fill="none" opacity="0.3" strokeDasharray="3 4">
        {cross.map(s => <line key={s.key} x1={s.from.x} y1={s.from.y} x2={s.to.x} y2={s.to.y} />)}
      </g>

      {/* dots */}
      <g fill={accent}>
        {satellites.map((s, i) => <circle key={'satd-' + i} cx={s.x} cy={s.y} r="2.3" opacity="0.65" />)}
        {nodes.map((n, i) => (
          <g key={'nd-' + i}>
            <circle cx={n.x} cy={n.y} r="4" opacity="0.95" />
            <circle cx={n.x} cy={n.y} r="9" fill="none" stroke={accent} strokeWidth="0.7" opacity="0.45" />
          </g>
        ))}
      </g>

      {/* hub core */}
      <circle cx={hub.x} cy={hub.y} r="11" fill={accent} opacity="0.9" />
      <circle cx={hub.x} cy={hub.y} r="18" fill="none" stroke={accent} strokeWidth="1" opacity="0.6" />
    </svg>
  );
}

function PersonCard({ c }) {
  return (
    <div style={{
      position: 'absolute',
      left: `calc(${c.xPct}% - 80px)`,
      top:  `calc(${c.yPct}% - 24px)`,
      display: 'flex', alignItems: 'center', gap: 9,
      background: 'rgba(251,249,238,0.96)',
      border: '1px solid rgba(181,160,78,0.35)',
      borderRadius: 999,
      padding: '5px 12px 5px 5px',
      boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
      maxWidth: 200,
      fontFamily: "'Inter', sans-serif",
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: '50%', background: c.photoBg,
        border: '1.5px solid rgba(181,160,78,0.8)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#2B2A1E', fontWeight: 600, fontSize: 11, flexShrink: 0,
      }}>{c.id}</div>
      <div style={{ lineHeight: 1.15, overflow: 'hidden' }}>
        <div style={{ fontSize: 10, fontWeight: 600, color: '#1F2418', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{c.name}</div>
        <div style={{ fontSize: 8.5, color: '#6B6A52', letterSpacing: 0.2, fontFamily: "'JetBrains Mono', monospace", textTransform: 'uppercase', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{c.role}</div>
      </div>
    </div>
  );
}

function HeroNav() {
  const n = CG.nav;
  return (
    <nav style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '22px 40px', position: 'relative', zIndex: 3,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#C9B36F', fontSize: 22, fontFamily: "'Fraunces', serif", fontWeight: 500, letterSpacing: -0.2 }}>
        <svg width="26" height="26" viewBox="0 0 28 28" fill="none" stroke="#C9B36F" strokeWidth="1.5">
          <path d="M20 8 A 7 7 0 1 0 20 20" />
          <circle cx="14" cy="14" r="2.2" fill="#C9B36F" />
        </svg>
        {n.brand}
      </div>
      <div style={{ display: 'flex', gap: 32, fontSize: 14, fontFamily: "'Inter', sans-serif", color: '#D8D4B8' }}>
        {n.links.map(l => (
          <a key={l.label} href={l.href} style={{ color: '#D8D4B8', textDecoration: 'none', position: 'relative', paddingBottom: 3 }}>
            {l.label}
            {l.label === 'Network' && <span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 1, background: '#C9B36F' }} />}
          </a>
        ))}
      </div>
      <a href={n.cta.href} style={{
        padding: '7px 18px', border: '1px solid rgba(217,207,163,0.5)',
        color: '#E8E0B8', fontSize: 13, fontFamily: "'Inter', sans-serif",
        borderRadius: 4, textDecoration: 'none',
      }}>{n.cta.label}</a>
    </nav>
  );
}

function Hero() {
  const h = CG.hero;
  return (
    <section id="hero" style={{
      background: 'linear-gradient(180deg, #2F4232 0%, #273A2B 60%, #1F2F22 100%)',
      color: '#F2ECD4',
      borderRadius: '18px 18px 0 0',
      margin: '16px 16px 0',
      overflow: 'hidden',
      position: 'relative',
      boxShadow: '0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(181,160,78,0.12) inset',
    }}>
      {/* topo texture */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.06, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(circle at 30% 30%, #C9B36F 0, transparent 50%), radial-gradient(circle at 75% 70%, #C9B36F 0, transparent 50%)',
      }} />
      <HeroNav />

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 40,
        padding: '30px 56px 60px', position: 'relative',
      }}>
        {/* LEFT */}
        <div style={{ position: 'relative', zIndex: 2 }}>
          <h1 style={{
            fontFamily: "'Fraunces', serif", fontSize: 46, fontWeight: 400,
            lineHeight: 1.08, letterSpacing: -0.8, margin: 0, color: '#F2ECD4',
            whiteSpace: 'pre-line',
          }}>{h.headline}</h1>
          <p style={{ fontSize: 15, color: '#C7BFA0', lineHeight: 1.6, maxWidth: 440, marginTop: 22 }}>{h.sub}</p>

          <a href={h.primaryCta.href} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: '#B5A04E', color: '#1F2012',
            padding: '12px 26px', borderRadius: 6, fontSize: 14, fontWeight: 600,
            marginTop: 28, textDecoration: 'none', fontFamily: "'Inter', sans-serif",
            boxShadow: '0 4px 12px rgba(181,160,78,0.3)',
          }}>{h.primaryCta.label} <span>→</span></a>

          {/* Maroon callout — stacked under primary CTA */}
          <div style={{
            marginTop: 20, display: 'block', padding: '14px 22px',
            background: '#6C2A2E', color: '#F7E8C9',
            border: '1px solid rgba(247,232,201,0.28)',
            borderRadius: 4, fontFamily: "'Inter', sans-serif",
            boxShadow: '0 6px 20px rgba(0,0,0,0.3)', maxWidth: 320,
          }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{h.sideCallout.title}</div>
            <div style={{ fontSize: 12, opacity: 0.85, marginTop: 2 }}>{h.sideCallout.body}</div>
          </div>
        </div>

        {/* RIGHT — atlas */}
        <div style={{ position: 'relative', height: 520 }}>
          <Atlas contacts={h.contacts} accent="#C9B36F" />
          {h.contacts.map(c => <PersonCard key={c.id} c={c} />)}

          {/* Right gold callout */}
          <div style={{
            position: 'absolute', bottom: 20, right: 0,
            padding: '14px 18px', background: '#C9B36F', color: '#2B2512',
            borderRadius: 4, fontFamily: "'Inter', sans-serif", maxWidth: 210,
            boxShadow: '0 6px 20px rgba(0,0,0,0.35)',
          }}>
            <div style={{ fontWeight: 600, fontSize: 13, lineHeight: 1.2 }}>{h.rightCallout.title}</div>
            <div style={{ fontSize: 12, marginTop: 4, lineHeight: 1.35 }}>{h.rightCallout.body}</div>
          </div>
        </div>
      </div>

      {/* Proof bar */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 40,
        padding: '18px 0', borderTop: '1px solid rgba(201,179,111,0.2)',
        fontSize: 11, letterSpacing: 1.6, textTransform: 'uppercase',
        color: '#9FA984', fontFamily: "'JetBrains Mono', monospace",
      }}>
        {h.proofRow.map(t => (
          <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#C9B36F' }} />{t}
          </span>
        ))}
      </div>
    </section>
  );
}

window.Hero = Hero;