/* Production site — Direction C, refined + wired up to the booking wizard.
 * Single-page mobile-first landing for Soutenance.ma.
 */
const { BRAND: SBRAND, UNIVERSITIES: SUNIS, ALL_UNIVERSITIES: SALL_UNIS, PACKS: SPACKS, SERVICES: SSERVICES, SERVICE_ICONS: SSI, PhotoSlot: SPhoto, Icon: SIcon, UniMark: SUni } = window;

const sColors = {
  bg: '#ffffff',
  paper: '#f5f3ef',
  ink: '#111111',
  inkSoft: '#6b6b6b',
  pink: '#e63462',
  pinkSoft: '#fef0f3',
  rule: 'rgba(0,0,0,0.08)'
};

const sType = {
  display: { fontFamily: 'Manrope, system-ui, sans-serif', fontWeight: 600, letterSpacing: -1 },
  sans: { fontFamily: 'Manrope, system-ui, sans-serif' },
  mono: { fontFamily: '"DM Mono", ui-monospace, monospace' }
};

function SiteRoot() {
  const openBooking = (pack = '') => {
    const url = 'reserver.html' + (pack ? '?pack=' + encodeURIComponent(pack) : '');
    window.location.href = url;
  };

  // Expose globally so any inline button (or Tweaks) can trigger
  React.useEffect(() => {window.openBooking = openBooking;}, []);

  return (
    <div className="smc-root" style={{ background: sColors.bg, color: sColors.ink, minHeight: '100vh', marginInline: 'auto' }}>
      <style>{`
        /* Responsive shell — mobile-first; desktop overrides below */
        .smc-root { max-width: 560px; }
        .smc-pad-x { padding-left: 22px; padding-right: 22px; }
        .smc-hero-h1 { font-size: min(11.5vw, 60px); line-height: 0.86; }
        .smc-hero-photos-gap { gap: 10px; }
        .smc-packs-grid { display: flex; flex-direction: column; gap: 14px; }
        .smc-services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .smc-services-list > .smc-service-row { padding: 16px 12px !important; background: #f5f3ef; border-radius: 14px; border: none !important; flex-direction: column; align-items: flex-start; gap: 10px; }
        .smc-service-num { margin-left: auto; }
        .smc-testimonials-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
        .smc-testimonials-row::-webkit-scrollbar { display: none; }
        .smc-testimonial-card { flex: 0 0 86%; scroll-snap-align: start; }
        .smc-footer-cols { display: block; }
        .smc-unis-escape { margin-inline: -22px; }

        /* Tablet ≥ 720px */
        @media (min-width: 720px) {
          .smc-root { max-width: 1200px; }
          .smc-pad-x { padding-left: clamp(32px, 5vw, 72px); padding-right: clamp(32px, 5vw, 72px); }
          .smc-unis-escape { margin-inline: clamp(-72px, -5vw, -32px); }
          .smc-hero-photos-gap { gap: 18px; }
          .smc-hero-h1 { font-size: clamp(70px, 9vw, 110px); }
          .smc-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
          .smc-pack-card { display: flex; flex-direction: column; height: 100%; }
          .smc-pack-card-features { flex: 1; }
          .smc-services-list { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
          .smc-services-list > .smc-service-row { padding: 22px !important; background: #f5f3ef; border-radius: 16px; border: none !important; align-items: flex-start; flex-direction: column; gap: 14px; }
          .smc-services-list > .smc-service-row:last-child { border: none !important; }
          .smc-service-num { margin-left: auto; }
          .smc-footer-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: end; }
          .smc-footer-cols > * { margin-top: 0 !important; }
          .smc-testimonials-row { overflow: visible !important; }
          .smc-testimonial-card { flex: 1 !important; min-width: 0; }
          .smc-floating-reserve { display: none !important; }
        }

        /* Desktop ≥ 1024px */
        @media (min-width: 1024px) {
          .smc-hero-photos-gap { gap: 24px; }
        }
      `}</style>
      <SiteNav openBooking={openBooking} />
      <SiteHero openBooking={openBooking} />
      <SiteServices />

      <SitePacks openBooking={openBooking} />
      <SiteTestimonials />
      <SiteFooter />

    </div>);

}

