// Data sources — RADIAL hub. Every source ties into one central platform with a
// thin connecting line; data visibly flows inward. SVG for desktop (scales crisply),
// a stacked pill fallback for mobile where tiny radial labels would be unreadable.
function Sources({ hubStyle = 'ring' }) {
  const sources = [
  ['Floorplans & CAD', 'building'],
  ['Sensors & access', 'sensor'],
  ['WiFi / presence', 'shuffle'],
  ['HR systems & HRIS', 'people'],
  ['Bookings & calendars', 'msg'],
  ['Lease & property data', 'doc'],
  ['Travel & expense', 'pin'],
  ['Engagement surveys', 'chart'],
  ['Energy & utilities', 'zap'],
  ['Files & spreadsheets', 'layers']];


  // ── radial geometry ──
  const W = 1180,H = 720;
  const cx = W / 2,cy = H / 2;
  const hubR = 150;
  const rx = 468,ry = 286;
  const pw = 204,ph = 46;
  const n = sources.length;
  const pts = sources.map((s, i) => {
    const ang = (-90 + i * (360 / n)) * Math.PI / 180;
    return { x: cx + rx * Math.cos(ang), y: cy + ry * Math.sin(ang), ang };
  });
  // point on the hub edge along the same angle (line start)
  const hubEdge = (ang) => ({ x: cx + (hubR + 6) * Math.cos(ang), y: cy + (hubR + 6) * Math.sin(ang) });
  // point on the pill's inner edge (line end), so the line meets the pill, not its centre
  const pillEdge = (p) => {
    const dx = cx - p.x,dy = cy - p.y,m = Math.hypot(dx, dy);
    return { x: p.x + dx / m * (pw / 2 - 6), y: p.y + dy / m * 6 };
  };

  return (
    <section id="sources" className="sources">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="line" /><span>Data Integration</span></div>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              One platform. <em>Every source.</em>
            </h2>
          </div>
          <p className="lead">
            We start with your workspace because property is the second-highest cost of
            business — but the platform doesn't stop there. Every system your organisation
            holds ties into one place, where we connect, validate and reconcile it into a
            single source of truth.
          </p>
        </div>

        {/* ── desktop: radial SVG ── */}
        <div className="radial">
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" className="radial-svg">
            <defs>
              <radialGradient id="hubGrad" cx="50%" cy="36%" r="78%">
                <stop offset="0%" stopColor="#33302B"/>
                <stop offset="58%" stopColor="#211F1C"/>
                <stop offset="100%" stopColor="#161513"/>
              </radialGradient>
              <filter id="hubGlowF" x="-60%" y="-60%" width="220%" height="220%">
                <feGaussianBlur stdDeviation="22"/>
              </filter>
            </defs>

            {/* decorative rings */}
            <circle cx={cx} cy={cy} r={hubR + 30} fill="none" stroke="var(--border-2)" strokeWidth="1" strokeDasharray="2 5" />
            <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill="none" stroke="var(--border)" strokeWidth="1" strokeDasharray="2 6" opacity="0.7" />

            {/* connecting spokes */}
            {pts.map((p, i) => {
              const a = hubEdge(p.ang),b = pillEdge(p);
              return (
                <g key={`l-${i}`}>
                  <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="var(--border-2)" strokeWidth="1" />
                  <line className="spoke-flow" x1={b.x} y1={b.y} x2={a.x} y2={a.y}
                  stroke="var(--orange)" strokeWidth="1.6" strokeLinecap="round"
                  strokeDasharray="3 15" style={{ animationDelay: `${i * 0.32}s` }} />
                </g>);

            })}

            {/* source pills */}
            {pts.map((p, i) => {
              const IcoComp = Icon[sources[i][1]];
              return (
                <g key={`p-${i}`}>
                  <rect x={p.x - pw / 2} y={p.y - ph / 2} width={pw} height={ph} rx="9"
                  fill="#fff" stroke="var(--border)" strokeWidth="1" />
                  <g transform={`translate(${p.x - pw / 2 + 18}, ${p.y - 10})`} style={{ color: 'var(--orange)' }}>
                    <IcoComp width="20" height="20" />
                  </g>
                  <text x={p.x - pw / 2 + 48} y={p.y + 5}
                  fontFamily="DM Sans, sans-serif" fontSize="14.5" fill="var(--charcoal)" fontWeight="400">
                    {sources[i][0]}
                  </text>
                </g>);

            })}

            {/* central hub — glow halo, gradient core, rotating accent arcs */}
            <circle cx={cx} cy={cy} r={hubR + 4} fill="var(--orange)" opacity="0.14" filter="url(#hubGlowF)" />
            <circle cx={cx} cy={cy} r={hubR} fill="url(#hubGrad)" stroke="rgba(255,255,255,0.07)" strokeWidth="1" />
            <g className="hub-spin" style={{ transformOrigin: `${cx}px ${cy}px` }}>
              <circle cx={cx} cy={cy} r={hubR + 11} fill="none" stroke="var(--orange)" strokeWidth="2"
              strokeLinecap="round" strokeDasharray="250 772" opacity="0.85" />
            </g>
            <g className="hub-spin-rev" style={{ transformOrigin: `${cx}px ${cy}px` }}>
              <circle cx={cx} cy={cy} r={hubR + 19} fill="none" stroke="var(--orange-2)" strokeWidth="1"
              strokeLinecap="round" strokeDasharray="110 942" opacity="0.45" />
            </g>

            {hubStyle === 'ring' && <g>
              <circle cx={cx} cy={cy} r={hubR - 14} fill="none" stroke="rgba(255,255,255,0.14)" strokeWidth="1" strokeDasharray="2 5" />
              <text x={cx} y={cy - 62} textAnchor="middle"
              fontFamily="JetBrains Mono, monospace" fontSize="11.5" fill="rgba(255,255,255,0.5)" letterSpacing="3">SIMPLE.SPACE</text>
              <text x={cx} y={cy - 14} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="33" fontWeight="600" fill="#fff">Intelligence</text>
              <text x={cx} y={cy + 24} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="33" fontWeight="600" fill="var(--orange-2)">Platform</text>
              <text x={cx} y={cy + 62} textAnchor="middle"
              fontFamily="JetBrains Mono, monospace" fontSize="11" fill="rgba(255,255,255,0.55)" letterSpacing="1.2">map · validate · reconcile</text>
            </g>}

            {hubStyle === 'mark' && <g>
              <g transform={`translate(${cx - 21}, ${cy - 92}) scale(1.75)`} style={{ color: 'var(--orange)' }}>
                <rect x="2" y="2" width="9" height="9" rx="1.5" fill="currentColor"/>
                <rect x="13" y="2" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6" fill="none"/>
                <rect x="2" y="13" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6" fill="none"/>
                <rect x="13" y="13" width="9" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.6" fill="none"/>
                <rect x="16.5" y="5" width="3" height="3" rx="0.5" fill="currentColor"/>
              </g>
              <text x={cx} y={cy + 8} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="30" fontWeight="600" fill="#fff">Intelligence</text>
              <text x={cx} y={cy + 44} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="30" fontWeight="600" fill="var(--orange-2)">Platform</text>
              <text x={cx} y={cy + 80} textAnchor="middle"
              fontFamily="JetBrains Mono, monospace" fontSize="10.5" fill="rgba(255,255,255,0.55)" letterSpacing="1">map · validate · reconcile</text>
            </g>}

            {hubStyle === 'orbit' && <g>
              <circle cx={cx} cy={cy} r={108} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1" strokeDasharray="2 5" />
              <text x={cx} y={cy - 12} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="30" fontWeight="600" fill="#fff">Intelligence</text>
              <text x={cx} y={cy + 24} textAnchor="middle"
              fontFamily="Manrope, sans-serif" fontSize="30" fontWeight="600" fill="var(--orange-2)">Platform</text>
              {[['map', -90], ['validate', 150], ['reconcile', 30]].map(([t, deg]) => {
                const a = deg * Math.PI / 180;
                const px = cx + 108 * Math.cos(a), py = cy + 108 * Math.sin(a);
                const ty = py + (Math.sin(a) > 0.3 ? 20 : Math.sin(a) < -0.3 ? -14 : 5);
                return (
                  <g key={t}>
                    <circle cx={px} cy={py} r="4" fill="var(--orange)" />
                    <text x={px} y={ty} textAnchor="middle"
                    fontFamily="JetBrains Mono, monospace" fontSize="11" fill="rgba(255,255,255,0.7)" letterSpacing="1">{t}</text>
                  </g>);
              })}
            </g>}
          </svg>
        </div>

        {/* ── mobile: stacked fallback ── */}
        <div className="hub-mobile">
          <div className="hub-core">
            <span className="hub-core-kicker">SIMPLE.SPACE</span>
            <span className="hub-core-title">Intelligence <em>Platform</em></span>
            <div className="hub-core-chips"><span>map</span><span>validate</span><span>reconcile</span></div>
          </div>
          <ul className="hub-list">
            {sources.map(([label, ico], i) => {
              const IcoComp = Icon[ico];
              return (
                <li key={i} style={{ animationDelay: `${i * 0.55}s` }}>
                  <span className="hub-list-ico"><IcoComp width="18" height="18" /></span>
                  {label}
                </li>);
            })}
          </ul>
        </div>
      </div>
    </section>);

}
window.Sources = Sources;