/* Offerings.jsx — five candidate offerings with investability scoring */

const OFFERINGS = [
  {
    id: 'scan',
    n: '4.1',
    title: 'Vulnerability Scan-as-a-Service',
    buyer: 'Brokerage account directors · corporate-lines tier',
    targets: ['Marsh', 'Aon', 'Gallagher', 'Crombie Lockwood', 'Rothbury', 'ICIB'],
    pitch: '90-minute analytical service, white-labelled. Surfaces coverage gaps, redundancies, mispriced exposures, tempo-mismatch risks. Broker keeps the relationship.',
    pilot: '3 free scans for one brokerage in exchange for a written case study.',
    risk: 'Compliance teams worry about advisory liability. Mitigated by surfacing analyses, not recommendations.',
    score: { warmth: 0.85, capital: 0.9, regulatory: 0.6, scale: 0.55, mission: 0.55 },
  },
  {
    id: 'cop',
    n: '4.2',
    title: 'Underwriter co-pilot for tail risks',
    buyer: 'Chief Underwriting Officer · primary insurer',
    targets: ['IAG', 'Suncorp', 'Vero', 'Tower', 'FMG'],
    pitch: 'Five-persona Council reviews underwriting decisions on commercial lines above $5M sum-insured. Surfaces tail-risk and accumulation flags a single reviewer might miss.',
    pilot: 'Shadow-mode on three months of historical decisions. Back-tested vulnerability report.',
    risk: 'Underwriter resistance to second-guessing. Position as augmentation; threshold-gated; underwriter retains override.',
    score: { warmth: 0.6, capital: 0.7, regulatory: 0.55, scale: 0.85, mission: 0.6 },
  },
  {
    id: 'tempo',
    n: '4.3',
    title: 'Tempo-gap monitor for corporate CRO',
    buyer: 'Chief Risk Officer · large NZ corporate',
    targets: ['Fonterra', 'Air NZ', 'Mainfreight', 'Spark', 'Major banks'],
    pitch: 'Continuous monitoring service that flags when the firm\'s risk-surface tempo has outrun the insurance review cycle. Quarterly board reports; weekly material-change alerts.',
    pilot: '6-month engagement with one corporate. Tempo-gap report at start and end.',
    risk: 'Long sales cycle to large corporates. Procurement-heavy.',
    score: { warmth: 0.55, capital: 0.65, regulatory: 0.7, scale: 0.7, mission: 0.6 },
  },
  {
    id: 'lib',
    n: '4.4',
    title: 'NZ cascade-scenario library',
    buyer: 'Reinsurance & advisory · actuarial practices',
    targets: ['Munich Re', 'Hannover Re', 'Aon Re', 'KPMG', 'EY', 'PwC', 'Deloitte'],
    pitch: 'Canonical NZ cascade-scenario library, regularly updated. Defensible IP, recurring license, regulatory-recognition pathway via XRB / RBNZ.',
    pilot: 'Public-good positioning: publish summary scenarios; sell underlying modelling.',
    risk: 'Slow procurement in reinsurance and consultancy markets.',
    score: { warmth: 0.4, capital: 0.55, regulatory: 0.85, scale: 0.95, mission: 0.7 },
  },
  {
    id: 'iwi',
    n: '4.5',
    title: 'Parametric trigger design for iwi pools',
    buyer: 'Iwi authority kaitiaki · post-settlement entities',
    targets: ['Ngāti Whātua Ōrākei', 'Ngāi Tahu', 'Tainui', '+ underwriting reinsurer'],
    pitch: 'Parametric trigger design (rainfall, seismic, supply-chain, biosecurity) tailored to iwi assets. Inverse design optimises trigger thresholds against historical claims and forward scenarios.',
    pilot: 'Long. Capital-intensive. Need a reinsurer to underwrite the pool.',
    risk: 'Long sales cycle. Long-tail social-impact play, not commercial-first-mover.',
    score: { warmth: 0.3, capital: 0.3, regulatory: 0.5, scale: 0.6, mission: 1 },
  },
];

const AXES = [
  { id: 'warmth',     label: 'Warmth' },
  { id: 'capital',    label: 'Capital eff.' },
  { id: 'regulatory', label: 'Reg. clarity' },
  { id: 'scale',      label: 'Scale' },
  { id: 'mission',    label: 'Mission' },
];

