// Theme tokens & SystemCard for each variation

const THEMES = {
  cosy: {
    key: 'cosy',
    name: "Cosy Craftsman",
    tagline: "Warm, traditional, hand-built feel",
    bg:       '#FAF4E8',
    surface:  '#F1E6D2',
    surface2: '#E8D8BB',
    line:     '#D9C7A6',
    ink:      '#2A1C0F',
    body:     '#4A3A2A',
    muted:    '#7C6A52',
    primary:  '#5B3A1F', // walnut
    primaryInk:'#FAF4E8',
    accent:   '#A86A36', // amber walnut
    badge:    '#7A4E2A',
    hFont:    "'Lora', 'Georgia', serif",
    bFont:    "'Source Sans 3', system-ui, sans-serif",
    radius:   12,
    radiusSm: 8,
    shadow:   '0 1px 2px rgba(60,40,20,.06), 0 8px 24px -10px rgba(60,40,20,.18)',
    placeholderStripe: 'rgba(91,58,31,.10)',
    placeholderBg:     '#EAD9BC',
    placeholderInk:    '#7A5A36',
    // hero overlay for placeholder swatches
    swatchHues: ['#5B3A1F','#A86A36','#C9A56A','#E8D8BB','#F1E6D2','#FAF4E8'],
  },
  modern: {
    key: 'modern',
    name: "Modern Earth",
    tagline: "Editorial, magazine-paced, terracotta-led",
    bg:       '#F6EFE3',
    surface:  '#FFFFFF',
    surface2: '#EFE5D2',
    line:     '#E0D3BC',
    ink:      '#1C1A17',
    body:     '#3F3A33',
    muted:    '#7A7166',
    primary:  '#B14A1E', // terracotta
    primaryInk:'#FFF8EE',
    accent:   '#7A3A14',
    badge:    '#1C1A17',
    hFont:    "'DM Serif Display', 'Cormorant Garamond', serif",
    bFont:    "'Work Sans', system-ui, sans-serif",
    radius:   10,
    radiusSm: 8,
    shadow:   '0 1px 1px rgba(28,26,23,.05), 0 12px 30px -16px rgba(28,26,23,.20)',
    placeholderStripe: 'rgba(177,74,30,.10)',
    placeholderBg:     '#EAD9BC',
    placeholderInk:    '#7A4E2A',
    swatchHues: ['#B14A1E','#1C1A17','#EAD9BC','#F6EFE3','#7A3A14','#FFFFFF'],
  },
  botanical: {
    key: 'botanical',
    name: "Quiet Botanical",
    tagline: "Calm, airy, spa-restraint with sage",
    bg:       '#F4F1E8',
    surface:  '#FBF9F2',
    surface2: '#E8E4D5',
    line:     '#D7D1BD',
    ink:      '#262620',
    body:     '#4A4A40',
    muted:    '#827E70',
    primary:  '#6B7A52', // sage
    primaryInk:'#F4F1E8',
    accent:   '#4F5938',
    badge:    '#4F5938',
    hFont:    "'EB Garamond', 'Cormorant Garamond', serif",
    bFont:    "'Public Sans', system-ui, sans-serif",
    radius:   14,
    radiusSm: 10,
    shadow:   '0 1px 2px rgba(40,40,30,.04), 0 10px 30px -16px rgba(40,40,30,.16)',
    placeholderStripe: 'rgba(79,89,56,.10)',
    placeholderBg:     '#E0DDCB',
    placeholderInk:    '#5A6440',
    swatchHues: ['#6B7A52','#4F5938','#B8B49B','#E8E4D5','#F4F1E8','#262620'],
  },
};

// Striped SVG placeholder — given a width/height, a label, and a theme.
function Placeholder({ w, h, label, theme, mode = 'stripes', tone, style }) {
  const id = React.useId();
  const bg = tone || theme.placeholderBg;
  const stripe = theme.placeholderStripe;
  const ink = theme.placeholderInk;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block', borderRadius: 'inherit', ...style }}>
      <defs>
        <pattern id={id} width="22" height="22" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
          <rect width="22" height="22" fill={bg}/>
          <rect width="11" height="22" fill={stripe}/>
        </pattern>
      </defs>
      <rect width={w} height={h} fill={`url(#${id})`}/>
      {label && (
        <g>
          <rect x={w/2 - Math.min(w*0.42, label.length*5.5)} y={h/2 - 14} rx="6" ry="6"
                width={Math.min(w*0.84, label.length*11)} height="28" fill={bg} opacity="0.92"/>
          <text x={w/2} y={h/2 + 5} textAnchor="middle"
                fontFamily="ui-monospace,Menlo,Consolas,monospace" fontSize="12"
                fill={ink} letterSpacing="0.5">
            {label}
          </text>
        </g>
      )}
    </svg>
  );
}

