/* XHealth website — Solution wheel ("3 designs / 8 services") recreated in brand palette */
const SD = window.XH_DATA.solution;
const ST = window.tr;

const SOL_COLORS = {
  work:    { band: '#28A3D2', inner: '#cdeaf6', label: '#0e4a63', badge: '#28A3D2' },  /* cyan */
  spatial: { band: '#2556A8', inner: '#d3e1f6', label: '#16315f', badge: '#2556A8' },  /* royal blue */
  system:  { band: '#6e7e94', inner: '#dde3ea', label: '#2c3a4e', badge: '#6e7e94' },  /* slate */
};
const SOL_GROUP_SPAN = { work: [0, 135], spatial: [135, 270], system: [270, 360] };

function solPt(cx, cy, r, deg) { const a = deg * Math.PI / 180; return [cx + r * Math.sin(a), cy - r * Math.cos(a)]; }
function solSeg(cx, cy, rIn, rOut, s, e, gap) {
  s += gap; e -= gap;
  const [x1, y1] = solPt(cx, cy, rOut, s), [x2, y2] = solPt(cx, cy, rOut, e);
  const [x3, y3] = solPt(cx, cy, rIn, e), [x4, y4] = solPt(cx, cy, rIn, s);
  const large = (e - s) > 180 ? 1 : 0;
  return `M ${x1} ${y1} A ${rOut} ${rOut} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${rIn} ${rIn} 0 ${large} 0 ${x4} ${y4} Z`;
}

function SolutionWheel({ lang, active, setActive }) {
  const cx = 230, cy = 230;
  const oIn = 156, oOut = 210;   /* outer band (8 services) */
  const iIn = 96, iOut = 150;    /* inner band (3 designs) */
  const items = SD.items;
  return (
    <svg className="solw__svg" viewBox="0 0 460 460" role="img" aria-label={ST(SD.title, lang)}>
      <defs>
        <filter id="solShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="6" stdDeviation="10" floodColor="#0b1130" floodOpacity="0.14" />
        </filter>
      </defs>
      {/* inner ring — 3 design groups */}
      {SD.groups.map((g) => {
        const [s, e] = SOL_GROUP_SPAN[g.key]; const c = SOL_COLORS[g.key];
        const mid = (s + e) / 2; const [lx, ly] = solPt(cx, cy, (iIn + iOut) / 2, mid);
        const isOn = active >= 0 && items[active].group === g.key;
        return (
          <g key={g.key}>
            <path d={solSeg(cx, cy, iIn, iOut, s, e, 1.1)} fill={c.inner} stroke="#fff" strokeWidth="3"
              style={{ transition: 'opacity .24s', opacity: (active < 0 || isOn) ? 1 : 0.55 }} />
            <text x={lx} y={ly} textAnchor="middle" dominantBaseline="middle" className="solw__grouplabel" fill={c.label}>
              {ST(g.label, lang).split(' ').map((w, i, arr) => (
                <tspan key={i} x={lx} dy={i === 0 ? -(arr.length - 1) * 9 : 18}>{w}</tspan>
              ))}
            </text>
          </g>
        );
      })}
      {/* outer ring — 8 services */}
      {items.map((it, i) => {
        const s = (it.n - 1) * 45, e = it.n * 45; const c = SOL_COLORS[it.group];
        const mid = (s + e) / 2; const [nx, ny] = solPt(cx, cy, (oIn + oOut) / 2, mid);
        const on = active === i;
        return (
          <g key={it.n} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(-1)} style={{ cursor: 'pointer' }}>
            <path d={solSeg(cx, cy, oIn, oOut, s, e, 1.1)} fill={c.band} stroke="#fff" strokeWidth="3"
              style={{ transition: 'opacity .24s, transform .24s', opacity: (active < 0 || on) ? 1 : 0.5 }} />
            <circle cx={nx} cy={ny} r="15" fill="#fff" />
            <text x={nx} y={ny} textAnchor="middle" dominantBaseline="central" className="solw__num" fill={c.badge}>{it.n}</text>
          </g>
        );
      })}
      {/* center */}
      <circle cx={cx} cy={cy} r="84" fill="#fff" filter="url(#solShadow)" />
      <circle cx={cx} cy={cy} r="84" fill="none" stroke="var(--slate-100)" strokeWidth="1" />
      <text x={cx} y={cy} textAnchor="middle" dominantBaseline="central" className="solw__center" fill="var(--navy-700)">
        {ST(SD.center, lang).split(' ').map((w, i, arr) => (
          <tspan key={i} x={cx} dy={i === 0 ? -(arr.length - 1) * 11 : 22}>{w}</tspan>
        ))}
      </text>
    </svg>
  );
}

function SolItem({ it, lang, side, active, setActive, idx }) {
  const c = SOL_COLORS[it.group];
  const on = active === idx;
  return (
    <div className={'solitem solitem--' + side + (on ? ' on' : '')}
      onMouseEnter={() => setActive(idx)} onMouseLeave={() => setActive(-1)}>
      <div className="solitem__head">
        <span className="solitem__badge" style={{ background: c.badge }}>{it.n}</span>
        <span className="solitem__kicker">{ST(it.title, lang)}</span>
      </div>
      <p className="solitem__desc">{ST(it.desc, lang)}</p>
      <div className="solitem__tags">
        {ST(it.tags, lang).map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

function SolutionSection({ lang, go }) {
  const ref = useReveal();
  const [active, setActive] = useState(-1);
  const items = SD.items;
  const left = [7, 6, 5, 4];   /* items 8,7,6,5 (indices) */
  const right = [0, 1, 2, 3];  /* items 1,2,3,4 */
  const nav = go || ((r) => { window.location.hash = '#' + r; });
  return (
    <section className="section solution" ref={ref}>
      <div className="wrap" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 'clamp(2.5rem,2rem + 2vw,3.5rem)' }}>
        <p className="eyebrow" style={{ justifyContent: 'center' }}>{ST(SD.eyebrow, lang)}</p>
        <h2 className="display h-1">{ST(SD.title, lang)}</h2>
        <p className="lead" style={{ maxWidth: 620 }}>{ST(SD.lead, lang)}</p>
      </div>
      <div className="wrap wrap--wide">
        <div className="solgrid">
          <div className="solcol solcol--left">
            {left.map((i) => <SolItem key={i} it={items[i]} idx={i} lang={lang} side="left" active={active} setActive={setActive} />)}
          </div>
          <div className="solw">
            <SolutionWheel lang={lang} active={active} setActive={setActive} />
          </div>
          <div className="solcol solcol--right">
            {right.map((i) => <SolItem key={i} it={items[i]} idx={i} lang={lang} side="right" active={active} setActive={setActive} />)}
          </div>
        </div>
        <div className="sol__cta">
          <p className="sol__ctahint">{ST(SD.ctaHint, lang)}</p>
          <a className="btn btn--primary btn--lg" href={window.XH_WA} target="_blank" rel="noopener noreferrer">
            {ST(SD.ctaLabel, lang)} {window.Icon && <window.Icon name="arrow-right" />}
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SolutionSection });