function Offerings() {
  const [sel, setSel] = React.useState('scan');
  const cur = OFFERINGS.find(o => o.id === sel);

  // dynamic weights — Patrick's preferences
  const [weights, setWeights] = React.useState({
    warmth: 0.3, capital: 0.25, regulatory: 0.15, scale: 0.2, mission: 0.1,
  });
  const setW = (k, v) => setWeights(w => ({ ...w, [k]: v }));

  const scored = OFFERINGS.map(o => {
    const total = AXES.reduce((s, a) => s + (o.score[a.id] * weights[a.id]), 0);
    return { ...o, total };
  }).sort((a, b) => b.total - a.total);

  return (
    <section id="offerings" className="tight">
      <div className="container">
        <SectionHeader
          num="06 / 06"
          tag="Five candidate offerings"
          title="Not a single product. A family of entry points."
          lede="Each is a real offering with a specific buyer, a specific gap, and a specific failure mode. Move the weights to reflect what 'investible' looks like to you — the ranking on the right re-sorts."
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32, alignItems: 'start' }}>
          <div className="flex-col" style={{ gap: 12 }}>
            {scored.map((o, i) => {
              const isSel = sel === o.id;
              return (
                <div key={o.id}
                     className="card flat"
                     style={{
                       padding: '20px 24px',
                       cursor: 'pointer',
                       borderColor: isSel ? 'var(--ink)' : 'var(--rule)',
                       borderWidth: isSel ? 1 : 1,
                       background: isSel ? 'var(--bg-card)' : 'var(--bg-card)',
                       boxShadow: isSel ? '0 2px 0 0 var(--ink)' : 'none',
                     }}
                     onClick={() => setSel(o.id)}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
                    {/* rank */}
                    <div style={{ minWidth: 32 }}>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--muted-2)' }}>#{i+1}</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--muted-2)' }}>{o.n}</div>
                    </div>

                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
                        <div>
                          <h3 style={{ fontSize: 17, marginBottom: 4 }}>{o.title}</h3>
                          <div style={{ fontSize: 12, color: 'var(--muted)' }}>{o.buyer}</div>
                        </div>
                        <div style={{ textAlign: 'right' }}>
                          <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: 'var(--red)' }}>
                            {(o.total*100).toFixed(0)}
                          </div>
                          <div style={{ fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
                            score
                          </div>
                        </div>
                      </div>

                      {/* axis bars */}
                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginTop: 14 }}>
                        {AXES.map(a => (
                          <div key={a.id}>
                            <div style={{ fontSize: 10, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 3 }}>
                              {a.label}
                            </div>
                            <div style={{ height: 4, background: 'var(--rule)', borderRadius: 2, overflow: 'hidden' }}>
                              <div style={{ width: `${o.score[a.id]*100}%`, height: '100%', background: 'var(--ink)' }} />
                            </div>
                          </div>
                        ))}
                      </div>

                      {isSel && (
                        <div style={{ marginTop: 18, fontSize: 13, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
                          <p style={{ margin: '0 0 12px' }}>{o.pitch}</p>
                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 12 }}>
                            <div>
                              <div className="bignum-sub" style={{ marginBottom: 4 }}>PILOT SHAPE</div>
                              <div style={{ fontSize: 12.5 }}>{o.pilot}</div>
                            </div>
                            <div>
                              <div className="bignum-sub" style={{ marginBottom: 4 }}>FAILURE MODE</div>
                              <div style={{ fontSize: 12.5 }}>{o.risk}</div>
                            </div>
                          </div>
                          <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                            {o.targets.map(t => (
                              <span key={t} className="pill gray">{t}</span>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="flex-col" style={{ gap: 16, position: 'sticky', top: 80 }}>
            <div className="card flat card-pad-sm">
              <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--muted-2)', fontWeight: 600, marginBottom: 14 }}>
                What does "investible" mean to you?
              </div>
              {AXES.map(a => (
                <div key={a.id} style={{ marginBottom: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                    <span>{a.label}</span>
                    <span className="mono" style={{ color: 'var(--muted)' }}>{(weights[a.id]*100).toFixed(0)}%</span>
                  </div>
                  <input type="range" min="0" max="0.6" step="0.01" value={weights[a.id]}
                         onChange={(e) => setW(a.id, parseFloat(e.target.value))}
                         className="slider" />
                </div>
              ))}
              <div className="aside" style={{ marginTop: 6 }}>
                Weights normalise visually; absolute values let you weight one axis far above the others.
              </div>
            </div>

            <div className="card flat card-pad-sm" style={{ background: 'var(--tint)' }}>
              <div className="bignum-sub" style={{ marginBottom: 6 }}>WARMEST PATH</div>
              <div style={{ fontFamily: 'Source Serif 4', fontSize: 22, lineHeight: 1.2, letterSpacing: '-.015em' }}>
                {scored[0].title}
              </div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8 }}>
                Top of the ranking under your current weighting.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Offerings = Offerings;