// A wood-grain-ish placeholder (warm, brown, slightly more textured) for floor shots.
function FloorPlaceholder({ w, h, label, theme, hue = 'oak', style }) {
  const id = React.useId();
  const HUES = {
    oak:     { bg: '#D9B47A', dark: '#A87838', ink: '#5A3A18' },
    walnut:  { bg: '#8C5A2E', dark: '#5C3618', ink: '#FFF1DA' },
    grey:    { bg: '#B8AC97', dark: '#7C715D', ink: '#2A2620' },
    cream:   { bg: '#E6D2A6', dark: '#B89360', ink: '#5A3E1A' },
    sage:    { bg: '#A6AC8C', dark: '#6B7A52', ink: '#2A2A20' },
    ash:     { bg: '#C7B998', dark: '#8A7A55', ink: '#3A2E18' },
  };
  const c = HUES[hue] || HUES.oak;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block', borderRadius: 'inherit', ...style }}>
      <defs>
        <linearGradient id={id+'g'} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={c.bg} stopOpacity="1"/>
          <stop offset="1" stopColor={c.dark} stopOpacity=".85"/>
        </linearGradient>
        <pattern id={id} width={w/6} height="14" patternUnits="userSpaceOnUse">
          <rect width={w/6} height="14" fill={c.bg}/>
          <rect width={w/6} height="1" y="13" fill={c.dark} opacity=".55"/>
          <rect width="1" height="14" x={w/12} fill={c.dark} opacity=".25"/>
        </pattern>
      </defs>
      <rect width={w} height={h} fill={`url(#${id+'g'})`}/>
      <rect width={w} height={h} fill={`url(#${id})`} opacity=".75"/>
      {label && (
        <g>
          <rect x={w/2 - Math.min(w*0.42, label.length*5.5)} y={h-44} rx="6" ry="6"
                width={Math.min(w*0.84, label.length*11)} height="26" fill="rgba(0,0,0,.45)"/>
          <text x={w/2} y={h-26} textAnchor="middle"
                fontFamily="ui-monospace,Menlo,Consolas,monospace" fontSize="11"
                fill="#FFF1DA" letterSpacing="0.6">
            {label}
          </text>
        </g>
      )}
    </svg>
  );
}

// Small photo-like placeholder for portraits / rooms / detail crops.
function RoomPlaceholder({ w, h, label, theme, tone = 'warm', style }) {
  const id = React.useId();
  const TONES = {
    warm:  { sky:'#E8D2A8', wall:'#D9BD8C', floor:'#A87838', ink:'#3A2614' },
    cool:  { sky:'#D8DDC9', wall:'#B8B49B', floor:'#6B7A52', ink:'#2A2A20' },
    stone: { sky:'#E2D8C4', wall:'#C7B998', floor:'#8C7A5C', ink:'#3A2E18' },
    cream: { sky:'#F1E6D2', wall:'#E0CFA8', floor:'#B89360', ink:'#5A3E1A' },
    sage:  { sky:'#DCDFC9', wall:'#A6AC8C', floor:'#4F5938', ink:'#2A2A20' },
    dusk:  { sky:'#D7C5A8', wall:'#8C5A2E', floor:'#3A2614', ink:'#FFF1DA' },
  };
  const c = TONES[tone] || TONES.warm;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block', borderRadius: 'inherit', ...style }}>
      <defs>
        <linearGradient id={id+'sky'} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={c.sky}/><stop offset="1" stopColor={c.wall}/>
        </linearGradient>
        <linearGradient id={id+'fl'} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={c.floor} stopOpacity=".9"/>
          <stop offset="1" stopColor={c.floor} stopOpacity="1"/>
        </linearGradient>
        <pattern id={id+'pl'} width={w/8} height="12" patternUnits="userSpaceOnUse">
          <rect width={w/8} height="12" fill={c.floor}/>
          <rect width={w/8} height="1" y="11" fill="#000" opacity=".22"/>
        </pattern>
      </defs>
      <rect width={w} height={h*0.62} fill={`url(#${id+'sky'})`}/>
      <rect y={h*0.62} width={w} height={h*0.38} fill={`url(#${id+'fl'})`}/>
      <rect y={h*0.62} width={w} height={h*0.38} fill={`url(#${id+'pl'})`} opacity=".55"/>
      {/* window-like light */}
      <rect x={w*0.62} y={h*0.10} width={w*0.28} height={h*0.42}
            fill="#FFF8E8" opacity=".35" rx="4"/>
      <rect x={w*0.10} y={h*0.30} width={w*0.18} height={h*0.30}
            fill={c.ink} opacity=".18" rx="3"/>
      {label && (
        <g>
          <rect x={w/2 - Math.min(w*0.42, label.length*5)} y={h-32} rx="5" ry="5"
                width={Math.min(w*0.84, label.length*10)} height="22" fill="rgba(0,0,0,.45)"/>
          <text x={w/2} y={h-17} textAnchor="middle"
                fontFamily="ui-monospace,Menlo,Consolas,monospace" fontSize="10"
                fill="#FFF1DA" letterSpacing="0.4">
            {label}
          </text>
        </g>
      )}
    </svg>
  );
}

