// Persona — palette exploration
// 4 directions, each in light + dark, applied to a representative hero section.
// Constraints: muted/dusty/earthy · modern-clinical + sacred · avoid navy/purple/orange-ochre.

const PALETTES = {
  clay: {
    name: 'Clay & Slate',
    note: 'warm clay brick + cool slate blue · cream paper · the most "earthy editorial"',
    light: {
      paper:   '#f1ebe2',  // warm cream
      paper2:  '#e7dfd2',
      ink:     '#221d1a',  // near-black with warmth
      ink2:    '#4a423b',
      ink3:    '#7a6f64',
      rule:    '#c9bfb0',
      accent:  '#a14b3a',  // dusty clay / brick (NOT orange)
      accent2: '#3e5566',  // slate blue (NOT navy)
      surface: '#ffffff',
    },
    dark: {
      paper:   '#1a1614',  // deep ink-brown
      paper2:  '#231e1b',
      ink:     '#ede4d6',
      ink2:    '#bdb3a4',
      ink3:    '#867d70',
      rule:    '#3a322d',
      accent:  '#c46550',  // brightened clay
      accent2: '#7a99ad',  // brightened slate
      surface: '#26201d',
    },
  },
  jade: {
    name: 'Jade & Bone',
    note: 'muted moss/jade green + bone ground · the most "sacred clinical"',
    light: {
      paper:   '#f0ece1',  // bone
      paper2:  '#e6e0d2',
      ink:     '#1a1f1c',
      ink2:    '#3e463f',
      ink3:    '#6f7669',
      rule:    '#c4c2b1',
      accent:  '#3d5a45',  // muted jade / moss
      accent2: '#8a7a4f',  // dusty olive (warm counter)
      surface: '#ffffff',
    },
    dark: {
      paper:   '#141714',
      paper2:  '#1c1f1c',
      ink:     '#e8e3d3',
      ink2:    '#b3ad99',
      ink3:    '#7a7565',
      rule:    '#2c302c',
      accent:  '#7da086',  // brightened jade
      accent2: '#c0a86d',  // brightened olive
      surface: '#1f231f',
    },
  },
  teal: {
    name: 'Teal & Stone',
    note: 'dusty oxidized teal + warm stone · cool/warm balance · "instrument made of bronze"',
    light: {
      paper:   '#ecebe4',  // cool stone
      paper2:  '#e0dfd5',
      ink:     '#161a1c',
      ink2:    '#3d4346',
      ink3:    '#737c80',
      rule:    '#c3c4b9',
      accent:  '#2f6b6e',  // dusty teal
      accent2: '#9c4a3d',  // brick (warm counter)
      surface: '#ffffff',
    },
    dark: {
      paper:   '#101415',
      paper2:  '#171b1c',
      ink:     '#e6e7df',
      ink2:    '#aeb1a8',
      ink3:    '#787e75',
      rule:    '#272c2d',
      accent:  '#5fa7a8',  // brightened teal
      accent2: '#c87060',  // brightened brick
      surface: '#1a1f20',
    },
  },
  iron: {
    name: 'Iron & Sage',
    note: 'graphite + sage green + soft cream · the most "modern clinical instrument"',
    light: {
      paper:   '#f4f2ec',
      paper2:  '#e9e6dd',
      ink:     '#181918',
      ink2:    '#42433f',
      ink3:    '#797a73',
      rule:    '#c8c7be',
      accent:  '#9aa48a',  // sage
      accent2: '#3a3d3b',  // graphite
      surface: '#ffffff',
    },
    dark: {
      paper:   '#131413',
      paper2:  '#1a1b1a',
      ink:     '#ecebe2',
      ink2:    '#b6b5ab',
      ink3:    '#7d7d72',
      rule:    '#2a2b29',
      accent:  '#b6c0a4',  // brightened sage
      accent2: '#cfcec3',  // light graphite
      surface: '#1e201e',
    },
  },
};

const FONT = {
  display: '"Cormorant Garamond", Georgia, serif',
  body:    '"Inter", system-ui, sans-serif',
  mono:    '"JetBrains Mono", monospace',
  serif:   '"EB Garamond", Georgia, serif',
};

