/* Shared constants + small helpers for all directions */
const BRAND = {
  whatsapp: '+212615105100',
  whatsappLink: 'https://wa.me/212615105100',
  instagram: '@soutenancema',
  instagramLink: 'https://instagram.com/soutenancema',
  tagline: 'Capturez vos moments de soutenance',
  domain: 'soutenance.ma',
};

const UNIVERSITIES = [
  { name: 'UM5 Rabat', short: 'UM5R' },
  { name: 'UM5 Souissi', short: 'UM5S' },
  { name: 'ENCG Rabat', short: 'ENCG' },
  { name: 'UM6P', short: 'UM6P' },
  { name: 'UIR', short: 'UIR' },
  { name: 'EMSI', short: 'EMSI' },
];

/* Expanded list — used by the sliding marquee under the hero. */
const ALL_UNIVERSITIES = [
  { name: 'Université Mohammed V — Rabat', short: 'UM5R' },
  { name: 'Université Mohammed VI Polytechnique', short: 'UM6P' },
  { name: 'Université Internationale de Rabat', short: 'UIR' },
  { name: 'Université Hassan II — Casablanca', short: 'UH2C' },
  { name: 'Université Cadi Ayyad — Marrakech', short: 'UCAM' },
  { name: 'Université Sidi Mohamed Ben Abdellah', short: 'USMBA' },
  { name: 'Al Akhawayn University — Ifrane', short: 'AUI' },
  { name: 'Université Abdelmalek Essaâdi', short: 'UAE' },
  { name: 'Université Moulay Ismail — Meknès', short: 'UMI' },
  { name: 'Université Ibn Zohr — Agadir', short: 'UIZ' },
  { name: 'Université Ibn Tofail — Kénitra', short: 'UIT' },
  { name: 'Université Mohammed Premier — Oujda', short: 'UMP' },
  { name: 'Université Hassan 1er — Settat', short: 'UH1' },
  { name: 'Université Sultan Moulay Slimane', short: 'USMS' },
  { name: 'ENCG Rabat', short: 'ENCG' },
  { name: 'ENSA', short: 'ENSA' },
  { name: 'EMSI', short: 'EMSI' },
  { name: 'HEM Business School', short: 'HEM' },
  { name: 'ESCA École de Management', short: 'ESCA' },
  { name: 'Université Privée de Marrakech', short: 'UPM' },
  { name: 'Université Internationale de Casablanca', short: 'UIC' },
  { name: 'INSEA Rabat', short: 'INSEA' },
];

const PACKS = [
  {
    name: 'Essentiel',
    tagline: 'L\u2019essentiel pour garder une trace impeccable.',
    price: '1 400',
    priceNum: 1400,
    duration: 'Formule de base',
    features: [
      'Vid\u00e9o de pr\u00e9sentation',
      '50* photos retouch\u00e9es',
      'Galerie en ligne priv\u00e9e',
      'Livraison m\u00eame jour \u2014 Photos',
    ],
  },
  {
    name: 'Prestige',
    tagline: 'L\u2019exp\u00e9rience compl\u00e8te en qualit\u00e9 4K.',
    price: '2 400',
    priceNum: 2400,
    duration: 'Formule recommand\u00e9e',
    features: [
      'Vid\u00e9o de pr\u00e9sentation',
      'Film souvenir \u2014 4K',
      'Vid\u00e9o Reel',
      '180* photos retouch\u00e9es',
      'Galerie en ligne priv\u00e9e',
      'Livraison m\u00eame jour \u2014 Photos',
    ],
    featured: true,
  },
  {
    name: 'Signature',
    tagline: 'Le plus choisi. Photos + film souvenir.',
    price: '1 700',
    priceNum: 1700,
    duration: 'Formule premium',
    features: [
      'Vid\u00e9o de pr\u00e9sentation',
      'Film souvenir',
      '120* photos retouch\u00e9es',
      'Galerie en ligne priv\u00e9e',
      'Livraison m\u00eame jour \u2014 Photos',
    ],
  },
];

const PACK_NOTE = '*Le nombre de photos peut varier en fonction du contenu.';

/* Build-your-own options. Each group is either a radio (pick one) or a
 * checkbox set (pick any). Prices in MAD. */
