// tokens.jsx — palette + typography + reusable primitives

const T = {
  cream:        '#F5EEDF',
  creamDeep:    '#EDE2CB',
  paper:        '#FAF6EC',
  beige:        '#E8DEC9',

  ink:          '#3A2418',
  inkSoft:      '#5B3E2B',
  inkMid:       '#7A5A42',
  inkMuted:     'rgba(58, 36, 24, 0.58)',
  inkFaint:     'rgba(58, 36, 24, 0.32)',
  hairline:     'rgba(58, 36, 24, 0.14)',

  sage:         '#A8B89E',
  sageDeep:     '#7E9173',
  lavender:     '#D6CFE3',
  lavenderDeep: '#A89EC0',
  dustyBlue:    '#B6CAD4',
  dustyBlueDeep:'#88A4B2',
  terracotta:   '#C8806B',
  terracottaDeep:'#A8654F',
  butter:       '#EAD68E',
  butterDeep:   '#C9B260',

  // chocolate dachshund coat — for illustrations
  coat:         '#5A3320',
  coatLight:    '#7A4A33',
  coatTan:      '#B98564',

  serif: '"Instrument Serif", "Newsreader", Georgia, serif',
  body:  '"Newsreader", Georgia, serif',
  sans:  '"Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
};

// ─────────────────────────────────────────────────────────────
// Per-page background recipes — each tone is a distinct mood
// ─────────────────────────────────────────────────────────────
const PAGE_BG = {
  cream: {
    base: T.cream,
    glow: 'radial-gradient(60% 40% at 50% 0%, rgba(234,214,142,0.28), transparent 60%)',
  },
  paper: {
    base: T.paper,
    glow: 'radial-gradient(80% 50% at 80% 10%, rgba(200,128,107,0.18), transparent 60%)',
  },
  sky: { // dusty blue morning
    base: '#E8EEF1',
    glow: 'radial-gradient(80% 50% at 20% 0%, rgba(182,202,212,0.55), transparent 65%), radial-gradient(50% 40% at 80% 100%, rgba(234,214,142,0.22), transparent 60%)',
  },
  lilac: {
    base: '#EFEAF3',
    glow: 'radial-gradient(70% 50% at 70% 0%, rgba(214,207,227,0.7), transparent 60%), radial-gradient(50% 40% at 0% 100%, rgba(168,184,158,0.18), transparent 60%)',
  },
  meadow: { // sage
    base: '#E6EBDF',
    glow: 'radial-gradient(70% 50% at 30% 0%, rgba(168,184,158,0.55), transparent 60%), radial-gradient(40% 40% at 90% 80%, rgba(234,214,142,0.25), transparent 60%)',
  },
  honey: { // butter / sun
    base: '#F2E9C9',
    glow: 'radial-gradient(80% 55% at 50% 0%, rgba(234,214,142,0.9), transparent 60%), radial-gradient(50% 40% at 100% 100%, rgba(200,128,107,0.22), transparent 60%)',
  },
  sunshine: { // warm sunny yellow — happy baby
    base: '#FBEFB6',
    glow: 'radial-gradient(80% 55% at 50% 0%, rgba(255,236,160,0.85), transparent 60%), radial-gradient(60% 40% at 100% 100%, rgba(255,200,160,0.35), transparent 60%)',
  },
  blossom: { // soft warm pink/peach
    base: '#FBE2DA',
    glow: 'radial-gradient(80% 55% at 50% 0%, rgba(255,210,200,0.7), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(234,214,142,0.4), transparent 60%)',
  },
  dusk: {
    base: '#E8DEC9',
    glow: 'radial-gradient(80% 55% at 50% 110%, rgba(200,128,107,0.35), transparent 60%)',
  },
};

// ─────────────────────────────────────────────────────────────
// Page shell — full viewport bg, grain, optional max-width content
// ─────────────────────────────────────────────────────────────
function Page({ tone = 'cream', children, contained = true }) {
  const cfg = PAGE_BG[tone] || PAGE_BG.cream;
  return (
    <div className="page" style={{
      minHeight: '100dvh', width: '100%',
      position: 'relative', isolation: 'isolate',
      background: cfg.base, color: T.ink,
      fontFamily: T.body, overflow: 'hidden',
    }}>
      {/* tinted light wash */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: cfg.glow, zIndex: 0,
      }} />
      {/* paper grain */}
      <PaperGrain />
      <div style={{
        position: 'relative', zIndex: 2,
        minHeight: '100dvh', display: 'flex', flexDirection: 'column',
      }}>
        {contained ? (
          <div style={{
            flex: 1, width: '100%', maxWidth: 1180,
            marginInline: 'auto', padding: 'clamp(20px, 5vw, 56px) clamp(22px, 6vw, 80px)',
            boxSizing: 'border-box',
            display: 'flex', flexDirection: 'column',
          }}>{children}</div>
        ) : children}
      </div>
    </div>
  );
}

