// Shared utilities for all three Mil Delicias styles
// Placeholder image component, WhatsApp icon, common SVG icons

const Placeholder = ({ w = '100%', h = 200, label = 'foto', tone = 'caramel', radius = 0, style = {} }) => {
  const tones = {
    caramel: ['#c9a37a', '#b48a5e'],
    cream: ['#e8dcc4', '#d4c4a4'],
    deep: ['#8b6a4a', '#6b4e35'],
    blush: ['#e8c4b0', '#d4a890'],
  };
  const [c1, c2] = tones[tone] || tones.caramel;
  const id = `ph-${Math.random().toString(36).slice(2, 8)}`;
  return (
    <div style={{
      width: w, height: h, borderRadius: radius, position: 'relative', overflow: 'hidden',
      background: `linear-gradient(135deg, ${c1} 0%, ${c2} 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
        <defs>
          <pattern id={id} x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="14" stroke="#fff" strokeWidth="1.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`} />
      </svg>
      <div style={{
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 10, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.1em',
        textTransform: 'uppercase', position: 'relative', zIndex: 1,
        background: 'rgba(0,0,0,0.18)', padding: '4px 10px', borderRadius: 2,
      }}>
        {label}
      </div>
    </div>
  );
};

const WhatsIcon = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
  </svg>
);

const InstaIcon = ({ size = 18, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6">
    <rect x="3" y="3" width="18" height="18" rx="5" />
    <circle cx="12" cy="12" r="4" />
    <circle cx="17.5" cy="6.5" r="0.8" fill={color} />
  </svg>
);

const ChevronRight = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="9 18 15 12 9 6" />
  </svg>
);

const StarIcon = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </svg>
);

// Fotos reales de Mil Delicias
const PHOTOS = {
  boda: 'assets/fotos/boda-dorada.png',
  bautizo: 'assets/fotos/bautizo-adalia.png',
  cumple50: 'assets/fotos/cumple-50.png',
  oceano: 'assets/fotos/oceano-noah.png',
  safariTeo: 'assets/fotos/safari-teo.png',
  safariBauti: 'assets/fotos/safari-bauti.png',
  pulpo: 'assets/fotos/babyshower-pulpo.png',
  cupcakeRose: 'assets/fotos/cupcake-rose.png',
  cakepopsRose: 'assets/fotos/cakepops-rose.png',
  cakepopsNumbers: 'assets/fotos/cakepops-numberblocks.png',
  maleni: 'assets/fotos/maleni.png',
};

const Photo = ({ src, alt = '', w = '100%', h = 200, radius = 0, pos = 'center', style = {} }) => (
  <img src={src} alt={alt} style={{ width: w, height: h, objectFit: 'cover', objectPosition: pos, borderRadius: radius, display: 'block', background: '#e8dcc4', ...style }} />
);

const GALLERY = [
  { src: PHOTOS.boda, label: 'Boda · dorado y blanco' },
  { src: PHOTOS.safariTeo, label: 'Safari · Teo' },
  { src: PHOTOS.bautizo, label: 'Bautizo · Adalía' },
  { src: PHOTOS.oceano, label: 'Primer añito · Noah' },
  { src: PHOTOS.cumple50, label: 'Cumpleaños 50' },
  { src: PHOTOS.pulpo, label: 'Baby shower · Oh Baby' },
  { src: PHOTOS.safariBauti, label: 'Safari · Bauti' },
  { src: PHOTOS.cupcakeRose, label: 'Cupcake personalizado' },
  { src: PHOTOS.cakepopsRose, label: 'Cake pops · Rose' },
  { src: PHOTOS.cakepopsNumbers, label: 'Cake pops · Numberblocks' },
];

// Datos de catálogo
const PRODUCTS = [
  { name: 'Torta Personalizada', desc: 'Diseño único según tu evento', price: 'Desde S/ 120', tag: 'Más pedida', photo: PHOTOS.cumple50 },
  { name: 'Torta de Boda', desc: 'Pisos elegantes, decoración fina', price: 'Desde S/ 350', photo: PHOTOS.boda },
  { name: 'Torta Temática Infantil', desc: 'Personajes modelados a mano, colores, fantasía', price: 'Desde S/ 95', photo: PHOTOS.safariTeo },
  { name: 'Cupcakes (12 und)', desc: 'Sabores y decoración a elegir', price: 'S/ 60', photo: PHOTOS.cupcakeRose },
  { name: 'Mesa de Dulces', desc: 'Cake pops, galletas decoradas y bocaditos dulces', price: 'S/ 180', photo: PHOTOS.cakepopsNumbers },
  { name: 'Torta de Bautizo', desc: 'Detalles finos en dorado y figuras a mano', price: 'Desde S/ 180', photo: PHOTOS.bautizo },
];

const TESTIMONIALS = [
  { name: 'María Fernández', role: 'Boda · Marzo 2026', text: 'La torta de mi boda fue espectacular. Sabor delicioso y un diseño que superó mis expectativas. Todos los invitados preguntaron por ustedes.' },
  { name: 'Carla Rojas', role: 'Cumpleaños infantil', text: 'Hicieron la torta de Frozen para mi hija con un detalle increíble. Puntuales, atentas y el sabor es buenísimo. Repetiremos sin dudar.' },
  { name: 'Empresa Andina S.A.', role: 'Evento corporativo', text: 'Encargamos bocaditos para 80 personas. Calidad consistente, presentación impecable y un trato muy profesional de principio a fin.' },
];

const STEPS = [
  { n: '01', title: 'Cuéntanos tu idea', text: 'Escríbenos por WhatsApp con la fecha, número de porciones y referencias visuales que tengas.' },
  { n: '02', title: 'Diseñamos juntos', text: 'Coordinamos el diseño, sabores y decoración. Te enviamos una cotización personalizada.' },
  { n: '03', title: 'Confirma tu pedido', text: 'Con un adelanto del 50% reservamos tu fecha. El saldo se cancela al recoger o entregar.' },
  { n: '04', title: 'Disfruta tu torta', text: 'Recoge en nuestro local o coordinamos delivery dentro de Moquegua.' },
];

const FAQS = [
  { q: '¿Con cuánta anticipación debo encargar?', a: 'Para tortas personalizadas, mínimo 5 días. Para bodas y eventos grandes, recomendamos 3 semanas. En temporada alta el plazo puede aumentar.' },
  { q: '¿Hacen delivery?', a: 'Sí, dentro del distrito de Moquegua. Para tortas grandes y de varios pisos coordinamos entrega especial sin costo adicional dentro del cercado.' },
  { q: '¿Puedo elegir el sabor y relleno?', a: 'Por supuesto. Tenemos una carta de masas y rellenos (chocolate, vainilla, red velvet, manjar, frutos rojos, etc.) y combinaciones a tu gusto.' },
  { q: '¿Cómo se realiza el pago?', a: 'Aceptamos Yape, Plin, transferencia BCP/Interbank y efectivo. Reservamos la fecha con un 50% de adelanto.' },
  { q: '¿Manejan opciones sin azúcar o sin gluten?', a: 'Sí, trabajamos versiones sin azúcar refinada y sin gluten bajo pedido. Consúltanos al hacer tu encargo.' },
];

const NAV = ['Inicio', 'Catálogo', 'Galería', 'Sobre Nosotros', 'Cómo Encargar', 'Contacto'];

window.MD = { Placeholder, Photo, PHOTOS, GALLERY, WhatsIcon, InstaIcon, ChevronRight, StarIcon, PRODUCTS, TESTIMONIALS, STEPS, FAQS, NAV };
