// invites.jsx — Invitation themes + 4 layout styles
// Each invitation card is rendered at any size via CSS aspect-ratio (3:4).
// Inside, we use absolute positioning with % units so the design scales perfectly.

// ─────────────────────────────────────────────────────────────
// THEME PALETTES — each theme has its own colors + decoration set
// ─────────────────────────────────────────────────────────────
const THEMES = {
  bosco: {
    id: 'bosco',
    name: 'Bosco Magico',
    emoji: '🦊',
    palette: {
      bg: '#F4EAD8',
      bg2: '#E8D9BF',
      ink: '#3A3326',
      primary: '#C97A4A',
      secondary: '#7A9966',
      accent: '#D9A441',
      light: '#FFF8EC',
    },
    chips: ['volpe', 'gufo', 'fungo', 'foglia'],
  },
  principesse: {
    id: 'principesse',
    name: 'Principesse',
    emoji: '👑',
    palette: {
      bg: '#FBE6F0',
      bg2: '#F4C8E0',
      ink: '#5C2D4E',
      primary: '#D44C8B',
      secondary: '#A88BD9',
      accent: '#E8B547',
      light: '#FFF5FA',
    },
    chips: ['castello', 'corona', 'stelle', 'rose'],
  },
  spazio: {
    id: 'spazio',
    name: 'Spazio',
    emoji: '🚀',
    palette: {
      bg: '#1B1F3A',
      bg2: '#2D3160',
      ink: '#F4F1E8',
      primary: '#FFB84D',
      secondary: '#7CA8FF',
      accent: '#FF6B9D',
      light: '#F4F1E8',
    },
    chips: ['razzo', 'pianeti', 'stelle', 'luna'],
    dark: true,
  },
  dinosauri: {
    id: 'dinosauri',
    name: 'Dinosauri',
    emoji: '🦕',
    palette: {
      bg: '#E8E4D0',
      bg2: '#D5D0B5',
      ink: '#2D3621',
      primary: '#5A8E3F',
      secondary: '#D97B3F',
      accent: '#E8B547',
      light: '#F7F4E6',
    },
    chips: ['T-Rex', 'felci', 'uova', 'vulcano'],
  },
  unicorni: {
    id: 'unicorni',
    name: 'Unicorni',
    emoji: '🦄',
    palette: {
      bg: '#F5E8FB',
      bg2: '#EBD5F4',
      ink: '#4A2D5E',
      primary: '#B07CE8',
      secondary: '#FF9FCC',
      accent: '#7CD9C8',
      light: '#FBF5FF',
    },
    chips: ['arcobaleno', 'nuvole', 'corno', 'glitter'],
  },
  mare: {
    id: 'mare',
    name: 'Mare',
    emoji: '🌊',
    palette: {
      bg: '#D7EDF1',
      bg2: '#B9DEE5',
      ink: '#1C3A47',
      primary: '#2E8AA8',
      secondary: '#E89B5A',
      accent: '#F0CB52',
      light: '#F0F8FA',
    },
    chips: ['onde', 'pesci', 'conchiglie', 'sirene'],
  },
  coniglietti: {
    id: 'coniglietti',
    name: 'Coniglietti',
    emoji: '🐰',
    palette: {
      bg: '#FBE8E0',
      bg2: '#F4D2C5',
      ink: '#4A2D26',
      primary: '#E89570',
      secondary: '#9DBB7C',
      accent: '#F0C25A',
      light: '#FFF6F0',
    },
    chips: ['carote', 'orecchie', 'fiori', 'campagna'],
  },
  fattoria: {
    id: 'fattoria',
    name: 'Fattoria',
    emoji: '🐔',
    palette: {
      bg: '#FAEBC8',
      bg2: '#EFD89F',
      ink: '#3A2E1A',
      primary: '#D67A3F',
      secondary: '#B85040',
      accent: '#88A656',
      light: '#FFF8E8',
    },
    chips: ['fienile', 'galline', 'mucche', 'trattore'],
  },
  sport: {
    id: 'sport',
    name: 'Sport',
    emoji: '⚽',
    palette: {
      bg: '#E8F1E0',
      bg2: '#CFE0BD',
      ink: '#1F2D1B',
      primary: '#3F8B3F',
      secondary: '#1F4E8A',
      accent: '#F0B23C',
      light: '#F4F9EE',
    },
    chips: ['pallone', 'campo', 'medaglie', 'fischio'],
  },
  pirati: {
    id: 'pirati',
    name: 'Pirati',
    emoji: '🏴‍☠️',
    palette: {
      bg: '#E5DCC5',
      bg2: '#C9B98F',
      ink: '#2A1F12',
      primary: '#8B3A2D',
      secondary: '#1F4D5C',
      accent: '#D4A537',
      light: '#F5EFD9',
    },
    chips: ['nave', 'tesoro', 'mappa', 'teschio'],
  },
  fate: {
    id: 'fate',
    name: 'Fate del bosco',
    emoji: '🧚',
    palette: {
      bg: '#E8F0E0',
      bg2: '#C9DEC1',
      ink: '#2D3A2D',
      primary: '#7BA86D',
      secondary: '#D49BC8',
      accent: '#F0D060',
      light: '#F5FAEF',
    },
    chips: ['ali', 'funghi', 'lucciole', 'magia'],
  },
  robot: {
    id: 'robot',
    name: 'Robot',
    emoji: '🤖',
    palette: {
      bg: '#1A2334',
      bg2: '#293754',
      ink: '#E8F4FF',
      primary: '#00D9FF',
      secondary: '#FF3B7B',
      accent: '#FFE74C',
      light: '#E8F4FF',
    },
    chips: ['ingranaggi', 'antenne', 'pixel', 'circuiti'],
    dark: true,
  },
  dolci: {
    id: 'dolci',
    name: 'Pasticceria',
    emoji: '🧁',
    palette: {
      bg: '#FBE4E8',
      bg2: '#F5C5CF',
      ink: '#5C2434',
      primary: '#E85A7A',
      secondary: '#7CB8A8',
      accent: '#F5C054',
      light: '#FFF0F4',
    },
    chips: ['torta', 'cupcake', 'donut', 'caramelle'],
  },
  musica: {
    id: 'musica',
    name: 'Musica · Disco',
    emoji: '🎵',
    palette: {
      bg: '#1F1239',
      bg2: '#3A1F5C',
      ink: '#F5E8FF',
      primary: '#FF4FAF',
      secondary: '#4FE3D9',
      accent: '#FFD24F',
      light: '#F5E8FF',
    },
    chips: ['note', 'disco', 'cuffie', 'neon'],
    dark: true,
  },
  custom: {
    id: 'custom',
    name: 'Carica personaggio',
    emoji: '🖼️',
    custom: true,
    palette: {
      bg: '#F4F0FF',
      bg2: '#E5DCF7',
      ink: '#2D2438',
      primary: '#8B7CF8',
      secondary: '#FF6B9D',
      accent: '#FFB84D',
      light: '#FAF7FF',
    },
    chips: ['Bing', 'Peppa', 'Paw Patrol', 'altro'],
  },
};

// ─────────────────────────────────────────────────────────────
// SHAPE LIBRARY — simple geometric primitives we layer to make
// each theme. No complex hand-drawn SVGs.
// ─────────────────────────────────────────────────────────────

