// Dual-use: the two environments the same engine is deployed into, each with
// what it gives and who receives it.

function useDualUseT() {
  const hook = typeof useT === 'function' ? useT : null;
  const fromCtx = hook ? hook() : null;
  return (key) => {
    const value = fromCtx ? fromCtx(key) : null;
    return value && value !== key ? value : key;
  };
}

// Deterministic illustrative series: not a live quote or a calibrated forecast.
function DualUseMarketChart() {
  const values = [34.1,34,36.3,35.5,36.6,34.5,35.3,33.4,35.3,37.3,38.3,38.5,40.5,41.1,39.8,37.8,37.7,41.4,42,42.7,42.2,40.6,41.7,40.4,42.6,41.2,37.8,39.2,36.9,34.2,32.8,33.4,33.2,33.7,33.7,33.1,34.3,35.2,35.8,36.3,37.8,38.8,40.6,43.9,47.8,47.7,51,51.3,53.1,50.9,49.5,48.9,47.3,49.7,51.4,54.9,56.6,52.6,53.8,51.5,49.4,48.3,46.7,48.7,44.6,48,48.1,47.3,48.8,47.1,46.1,47.3,45.6,47.6,50.4,52.2,53,53.2,54.5,57.4,59.4,58.9,58.2,58.5,56.6,56.5,57.2,59.4,60.5,62.5,61.2,63.1,62.7,60.4,59.5,61.2,60.7,60.9,59.5,61.1,62.4];
  const y = p => 188 - (p - 20) * 2;
  const history = values.map((p, i) => [48 + i * 3.82, y(p)]);
  const forecast = Array.from({length: 41}, (_, i) => {
    const t = i / 40;
    return { x: 430 + t * 224, p: 62.4 + 4 * (1 - Math.exp(-t * 2)), spread: 14 * Math.sqrt(t) };
  });
  const line = points => points.map(p => p.join(',')).join(' ');
  const band = width => line([
    ...forecast.map(p => [p.x, y(p.p + p.spread * width)]),
    ...forecast.slice().reverse().map(p => [p.x, y(p.p - p.spread * width)]),
  ]);
  return (
    <>
      <g className="du-art-type du-chart-heading">
        <text x="40" y="29">01 / EVENT PROBABILITY</text>
      </g>
      <g className="du-chart-grid">
        {[20,40,60,80].map(p => <path key={p} d={`M48 ${y(p)}H654`} />)}
        {[175,302,542,654].map(x => <path key={x} d={`M${x} 60V190`} />)}
      </g>
      <g className="du-art-type du-chart-axis">
        {[20,40,60,80].map(p => <text key={p} x="666" y={y(p)+3} textAnchor="start">{p}%</text>)}
      </g>
      <g className="du-chart-bands">
        <polygon points={band(1)} opacity=".08" />
        <polygon points={band(.65)} opacity=".1" />
        <polygon points={band(.32)} opacity=".12" />
      </g>
      <path className="du-chart-now-line" d="M430 59V210" />
      <polyline className="du-chart-market-line" points={line(history)} />
      <path className="du-chart-price-guide" d={`M48 ${y(62.4)}H430`} />
      <polyline className="du-chart-projection" points={line(forecast.map(p => [p.x,y(p.p)]))} />
      <circle className="du-chart-point" cx="430" cy={y(62.4)} r="3.5" />
      <g className="du-chart-quote" transform={`translate(407 ${y(62.4)-29})`}>
        <rect width="46" height="18" rx="2" />
        <text x="23" y="12" textAnchor="middle">62.4%</text>
      </g>
      <g className="du-chart-volume">
        {values.filter((_,i)=>i%2===0).map((p,i) => {
          const change = i === 0 ? 1 : Math.abs(p-values[(i-1)*2]);
          return <path key={i} d={`M${48+i*7.64} 214v-${3+Math.min(change*2.4,15)}`} />;
        })}
      </g>
      <path className="du-chart-baseline" d="M48 215H654" />
      <g className="du-art-type du-chart-axis">
        <text x="48" y="233">−30D</text><text x="175" y="233" textAnchor="middle">−20D</text>
        <text x="302" y="233" textAnchor="middle">−10D</text>
        <text x="430" y="233" textAnchor="middle" className="du-chart-now-label">NOW</text>
        <text x="654" y="233" textAnchor="end">+7D</text>
        <text x="550" y="50" textAnchor="middle" className="du-chart-note">PROJECTED RANGE</text>
      </g>
    </>
  );
}