/* ── Nav ── */
function SiteNav({ openBooking }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${sColors.rule}`
    }}>
      <div className="smc-pad-x" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 22px' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: sColors.ink }}>
          <img src="assets/logo-cap-color.png" alt="" style={{ objectFit: "cover", width: "48px", height: "52px" }} />
          <span style={{ ...sType.sans, fontWeight: 600, fontSize: 15, letterSpacing: -0.3 }}>
            Soutenance.ma
          </span>
        </a>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <a href={SBRAND.whatsappLink} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 6, ...sType.sans, fontSize: 13, fontWeight: 600, color: '#fff', background: '#25D366', padding: '9px 16px', borderRadius: 999, textDecoration: 'none' }}>
            <SIcon.Whatsapp style={{ fontSize: 16 }} />
            WhatsApp
          </a>
        </div>
      </div>
    </header>);

}

/* ── Hero ── */
function SiteHero({ openBooking }) {
  return (
    <section id="top" className="smc-pad-x" style={{ padding: "51.7109px 22px 0px" }}>
      <h1 className="smc-hero-h1" style={{
        ...sType.display, lineHeight: 0.82, letterSpacing: -2.3, color: sColors.ink, textAlign: "center", padding: "0px", maxWidth: 880, marginInline: 'auto', fontWeight: "700"
      }}>
        Capturez vos<br />
        moments de<br />
        <span style={{ position: 'relative', display: 'inline-block', fontWeight: "700" }}>
          soutenance.
          <svg viewBox="0 0 200 14" preserveAspectRatio="none" style={{
            position: 'absolute', left: -4, right: -4, bottom: -6, width: 'calc(100% + 8px)', height: 12
          }}>
            <path d="M2 8 Q 60 1, 120 6 T 198 5" fill="none" stroke={sColors.pink} strokeWidth="2.5" strokeLinecap="round" />
          </svg>
        </span>
      </h1>
      <p style={{
        ...sType.sans, color: sColors.inkSoft, fontSize: 'clamp(14px, 1.6vw, 17px)', lineHeight: 1.55,
        marginTop: 22, textWrap: 'pretty', maxWidth: 480, textAlign: "center", marginInline: 'auto'
      }}>Services de photographie, vidéo production et autres, dédiés aux étudiants qui souhaitent capturer leur moment de soutenance.


      </p>
      <div style={{ marginTop: 26, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
        <button onClick={() => openBooking()} style={{
          ...sType.sans, fontSize: 14, fontWeight: 600,
          background: sColors.ink, color: '#fff',
          padding: '14px 22px', borderRadius: 999, border: 'none', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 8
        }}>
          Réserver une date <SIcon.Arrow />
        </button>
        <a href="#packs" style={{
          ...sType.sans, fontSize: 14, fontWeight: 500, color: sColors.ink, textDecoration: 'none',
          padding: '14px 4px'
        }}>
          Voir les packs
        </a>
      </div>

      {/* Universities sliding marquee */}
      <UnisMarquee />



      {/* Stats strip */}
      <div style={{
        marginTop: 36, padding: '20px 0',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
        borderTop: `1px solid ${sColors.rule}`, borderBottom: `1px solid ${sColors.rule}`
      }}>
        {[
        { n: '+200', l: 'étudiants photographiés' },
        { n: '6', l: 'universités couvertes' },
        { n: '24h*', l: 'livraison express' }].
        map((s, i) =>
        <div key={s.l} style={{
          textAlign: 'center',
          borderRight: i < 2 ? `1px solid ${sColors.rule}` : 'none',
          padding: '0 6px'
        }}>
            <div style={{ ...sType.display, fontSize: 'clamp(22px, 4.5vw, 32px)', color: sColors.ink, letterSpacing: -1.2 }}>{s.n}</div>
            <div style={{ ...sType.mono, fontSize: 'clamp(9px, 1vw, 11px)', letterSpacing: 1, color: sColors.inkSoft, textTransform: 'uppercase', marginTop: 4 }}>{s.l}</div>
          </div>
        )}
      </div>
    </section>);

}

/* ── Universities Marquee ── */
function UnisMarquee() {
  // Duplicate the list so the loop is seamless
  const items = [...SALL_UNIS, ...SALL_UNIS];
  return (
    <div className="smc-unis-escape" style={{
      marginTop: 32,
      overflow: 'hidden',
      position: 'relative',
      padding: '14px 0',
      borderTop: `1px solid ${sColors.rule}`,
      borderBottom: `1px solid ${sColors.rule}`,
      WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)'
    }}>
      <style>{`
        @keyframes unisScroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .unis-track {
          display: flex;
          gap: 12px;
          width: max-content;
          animation: unisScroll 90s linear infinite;
        }
        .unis-track:hover { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .unis-track { animation: none; }
        }
      `}</style>
      <div className="unis-track">
        {items.map((u, i) =>
        <div key={i} style={{
          flex: 'none',
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 16px',
          borderRadius: 999,
          background: sColors.paper,
          border: `1px solid ${sColors.rule}`,
          whiteSpace: 'nowrap'
        }}>
            <span style={{
            ...sType.display, fontWeight: 700, fontSize: 'clamp(13px, 1.4vw, 15px)',
            letterSpacing: -0.3, color: sColors.ink
          }}>{u.short}</span>
            <span style={{
            ...sType.mono, fontSize: 'clamp(9px, 1vw, 10px)',
            letterSpacing: 0.5, color: sColors.inkSoft,
            textTransform: 'uppercase'
          }}>{u.name}</span>
          </div>
        )}
      </div>
    </div>);

}

/* ── Services ── */
function SiteServices() {
  return (
    <section className="smc-pad-x" style={{ padding: "64px 22px 48px" }}>
      <h2 style={{ ...sType.display, fontSize: 'clamp(28px, 6vw, 44px)', lineHeight: 1, letterSpacing: -1.5, color: sColors.ink, textAlign: 'center' }}>
        Trois formats.<br />
        Un seul standard.
      </h2>
      <p style={{ ...sType.sans, fontSize: 14, color: sColors.inkSoft, lineHeight: 1.55, marginTop: 14, maxWidth: 340, textAlign: 'center', marginInline: 'auto' }}>Toute prestation est livrée retouchée à la main, avec une galerie en ligne privée.

      </p>
      <div className="smc-services-list" style={{ marginTop: 28 }}>
        {SSERVICES.map((s, i) => {
          return (
            <div key={s.title} className="smc-service-row" style={{
              display: 'flex', alignItems: 'center', gap: 14
            }}>
              <div style={{ flex: 1 }}>
                <div style={{ ...sType.sans, fontSize: 16, fontWeight: 600, color: sColors.ink }}>{s.title}</div>
                <div style={{ ...sType.sans, fontSize: 13, color: sColors.inkSoft, marginTop: 2, lineHeight: 1.4 }}>{s.body}</div>
              </div>
              <div className="smc-service-num" style={{ ...sType.mono, fontSize: 11, color: sColors.inkSoft }}>0{i + 1}</div>
            </div>);

        })}
      </div>
    </section>);

}



/* ── Gallery ── */
function SiteGallery() {
  return (
    <section style={{ padding: '56px 22px 48px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 22 }}>
        <div style={{ ...sType.mono, fontSize: 10, letterSpacing: 1.5, color: sColors.inkSoft, textTransform: 'uppercase' }}>— Portfolio</div>
      </div>
      <h2 style={{ ...sType.display, fontSize: 'clamp(28px, 6vw, 44px)', lineHeight: 1, letterSpacing: -1.5, color: sColors.ink }}>
        Quelques images<br />récentes.
      </h2>

      <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <SPhoto caption="01 — Mehdi, UM6P" tone="warm" rounded={16} ratio="4 / 5" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <SPhoto caption="02" tone="cool" rounded={16} ratio="3 / 4" />
          <SPhoto caption="03" tone="warm" rounded={16} ratio="3 / 4" />
        </div>
        <SPhoto caption="04 — Salma, ENCG" tone="pink" rounded={16} ratio="4 / 3" />
      </div>

      <a href={SBRAND.instagramLink} style={{
        marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 8,
        ...sType.sans, fontSize: 13, fontWeight: 500, color: sColors.ink, textDecoration: 'none',
        borderBottom: `1px solid ${sColors.ink}`, paddingBottom: 2
      }}>
        Voir tout sur Instagram <SIcon.Arrow />
      </a>
    </section>);

}

/* ── Packs ── */
function SitePackCard({ pack, idx, openBooking }) {
  return (
    <div className="smc-pack-card" style={{
      padding: '28px 24px',
      background: pack.featured ? sColors.ink : sColors.bg,
      color: pack.featured ? '#fff' : sColors.ink,
      border: pack.featured ? 'none' : `1px solid ${sColors.rule}`,
      borderRadius: 20,
      position: 'relative'
    }}>
      {pack.featured &&
      <div style={{
        position: 'absolute', top: 18, right: 18,
        ...sType.mono, fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase',
        color: sColors.pink, background: 'rgba(230, 52, 98, 0.15)',
        padding: '4px 8px', borderRadius: 999
      }}>Recommandé</div>
      }
      <div style={{ ...sType.mono, fontSize: 10, letterSpacing: 1.5, opacity: 0.55, textTransform: 'uppercase' }}>
        0{idx + 1} · {pack.duration}
      </div>
      <div style={{ ...sType.display, fontSize: 32, marginTop: 8, letterSpacing: -1.2, fontWeight: 600 }}>
        {pack.name}
      </div>
      <div style={{ ...sType.sans, fontSize: 13.5, opacity: 0.65, lineHeight: 1.5, marginTop: 6 }}>
        {pack.tagline}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 22 }}>
        <span style={{ ...sType.display, fontSize: 'clamp(36px, 8vw, 56px)', fontWeight: 600, letterSpacing: -1.5, lineHeight: 1 }}>
          {pack.price}
        </span>
        <span style={{ ...sType.mono, fontSize: 12, opacity: 0.55 }}>MAD</span>
      </div>
      <div style={{ height: 1, background: pack.featured ? 'rgba(255,255,255,0.12)' : sColors.rule, margin: '22px 0' }} />
      <ul className="smc-pack-card-features" style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {pack.features.map((f) =>
        <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', ...sType.sans, fontSize: 13.5, lineHeight: 1.4 }}>
            <SIcon.Check style={{ color: pack.featured ? sColors.pink : sColors.ink, marginTop: 3, flex: 'none' }} />
            <span>{f}</span>
          </li>
        )}
      </ul>
      <div style={{
        marginTop: 14, ...sType.sans, fontSize: 11, lineHeight: 1.4,
        opacity: 0.55, fontStyle: 'italic'
      }}>
        {window.PACK_NOTE}
      </div>
      <button onClick={() => openBooking(pack.name)} style={{
        marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 18px', width: '100%', border: 'none', cursor: 'pointer',
        background: pack.featured ? '#fff' : sColors.ink,
        color: pack.featured ? sColors.ink : '#fff',
        borderRadius: 999, ...sType.sans, fontSize: 13, fontWeight: 600
      }}>
        Réserver {pack.name} <SIcon.Arrow />
      </button>
    </div>);

}

function SiteCustomCard({ openBooking }) {
  return (
    <div style={{
      padding: '24px 24px',
      background: sColors.bg,
      color: sColors.ink,
      border: `1.5px dashed ${sColors.pink}`,
      borderRadius: 20,
      position: 'relative'
    }}>
      <div style={{
        position: 'absolute', top: 18, right: 18,
        ...sType.mono, fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase',
        color: sColors.pink
      }}>
        Sur mesure
      </div>
      <div style={{ ...sType.mono, fontSize: 10, letterSpacing: 1.5, color: sColors.inkSoft, textTransform: 'uppercase' }}>
        04 · Pack personnalisé
      </div>
      <div style={{ ...sType.display, fontSize: 28, marginTop: 8, letterSpacing: -1.2, fontWeight: 600 }}>
        Construisez<br />votre pack.
      </div>
      <p style={{ ...sType.sans, fontSize: 13.5, color: sColors.inkSoft, lineHeight: 1.5, marginTop: 10 }}>
        Photos, vidéo, Reel, livraison express… choisissez exactement ce dont vous avez besoin
        et voyez le prix se mettre à jour en direct.
      </p>
      <button onClick={() => openBooking('Sur mesure')} style={{
        marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 18px', width: '100%', border: 'none', cursor: 'pointer',
        background: sColors.pink, color: '#fff',
        borderRadius: 999, ...sType.sans, fontSize: 13, fontWeight: 600
      }}>
        Configurer mon pack <SIcon.Arrow />
      </button>
    </div>);

}

function SitePacks({ openBooking }) {
  return (
    <section id="packs" className="smc-pad-x" style={{ background: sColors.paper, padding: "64px 22px 56px" }}>
      <h2 style={{ ...sType.display, fontSize: 'clamp(32px, 7.5vw, 56px)', lineHeight: 0.98, letterSpacing: -1.8, color: sColors.ink, textAlign: 'center' }}>
        Trois formules<br />transparentes.
      </h2>
      <p style={{ ...sType.sans, fontSize: 14, color: sColors.inkSoft, lineHeight: 1.55, marginTop: 14, textAlign: 'center', maxWidth: 480, marginInline: 'auto' }}>
        Pas d'extras cachés. Tous les packs incluent la retouche, la galerie privée et les droits d'usage personnel.
      </p>
      <div className="smc-packs-grid" style={{ marginTop: 28 }}>
        {SPACKS.map((p, i) => <SitePackCard key={p.name} pack={p} idx={i} openBooking={openBooking} />)}
      </div>
    </section>);

}

/* ── Booking teaser (replaces the inline calendar — wizard does the real picking) ── */
function SiteBookingTeaser({ openBooking }) {
  return (
    <section style={{ padding: '64px 22px 56px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 22 }}>
        <div style={{ ...sType.mono, fontSize: 10, letterSpacing: 1.5, color: sColors.inkSoft, textTransform: 'uppercase' }}>— Réservation</div>
      </div>
      <h2 style={{ ...sType.display, fontSize: 'clamp(32px, 7.5vw, 56px)', lineHeight: 0.98, letterSpacing: -1.8, color: sColors.ink }}>
        Réservez en<br />
        <span style={{ color: sColors.pink }}>quatre étapes.</span>
      </h2>
      <p style={{ ...sType.sans, fontSize: 14, color: sColors.inkSoft, lineHeight: 1.55, marginTop: 14, maxWidth: 360 }}>
        Pack, date, coordonnées, validation. On revient vers vous sur WhatsApp et par email avec la confirmation.
      </p>

      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
        { n: '01', t: 'Choisir un pack', d: 'Essentiel, Signature ou Prestige.' },
        { n: '02', t: 'Sélectionner une date', d: 'Calendrier des disponibilités en juin & juillet.' },
        { n: '03', t: 'Vos coordonnées', d: 'Pour qu\u2019on puisse vous joindre.' },
        { n: '04', t: 'Confirmation', d: 'Email et message WhatsApp immédiats.' }].
        map((s) =>
        <div key={s.n} style={{
          display: 'flex', gap: 14, alignItems: 'flex-start',
          padding: '14px 16px', background: sColors.paper, borderRadius: 14
        }}>
            <div style={{
            ...sType.mono, fontSize: 11, fontWeight: 600, color: sColors.pink,
            background: '#fff', padding: '6px 9px', borderRadius: 8, flex: 'none'
          }}>{s.n}</div>
            <div>
              <div style={{ ...sType.sans, fontSize: 14, fontWeight: 600, color: sColors.ink }}>{s.t}</div>
              <div style={{ ...sType.sans, fontSize: 12.5, color: sColors.inkSoft, marginTop: 2, lineHeight: 1.45 }}>{s.d}</div>
            </div>
          </div>
        )}
      </div>

      <button onClick={() => openBooking()} style={{
        marginTop: 22, width: '100%',
        padding: '16px 22px', background: sColors.ink, color: '#fff',
        border: 'none', borderRadius: 999, cursor: 'pointer',
        ...sType.sans, fontSize: 14, fontWeight: 600,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10
      }}>
        Démarrer ma réservation <SIcon.Arrow />
      </button>
    </section>);

}

/* ── Testimonials ── */
function SiteTestimonials() {
  const items = [
  { quote: 'Service au top, photos magnifiques. Mes parents ont adoré l\u2019album.', author: 'Yasmine A.', school: 'ENCG Rabat' },
  { quote: 'L\u2019équipe est super pro et le reel souvenir a fait le tour de la famille.', author: 'Mehdi B.', school: 'UM6P' },
  { quote: 'Réservation simple, livraison rapide. Je recommande vivement !', author: 'Salma K.', school: 'UM5 Souissi' }];

  return (
    <section className="smc-pad-x" style={{ padding: '32px 22px 56px' }}>
      <div className="smc-testimonials-row">
        {items.map((it, i) =>
        <div key={i} className="smc-testimonial-card" style={{
          padding: '22px 22px', background: sColors.paper, borderRadius: 18
        }}>
            <div style={{ ...sType.display, fontSize: 20, fontWeight: 500, lineHeight: 1.3, color: sColors.ink, letterSpacing: -0.5 }}>
              « {it.quote} »
            </div>
            <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: sColors.pinkSoft, color: sColors.pink,
              display: 'grid', placeItems: 'center',
              ...sType.sans, fontWeight: 700, fontSize: 12
            }}>{it.author.split(' ').map((s) => s[0]).join('')}</div>
              <div>
                <div style={{ ...sType.sans, fontSize: 12.5, fontWeight: 600, color: sColors.ink }}>{it.author}</div>
                <div style={{ ...sType.sans, fontSize: 11, color: sColors.inkSoft }}>{it.school}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* ── Footer ── */
function SiteFooter() {
  return (
    <footer className="smc-pad-x" style={{ background: sColors.ink, color: '#fff', padding: '56px 22px 28px' }}>
      <div className="smc-footer-cols">
        <div>
          <h2 style={{ ...sType.display, fontSize: 'clamp(36px, 8vw, 80px)', lineHeight: 0.95, letterSpacing: -2, fontWeight: 600 }}>
            Parlons de votre<br />
            <span style={{ color: sColors.pink }}>soutenance.</span>
          </h2>
          <p style={{ ...sType.sans, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.55, marginTop: 14, maxWidth: 360 }}>
            Réponse rapide sur WhatsApp pour vérifier la disponibilité et caler les détails.
          </p>
        </div>
        <a href={SBRAND.whatsappLink} style={{
          marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          background: '#fff', color: sColors.ink, textDecoration: 'none',
          padding: '18px 22px', borderRadius: 999, ...sType.sans, fontSize: 14, fontWeight: 600
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <SIcon.Whatsapp style={{ fontSize: 20, color: sColors.pink }} /> {SBRAND.whatsapp}
          </span>
          <SIcon.Arrow />
        </a>
      </div>
      <div style={{
        marginTop: 36, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.12)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10,
        ...sType.mono, fontSize: 10, letterSpacing: 1, color: 'rgba(255,255,255,0.5)'
      }}>
        <span>© 2026 Soutenance.ma — Une marque de Recpro</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <a href="legal.html" style={{
            color: 'rgba(255,255,255,0.5)', textDecoration: 'none',
          }}>
            Mentions légales
          </a>
          <a href={SBRAND.instagramLink} style={{
            color: 'rgba(255,255,255,0.5)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6
          }}>
            <SIcon.Instagram /> {SBRAND.instagram}
          </a>
        </div>
      </div>
    </footer>);

}



window.SiteRoot = SiteRoot;