const CUSTOM_OPTIONS = {
  photos: {
    label: 'Photos retouch\u00e9es',
    mode: 'radio',
    required: true,
    items: [
      { id: 'photos-0',   label: 'Aucune photo',         price: 0 },
      { id: 'photos-50',  label: '50* photos retouch\u00e9es',  price: 800 },
      { id: 'photos-120', label: '120* photos retouch\u00e9es', price: 1100, recommended: true },
      { id: 'photos-180', label: '180* photos retouch\u00e9es', price: 1400 },
    ],
  },
  video: {
    label: 'Vid\u00e9o',
    mode: 'check',
    items: [
      { id: 'vid-pres',     label: 'Vid\u00e9o de pr\u00e9sentation',     price: 400 },
      { id: 'vid-souv',     label: 'Film souvenir',           price: 500 },
      { id: 'vid-souv-4k',  label: 'Film souvenir \u2014 4K',         price: 800, excludes: ['vid-souv'] },
      { id: 'vid-reel',     label: 'Vid\u00e9o Reel',                price: 300 },
    ],
  },
  delivery: {
    label: 'Livraison',
    mode: 'radio',
    required: true,
    items: [
      { id: 'deliv-std',   label: 'Livraison standard (3 jours)', price: 0 },
      { id: 'deliv-same',  label: 'Livraison m\u00eame jour \u2014 Photos', price: 200 },
    ],
  },
};

/* Defaults: start with a sensible recommended selection */
const CUSTOM_DEFAULT_SELECTION = {
  photos: 'photos-120',
  video: ['vid-pres'],
  delivery: 'deliv-same',
};

function computeCustomTotal(selection) {
  let total = 0;
  const items = [];
  // photos (radio)
  const pId = selection.photos;
  if (pId) {
    const p = CUSTOM_OPTIONS.photos.items.find((x) => x.id === pId);
    if (p && p.price > 0) { total += p.price; items.push(p); }
    else if (p) items.push(p);
  }
  // video (check)
  (selection.video || []).forEach((vid) => {
    const v = CUSTOM_OPTIONS.video.items.find((x) => x.id === vid);
    if (v) { total += v.price; items.push(v); }
  });
  // delivery (radio)
  const dId = selection.delivery;
  if (dId) {
    const d = CUSTOM_OPTIONS.delivery.items.find((x) => x.id === dId);
    if (d) { total += d.price; items.push(d); }
  }
  return { total, items };
}

const SERVICES = [
  { title: 'Photographie', body: 'Portraits, photos de groupe avec la famille, ambiance et d\u00e9tails.' },
  { title: 'Vid\u00e9o', body: 'Films souvenirs cin\u00e9matiques pour revivre votre soutenance.' },
  { title: 'Haute Qualit\u00e9', body: 'Vid\u00e9os 4K haute qualit\u00e9 et photos haute d\u00e9finition.' },
];

/* SVG placeholder \u2014 striped block with caption.
 * Used wherever a real photo should land. */
function PhotoSlot({ caption = 'Photo', tone = 'warm', style = {}, rounded = 16, ratio = '3 / 4' }) {
  const palettes = {
    warm: ['#f3e6df', '#e9d5cb', '#1c1c1c'],
    cool: ['#e6e7ef', '#d3d5e3', '#1c1c1c'],
    dark: ['#1f1d1d', '#2a2828', '#f4f3ee'],
    pink: ['#ffd9e0', '#ffb8c6', '#7a0e2f'],
  };
  const [a, b, fg] = palettes[tone] || palettes.warm;
  return (
    <div style={{
      width: '100%',
      aspectRatio: ratio,
      borderRadius: rounded,
      overflow: 'hidden',
      position: 'relative',
      background: `repeating-linear-gradient(135deg, ${a} 0 14px, ${b} 14px 28px)`,
      display: 'flex',
      alignItems: 'flex-end',
      ...style,
    }}>
      <div style={{
        fontFamily: 'DM Mono, ui-monospace, monospace',
        fontSize: 10,
        letterSpacing: 0.4,
        color: fg,
        opacity: 0.65,
        padding: '8px 10px',
        textTransform: 'uppercase',
      }}>{caption}</div>
    </div>
  );
}

