/* Color section */

function Swatch({ name, value, label, dark, cmyk, pantone, large }) {
  const { open } = useColorTool();
  return (
    <div
      onClick={() => open(value)}
      style={{
        borderRadius: 12, overflow: 'hidden',
        border: '1px solid var(--border-secondary)', cursor: 'pointer',
        background: 'var(--bg-primary)',
      }}
    >
      <div style={{
        background: value, height: large ? 160 : 96,
        position: 'relative',
        padding: 16,
        display: 'flex', alignItems: 'flex-end',
      }}>
        {label && (
          <div style={{ fontSize: 12, fontWeight: 600, color: dark ? '#fff' : 'var(--brand-700)' }}>
            {label}
          </div>
        )}
      </div>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{name}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-quaternary)' }}>{value.toUpperCase()}</span>
        </div>
        {(cmyk || pantone) && (
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5,
            fontFamily: 'var(--font-mono)', color: 'var(--text-quaternary)' }}>
            {cmyk && <span>CMYK {cmyk}</span>}
            {pantone && <span>{pantone}</span>}
          </div>
        )}
      </div>
    </div>
  );
}

function Ramp({ title, prefix, steps, anchor }) {
  const { open } = useColorTool();
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        <div style={{ fontSize: 12, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)' }}>--{prefix}-*</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 4, borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border-secondary)' }}>
        {steps.map(s => {
          const isAnchor = anchor === s.step;
          const dark = s.step >= 400;
          return (
            <div
              key={s.step}
              onClick={() => open(s.hex)}
              title={`${prefix}-${s.step} · ${s.hex.toUpperCase()}`}
              style={{
                background: s.hex, height: 84,
                cursor: 'pointer', position: 'relative',
                padding: 8,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                outline: isAnchor ? '3px solid var(--accent-400)' : 'none',
                outlineOffset: -3,
              }}
            >
              <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)',
                color: dark ? 'rgba(255,255,255,.9)' : 'var(--brand-700)' }}>{s.step}</div>
              <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '.04em',
                color: dark ? 'rgba(255,255,255,.75)' : 'var(--brand-700)' }}>{s.hex.toUpperCase().replace('#', '')}</div>
              {isAnchor && (
                <div style={{
                  position: 'absolute', top: 8, right: 8,
                  background: 'var(--accent-400)', color: 'var(--brand-700)',
                  fontSize: 9, fontWeight: 700, letterSpacing: '.06em',
                  padding: '2px 5px', borderRadius: 3,
                }}>BRAND</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function PairingCard({ bg, fg, name, contrast }) {
  return (
    <div style={{
      background: bg, color: fg,
      borderRadius: 12, padding: 24, minHeight: 160,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      border: '1px solid var(--border-secondary)',
    }}>
      <div>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.01em' }}>Materially smarter.</div>
        <div style={{ fontSize: 14, opacity: .72, marginTop: 4 }}>Plan, source, move, prove.</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', fontSize: 12,
        fontFamily: 'var(--font-mono)', opacity: .8 }}>
        <span>{name}</span>
        <span>{contrast}</span>
      </div>
    </div>
  );
}