function Star({ size = 16, color = '#000', filled = true, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M12 2 L14.6 8.6 L21.5 9.2 L16.2 13.8 L17.8 20.5 L12 16.9 L6.2 20.5 L7.8 13.8 L2.5 9.2 L9.4 8.6 Z"
        fill={filled ? color : 'none'} stroke={color} strokeWidth={filled ? 0 : 1.5} strokeLinejoin="round"/>
    </svg>
  );
}
function Heart({ size = 16, color = '#000', style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M12 21 C 12 21, 3 14.5, 3 8.5 C 3 5.5, 5.5 3, 8.5 3 C 10.4 3, 12 4.4, 12 4.4 C 12 4.4, 13.6 3, 15.5 3 C 18.5 3, 21 5.5, 21 8.5 C 21 14.5, 12 21, 12 21 Z" fill={color}/>
    </svg>
  );
}
function Dot({ size = 8, color = '#000', style = {} }) {
  return <div style={{ width: size, height: size, borderRadius: '50%', background: color, ...style }} />;
}
function Sparkle({ size = 14, color = '#000', style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M12 2 L13 11 L22 12 L13 13 L12 22 L11 13 L2 12 L11 11 Z" fill={color}/>
    </svg>
  );
}
function Confetti({ size = 12, color = '#000', rotate = 0, style = {} }) {
  return (
    <div style={{
      width: size, height: size * 0.4, background: color, borderRadius: 2,
      transform: `rotate(${rotate}deg)`, ...style,
    }} />
  );
}

// Theme decoration sets — each returns SVG elements positioned absolutely
function ThemeDecorations({ theme, density = 'normal' }) {
  const p = theme.palette;
  const items = [];

  if (theme.id === 'bosco') {
    // mushrooms, leaves, dots
    items.push(<MushroomDeco key="m1" color={p.primary} cap={p.accent} style={{ left: '6%', top: '18%' }} size={28} />);
    items.push(<LeafDeco key="l1" color={p.secondary} style={{ right: '8%', top: '14%' }} size={32} rotate={-20} />);
    items.push(<LeafDeco key="l2" color={p.secondary} style={{ left: '12%', bottom: '14%' }} size={26} rotate={45} />);
    items.push(<MushroomDeco key="m2" color={p.primary} cap={p.accent} style={{ right: '10%', bottom: '10%' }} size={22} />);
    items.push(<Dot key="d1" size={6} color={p.primary} style={{ position: 'absolute', left: '20%', top: '50%' }} />);
    items.push(<Dot key="d2" size={4} color={p.secondary} style={{ position: 'absolute', right: '22%', top: '46%' }} />);
  } else if (theme.id === 'principesse') {
    items.push(<CrownDeco key="c1" color={p.accent} style={{ left: '8%', top: '14%' }} size={30} />);
    items.push(<Star key="s1" size={22} color={p.accent} style={{ position: 'absolute', right: '10%', top: '20%' }} />);
    items.push(<Heart key="h1" size={18} color={p.primary} style={{ position: 'absolute', left: '14%', bottom: '18%' }} />);
    items.push(<Heart key="h2" size={14} color={p.secondary} style={{ position: 'absolute', right: '14%', bottom: '14%' }} />);
    items.push(<Sparkle key="sp1" size={16} color={p.accent} style={{ position: 'absolute', left: '22%', top: '40%' }} />);
    items.push(<Sparkle key="sp2" size={12} color={p.primary} style={{ position: 'absolute', right: '24%', top: '52%' }} />);
  } else if (theme.id === 'spazio') {
    items.push(<PlanetDeco key="p1" color={p.primary} ring={p.secondary} style={{ left: '6%', top: '14%' }} size={36} />);
    items.push(<RocketDeco key="r1" color={p.accent} body={p.light} style={{ right: '8%', top: '12%' }} size={32} />);
    items.push(<Star key="s1" size={10} color={p.light} style={{ position: 'absolute', left: '22%', top: '38%' }} />);
    items.push(<Star key="s2" size={14} color={p.primary} style={{ position: 'absolute', right: '24%', top: '46%' }} />);
    items.push(<Star key="s3" size={8} color={p.light} style={{ position: 'absolute', left: '12%', bottom: '20%' }} />);
    items.push(<Star key="s4" size={10} color={p.secondary} style={{ position: 'absolute', right: '14%', bottom: '15%' }} />);
    items.push(<Dot key="d1" size={3} color={p.light} style={{ position: 'absolute', left: '50%', top: '8%' }} />);
    items.push(<Dot key="d2" size={4} color={p.light} style={{ position: 'absolute', left: '34%', top: '70%' }} />);
  } else if (theme.id === 'dinosauri') {
    items.push(<DinoDeco key="d1" color={p.primary} style={{ left: '6%', top: '16%' }} size={36} />);
    items.push(<LeafDeco key="l1" color={p.primary} style={{ right: '6%', top: '14%' }} size={36} rotate={20} />);
    items.push(<EggDeco key="e1" color={p.secondary} dot={p.accent} style={{ left: '14%', bottom: '14%' }} size={22} />);
    items.push(<EggDeco key="e2" color={p.accent} dot={p.primary} style={{ right: '12%', bottom: '16%' }} size={20} />);
    items.push(<LeafDeco key="l2" color={p.primary} style={{ left: '24%', top: '46%' }} size={20} rotate={-30} />);
  } else if (theme.id === 'unicorni') {
    items.push(<RainbowArc key="r1" colors={[p.primary, p.secondary, p.accent]} style={{ left: '-15%', top: '8%' }} size={140} />);
    items.push(<CloudDeco key="c1" color="#fff" style={{ right: '-8%', top: '16%' }} size={70} />);
    items.push(<Heart key="h1" size={14} color={p.primary} style={{ position: 'absolute', left: '20%', bottom: '20%' }} />);
    items.push(<Sparkle key="s1" size={16} color={p.primary} style={{ position: 'absolute', right: '14%', top: '46%' }} />);
    items.push(<Sparkle key="s2" size={12} color={p.accent} style={{ position: 'absolute', left: '14%', top: '50%' }} />);
    items.push(<CloudDeco key="c2" color="#fff" style={{ left: '-6%', bottom: '8%' }} size={50} />);
  } else if (theme.id === 'mare') {
    items.push(<WaveDeco key="w1" color={p.primary} style={{ left: '0', bottom: '0' }} />);
    items.push(<FishDeco key="f1" color={p.secondary} style={{ left: '8%', top: '14%' }} size={26} />);
    items.push(<FishDeco key="f2" color={p.accent} style={{ right: '10%', top: '18%' }} size={22} flip />);
    items.push(<ShellDeco key="s1" color={p.secondary} style={{ left: '14%', bottom: '20%' }} size={22} />);
    items.push(<Dot key="b1" size={6} color={p.primary} style={{ position: 'absolute', right: '20%', top: '38%', opacity: 0.5 }} />);
    items.push(<Dot key="b2" size={4} color={p.primary} style={{ position: 'absolute', right: '26%', top: '46%', opacity: 0.4 }} />);
  } else if (theme.id === 'coniglietti') {
    items.push(<BunnyDeco key="b1" color={p.ink} ear={p.primary} style={{ left: '8%', top: '14%' }} size={32} />);
    items.push(<CarrotDeco key="c1" color={p.primary} leaf={p.secondary} style={{ right: '10%', top: '18%' }} size={26} />);
    items.push(<FlowerDeco key="f1" color={p.accent} center={p.ink} style={{ left: '14%', bottom: '16%' }} size={20} />);
    items.push(<FlowerDeco key="f2" color={p.primary} center={p.accent} style={{ right: '14%', bottom: '14%' }} size={16} />);
    items.push(<Dot key="d1" size={5} color={p.secondary} style={{ position: 'absolute', left: '24%', top: '40%' }} />);
  } else if (theme.id === 'fattoria') {
    items.push(<BarnDeco key="b1" color={p.secondary} roof={p.ink} style={{ left: '6%', top: '14%' }} size={36} />);
    items.push(<ChickenDeco key="c1" color={p.light} comb={p.secondary} style={{ right: '10%', top: '20%' }} size={26} />);
    items.push(<FlowerDeco key="f1" color={p.accent} center={p.primary} style={{ left: '20%', bottom: '14%' }} size={18} />);
    items.push(<Dot key="d1" size={6} color={p.accent} style={{ position: 'absolute', right: '22%', bottom: '20%' }} />);
  } else if (theme.id === 'sport') {
    items.push(<BallDeco key="b1" color={p.light} dark={p.ink} style={{ left: '8%', top: '16%' }} size={30} />);
    items.push(<TrophyDeco key="t1" color={p.accent} style={{ right: '10%', top: '14%' }} size={28} />);
    items.push(<Star key="s1" size={14} color={p.accent} style={{ position: 'absolute', left: '20%', bottom: '18%' }} />);
    items.push(<BallDeco key="b2" color={p.light} dark={p.ink} style={{ right: '12%', bottom: '14%' }} size={20} />);
    items.push(<Dot key="d1" size={5} color={p.secondary} style={{ position: 'absolute', left: '40%', top: '44%' }} />);
  } else if (theme.id === 'pirati') {
    items.push(<ShipDeco key="s1" color={p.primary} sail={p.light} style={{ left: '6%', top: '14%' }} size={36} />);
    items.push(<SkullDeco key="sk1" color={p.ink} style={{ right: '8%', top: '14%' }} size={26} />);
    items.push(<TreasureDeco key="t1" color={p.accent} chest={p.primary} style={{ left: '12%', bottom: '14%' }} size={26} />);
    items.push(<Star key="st1" size={12} color={p.accent} style={{ position: 'absolute', right: '14%', bottom: '18%' }} />);
    items.push(<Dot key="d1" size={4} color={p.secondary} style={{ position: 'absolute', left: '40%', top: '40%' }} />);
  } else if (theme.id === 'fate') {
    items.push(<WingDeco key="w1" color={p.secondary} style={{ left: '8%', top: '14%' }} size={32} />);
    items.push(<MushroomDeco key="m1" color={p.primary} cap={p.secondary} style={{ right: '8%', top: '16%' }} size={26} />);
    items.push(<Sparkle key="sp1" size={16} color={p.accent} style={{ position: 'absolute', left: '20%', bottom: '20%' }} />);
    items.push(<Sparkle key="sp2" size={12} color={p.primary} style={{ position: 'absolute', right: '18%', bottom: '14%' }} />);
    items.push(<FlowerDeco key="f1" color={p.secondary} center={p.accent} style={{ left: '30%', top: '46%' }} size={18} />);
    items.push(<Dot key="d1" size={4} color={p.accent} style={{ position: 'absolute', right: '30%', top: '40%' }} />);
  } else if (theme.id === 'robot') {
    items.push(<RobotDeco key="r1" color={p.primary} eye={p.secondary} style={{ left: '6%', top: '14%' }} size={36} />);
    items.push(<GearDeco key="g1" color={p.accent} style={{ right: '8%', top: '14%' }} size={28} />);
    items.push(<PixelGrid key="p1" color={p.secondary} style={{ left: '20%', bottom: '16%' }} size={22} />);
    items.push(<Dot key="d1" size={4} color={p.primary} style={{ position: 'absolute', right: '14%', bottom: '20%', boxShadow: `0 0 6px ${p.primary}` }} />);
    items.push(<Dot key="d2" size={3} color={p.accent} style={{ position: 'absolute', right: '22%', bottom: '14%', boxShadow: `0 0 4px ${p.accent}` }} />);
  } else if (theme.id === 'dolci') {
    items.push(<CupcakeDeco key="c1" color={p.primary} cream={p.light} cherry={p.secondary} style={{ left: '8%', top: '14%' }} size={32} />);
    items.push(<DonutDeco key="d1" color={p.accent} icing={p.primary} style={{ right: '10%', top: '16%' }} size={28} />);
    items.push(<CandyDeco key="ca1" color={p.primary} stripe={p.light} style={{ left: '14%', bottom: '14%' }} size={22} />);
    items.push(<Heart key="h1" size={14} color={p.primary} style={{ position: 'absolute', right: '14%', bottom: '18%' }} />);
    items.push(<Sparkle key="sp1" size={12} color={p.accent} style={{ position: 'absolute', left: '40%', top: '44%' }} />);
  } else if (theme.id === 'musica') {
    items.push(<NoteDeco key="n1" color={p.primary} style={{ left: '10%', top: '14%' }} size={26} />);
    items.push(<NoteDeco key="n2" color={p.secondary} style={{ right: '12%', top: '20%' }} size={22} />);
    items.push(<DiscoBall key="db1" color={p.accent} style={{ left: '40%', top: '10%' }} size={28} />);
    items.push(<NoteDeco key="n3" color={p.accent} style={{ left: '14%', bottom: '18%' }} size={20} />);
    items.push(<Star key="s1" size={10} color={p.primary} style={{ position: 'absolute', right: '20%', bottom: '20%', boxShadow: `0 0 8px ${p.primary}` }} />);
    items.push(<Dot key="d1" size={4} color={p.secondary} style={{ position: 'absolute', left: '50%', top: '40%' }} />);
  } else if (theme.id === 'custom') {
    items.push(<Sparkle key="s1" size={18} color={p.primary} style={{ position: 'absolute', left: '10%', top: '14%' }} />);
    items.push(<Sparkle key="s2" size={14} color={p.secondary} style={{ position: 'absolute', right: '12%', top: '20%' }} />);
    items.push(<Heart key="h1" size={16} color={p.secondary} style={{ position: 'absolute', left: '14%', bottom: '18%' }} />);
    items.push(<Star key="st1" size={14} color={p.accent} style={{ position: 'absolute', right: '14%', bottom: '14%' }} />);
  }
  return <>{items}</>;
}