// Illustrative signals and alert locations, not live operational data.
function DualUseIllustration({ variant }) {
  const civil = variant === 'civil';

  const alerts = [
    { lon: 30, lat: 49, label: '01', dx: -44, dy: -28 },
    { lon: 52, lat: 26, label: '02', dx: 25, dy: 27 },
    { lon: 122, lat: 24, label: '03', dx: 30, dy: -32 },
    { lon: -67, lat: 9, label: '04', dx: -42, dy: 32 },
  ];
  return (
    <div className={`du-art du-art-${variant}`} aria-hidden="true">
      <svg viewBox="0 0 720 260" fill="none" focusable="false">
        <defs>
          <pattern id={`du-grid-${variant}`} width="36" height="32" patternUnits="userSpaceOnUse">
            <path d="M36 0H0V32" className="du-art-grid" />
          </pattern>
          <linearGradient id="du-fade-civil" x1="0" y1="0" x2="1" y2="1">
            <stop stopColor="currentColor" stopOpacity=".24" />
            <stop offset="1" stopColor="currentColor" stopOpacity=".01" />
          </linearGradient>
          {!civil && <mask id="du-world-mask">
            <image href="assets/maps/dual-use-world.svg" width="720" height="260" />
          </mask>}
        </defs>
        <path fill={`url(#du-grid-${variant})`} d="M0 0H720V260H0z" />
        <g className="du-art-registration">
          <path d="M12 28V12H28M692 12H708V28M12 232V248H28M692 248H708V232" />
          <path d="M352 12h16m-8-8v16M352 248h16m-8-8v16" />
        </g>

        {civil ? (
          <DualUseMarketChart />
        ) : (
          <>
            <g className="du-art-type"><text x="40" y="28">02 / GLOBAL WATCH</text></g>
            <path className="du-world-land" mask="url(#du-world-mask)" d="M0 0H720V260H0Z" />
            <g className="du-map-graticule">
              <path d="M52 143H668M52 84H668M52 202H668M154 36V218M257 36V218M360 36V218M463 36V218M566 36V218" />
            </g>
            {alerts.map(({lon, lat, label, dx, dy}, i) => {
              const x = 52 + (lon + 180) * 616 / 360;
              const y = 32 + (84 - lat) * 190 / 144;
              return (
                <g key={label} className="du-map-alert">
                  <circle className="du-alert-halo" cx={x} cy={y} r="15" style={{animationDelay: `${i * -1.2}s`}} />
                  <circle className="du-alert-ring" cx={x} cy={y} r="8" />
                  <circle className="du-alert-dot" cx={x} cy={y} r="3" />
                  <path className="du-alert-leader" d={`M${x} ${y}l${dx * .55} ${dy}h${dx * .45}`} />
                  <g transform={`translate(${x+dx-12} ${y+dy-9})`}>
                    <rect className="du-alert-tag" width="25" height="18" rx="1" />
                    <text className="du-alert-label" x="13" y="12" textAnchor="middle">{label}</text>
                  </g>
                </g>
              );
            })}
            <g className="du-art-type du-art-small"><text x="40" y="237">ILLUSTRATIVE SCENARIO</text><text x="680" y="237" textAnchor="end">4 / SIGNALS</text></g>
          </>
        )}
      </svg>
    </div>
  );
}

function DualUseEnv({ t, variant, label, thin, title, desc, chips }) {
  return (
    <article className={`du-lane du-lane-${variant}`}>
      <DualUseIllustration variant={variant} />
      <div className="du-lane-kicker">{t(label)}</div>
      <h3 className="du-lane-h">{t(thin)} <em>{t(title)}</em></h3>
      <p className="du-lane-p">{t(desc)}</p>
      <div className="du-lane-foot">
        <span className="du-lane-foot-label">{t('duProfile')}</span>
        <ul className="du-chips">
          {chips.map((k) => <li key={k}>{t(k)}</li>)}
        </ul>
      </div>
    </article>
  );
}

function DualUseTopology() {
  const t = useDualUseT();

  return (
    <div className="du reveal">
      <div className="du-lanes">
        <DualUseEnv
          t={t}
          variant="civil"
          label="duCommLabel"
          thin="duCommThin"
          title="duCommTitle"
          desc="duCommDesc"
          chips={['duCommC1', 'duCommC2', 'duCommC3', 'duCommC4']}
        />
        <DualUseEnv
          t={t}
          variant="defence"
          label="duDefLabel"
          thin="duDefThin"
          title="duDefTitle"
          desc="duDefDesc"
          chips={['duDefC1', 'duDefC2', 'duDefC3']}
        />
      </div>
    </div>
  );
}

Object.assign(window, { DualUseTopology });