// ────────────────────────────────────────────────────────
// Swatch card
// ────────────────────────────────────────────────────────
function PaletteSwatches({ palette }) {
  const p = palette;
  const tokens = [
    ['paper',   'paper · ground',         p.light.paper,   p.dark.paper],
    ['paper2',  'paper · raised',         p.light.paper2,  p.dark.paper2],
    ['ink',     'ink · primary',          p.light.ink,     p.dark.ink],
    ['ink2',    'ink · secondary',        p.light.ink2,    p.dark.ink2],
    ['ink3',    'ink · tertiary',         p.light.ink3,    p.dark.ink3],
    ['rule',    'rule · hairline',        p.light.rule,    p.dark.rule],
    ['accent',  'accent · primary',       p.light.accent,  p.dark.accent],
    ['accent2', 'accent · secondary',     p.light.accent2, p.dark.accent2],
  ];
  return (
    <div style={{ width:'100%', height:'100%', background:p.light.paper, fontFamily:FONT.body, padding:'28px 30px', display:'flex', flexDirection:'column' }}>
      <div style={{ fontFamily:FONT.mono, fontSize:10, letterSpacing:1.5, color:p.light.ink3, textTransform:'uppercase' }}>palette · {p.name.toLowerCase().replace(' & ', ' + ')}</div>
      <div style={{ fontFamily:FONT.display, fontSize:36, color:p.light.ink, lineHeight:1.05, fontWeight:500, margin:'8px 0 6px', letterSpacing:-0.5 }}>{p.name}</div>
      <div style={{ fontFamily:FONT.serif, fontSize:13, fontStyle:'italic', color:p.light.ink2, lineHeight:1.5, marginBottom:18 }}>{p.note}</div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr auto auto', columnGap:16, rowGap:8, alignItems:'center', borderTop:`1px solid ${p.light.rule}`, paddingTop:14 }}>
        <div style={{ fontFamily:FONT.mono, fontSize:9, letterSpacing:1.5, color:p.light.ink3, textTransform:'uppercase' }}>token</div>
        <div style={{ fontFamily:FONT.mono, fontSize:9, letterSpacing:1.5, color:p.light.ink3, textTransform:'uppercase', textAlign:'center' }}>light</div>
        <div style={{ fontFamily:FONT.mono, fontSize:9, letterSpacing:1.5, color:p.light.ink3, textTransform:'uppercase', textAlign:'center' }}>dark</div>
        {tokens.map(([key,label,lc,dc],i)=>(
          <React.Fragment key={i}>
            <div>
              <div style={{ fontFamily:FONT.mono, fontSize:11, color:p.light.ink, fontWeight:500 }}>{key}</div>
              <div style={{ fontFamily:FONT.serif, fontSize:11, fontStyle:'italic', color:p.light.ink3 }}>{label}</div>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ width:34, height:34, background:lc, border:`1px solid ${p.light.rule}` }}/>
              <span style={{ fontFamily:FONT.mono, fontSize:10, color:p.light.ink2 }}>{lc}</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ width:34, height:34, background:dc, border:`1px solid ${p.dark.rule}` }}/>
              <span style={{ fontFamily:FONT.mono, fontSize:10, color:p.light.ink2 }}>{dc}</span>
            </div>
          </React.Fragment>
        ))}
      </div>

      {/* a tiny applied chip */}
      <div style={{ marginTop:'auto', paddingTop:18, borderTop:`1px solid ${p.light.rule}`, display:'grid', gridTemplateColumns:'1fr 1fr', gap:0 }}>
        <div style={{ background:p.light.paper, color:p.light.ink, padding:'14px 14px' }}>
          <div style={{ fontFamily:FONT.mono, fontSize:8, letterSpacing:1.5, color:p.light.ink3, textTransform:'uppercase', marginBottom:6 }}>light · in use</div>
          <div style={{ fontFamily:FONT.display, fontSize:18, lineHeight:1.1, fontWeight:500 }}>The instrument <em style={{color:p.light.accent}}>reads thee</em>.</div>
          <div style={{ display:'inline-block', marginTop:8, padding:'6px 12px', background:p.light.ink, color:p.light.paper, fontFamily:FONT.body, fontSize:10, letterSpacing:2, textTransform:'uppercase' }}>begin</div>
        </div>
        <div style={{ background:p.dark.paper, color:p.dark.ink, padding:'14px 14px', borderLeft:`1px solid ${p.light.rule}` }}>
          <div style={{ fontFamily:FONT.mono, fontSize:8, letterSpacing:1.5, color:p.dark.ink3, textTransform:'uppercase', marginBottom:6 }}>dark · in use</div>
          <div style={{ fontFamily:FONT.display, fontSize:18, lineHeight:1.1, fontWeight:500 }}>The instrument <em style={{color:p.dark.accent}}>reads thee</em>.</div>
          <div style={{ display:'inline-block', marginTop:8, padding:'6px 12px', background:p.dark.accent, color:p.dark.paper, fontFamily:FONT.body, fontSize:10, letterSpacing:2, textTransform:'uppercase' }}>begin</div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────