// More decoration components for new themes
function BunnyDeco({ color, ear, size = 30, style = {} }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 24 28" style={{ position: 'absolute', ...style }}>
      <ellipse cx="8" cy="6" rx="3" ry="5" fill={ear}/>
      <ellipse cx="16" cy="6" rx="3" ry="5" fill={ear}/>
      <circle cx="12" cy="16" r="7" fill={color}/>
      <circle cx="10" cy="15" r="1" fill="#fff"/>
      <circle cx="14" cy="15" r="1" fill="#fff"/>
      <circle cx="12" cy="18" r="1" fill={ear}/>
    </svg>
  );
}
function CarrotDeco({ color, leaf, size = 24, style = {} }) {
  return (
    <svg width={size} height={size * 1.4} viewBox="0 0 20 28" style={{ position: 'absolute', ...style }}>
      <path d="M10 8 L 14 26 L 6 26 Z" fill={color}/>
      <path d="M10 8 L 6 2 M 10 8 L 10 1 M 10 8 L 14 2" stroke={leaf} strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  );
}
function FlowerDeco({ color, center, size = 20, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <circle cx="12" cy="4" r="4" fill={color}/>
      <circle cx="20" cy="12" r="4" fill={color}/>
      <circle cx="12" cy="20" r="4" fill={color}/>
      <circle cx="4" cy="12" r="4" fill={color}/>
      <circle cx="12" cy="12" r="3.5" fill={center}/>
    </svg>
  );
}
function BarnDeco({ color, roof, size = 36, style = {} }) {
  return (
    <svg width={size} height={size * 0.9} viewBox="0 0 36 32" style={{ position: 'absolute', ...style }}>
      <path d="M2 14 L 18 4 L 34 14 L 30 14 L 30 28 L 6 28 L 6 14 Z" fill={color}/>
      <path d="M2 14 L 18 4 L 34 14 L 30 14 L 18 8 L 6 14 Z" fill={roof}/>
      <rect x="15" y="18" width="6" height="10" fill={roof} opacity="0.6"/>
    </svg>
  );
}
function ChickenDeco({ color, comb, size = 24, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <ellipse cx="12" cy="15" rx="7" ry="6" fill={color}/>
      <circle cx="16" cy="9" r="4" fill={color}/>
      <path d="M14 5 L 17 3 L 19 6 Z" fill={comb}/>
      <path d="M19 9 L 22 9 L 20 11 Z" fill={comb}/>
      <circle cx="17" cy="8" r="0.8" fill="#000"/>
    </svg>
  );
}
function BallDeco({ color, dark, size = 28, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <circle cx="12" cy="12" r="10" fill={color} stroke={dark} strokeWidth="1"/>
      <path d="M12 6 L 14 9 L 12 12 L 10 9 Z M 6 12 L 9 13 L 9 16 L 6 14 Z M 18 12 L 15 13 L 15 16 L 18 14 Z" fill={dark}/>
      <path d="M12 6 L 12 3 M 6 12 L 3 12 M 18 12 L 21 12 M 9 16 L 8 19 M 15 16 L 16 19" stroke={dark} strokeWidth="1.2"/>
    </svg>
  );
}
function TrophyDeco({ color, size = 26, style = {} }) {
  return (
    <svg width={size} height={size * 1.1} viewBox="0 0 24 26" style={{ position: 'absolute', ...style }}>
      <path d="M6 4 H 18 V 12 C 18 16, 15 18, 12 18 C 9 18, 6 16, 6 12 Z" fill={color}/>
      <path d="M6 6 H 3 C 3 10, 5 11, 6 11 M 18 6 H 21 C 21 10, 19 11, 18 11" stroke={color} strokeWidth="1.8" fill="none"/>
      <rect x="10" y="18" width="4" height="4" fill={color}/>
      <rect x="7" y="21" width="10" height="3" rx="1" fill={color}/>
    </svg>
  );
}