// === SystemCard: palette + typography preview ============================
function SystemCard({ theme }) {
  const t = theme;
  const SwatchBlock = ({ label, hex, ink }) => (
    <div style={{ display:'flex', flexDirection:'column', gap:6, minWidth:0 }}>
      <div style={{
        height: 76, background: hex, borderRadius: t.radiusSm,
        border: `1px solid ${t.line}`,
        display:'flex', alignItems:'flex-end', padding:10,
        fontFamily: t.bFont, fontSize: 11, color: ink, letterSpacing:.3,
      }}>{hex.toUpperCase()}</div>
      <div style={{ fontFamily: t.bFont, fontSize: 11, color: t.muted, letterSpacing:.3 }}>{label}</div>
    </div>
  );
  return (
    <div style={{
      width:'100%', height:'100%', background: t.bg, color: t.ink,
      fontFamily: t.bFont, padding: 40, boxSizing:'border-box',
      display:'flex', flexDirection:'column', gap: 28,
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:24 }}>
        <div>
          <div style={{ fontFamily: t.bFont, fontSize: 11, letterSpacing: 2, textTransform:'uppercase', color: t.muted, marginBottom: 8 }}>
            Variation · {t.key === 'cosy' ? 'A' : t.key === 'modern' ? 'B' : 'C'}
          </div>
          <div style={{ fontFamily: t.hFont, fontSize: 54, lineHeight: 1.0, letterSpacing: -1, color: t.ink }}>
            {t.name}
          </div>
          <div style={{ fontFamily: t.bFont, fontSize: 15, color: t.body, marginTop: 10, maxWidth: 520 }}>
            {t.tagline}.
          </div>
        </div>
        <img src="assets/logo-black.png" alt="" style={{ width: 64, height: 64, opacity: .9, filter: t.key==='cosy'?'none':'none' }}/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 12 }}>
        <SwatchBlock label="Primary"    hex={t.primary}  ink={t.primaryInk}/>
        <SwatchBlock label="Accent"     hex={t.accent}   ink={t.primaryInk}/>
        <SwatchBlock label="Surface 2"  hex={t.surface2} ink={t.ink}/>
        <SwatchBlock label="Surface"    hex={t.surface}  ink={t.ink}/>
        <SwatchBlock label="Background" hex={t.bg}       ink={t.ink}/>
        <SwatchBlock label="Ink"        hex={t.ink}      ink={t.bg}/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap: 32, marginTop: 4 }}>
        <div>
          <div style={{ fontFamily: t.bFont, fontSize: 11, letterSpacing: 2, textTransform:'uppercase', color: t.muted, marginBottom: 12 }}>
            Headline · {t.hFont.split(',')[0].replaceAll("'",'')}
          </div>
          <div style={{ fontFamily: t.hFont, fontSize: 48, lineHeight: 1.05, letterSpacing: -.6, color: t.ink }}>
            Floors that feel like home.
          </div>
          <div style={{ fontFamily: t.hFont, fontSize: 22, lineHeight: 1.25, color: t.body, marginTop: 14, fontStyle: t.key==='modern' ? 'normal' : 'italic' }}>
            Aa Bb Cc — 0123456789
          </div>
        </div>
        <div>
          <div style={{ fontFamily: t.bFont, fontSize: 11, letterSpacing: 2, textTransform:'uppercase', color: t.muted, marginBottom: 12 }}>
            Body · {t.bFont.split(',')[0].replaceAll("'",'')}
          </div>
          <div style={{ fontFamily: t.bFont, fontSize: 14.5, lineHeight: 1.55, color: t.body, maxWidth: 380 }}>
            Fin's Flooring supplies, preps and installs across the UK — laminate, LVT and carpet, fitted by our own teams. We level subfloors, test for moisture and lift old floors so every install lasts.
          </div>
          <div style={{ display:'flex', gap: 10, marginTop: 16, flexWrap:'wrap' }}>
            <button style={btnPrimary(t)}>Get a free quote</button>
            <button style={btnGhost(t)}>See our work →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Button styles (used everywhere)
function btnPrimary(t){return{
  fontFamily:t.bFont, fontSize:13.5, fontWeight:600, letterSpacing:.2,
  background:t.primary, color:t.primaryInk, border:'none',
  padding:'12px 20px', borderRadius:t.radiusSm, cursor:'pointer',
  boxShadow: t.shadow,
};}
function btnGhost(t){return{
  fontFamily:t.bFont, fontSize:13.5, fontWeight:600, letterSpacing:.2,
  background:'transparent', color:t.ink, border:`1px solid ${t.line}`,
  padding:'12px 20px', borderRadius:t.radiusSm, cursor:'pointer',
};}
function btnLink(t){return{
  fontFamily:t.bFont, fontSize:13.5, fontWeight:600,
  color:t.primary, textDecoration:'none',
  borderBottom:`1px solid ${t.primary}`, paddingBottom:2,
};}

Object.assign(window, { THEMES, Placeholder, FloorPlaceholder, RoomPlaceholder, SystemCard, btnPrimary, btnGhost, btnLink });