// Hero — applied homepage section, takes a palette mode
// ────────────────────────────────────────────────────────
function PaletteHero({ palette, mode }) {
  const p = palette[mode];
  const isDark = mode === 'dark';
  return (
    <div style={{ width:'100%', height:'100%', background:p.paper, color:p.ink, fontFamily:FONT.body, position:'relative', overflow:'hidden' }}>
      {/* topbar */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'18px 40px', borderBottom:`1px solid ${p.rule}` }}>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" fill="none" stroke={p.ink} strokeWidth="0.8"/><circle cx="11" cy="11" r="5" fill="none" stroke={p.accent} strokeWidth="0.8"/><circle cx="11" cy="11" r="1.5" fill={p.accent}/></svg>
          <div style={{ fontFamily:FONT.display, fontSize:22, letterSpacing:4, fontWeight:500 }}>PERSONA</div>
        </div>
        <div style={{ display:'flex', gap:24, fontFamily:FONT.body, fontSize:12, fontVariant:'small-caps', letterSpacing:1.5, color:p.ink2 }}>
          <span>Method</span><span>Traditions</span><span>Pricing</span><span>Sign in</span>
        </div>
        <div style={{ background:p.ink, color:p.paper, padding:'9px 18px', fontFamily:FONT.body, fontSize:11, letterSpacing:2, textTransform:'uppercase' }}>Begin →</div>
      </div>

      {/* hero */}
      <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48, padding:'64px 40px 56px', alignItems:'center' }}>
        <div>
          <div style={{ fontFamily:FONT.mono, fontSize:10, letterSpacing:2, color:p.ink3, textTransform:'uppercase' }}>§ 01 · the premise</div>
          <h1 style={{ fontFamily:FONT.display, fontSize:64, lineHeight:0.98, fontWeight:500, color:p.ink, margin:'14px 0 18px', letterSpacing:-0.8 }}>
            Self-knowledge,<br/><em style={{ color:p.accent }}>measured</em> across<br/>ten traditions.
          </h1>
          <p style={{ fontFamily:FONT.serif, fontSize:17, lineHeight:1.55, color:p.ink2, margin:'0 0 24px', maxWidth:480 }}>
            One reading drawn from astrology, Jyotish, the I Ching, the Big Five, the Enneagram, and five more — cross-referenced into a single instrument. We tell you what they all agree on.
          </p>
          <div style={{ display:'flex', gap:14, alignItems:'center' }}>
            <div style={{ background:p.ink, color:p.paper, padding:'14px 26px', fontFamily:FONT.body, fontSize:13, letterSpacing:2.5, textTransform:'uppercase' }}>Begin a reading →</div>
            <div style={{ padding:'14px 22px', border:`1px solid ${p.ink}`, color:p.ink, fontFamily:FONT.body, fontSize:13, letterSpacing:2.5, textTransform:'uppercase' }}>Sample report</div>
          </div>
          <div style={{ marginTop:18, fontFamily:FONT.mono, fontSize:10, color:p.ink3, letterSpacing:1.5 }}>10 traditions · 24 minutes · no obligation</div>
        </div>

        {/* convergence figure */}
        <div style={{ position:'relative', aspectRatio:'1/1', maxWidth:380, justifySelf:'end' }}>
          <div style={{ position:'absolute', inset:0, background:p.surface, border:`1px solid ${p.rule}`, padding:18 }}>
            <div style={{ position:'absolute', top:8, left:14, fontFamily:FONT.mono, fontSize:9, color:p.ink3, letterSpacing:1.5 }}>FIG. I</div>
            <div style={{ position:'absolute', top:8, right:14, fontFamily:FONT.mono, fontSize:9, color:p.ink3, letterSpacing:1.5 }}>convergence wheel</div>
            <svg viewBox="-110 -110 220 220" style={{ width:'100%', height:'100%' }}>
              {/* concentric rings */}
              <circle r="100" fill="none" stroke={p.rule} strokeWidth="0.4"/>
              <circle r="70" fill="none" stroke={p.rule} strokeWidth="0.4" strokeDasharray="2 2"/>
              <circle r="40" fill="none" stroke={p.rule} strokeWidth="0.4"/>
              {/* spokes */}
              {Array.from({length:10}).map((_,i)=>{
                const a=(i*36-90)*Math.PI/180;
                const x=Math.cos(a)*100, y=Math.sin(a)*100;
                return <line key={i} x1="0" y1="0" x2={x} y2={y} stroke={p.rule} strokeWidth="0.3"/>;
              })}
              {/* tradition nodes */}
              {Array.from({length:10}).map((_,i)=>{
                const a=(i*36-90)*Math.PI/180;
                const x=Math.cos(a)*88, y=Math.sin(a)*88;
                const lit = [0,2,4,6,8,9].includes(i); // "agreement"
                return (
                  <g key={i}>
                    <circle cx={x} cy={y} r="9" fill={lit?p.accent:p.surface} stroke={p.ink} strokeWidth="0.6"/>
                    <text x={x} y={y+1} textAnchor="middle" dy="0.35em" fontFamily={FONT.mono} fontSize="6" fill={lit?p.paper:p.ink2} letterSpacing="0.5">{['I','II','III','IV','V','VI','VII','VIII','IX','X'][i]}</text>
                  </g>
                );
              })}
              {/* agreement polygon */}
              <polygon
                points={[0,2,4,6,8,9].map(i=>{const a=(i*36-90)*Math.PI/180;return `${Math.cos(a)*70},${Math.sin(a)*70}`;}).join(' ')}
                fill={p.accent} fillOpacity="0.12" stroke={p.accent} strokeWidth="0.8"
              />
              {/* center */}
              <circle r="22" fill={p.ink}/>
              <text y="2" textAnchor="middle" dy="0.35em" fontFamily={FONT.display} fontSize="9" fill={p.paper} letterSpacing="2" fontStyle="italic">you</text>
            </svg>
            <div style={{ position:'absolute', bottom:10, left:14, right:14, display:'flex', justifyContent:'space-between', fontFamily:FONT.mono, fontSize:9, color:p.ink3, letterSpacing:1.5 }}>
              <span>10 traditions</span>
              <span style={{ color:p.accent }}>6 agree · "a bridge"</span>
            </div>
          </div>
        </div>
      </div>

      {/* trait-strip — the most "instrument" thing on the page */}
      <div style={{ borderTop:`1px solid ${p.rule}`, padding:'32px 40px', background:p.paper2 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:18 }}>
          <div>
            <div style={{ fontFamily:FONT.mono, fontSize:10, letterSpacing:2, color:p.ink3, textTransform:'uppercase' }}>§ 02 · convergence sample</div>
            <div style={{ fontFamily:FONT.display, fontSize:24, color:p.ink, fontWeight:500, marginTop:4 }}>What ten traditions <em style={{color:p.accent}}>agree on</em>.</div>
          </div>
          <div style={{ fontFamily:FONT.mono, fontSize:10, color:p.ink3, letterSpacing:1.5 }}>n = 10 · agreement ≥ 0.6</div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:p.rule, border:`1px solid ${p.rule}` }}>
          {[
            ['Mediator',     0.84, '8 / 10'],
            ['Inwardly-led', 0.71, '7 / 10'],
            ['Slow-burning', 0.62, '6 / 10'],
            ['Honourable',   0.58, '6 / 10'],
          ].map(([name,score,n],i)=>(
            <div key={i} style={{ background:p.surface, padding:'18px 18px' }}>
              <div style={{ fontFamily:FONT.mono, fontSize:9, color:p.ink3, letterSpacing:1.5, textTransform:'uppercase' }}>finding · {String(i+1).padStart(2,'0')}</div>
              <div style={{ fontFamily:FONT.display, fontSize:22, fontWeight:500, color:p.ink, marginTop:6 }}>{name}</div>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:12 }}>
                <div style={{ flex:1, height:4, background:p.rule, position:'relative' }}>
                  <div style={{ position:'absolute', inset:0, width:`${score*100}%`, background:p.accent }}/>
                </div>
                <div style={{ fontFamily:FONT.mono, fontSize:11, color:p.ink, fontVariant:'tabular-nums' }}>{score.toFixed(2)}</div>
              </div>
              <div style={{ fontFamily:FONT.mono, fontSize:9, color:p.ink3, letterSpacing:1, marginTop:6 }}>{n} traditions</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PALETTES, PaletteSwatches, PaletteHero });