// New decorations: pirati, fate, robot, dolci, musica
function ShipDeco({ color, sail, size = 32, style = {} }) {
  return (
    <svg width={size * 1.2} height={size} viewBox="0 0 38 32" style={{ position: 'absolute', ...style }}>
      <path d="M3 22 L 35 22 L 31 28 L 7 28 Z" fill={color}/>
      <rect x="18" y="6" width="2" height="16" fill={color}/>
      <path d="M20 8 L 28 14 L 20 14 Z" fill={sail}/>
      <path d="M18 8 L 10 14 L 18 14 Z" fill={sail}/>
      <path d="M14 4 L 18 4 L 16 8 Z" fill="#C0382B"/>
    </svg>
  );
}
function SkullDeco({ color, size = 24, style = {} }) {
  return (
    <svg width={size} height={size * 1.1} viewBox="0 0 24 26" style={{ position: 'absolute', ...style }}>
      <path d="M12 2 C 5 2, 3 8, 4 14 C 4 17, 5 19, 7 20 L 7 23 L 10 23 L 10 20 L 14 20 L 14 23 L 17 23 L 17 20 C 19 19, 20 17, 20 14 C 21 8, 19 2, 12 2 Z" fill={color}/>
      <circle cx="9" cy="12" r="2" fill="#fff"/>
      <circle cx="15" cy="12" r="2" fill="#fff"/>
      <path d="M11 17 L 13 17" stroke="#fff" strokeWidth="1"/>
    </svg>
  );
}
function TreasureDeco({ color, chest, size = 26, style = {} }) {
  return (
    <svg width={size} height={size * 0.9} viewBox="0 0 26 24" style={{ position: 'absolute', ...style }}>
      <rect x="3" y="10" width="20" height="12" rx="1" fill={chest}/>
      <path d="M3 10 C 3 4, 23 4, 23 10 L 23 13 L 3 13 Z" fill={chest}/>
      <rect x="11" y="11" width="4" height="5" rx="0.5" fill={color}/>
      <circle cx="13" cy="2" r="1.5" fill={color}/>
      <circle cx="8" cy="3" r="1" fill={color}/>
      <circle cx="18" cy="3" r="1" fill={color}/>
    </svg>
  );
}
function WingDeco({ color, size = 28, style = {} }) {
  return (
    <svg width={size * 1.4} height={size} viewBox="0 0 36 26" style={{ position: 'absolute', ...style }}>
      <path d="M18 13 C 6 4, 2 10, 4 18 C 6 24, 14 22, 18 13 Z" fill={color} opacity="0.8"/>
      <path d="M18 13 C 30 4, 34 10, 32 18 C 30 24, 22 22, 18 13 Z" fill={color} opacity="0.8"/>
      <circle cx="9" cy="12" r="1.5" fill="#fff" opacity="0.5"/>
      <circle cx="27" cy="12" r="1.5" fill="#fff" opacity="0.5"/>
    </svg>
  );
}
function RobotDeco({ color, eye, size = 32, style = {} }) {
  return (
    <svg width={size} height={size * 1.1} viewBox="0 0 28 30" style={{ position: 'absolute', ...style }}>
      <line x1="14" y1="2" x2="14" y2="6" stroke={color} strokeWidth="1.5"/>
      <circle cx="14" cy="2" r="1.5" fill={eye}/>
      <rect x="6" y="6" width="16" height="14" rx="3" fill={color}/>
      <rect x="9" y="10" width="3.5" height="3.5" rx="1" fill={eye}/>
      <rect x="15.5" y="10" width="3.5" height="3.5" rx="1" fill={eye}/>
      <rect x="11" y="16" width="6" height="1.5" rx="0.5" fill={eye}/>
      <rect x="9" y="20" width="10" height="8" rx="1" fill={color}/>
    </svg>
  );
}
function GearDeco({ color, size = 24, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <path d="M12 2 L 14 5 L 17 4 L 17 7 L 20 9 L 19 12 L 22 14 L 19 16 L 20 19 L 17 19 L 16 22 L 13 21 L 12 24 L 10 21 L 7 22 L 6 19 L 3 19 L 4 16 L 1 14 L 4 12 L 3 9 L 6 7 L 6 4 L 9 5 Z" fill={color}/>
      <circle cx="12" cy="13" r="3.5" fill="none" stroke="#000" strokeWidth="1" opacity="0.3"/>
    </svg>
  );
}
function PixelGrid({ color, size = 22, style = {} }) {
  return (
    <div style={{ position: 'absolute', display: 'grid', gridTemplateColumns: 'repeat(4, 4px)', gridTemplateRows: 'repeat(4, 4px)', gap: 1, ...style }}>
      {[1,1,0,1, 1,1,1,0, 0,1,1,1, 1,0,1,1].map((v, i) => (
        <div key={i} style={{ width: 4, height: 4, background: v ? color : 'transparent' }}/>
      ))}
    </div>
  );
}
function CupcakeDeco({ color, cream, cherry, size = 28, style = {} }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 24 28" style={{ position: 'absolute', ...style }}>
      <path d="M5 14 L 7 26 L 17 26 L 19 14 Z" fill={color}/>
      <path d="M4 14 L 20 14 L 19 17 L 5 17 Z" fill={color} opacity="0.7"/>
      <path d="M6 14 C 6 8, 10 7, 12 9 C 14 7, 18 8, 18 14 Z" fill={cream}/>
      <circle cx="12" cy="6" r="2" fill={cherry}/>
      <line x1="12" y1="4" x2="12" y2="2" stroke={cherry} strokeWidth="1"/>
    </svg>
  );
}
function DonutDeco({ color, icing, size = 26, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <circle cx="12" cy="12" r="10" fill={color}/>
      <path d="M2 12 a 10 10 0 0 1 20 0 a 10 10 0 0 1 -20 0 M 5 10 C 7 8, 11 7, 14 9 C 17 11, 21 9, 22 11 L 22 13 a 10 10 0 0 1 -20 0 Z" fill={icing}/>
      <circle cx="12" cy="12" r="3.5" fill="#fff"/>
      <circle cx="8" cy="8" r="0.8" fill="#fff"/>
      <circle cx="16" cy="9" r="0.8" fill="#fff"/>
      <circle cx="17" cy="14" r="0.8" fill="#fff"/>
      <circle cx="7" cy="13" r="0.8" fill="#fff"/>
    </svg>
  );
}
function CandyDeco({ color, stripe, size = 22, style = {} }) {
  return (
    <svg width={size * 1.5} height={size * 0.8} viewBox="0 0 30 16" style={{ position: 'absolute', ...style }}>
      <rect x="9" y="4" width="12" height="8" rx="2" fill={color}/>
      <path d="M9 4 L 12 8 L 9 12 M 21 4 L 18 8 L 21 12" stroke={color} strokeWidth="3" strokeLinejoin="round" fill={color}/>
      <line x1="13" y1="4" x2="13" y2="12" stroke={stripe} strokeWidth="1"/>
      <line x1="17" y1="4" x2="17" y2="12" stroke={stripe} strokeWidth="1"/>
    </svg>
  );
}
function NoteDeco({ color, size = 24, style = {} }) {
  return (
    <svg width={size * 0.8} height={size} viewBox="0 0 18 24" style={{ position: 'absolute', ...style }}>
      <ellipse cx="5" cy="19" rx="3.5" ry="2.5" fill={color}/>
      <rect x="7.5" y="4" width="1.5" height="16" fill={color}/>
      <path d="M9 4 L 16 1 L 16 7 L 9 10 Z" fill={color}/>
    </svg>
  );
}
function DiscoBall({ color, size = 28, style = {} }) {
  return (
    <svg width={size} height={size * 1.2} viewBox="0 0 24 28" style={{ position: 'absolute', ...style }}>
      <line x1="12" y1="0" x2="12" y2="6" stroke={color} strokeWidth="1"/>
      <circle cx="12" cy="14" r="8" fill={color}/>
      <line x1="4" y1="14" x2="20" y2="14" stroke="#fff" strokeWidth="0.5" opacity="0.7"/>
      <line x1="6" y1="9" x2="18" y2="9" stroke="#fff" strokeWidth="0.5" opacity="0.7"/>
      <line x1="6" y1="19" x2="18" y2="19" stroke="#fff" strokeWidth="0.5" opacity="0.7"/>
      <line x1="12" y1="6" x2="12" y2="22" stroke="#fff" strokeWidth="0.5" opacity="0.7"/>
      <ellipse cx="9" cy="11" rx="1.5" ry="1" fill="#fff" opacity="0.6"/>
    </svg>
  );
}