/* Small inline icons (sized by font-size via currentColor) */
const Icon = {
  Whatsapp: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" {...p}>
      <path d="M19.1 4.9A10 10 0 0 0 4.1 18.3L3 22l3.8-1A10 10 0 1 0 19.1 4.9Zm-7.1 16a8 8 0 0 1-4.1-1.1l-.3-.2-2.3.6.6-2.2-.2-.3a8 8 0 1 1 6.3 3.2Zm4.4-6c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.3-.4.1-.2 0-.3 0-.4 0-.1-.5-1.3-.7-1.7-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.1 1.6 2.5 3.9 3.5.6.2 1 .4 1.3.5.5.2 1 .1 1.4.1.4-.1 1.4-.6 1.6-1.1.2-.5.2-1 .1-1.1Z"/>
    </svg>
  ),
  Instagram: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <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="1" fill="currentColor" stroke="none" />
    </svg>
  ),
  Camera: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M3 8a2 2 0 0 1 2-2h2l1.5-2h7L17 6h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
      <circle cx="12" cy="13" r="4" />
    </svg>
  ),
  Video: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <rect x="3" y="6" width="13" height="12" rx="2" />
      <path d="m16 10 5-3v10l-5-3z" />
    </svg>
  ),
  Drone: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="5" cy="5" r="2.5"/><circle cx="19" cy="5" r="2.5"/>
      <circle cx="5" cy="19" r="2.5"/><circle cx="19" cy="19" r="2.5"/>
      <rect x="9" y="9" width="6" height="6" rx="1"/>
      <path d="M9 9 5 5M15 9l4-4M9 15l-4 4M15 15l4 4"/>
    </svg>
  ),
  Album: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M5 5h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2V5Z"/>
      <path d="M5 5a2 2 0 0 1 2-2h11"/>
    </svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="m5 12 5 5 9-11" />
    </svg>
  ),
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  Sparkle: (p) => (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" {...p}>
      <path d="M12 2c.5 4 1.5 5 5.5 5.5C13.5 8 12.5 9 12 13c-.5-4-1.5-5-5.5-5.5C10.5 7 11.5 6 12 2Zm7 12c.3 2.2.8 2.8 3 3-2.2.2-2.7.8-3 3-.3-2.2-.8-2.8-3-3 2.2-.2 2.7-.8 3-3Z"/>
    </svg>
  ),
};

/* Service icon mapping */
const SERVICE_ICONS = {
  'Photographie': Icon.Camera,
  'Vid\u00e9o': Icon.Video,
  'Haute Qualit\u00e9': Icon.Camera,
};

/* Tiny university logo mark (we don't have real logos, so use lockups with school short codes) */
function UniMark({ name, short, theme = 'light' }) {
  const fg = theme === 'dark' ? '#f4f3ee' : '#3a3a3a';
  const bg = theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)';
  const border = theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: '12px 8px', borderRadius: 12, background: bg, border: `1px solid ${border}`,
      color: fg, gap: 4, minHeight: 64,
    }}>
      <div style={{
        fontFamily: 'Bricolage Grotesque, sans-serif', fontWeight: 700, fontSize: 14, letterSpacing: 0.5,
      }}>{short}</div>
      <div style={{ fontSize: 8, opacity: 0.55, letterSpacing: 0.6, textTransform: 'uppercase' }}>{name}</div>
    </div>
  );
}

/* Calendar grid for booking date picker */
function CalendarPreview({ accent = '#ff2e63', textColor = '#1a1a1a', mutedColor = '#9a9a9a', highlightDay = 18, secondaryDay = 22 }) {
  const days = ['L','M','M','J','V','S','D'];
  const firstOffset = 3; // Juin 2026 starts Monday-ish for demo
  const cells = Array.from({ length: 35 }, (_, i) => {
    const day = i - firstOffset + 1;
    return day >= 1 && day <= 30 ? day : null;
  });
  return (
    <div style={{ width: '100%', color: textColor }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div style={{ fontWeight: 600, fontSize: 14 }}>Juin 2026</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button style={{ background: 'transparent', border: `1px solid ${mutedColor}33`, color: textColor, borderRadius: 8, width: 26, height: 26, display: 'grid', placeItems: 'center' }}>‹</button>
          <button style={{ background: 'transparent', border: `1px solid ${mutedColor}33`, color: textColor, borderRadius: 8, width: 26, height: 26, display: 'grid', placeItems: 'center' }}>›</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, fontSize: 10, color: mutedColor, marginBottom: 4 }}>
        {days.map((d, i) => <div key={i} style={{ textAlign: 'center', padding: '4px 0' }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
        {cells.map((d, i) => {
          const isSelected = d === highlightDay;
          const isAvailable = d && d >= 12 && [12, 14, 15, 18, 19, 22, 25, 26, 28].includes(d);
          const isSecondary = d === secondaryDay;
          return (
            <div key={i} style={{
              aspectRatio: '1 / 1',
              display: 'grid', placeItems: 'center',
              fontSize: 12, fontWeight: isSelected ? 700 : 500,
              borderRadius: 8,
              background: isSelected ? accent : (isSecondary ? `${accent}22` : 'transparent'),
              color: isSelected ? '#fff' : (isAvailable ? textColor : mutedColor),
              opacity: d ? 1 : 0,
              border: isAvailable && !isSelected ? `1px solid ${accent}33` : '1px solid transparent',
              position: 'relative',
            }}>
              {d}
              {isAvailable && !isSelected && !isSecondary && (
                <span style={{ position: 'absolute', bottom: 3, width: 3, height: 3, borderRadius: '50%', background: accent }} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { BRAND, UNIVERSITIES, ALL_UNIVERSITIES, PACKS, PACK_NOTE, CUSTOM_OPTIONS, CUSTOM_DEFAULT_SELECTION, computeCustomTotal, SERVICES, SERVICE_ICONS, PhotoSlot, Icon, UniMark, CalendarPreview });