// Inline grain texture (svg)
function PaperGrain() {
  return (
    <svg width="100%" height="100%" style={{
      position: 'absolute', inset: 0, opacity: 0.14, mixBlendMode: 'multiply',
      pointerEvents: 'none', zIndex: 1,
    }}>
      <filter id="pg-grain">
        <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" />
        <feColorMatrix values="0 0 0 0 0.30  0 0 0 0 0.18  0 0 0 0 0.10  0 0 0 0.35 0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#pg-grain)" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Buttons
// ─────────────────────────────────────────────────────────────
function PrimaryButton({ children, tone = 'terracotta', onClick, full = false, disabled = false, style = {} }) {
  const bg = T[tone] || tone;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      width: full ? '100%' : 'auto',
      minWidth: 180,
      padding: '17px 32px',
      background: bg, color: T.cream,
      fontFamily: T.sans, fontSize: 16, fontWeight: 500, letterSpacing: 0.4,
      border: 'none', borderRadius: 999, cursor: disabled ? 'not-allowed' : 'pointer',
      boxShadow: '0 1px 0 rgba(58,36,24,0.08), 0 8px 22px rgba(168,101,79,0.18)',
      transition: 'transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, opacity .2s',
      opacity: disabled ? 0.45 : 1,
      ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'translateY(1px)'}
    onMouseUp={e => e.currentTarget.style.transform = ''}
    onMouseLeave={e => e.currentTarget.style.transform = ''}
    >{children}</button>
  );
}

function GhostButton({ children, onClick, full = false, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: full ? '100%' : 'auto',
      padding: '14px 24px',
      background: 'transparent', color: T.ink,
      fontFamily: T.sans, fontSize: 15, fontWeight: 500, letterSpacing: 0.3,
      border: `1px solid ${T.hairline}`, borderRadius: 999, cursor: 'pointer',
      transition: 'background .2s',
      ...style,
    }}
    onMouseEnter={e => e.currentTarget.style.background = 'rgba(58,36,24,0.04)'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >{children}</button>
  );
}

function TextLink({ children, onClick, style = {} }) {
  return (
    <button onClick={onClick} style={{
      background: 'transparent', border: 'none', padding: '6px 0',
      fontFamily: T.sans, fontSize: 14, color: T.inkSoft, cursor: 'pointer',
      textDecoration: 'underline', textDecorationColor: T.inkFaint,
      textUnderlineOffset: 5, textDecorationThickness: '0.5px',
      letterSpacing: 0.2,
      ...style,
    }}>{children}</button>
  );
}

// ─────────────────────────────────────────────────────────────
// Inputs
// ─────────────────────────────────────────────────────────────
function Input({ placeholder, value, onChange, type = 'text', style = {}, onKeyDown }) {
  return (
    <input
      type={type} placeholder={placeholder}
      value={value} onChange={e => onChange && onChange(e.target.value)}
      onKeyDown={onKeyDown}
      style={{
        width: '100%', padding: '16px 4px',
        background: 'transparent', color: T.ink,
        fontFamily: T.sans, fontSize: 17, letterSpacing: 0.2,
        border: 'none', borderBottom: `1px solid ${T.hairline}`,
        outline: 'none', boxSizing: 'border-box',
        ...style,
      }}
      onFocus={e => e.currentTarget.style.borderBottomColor = T.inkSoft}
      onBlur={e => e.currentTarget.style.borderBottomColor = T.hairline}
    />
  );
}

function PaperArea({ placeholder, value, onChange, rows = 6, style = {} }) {
  return (
    <div style={{
      position: 'relative', background: T.paper,
      borderRadius: 16, border: `1px solid ${T.hairline}`,
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
      ...style,
    }}>
      <textarea
        value={value} placeholder={placeholder} rows={rows}
        onChange={e => onChange && onChange(e.target.value)}
        style={{
          width: '100%', minHeight: 160, padding: '22px 24px',
          background: 'transparent', border: 'none', outline: 'none',
          fontFamily: T.body,
          fontSize: 19, lineHeight: 1.55, color: T.ink,
          resize: 'vertical', boxSizing: 'border-box',
          letterSpacing: 0.1,
        }}
      />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Progress dots — soft chocolate, animated
// ─────────────────────────────────────────────────────────────
function ProgressDots({ steps, current }) {
  return (
    <div style={{
      display: 'flex', gap: 8, alignItems: 'center',
      fontFamily: T.sans, fontSize: 11, color: T.inkMuted, letterSpacing: 1.6,
      textTransform: 'uppercase',
    }}>
      <span>{String(current + 1).padStart(2, '0')}</span>
      <div style={{ display: 'flex', gap: 4 }}>
        {steps.map((_, i) => (
          <div key={i} style={{
            width: i === current ? 24 : 6, height: 4, borderRadius: 999,
            background: i <= current ? T.inkSoft : T.hairline,
            transition: 'width .35s cubic-bezier(.2,.7,.3,1), background .35s',
          }} />
        ))}
      </div>
      <span style={{ color: T.inkFaint }}>{String(steps.length).padStart(2, '0')}</span>
    </div>
  );
}

// Tiny header bar with progress
function TopBar({ steps, current, onBack }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      marginBottom: 'clamp(28px, 5vh, 56px)',
    }}>
      <button onClick={onBack} aria-label="indietro" style={{
        background: 'transparent', border: `1px solid ${T.hairline}`,
        width: 38, height: 38, borderRadius: 999,
        padding: 0, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: T.inkSoft, transition: 'background .2s, border-color .2s',
      }}
      onMouseEnter={e => { e.currentTarget.style.background = 'rgba(58,36,24,0.04)'; e.currentTarget.style.borderColor = 'rgba(58,36,24,0.28)'; }}
      onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = T.hairline; }}
      >
        <svg width="18" height="18" viewBox="0 0 20 20">
          <path d="M13 5 L7 10 L13 15" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {steps && <ProgressDots steps={steps} current={current} />}
    </div>
  );
}

Object.assign(window, {
  T, PAGE_BG,
  Page, PaperGrain,
  PrimaryButton, GhostButton, TextLink,
  Input, PaperArea,
  ProgressDots, TopBar,
});