// ─── Per-theme decoration components ─────────────────────────
function MushroomDeco({ color, cap, size = 24, style = {} }) {
  return (
    <svg width={size} height={size * 1.1} viewBox="0 0 24 26" style={{ position: 'absolute', ...style }}>
      <path d="M3 12 C 3 6, 8 3, 12 3 C 16 3, 21 6, 21 12 Z" fill={cap}/>
      <circle cx="9" cy="9" r="1.5" fill="#fff" opacity="0.9"/>
      <circle cx="15" cy="8" r="1.2" fill="#fff" opacity="0.9"/>
      <rect x="9" y="12" width="6" height="11" rx="2" fill={color === cap ? '#fff' : '#FFF8EC'}/>
    </svg>
  );
}
function LeafDeco({ color, size = 24, rotate = 0, style = {} }) {
  return (
    <svg width={size} height={size * 1.4} viewBox="0 0 20 28" style={{ position: 'absolute', transform: `rotate(${rotate}deg)`, ...style }}>
      <path d="M10 2 C 14 4, 18 10, 18 18 C 18 24, 14 26, 10 26 C 6 26, 2 24, 2 18 C 2 10, 6 4, 10 2 Z" fill={color}/>
      <line x1="10" y1="4" x2="10" y2="24" stroke="#fff" strokeWidth="0.8" opacity="0.5"/>
    </svg>
  );
}
function CrownDeco({ color, size = 24, style = {} }) {
  return (
    <svg width={size} height={size * 0.8} viewBox="0 0 30 24" style={{ position: 'absolute', ...style }}>
      <path d="M3 20 L3 8 L9 13 L15 5 L21 13 L27 8 L27 20 Z" fill={color}/>
      <circle cx="3" cy="8" r="1.8" fill={color}/>
      <circle cx="15" cy="5" r="2.2" fill={color}/>
      <circle cx="27" cy="8" r="1.8" fill={color}/>
      <rect x="4" y="20" width="22" height="3" rx="1" fill={color} opacity="0.7"/>
    </svg>
  );
}
function PlanetDeco({ color, ring, size = 32, style = {} }) {
  return (
    <svg width={size * 1.6} height={size * 1.2} viewBox="0 0 50 40" style={{ position: 'absolute', ...style }}>
      <ellipse cx="25" cy="20" rx="22" ry="6" fill="none" stroke={ring} strokeWidth="2.5"/>
      <circle cx="25" cy="18" r="11" fill={color}/>
      <circle cx="22" cy="15" r="2.5" fill="#fff" opacity="0.4"/>
    </svg>
  );
}
function RocketDeco({ color, body, size = 30, style = {} }) {
  return (
    <svg width={size * 0.7} height={size * 1.2} viewBox="0 0 22 36" style={{ position: 'absolute', ...style }}>
      <path d="M11 2 C 14 6, 16 12, 16 20 L 16 26 L 6 26 L 6 20 C 6 12, 8 6, 11 2 Z" fill={body}/>
      <circle cx="11" cy="14" r="3" fill={color}/>
      <path d="M6 20 L 2 28 L 6 26 Z" fill={color}/>
      <path d="M16 20 L 20 28 L 16 26 Z" fill={color}/>
      <path d="M9 26 L 11 34 L 13 26 Z" fill={color} opacity="0.7"/>
    </svg>
  );
}
function DinoDeco({ color, size = 32, style = {} }) {
  return (
    <svg width={size * 1.2} height={size} viewBox="0 0 38 30" style={{ position: 'absolute', ...style }}>
      <path d="M5 24 C 5 16, 10 12, 16 12 L 16 6 C 18 4, 20 4, 22 6 L 22 12 C 28 12, 33 16, 33 24 L 30 24 L 28 28 L 25 24 L 13 24 L 11 28 L 8 24 Z" fill={color}/>
      <circle cx="20" cy="9" r="1.2" fill="#fff"/>
      <path d="M16 12 L 14 8 M19 11 L 18 7 M22 12 L 24 8" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}
function EggDeco({ color, dot, size = 22, style = {} }) {
  return (
    <svg width={size} height={size * 1.3} viewBox="0 0 20 26" style={{ position: 'absolute', ...style }}>
      <ellipse cx="10" cy="14" rx="9" ry="11" fill={color}/>
      <circle cx="6" cy="10" r="1.5" fill={dot}/>
      <circle cx="13" cy="14" r="1.2" fill={dot}/>
      <circle cx="9" cy="18" r="1.3" fill={dot}/>
    </svg>
  );
}
function RainbowArc({ colors, size = 100, style = {} }) {
  const r1 = size / 2;
  const r2 = r1 - 8;
  const r3 = r2 - 8;
  const cx = size / 2, cy = size / 2;
  return (
    <svg width={size} height={size / 2 + 4} viewBox={`0 0 ${size} ${size / 2 + 4}`} style={{ position: 'absolute', ...style }}>
      <path d={`M ${cx - r1} ${cy} A ${r1} ${r1} 0 0 1 ${cx + r1} ${cy}`} stroke={colors[0]} strokeWidth="8" fill="none"/>
      <path d={`M ${cx - r2} ${cy} A ${r2} ${r2} 0 0 1 ${cx + r2} ${cy}`} stroke={colors[1]} strokeWidth="8" fill="none"/>
      <path d={`M ${cx - r3} ${cy} A ${r3} ${r3} 0 0 1 ${cx + r3} ${cy}`} stroke={colors[2]} strokeWidth="8" fill="none"/>
    </svg>
  );
}
function CloudDeco({ color, size = 60, style = {} }) {
  return (
    <svg width={size} height={size * 0.6} viewBox="0 0 60 36" style={{ position: 'absolute', ...style }}>
      <ellipse cx="14" cy="22" rx="11" ry="11" fill={color}/>
      <ellipse cx="30" cy="16" rx="14" ry="13" fill={color}/>
      <ellipse cx="46" cy="22" rx="12" ry="11" fill={color}/>
      <rect x="10" y="22" width="42" height="11" rx="6" fill={color}/>
    </svg>
  );
}
function WaveDeco({ color, style = {} }) {
  return (
    <svg width="100%" height="80" viewBox="0 0 300 80" preserveAspectRatio="none" style={{ position: 'absolute', width: '100%', ...style }}>
      <path d="M0 30 C 50 10, 100 50, 150 30 C 200 10, 250 50, 300 30 L 300 80 L 0 80 Z" fill={color} opacity="0.4"/>
      <path d="M0 50 C 50 30, 100 70, 150 50 C 200 30, 250 70, 300 50 L 300 80 L 0 80 Z" fill={color} opacity="0.7"/>
      <path d="M0 65 C 50 50, 100 80, 150 65 C 200 50, 250 80, 300 65 L 300 80 L 0 80 Z" fill={color}/>
    </svg>
  );
}
function FishDeco({ color, size = 24, flip = false, style = {} }) {
  return (
    <svg width={size * 1.3} height={size * 0.7} viewBox="0 0 30 16" style={{ position: 'absolute', transform: flip ? 'scaleX(-1)' : 'none', ...style }}>
      <ellipse cx="12" cy="8" rx="9" ry="6" fill={color}/>
      <path d="M21 8 L 28 3 L 28 13 Z" fill={color}/>
      <circle cx="9" cy="6" r="1.3" fill="#fff"/>
      <circle cx="9" cy="6" r="0.6" fill="#000"/>
    </svg>
  );
}
function ShellDeco({ color, size = 24, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ position: 'absolute', ...style }}>
      <path d="M12 2 C 4 2, 2 12, 12 22 C 22 12, 20 2, 12 2 Z" fill={color}/>
      <path d="M12 2 L 12 22 M 7 4 L 12 22 M 17 4 L 12 22 M 4 8 L 12 22 M 20 8 L 12 22" stroke="#fff" strokeWidth="0.8" opacity="0.4"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Confetti background — used by some layouts
// ─────────────────────────────────────────────────────────────
function ConfettiBg({ colors, count = 18, opacity = 1 }) {
  const items = [];
  for (let i = 0; i < count; i++) {
    const left = (i * 53) % 100;
    const top = (i * 37) % 100;
    const rot = (i * 47) % 360;
    const color = colors[i % colors.length];
    const isCircle = i % 3 === 0;
    items.push(
      isCircle
        ? <Dot key={i} size={5 + (i % 3)} color={color} style={{ position: 'absolute', left: `${left}%`, top: `${top}%`, opacity }} />
        : <Confetti key={i} size={10 + (i % 4) * 2} color={color} rotate={rot} style={{ position: 'absolute', left: `${left}%`, top: `${top}%`, opacity }} />
    );
  }
  return <>{items}</>;
}

// ─────────────────────────────────────────────────────────────
// LAYOUT 1 — MINIMAL
// Centered text, lots of whitespace, sparse decorations in corners
// ─────────────────────────────────────────────────────────────
function LayoutMinimal({ theme, data }) {
  const p = theme.palette;
  const ink = p.ink;
  const hasPhoto = !!data.photo;
  return (
    <div style={{
      position: 'absolute', inset: 0, background: p.bg,
      color: ink, padding: '8% 8% 6%',
      display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
    }}>
      {/* corner decorations */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <ThemeDecorations theme={theme} />
      </div>

      {/* Optional circular photo */}
      {hasPhoto && (
        <div style={{
          marginTop: '10%',
          width: '38%', aspectRatio: '1 / 1',
          borderRadius: '50%',
          overflow: 'hidden',
          border: `3px solid ${p.primary}`,
          boxShadow: `0 4px 12px ${ink}22`,
          background: '#fff',
        }}>
          <img src={data.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      )}

      <div style={{ marginTop: hasPhoto ? 14 : '14%', fontSize: 11, fontWeight: 700, letterSpacing: '0.3em', color: p.primary }}>
        SEI INVITATO
      </div>

      <div style={{
        marginTop: 18, fontFamily: 'DM Serif Display, serif',
        fontSize: 38, lineHeight: 1, letterSpacing: '-0.02em',
        color: ink,
      }}>
        {data.nome || 'Nome'}
      </div>

      <div style={{
        marginTop: 14,
        fontFamily: 'Caveat, cursive', fontSize: 36, lineHeight: 1, color: p.primary,
      }}>
        compie {data.eta || '?'}
      </div>

      <div style={{
        marginTop: 6, fontSize: 14, fontWeight: 600, color: ink, letterSpacing: '-0.01em',
      }}>
        {parseInt(data.eta, 10) === 1 ? 'ANNO' : 'ANNI'}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ width: 36, height: 1, background: ink, opacity: 0.3, margin: '8px 0 14px' }} />

      <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.6, color: ink }}>
        <div style={{ marginBottom: 6 }}>{formatDate(data.data)}<span style={{ opacity: 0.4, margin: '0 6px' }}>•</span>{data.ora || '16:00'}</div>
        <div style={{ opacity: 0.7, fontWeight: 500 }}>{data.luogo || 'Via Roma 1, Milano'}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT 2 — ILLUSTRATO (illustrated, full-bleed decorations)
// ─────────────────────────────────────────────────────────────
function LayoutIllustrato({ theme, data }) {
  const p = theme.palette;
  const ink = p.ink;
  const hasPhoto = !!data.photo;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${p.bg} 0%, ${p.bg2} 100%)`,
      color: ink, padding: 0,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <ConfettiBg colors={[p.primary, p.secondary, p.accent]} count={14} opacity={0.4} />
        <ThemeDecorations theme={theme} />
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 8%', position: 'relative', zIndex: 1 }}>
        <div style={{
          fontFamily: 'Caveat, cursive', fontSize: 26, color: p.primary, fontWeight: 700, lineHeight: 1,
        }}>
          È la festa di
        </div>
        <div style={{
          fontFamily: 'DM Serif Display, serif',
          fontSize: 46, lineHeight: 0.95, marginTop: 6, color: ink,
          letterSpacing: '-0.025em',
        }}>
          {data.nome || 'Nome'}
        </div>

        {hasPhoto ? (
          <div style={{
            marginTop: 16,
            width: 110, height: 110, borderRadius: '50%',
            overflow: 'hidden',
            border: `4px solid ${p.primary}`,
            boxShadow: `0 6px 0 ${ink}22`,
            position: 'relative',
          }}>
            <img src={data.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', bottom: -2, right: -2,
              width: 36, height: 36, borderRadius: '50%',
              background: p.accent, color: ink,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'DM Serif Display, serif', fontSize: 20,
              border: `3px solid ${p.bg}`,
            }}>{data.eta || '?'}</div>
          </div>
        ) : (
          <div style={{
            marginTop: 18,
            width: 88, height: 88, borderRadius: '50%',
            background: p.primary, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'DM Serif Display, serif', fontSize: 48, lineHeight: 1,
            boxShadow: `0 6px 0 ${ink}22`,
          }}>
            {data.eta || '?'}
          </div>
        )}
        <div style={{
          marginTop: 6, fontSize: 13, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: ink,
        }}>
          {parseInt(data.eta, 10) === 1 ? 'anno' : 'anni'}
        </div>
      </div>

      <div style={{
        background: theme.dark ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.6)',
        backdropFilter: 'blur(4px)',
        margin: '0 6% 6%', padding: '12px 14px', borderRadius: 14,
        position: 'relative', zIndex: 1,
        fontSize: 11, color: ink, fontWeight: 600, lineHeight: 1.5,
        display: 'grid', gridTemplateColumns: 'auto 1fr', columnGap: 10, rowGap: 4,
      }}>
        <span style={{ opacity: 0.6 }}>QUANDO</span><span>{formatDate(data.data)} · {data.ora || '16:00'}</span>
        <span style={{ opacity: 0.6 }}>DOVE</span><span>{data.luogo || 'Via Roma 1, Milano'}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT 3 — FOTO (frame with photo placeholder)
// ─────────────────────────────────────────────────────────────
function LayoutFoto({ theme, data }) {
  const p = theme.palette;
  const ink = p.ink;
  const hasPhoto = !!data.photo;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: p.light,
      color: ink, padding: '6%',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        position: 'relative',
        flex: 1,
        borderRadius: 14,
        background: p.bg,
        overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {hasPhoto ? (
          <img src={data.photo} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : (
          <>
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: `repeating-linear-gradient(45deg, ${p.bg2} 0 8px, transparent 8px 16px)`,
              opacity: 0.6,
            }} />
            <div style={{
              position: 'relative',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 9, fontWeight: 600, color: ink, opacity: 0.5,
              padding: '6px 10px', background: 'rgba(255,255,255,0.7)', borderRadius: 4,
              letterSpacing: '0.05em',
            }}>
              [ foto del bimbo ]
            </div>
          </>
        )}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <ThemeDecorations theme={theme} />
        </div>
      </div>

      <div style={{ marginTop: 14, textAlign: 'center' }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.25em', color: p.primary }}>
          FESTA DI COMPLEANNO
        </div>
        <div style={{
          fontFamily: 'DM Serif Display, serif',
          fontSize: 32, lineHeight: 1, marginTop: 6, color: ink, letterSpacing: '-0.02em',
        }}>
          {data.nome || 'Nome'} <span style={{ color: p.primary }}>· {data.eta || '?'}</span>
        </div>
        <div style={{
          marginTop: 10,
          display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'wrap',
        }}>
          <span style={{ fontSize: 10, fontWeight: 600, padding: '4px 9px', background: p.bg, borderRadius: 999 }}>
            📅 {formatDateShort(data.data)}
          </span>
          <span style={{ fontSize: 10, fontWeight: 600, padding: '4px 9px', background: p.bg, borderRadius: 999 }}>
            🕒 {data.ora || '16:00'}
          </span>
          <span style={{ fontSize: 10, fontWeight: 600, padding: '4px 9px', background: p.bg, borderRadius: 999 }}>
            📍 {truncate(data.luogo || 'Via Roma 1', 18)}
          </span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT 4 — TIPOGRAFICO (huge type, bold, modern)
// ─────────────────────────────────────────────────────────────
function LayoutTipografico({ theme, data }) {
  const p = theme.palette;
  const ink = p.ink;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: theme.dark ? p.bg : p.primary,
      color: theme.dark ? p.light : p.light,
      padding: '8% 7% 6%',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5 }}>
        <ConfettiBg colors={[p.accent, p.secondary, p.light]} count={12} opacity={0.6} />
      </div>

      {/* top header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 1 }}>
        <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.25em', opacity: 0.85 }}>
          BIRTHDAY {new Date().getFullYear()}
        </div>
        <div style={{ width: 18, height: 18, borderRadius: '50%', background: p.accent }}/>
      </div>

      {/* huge name + age */}
      <div style={{ marginTop: '6%', position: 'relative', zIndex: 1, lineHeight: 0.85 }}>
        <div style={{
          fontFamily: 'DM Serif Display, serif',
          fontSize: 58, fontWeight: 400, letterSpacing: '-0.03em',
          fontStyle: 'italic',
        }}>
          {data.nome || 'Nome'}
        </div>
        <div style={{
          fontSize: 110, fontWeight: 800, letterSpacing: '-0.06em',
          marginTop: 4,
          color: p.accent,
          textShadow: theme.dark ? 'none' : `4px 4px 0 ${ink}`,
        }}>
          {data.eta || '?'}
        </div>
        <div style={{ fontSize: 14, fontWeight: 800, letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: -4 }}>
          {parseInt(data.eta, 10) === 1 ? 'anno' : 'anni'} · party
        </div>
      </div>

      <div style={{ flex: 1 }} />

      {/* footer details */}
      <div style={{
        position: 'relative', zIndex: 1,
        borderTop: `2px solid ${p.light}55`, paddingTop: 12,
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 8, fontSize: 11, fontWeight: 700,
      }}>
        <div>
          <div style={{ opacity: 0.65, fontSize: 9, letterSpacing: '0.15em' }}>QUANDO</div>
          <div>{formatDateShort(data.data)}</div>
          <div>{data.ora || '16:00'}</div>
        </div>
        <div>
          <div style={{ opacity: 0.65, fontSize: 9, letterSpacing: '0.15em' }}>DOVE</div>
          <div style={{ fontWeight: 600, lineHeight: 1.3 }}>{data.luogo || 'Via Roma 1, Milano'}</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Helpers
// ─────────────────────────────────────────────────────────────
function formatDate(iso) {
  if (!iso) return '20 Aprile 2026';
  const d = new Date(iso);
  if (isNaN(d)) return '20 Aprile 2026';
  const months = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'];
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
}
function formatDateShort(iso) {
  if (!iso) return '20 Apr 2026';
  const d = new Date(iso);
  if (isNaN(d)) return '20 Apr 2026';
  const months = ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'];
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
}
function truncate(s, n) { return s && s.length > n ? s.slice(0, n - 1) + '…' : s; }

// ─────────────────────────────────────────────────────────────
// THEME TILE — clean preview card showing just theme aesthetic
// (used in the theme picker — no form data clutter)
// ─────────────────────────────────────────────────────────────
function ThemeTile({ theme }) {
  const p = theme.palette;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(160deg, ${p.bg} 0%, ${p.bg2} 100%)`,
      overflow: 'hidden',
    }}>
      {/* decorative shapes — denser arrangement so the tile reads as the theme */}
      <div style={{ position: 'absolute', inset: 0 }}>
        {theme.id === 'custom' ? (
          <CustomTilePreview p={p} />
        ) : (
          <ThemeDecorations theme={theme} density="dense" />
        )}
      </div>

      {/* theme name plate */}
      <div style={{
        position: 'absolute', left: 8, right: 8, bottom: 8,
        padding: '8px 10px',
        background: 'rgba(255, 255, 255, 0.92)',
        backdropFilter: 'blur(6px)',
        borderRadius: 12,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 6,
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontSize: 13, fontWeight: 800, color: p.ink,
            letterSpacing: '-0.01em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {theme.name}
          </div>
        </div>
        <div style={{
          width: 20, height: 20, borderRadius: 999,
          background: p.primary,
          flexShrink: 0,
        }} />
      </div>
    </div>
  );
}