function S_Color() {
  const brandSteps = [
    { step: 25, hex: '#F8F9FC' }, { step: 50, hex: '#F1F2F9' }, { step: 100, hex: '#DDDFE9' },
    { step: 200, hex: '#B4B7D4' }, { step: 300, hex: '#8488B6' }, { step: 400, hex: '#5558A0' },
    { step: 500, hex: '#2A2D78' }, { step: 600, hex: '#121541' }, { step: 700, hex: '#0E1034' },
    { step: 800, hex: '#0A0C28' }, { step: 900, hex: '#06081C' }, { step: 950, hex: '#03040E' },
  ];
  const accentSteps = [
    { step: 25, hex: '#FFFDE8' }, { step: 50, hex: '#FEF8B8' }, { step: 100, hex: '#FDF17D' },
    { step: 200, hex: '#FCEB55' }, { step: 300, hex: '#FDE033' }, { step: 400, hex: '#F7EC33' },
    { step: 500, hex: '#E0D420' }, { step: 600, hex: '#B8AC10' }, { step: 700, hex: '#8A7F0A' },
    { step: 800, hex: '#5A5405' }, { step: 900, hex: '#2E2B02' },
  ];
  const neutralSteps = [
    { step: 25, hex: '#FCFCFD' }, { step: 50, hex: '#F9FAFB' }, { step: 100, hex: '#F2F4F7' },
    { step: 200, hex: '#EAECF0' }, { step: 300, hex: '#D0D5DD' }, { step: 400, hex: '#98A2B3' },
    { step: 500, hex: '#667085' }, { step: 600, hex: '#475467' }, { step: 700, hex: '#344054' },
    { step: 800, hex: '#1D2939' }, { step: 900, hex: '#101828' }, { step: 950, hex: '#0C111D' },
  ];

  return (
    <Section
      id="color"
      eyebrow="02 · Colour"
      title="Penn Blue, Aureolin, and a lot of white space."
      intro="A two-colour identity with a neutral engine. Navy carries authority, yellow signals action. Everything else is there to let those two breathe."
    >
      {/* Hero — 3 primaries */}
      <Block title="Core palette" note="The only colours that should feel like 'Nexus ReGen' at a glance.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
          <Swatch large name="Penn Blue" value="#121541" label="Primary" dark
            cmyk="100 · 97 · 40 · 48" pantone="Pantone 2765 C" />
          <Swatch large name="Aureolin" value="#F7EC33" label="Accent"
            cmyk="7 · 0 · 90 · 0" pantone="Pantone 102 C" />
          <Swatch large name="Paper" value="#FFFFFF" label="Canvas"
            cmyk="0 · 0 · 0 · 0" pantone="—" />
        </div>
      </Block>

      {/* Extended */}
      <Block title="Extended accents" note="Supporting colours. Use sparingly — one per view.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
          <Swatch name="Dodger Blue" value="#1E96FC" label="Data · links" dark
            cmyk="80 · 36 · 0 · 0" />
          <Swatch name="Signal Red" value="#FF331F" label="Destructive" dark />
          <Swatch name="Pine Green" value="#17301C" label="Success (dark)" dark />
          <Swatch name="Humus" value="#484538" label="Earthy neutral" dark />
        </div>
      </Block>

      {/* Ramps */}
      <Block title="Colour scales" note="Every base colour has a 12-step ramp. The anchor step is the brand-true hue.">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Ramp title="Brand (Penn Blue)" prefix="brand" steps={brandSteps} anchor={600} />
          <Ramp title="Accent (Aureolin)" prefix="accent" steps={accentSteps} anchor={400} />
          <Ramp title="Neutral" prefix="neutral" steps={neutralSteps} />
        </div>
      </Block>

      {/* Semantic */}
      <Block title="Semantic colours">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12 }}>
          <Swatch name="Success" value="#17B26A" dark cmyk="80 · 0 · 70 · 10" />
          <Swatch name="Warning" value="#F79009" dark />
          <Swatch name="Error" value="#F04438" dark />
          <Swatch name="Info" value="#1E96FC" dark />
        </div>
      </Block>

      {/* Pairings */}
      <Block title="Approved pairings" note="These are the only background/foreground combos we sign off on.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
          <PairingCard bg="#121541" fg="#FFFFFF" name="Brand 600 / White" contrast="17.3 : 1 · AAA" />
          <PairingCard bg="#121541" fg="#F7EC33" name="Brand 600 / Aureolin" contrast="12.1 : 1 · AAA" />
          <PairingCard bg="#F7EC33" fg="#121541" name="Aureolin / Brand 600" contrast="12.1 : 1 · AAA" />
          <PairingCard bg="#FFFFFF" fg="#121541" name="White / Brand 600" contrast="17.3 : 1 · AAA" />
          <PairingCard bg="#F9FAFB" fg="#101828" name="Neutral 50 / 900" contrast="16.6 : 1 · AAA" />
          <PairingCard bg="#0A0C28" fg="#F7EC33" name="Brand 800 / Aureolin" contrast="14.7 : 1 · AAA" />
        </div>
      </Block>

      {/* Ratio rule */}
      <Block title="The 60·30·10 rule" note="How we balance colour on any given surface.">
        <Card pad={0}>
          <div style={{ display: 'grid', gridTemplateColumns: '60fr 30fr 10fr', height: 120 }}>
            <div style={{ background: '#FFFFFF', border: '1px solid var(--border-secondary)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-secondary)', fontWeight: 600 }}>
              60% · Paper & neutral
            </div>
            <div style={{ background: '#121541',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600 }}>
              30% · Penn Blue
            </div>
            <div style={{ background: '#F7EC33',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#121541', fontWeight: 700 }}>
              10% · Aureolin
            </div>
          </div>
          <div style={{ padding: 20, fontSize: 14, color: 'var(--text-tertiary)', lineHeight: 1.6,
            borderTop: '1px solid var(--border-tertiary)' }}>
            White &amp; neutrals carry the canvas. Navy owns the chrome — headers, nav, primary
            buttons, important statements. Aureolin is a spotlight: one CTA, one highlight, one
            piece of data per view — never more.
          </div>
        </Card>
      </Block>
    </Section>
  );
}
window.S_Color = S_Color;