function CustomTilePreview({ p }) {
  return (
    <>
      <Sparkle size={20} color={p.primary} style={{ position: 'absolute', left: '14%', top: '14%' }} />
      <Sparkle size={14} color={p.secondary} style={{ position: 'absolute', right: '20%', top: '20%' }} />
      <Star size={12} color={p.accent} style={{ position: 'absolute', left: '70%', top: '12%' }} />
      <Heart size={14} color={p.secondary} style={{ position: 'absolute', left: '20%', top: '60%' }} />
      {/* upload icon centerpiece */}
      <div style={{
        position: 'absolute', left: '50%', top: '38%',
        transform: 'translate(-50%, -50%)',
        width: 56, height: 56, borderRadius: 16,
        background: 'rgba(255, 255, 255, 0.95)',
        border: `2px dashed ${p.primary}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={p.primary} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 4 V 16 M 6 10 L 12 4 L 18 10 M 4 19 H 20"/>
        </svg>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// Public renderer — picks layout by id
// ─────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────
// LAYOUT 5 — POSTER ROCK (diagonal slabs, broken grid, distorted age)
// ─────────────────────────────────────────────────────────────
function LayoutPoster({ theme, data }) {
  const p = theme.palette;
  return (
    <div style={{ position: 'absolute', inset: 0, background: p.ink, overflow: 'hidden', color: '#fff', fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
      {/* diagonal color slabs */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <div style={{ position: 'absolute', inset: '-10% -20%', background: p.primary, transform: 'rotate(-12deg) translateY(-30%)', height: '50%' }} />
        <div style={{ position: 'absolute', inset: '40% -20% -10%', background: p.accent, transform: 'rotate(-12deg) translateY(20%)', height: '40%' }} />
      </div>
      {/* corner stamp */}
      <div style={{ position: 'absolute', top: 12, left: 12, fontSize: 9, fontWeight: 800, letterSpacing: '0.3em', opacity: 0.85, transform: 'rotate(-90deg)', transformOrigin: 'left bottom' }}>
        PARTY · {new Date(data.data || Date.now()).getFullYear()} · NO RSVP NO PARTY
      </div>
      {/* huge age digit broken */}
      <div style={{ position: 'absolute', top: '8%', right: '-8%', fontFamily: 'DM Serif Display, serif', fontSize: 360, lineHeight: 0.8, fontStyle: 'italic', color: p.bg, opacity: 0.95, mixBlendMode: 'screen' }}>
        {data.eta}
      </div>
      {/* name massive */}
      <div style={{ position: 'absolute', left: 14, top: '40%', right: 14, transform: 'rotate(-3deg)' }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.3em', opacity: 0.7 }}>★ TONIGHT ★</div>
        <div style={{ fontFamily: 'DM Serif Display, serif', fontSize: 58, lineHeight: 0.92, fontStyle: 'italic', textTransform: 'uppercase', wordBreak: 'break-word' }}>
          {data.nome}
        </div>
        <div style={{ fontSize: 13, fontWeight: 700, marginTop: 6, letterSpacing: '0.1em' }}>
          COMPIE {data.eta} ANNI
        </div>
      </div>
      {/* details ticket-style at bottom */}
      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, background: '#fff', color: p.ink, padding: '10px 12px', borderRadius: 4, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', fontSize: 9, fontWeight: 800, letterSpacing: '0.05em' }}>
        <div><div style={{ opacity: 0.5 }}>WHEN</div><div style={{ marginTop: 2, fontSize: 11 }}>{(data.data || '').slice(8,10)}/{(data.data || '').slice(5,7)}</div></div>
        <div><div style={{ opacity: 0.5 }}>TIME</div><div style={{ marginTop: 2, fontSize: 11 }}>{data.ora}</div></div>
        <div><div style={{ opacity: 0.5 }}>VENUE</div><div style={{ marginTop: 2, fontSize: 9, lineHeight: 1.2 }}>{(data.luogo || '').split(',')[0]}</div></div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LAYOUT 6 — RISO STAMP (riso-print look, halftone, 3 ink colors)
// ─────────────────────────────────────────────────────────────
function LayoutRiso({ theme, data }) {
  const p = theme.palette;
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#F5EFE3', overflow: 'hidden', fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
      {/* halftone dots */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(${p.primary}55 1.2px, transparent 1.5px)`, backgroundSize: '8px 8px', opacity: 0.6 }} />
      {/* big circle */}
      <div style={{ position: 'absolute', top: '14%', left: '50%', transform: 'translateX(-50%)', width: '78%', aspectRatio: '1 / 1', borderRadius: '50%', background: p.accent, mixBlendMode: 'multiply' }} />
      {/* secondary offset circle */}
      <div style={{ position: 'absolute', top: '18%', left: '54%', transform: 'translateX(-50%)', width: '78%', aspectRatio: '1 / 1', borderRadius: '50%', background: p.primary, mixBlendMode: 'multiply', opacity: 0.85 }} />
      {/* arc text */}
      <div style={{ position: 'absolute', top: 18, left: 0, right: 0, textAlign: 'center', fontSize: 10, fontWeight: 800, letterSpacing: '0.4em', color: p.ink }}>
        ★ FESTA · DI · COMPLEANNO ★
      </div>
      {/* name + age stacked */}
      <div style={{ position: 'absolute', top: '34%', left: 0, right: 0, textAlign: 'center', color: p.ink, mixBlendMode: 'multiply' }}>
        <div style={{ fontFamily: 'DM Serif Display, serif', fontStyle: 'italic', fontSize: 44, lineHeight: 0.95 }}>{data.nome}</div>
        <div style={{ fontFamily: 'DM Serif Display, serif', fontSize: 110, lineHeight: 0.9, marginTop: 4 }}>{data.eta}</div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.3em', marginTop: -2 }}>{parseInt(data.eta,10)===1 ? 'ANNO' : 'ANNI'}</div>
      </div>
      {/* details strip */}
      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 16, color: p.ink, borderTop: `1.5px solid ${p.ink}`, borderBottom: `1.5px solid ${p.ink}`, padding: '8px 0', display: 'flex', justifyContent: 'space-around', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em' }}>
        <span>{(data.data || '').slice(8,10)}.{(data.data || '').slice(5,7)}</span>
        <span>·</span>
        <span>H {data.ora}</span>
        <span>·</span>
        <span>{(data.luogo || '').split(',')[0].slice(0,14)}</span>
      </div>
    </div>
  );
}

const LAYOUTS = [
  { id: 'poster', name: 'Poster ★', component: LayoutPoster },
  { id: 'riso', name: 'Riso', component: LayoutRiso },
  { id: 'illustrato', name: 'Illustrato', component: LayoutIllustrato },
  { id: 'tipografico', name: 'Bold', component: LayoutTipografico },
];

function Invitation({ themeId, layoutId, data }) {
  const theme = THEMES[themeId] || THEMES.bosco;
  const layout = LAYOUTS.find(l => l.id === layoutId) || LAYOUTS[0];
  const C = layout.component;
  return <C theme={theme} data={data} />;
}

// expose
Object.assign(window, { THEMES, LAYOUTS, Invitation, ThemeTile, ConfettiBg, Dot, Star, Heart, Sparkle, Confetti });