/* global React, ReactDOM */
const { useState, useEffect, useRef, useCallback } = React;

const RITUELS = window.SITE_DATA.rituels;
const STATS = window.SITE_DATA.stats;
const ACCORDION_ITEMS = window.SITE_DATA.accordion;
const BENEFITS_5T = window.SITE_DATA.benefits5T;
const BIENFAITS = window.SITE_DATA.bienfaits;
const TESTIMONIALS = window.SITE_DATA.testimonials;

/* -----------------------------------------------------------
   Hooks
----------------------------------------------------------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add('in');
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function useCounter(target, duration = 2000) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const startedRef = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && !startedRef.current) {
            startedRef.current = true;
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setVal(Math.round(target * eased));
              if (t < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration]);
  return [val, ref];
}

/* -----------------------------------------------------------
   Reusable
----------------------------------------------------------- */
function Reveal({ as: Tag = 'div', className = '', style, children, delay = 0, ...rest }) {
  const ref = useReveal();
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      style={{ transitionDelay: `${delay}s`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

function Placeholder({ tone = 'green', label, className = '', style }) {
  const cls = tone === 'gold' ? 'ph-gold' : 'ph-green';
  return (
    <div className={`ph ${cls} ${className}`} style={style}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

/* -----------------------------------------------------------
   Navigation
----------------------------------------------------------- */
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#rituels', label: 'Rituels' },
    { href: '#experience', label: "L'Expérience" },
    { href: '#avis', label: 'Avis' },
    { href: '#contact', label: 'Contact' },
  ];

  return (
    <>
      <header
        className="fixed top-0 left-0 right-0 z-50 transition-all duration-500"
        style={{
          background: scrolled ? 'rgba(250, 246, 241, 0.92)' : 'transparent',
          backdropFilter: scrolled ? 'blur(12px)' : 'none',
          boxShadow: scrolled ? '0 1px 0 rgba(26,26,26,0.06), 0 10px 30px -20px rgba(26,26,26,0.15)' : 'none',
        }}
      >
        <div className="max-w-[1400px] mx-auto px-6 lg:px-12 flex items-center justify-between" style={{ height: scrolled ? 72 : 88 }}>
          <a href="#hero" className="font-display text-xl lg:text-[1.35rem]" style={{ color: 'var(--green)', letterSpacing: '0.12em' }}>
            BIO HEAD SPA
          </a>
          <nav className="hidden lg:flex items-center gap-9">
            {links.map((l) => (
              <a key={l.href} href={l.href} className="nav-link">{l.label}</a>
            ))}
          </nav>
          <div className="hidden lg:block">
            <a href="Rituels.html" className="btn-pill small">Réserver</a>
          </div>
          {/* Mobile hamburger */}
          <button
            onClick={() => setOpen(true)}
            className="lg:hidden flex flex-col gap-[5px] p-2"
            aria-label="Ouvrir le menu"
          >
            <span style={{ width: 26, height: 1.5, background: 'var(--green)' }}></span>
            <span style={{ width: 26, height: 1.5, background: 'var(--green)' }}></span>
            <span style={{ width: 18, height: 1.5, background: 'var(--green)' }}></span>
          </button>
        </div>
      </header>

      {/* Mobile drawer */}
      <div
        className={`mobile-nav lg:hidden fixed top-0 right-0 bottom-0 z-[60] w-[80%] max-w-[360px]`}
        style={{ background: 'var(--bg)', transform: open ? 'translateX(0)' : 'translateX(100%)' }}
      >
        <div className="flex flex-col h-full p-8">
          <div className="flex items-center justify-between mb-12">
            <span className="font-display text-lg" style={{ color: 'var(--green)', letterSpacing: '0.12em' }}>BIO HEAD SPA</span>
            <button onClick={() => setOpen(false)} aria-label="Fermer" className="text-3xl font-light" style={{ color: 'var(--green)' }}>×</button>
          </div>
          <nav className="flex flex-col gap-6">
            {links.map((l) => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="nav-link" style={{ fontSize: '0.95rem' }}>{l.label}</a>
            ))}
          </nav>
          <a href="Rituels.html" onClick={() => setOpen(false)} className="btn-pill mt-10 justify-center">Réserver</a>
        </div>
      </div>
      {open && (
        <div onClick={() => setOpen(false)} className="lg:hidden fixed inset-0 z-[55]" style={{ background: 'rgba(26,26,26,0.4)' }} />
      )}
    </>
  );
}

/* -----------------------------------------------------------
   Hero
----------------------------------------------------------- */
function Hero() {
  return (
    <section id="hero" className="relative" style={{ minHeight: '100vh', paddingTop: 120 }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid lg:grid-cols-[1.1fr_0.9fr] gap-12 lg:gap-16 items-center pb-20 lg:pb-28">
        {/* LEFT */}
        <div className="relative z-10">
          <div className="label hero-line" style={{ animationDelay: '0.05s' }}>
            <span className="inline-block" style={{ width: 28, height: 1, background: 'var(--gold)', verticalAlign: 'middle', marginRight: 12 }}></span>
            Head Spa Japonais · Frameries, Belgique
          </div>

          <h1 className="h-hero mt-6">
            <span className="hero-line" style={{ animationDelay: '0.15s' }}>Reconnectez-vous</span>
            <span className="hero-line" style={{ animationDelay: '0.35s' }}>À Votre <em>Beauté</em></span>
            <span className="hero-line" style={{ animationDelay: '0.55s' }}>Naturelle</span>
          </h1>

          <p className="hero-para mt-7 text-[1.05rem] leading-[1.75] max-w-[480px]" style={{ color: 'var(--muted)' }}>
            Soins sur-mesure du cuir chevelu, massage crânien et détente profonde.
            Une parenthèse exclusivement dédiée aux femmes.
          </p>

          <div className="hero-cta mt-10 flex flex-wrap items-center gap-6">
            <a href="#rituels" className="btn-pill">Découvrir les Rituels <span aria-hidden>→</span></a>
            <a href="Rituels.html#reserver" className="nav-link" style={{ color: 'var(--green)' }}>Prendre Rendez-vous</a>
          </div>
        </div>

        {/* RIGHT */}
        <div className="relative hero-image-main">
          <img
            src="./images/main-page/head-spa.webp"
            alt="Soin head spa japonais — massage crânien avec peigne traditionnel"
            className="w-full"
            style={{
              height: 'min(70vh, 640px)',
              borderRadius: 24,
              objectFit: 'cover',
            }}
            loading="eager"
          />
          <div className="hero-image-secondary absolute" style={{
            bottom: -32,
            left: -28,
            width: 170,
            height: 170,
            borderRadius: '100%',
            background: 'var(--ink)',
            boxShadow: '0 20px 50px -15px rgba(63, 9, 25, 0.45), 0 0 0 1px rgba(184, 134, 90, 0.15)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'hidden',
          }}>
            <img
              src="./images/main-page/logo.png"
              alt="BIO HEAD SPA"
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                filter: 'brightness(1.1)',
              }}
            />
          </div>
          {/* Decorative line */}
          <div className="hidden lg:block absolute" style={{ top: -30, right: -10, width: 1, height: 80, background: 'var(--gold)', opacity: 0.5 }}></div>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="hero-cta absolute left-1/2 -translate-x-1/2 hidden lg:flex flex-col items-center gap-3" style={{ bottom: 36, color: 'var(--muted)' }}>
        <span className="label" style={{ fontSize: '0.65rem' }}>Scroll</span>
        <span style={{ width: 1, height: 36, background: 'var(--muted)', opacity: 0.5 }}></span>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   Rituels — Carrousel
----------------------------------------------------------- */


function Rituels() {
  const [index, setIndex] = useState(0);
  const [perView, setPerView] = useState(3);

  useEffect(() => {
    const update = () => {
      const w = window.innerWidth;
      if (w < 640) setPerView(1);
      else if (w < 1024) setPerView(2);
      else if (w < 1280) setPerView(3);
      else setPerView(3);
    };
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const total = RITUELS.length;
  const maxIndex = Math.max(0, total - perView);
  const safeIndex = Math.min(index, maxIndex);

  const prev = useCallback(() => setIndex((i) => Math.max(0, i - 1)), []);
  const next = useCallback(() => setIndex((i) => Math.min(maxIndex, i + 1)), [maxIndex]);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [prev, next]);

  // Touch swipe
  const touchStart = useRef(0);
  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    const diff = e.changedTouches[0].clientX - touchStart.current;
    if (diff > 50) prev();
    if (diff < -50) next();
  };

  const slideWidth = 100 / perView;
  const translate = -safeIndex * slideWidth;
  const dots = maxIndex + 1;

  return (
    <section id="rituels" className="relative py-24 lg:py-32" style={{ background: 'var(--bg)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12">
        <Reveal className="text-center mb-12 lg:mb-16">
          <div className="ornament mb-5 justify-center inline-flex" style={{ color: 'var(--gold)' }}>
            <span className="label" style={{ color: 'var(--gold)' }}>Nos offres</span>
          </div>
          <h2 className="h-section">Nos <em>Rituels</em></h2>
          <p className="mt-4 text-[1.05rem]" style={{ color: 'var(--muted)' }}>À s'offrir ou à offrir.</p>
        </Reveal>

        <div className="rituels-carousel">
          {/* Arrow — prev */}
          <button
            className="carousel-arrow carousel-arrow-prev"
            onClick={prev}
            disabled={safeIndex === 0}
            aria-label="Rituel précédent"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6" />
            </svg>
          </button>

          {/* Viewport */}
          <div
            className="carousel-viewport"
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
          >
            <div
              className="carousel-track"
              style={{ transform: `translateX(${translate}%)` }}
            >
              {RITUELS.map((r, i) => (
                <div key={r.name} className="carousel-slide" style={{ flex: `0 0 ${slideWidth}%` }}>
                  <RitualCard ritual={r} delay={0} />
                </div>
              ))}
            </div>
          </div>

          {/* Arrow — next */}
          <button
            className="carousel-arrow carousel-arrow-next"
            onClick={next}
            disabled={safeIndex >= maxIndex}
            aria-label="Rituel suivant"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </button>
        </div>

        {/* Dots */}
        <div className="carousel-dots" role="tablist" aria-label="Pagination des rituels">
          {Array.from({ length: dots }).map((_, i) => (
            <button
              key={i}
              onClick={() => setIndex(i)}
              className={`carousel-dot ${i === safeIndex ? 'active' : ''}`}
              aria-label={`Aller au groupe ${i + 1}`}
              aria-selected={i === safeIndex}
            />
          ))}
        </div>

        {/* Counter */}
        <div className="carousel-counter">
          <span className="font-display" style={{ color: 'var(--green)' }}>
            {String(safeIndex + 1).padStart(2, '0')}
          </span>
          <span style={{ color: 'var(--gold)' }}> / </span>
          <span className="font-display" style={{ color: 'var(--muted)' }}>
            {String(dots).padStart(2, '0')}
          </span>
        </div>

        <Reveal className="mt-12 text-center" delay={0.2}>
          <a href="Rituels.html" className="btn-pill">
            Voir tous les rituels en détail <span aria-hidden>→</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function RitualCard({ ritual, delay }) {
  const phTone = ritual.tone === 'gold' ? 'ph-gold' : 'ph-green';
  return (
    <Reveal className="ritual-card" delay={delay}>
      <div className="ritual-card-image">
        <img
          src={ritual.image}
          alt={`Soin ${ritual.name} — BIO HEAD SPA`}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          loading="lazy"
          onError={(e) => { e.target.style.display = 'none'; }}
        />
        <div className={`ph ${phTone} ritual-card-ph`}>
          <span className="ph-label">{ritual.name}</span>
        </div>
        {ritual.badge && (
          <span className={`ritual-card-badge ${ritual.badge.toLowerCase() === 'signature' ? 'gold' : ''}`}>
            <span className="dot"></span>{ritual.badge}
          </span>
        )}
      </div>
      <div className="mt-5">
        <h3 className="font-display text-[1.5rem] leading-tight" style={{ color: 'var(--green)' }}>{ritual.name}</h3>
        <div className="label mt-2" style={{ color: 'var(--gold)', fontSize: '0.72rem' }}>{ritual.details}</div>
        <p className="mt-3 text-[0.9rem] leading-[1.65]" style={{ color: 'var(--muted)' }}>
          {ritual.reveal}
        </p>
      </div>
    </Reveal>
  );
}

/* -----------------------------------------------------------
   Stats
----------------------------------------------------------- */


function Stat({ value, suffix, label }) {
  const [val, ref] = useCounter(value, 2000);
  return (
    <div ref={ref} className="stat-col flex flex-col items-center text-center px-4 py-6">
      <div className="font-display" style={{ fontSize: 'clamp(2.8rem, 5vw, 4rem)', color: 'var(--cream)', lineHeight: 1 }}>
        {val}<span style={{ color: 'var(--gold)' }}>{suffix}</span>
      </div>
      <div className="mt-4 label" style={{ color: 'var(--footer-text)', maxWidth: 180 }}>{label}</div>
    </div>
  );
}

function Stats() {
  return (
    <section id="stats" className="py-20 lg:py-24" style={{ background: 'var(--green)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12">
        <div className="grid grid-cols-2 lg:grid-cols-4">
          {STATS.map((s) => (
            <Stat key={s.label} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   Experience
----------------------------------------------------------- */
function Experience() {
  return (
    <section id="experience" className="py-24 lg:py-32" style={{ background: 'var(--bg)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid lg:grid-cols-[0.85fr_1fr] gap-10 lg:gap-20 items-center">
        <Reveal className="relative" style={{ height: 'min(80vh, 680px)' }}>
          <img
            src="./images/main-page/experience/headspatreatment.webp"
            alt="Diagnostic personnalisé du cuir chevelu — BIO HEAD SPA"
            className="absolute"
            style={{ top: 0, left: 0, width: '85%', height: '60%', borderRadius: 24, objectFit: 'cover' }}
            loading="lazy"
          />
          <img
            src="./images/main-page/experience/bioheadspa-maubeuge.webp"
            alt="Ambiance spa végétale et naturelle"
            className="absolute"
            style={{ bottom: 0, right: 0, width: '70%', height: '45%', borderRadius: 16, objectFit: 'cover', boxShadow: '0 30px 60px -20px rgba(26,26,26,0.2)' }}
            loading="lazy"
          />
          {/* Decorative vertical line */}
          <div className="absolute hidden lg:block" style={{ top: '20%', right: -30, width: 1, height: '40%', background: 'var(--gold)', opacity: 0.4 }}></div>
        </Reveal>

        <div>
          <Reveal>
            <div className="label" style={{ color: 'var(--gold)' }}>
              <span className="inline-block" style={{ width: 24, height: 1, background: 'var(--gold)', verticalAlign: 'middle', marginRight: 10 }}></span>
              L'Expérience BIO HEAD SPA
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="h-section mt-5">
              Un Sanctuaire De <em>Calme</em><br />
              Pour Chaque Soin<br />
              Que Vous Recevez
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-7 text-[1.05rem] leading-[1.8] max-w-[560px]" style={{ color: 'var(--muted)' }}>
              Nous combinons des techniques traditionnelles japonaises avec des produits
              100% naturels et bio, sans huiles essentielles. Chaque rituel est un protocole
              complet et sur-mesure : diagnostic du cuir chevelu, gommage, massage crânien,
              soin capillaire, vapeur douce… pour relâcher le corps, apaiser l'esprit
              et révéler la beauté naturelle de vos cheveux.
            </p>
          </Reveal>
          <Reveal delay={0.3} className="mt-9 flex items-center gap-8">
            <a href="#cinq-temps" className="btn-pill">Voir le rituel</a>
            <div className="hidden md:flex flex-col">
              <span className="font-display text-2xl" style={{ color: 'var(--green)' }}>Sur rendez-vous</span>
              <span className="label mt-1">Mar–Sam · 10h30–18h</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   5 Temps
----------------------------------------------------------- */

function CinqTemps() {
  const [open, setOpen] = useState(0);

  return (
    <section id="cinq-temps" className="py-24 lg:py-32" style={{ background: 'var(--sand)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-12 lg:gap-20 items-start">
        <Reveal className="relative" style={{ minHeight: 520 }}>
          <img
              src="./images/main-page/rituel-cinq-temps.webp"
              alt="Rituel head spa en cours — soin du cuir chevelu"
              style={{ width: '100%', height: '100%', minHeight: 520, borderRadius: 24, position: 'absolute', inset: 0, objectFit: 'cover' }}
              loading="lazy"
            />
          <div className="absolute" style={{ top: 28, left: 28 }}>
            <span className="badge-pill">100% Naturel</span>
          </div>
          <div className="absolute hidden lg:block" style={{ bottom: 28, right: 28, color: 'var(--cream)', textAlign: 'right' }}>
            <div
              className="font-display italic"
              style={{
                fontSize: '1.1rem',
                background: 'rgba(63, 9, 25, 0.75)',
                color: 'var(--cream)',
                padding: '12px 24px',
                borderRadius: 999,
                backdropFilter: 'blur(6px)',
              }}
            >
              « Chaque geste, un souffle. »
            </div>
          </div>
        </Reveal>

        <div>
          <Reveal>
            <div className="label" style={{ color: 'var(--gold)' }}>Le protocole</div>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="h-section mt-4">Votre Rituel En <em>5 Temps</em></h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-5 text-[1.02rem] leading-[1.8] max-w-[540px]" style={{ color: 'var(--muted)' }}>
              Laissez votre parcours bien-être commencer par un diagnostic personnalisé
              et un massage régénérant.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <a href="Rituels.html#reserver" className="btn-pill mt-7">Réserver</a>
          </Reveal>

          <Reveal delay={0.4} className="mt-12">
            <div>
              {ACCORDION_ITEMS.map((item, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} className="acc-item">
                    <button className="acc-trigger" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                      <span>{item.title}</span>
                      <span className={`acc-icon ${isOpen ? 'open' : ''}`}>+</span>
                    </button>
                    <div className={`acc-panel ${isOpen ? 'open' : ''}`}>
                      <div className="acc-panel-inner">{item.body}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>

          <Reveal delay={0.5} className="mt-12 grid sm:grid-cols-2 gap-x-8 gap-y-7">
            {BENEFITS_5T.map((b) => (
              <div key={b.title} className="flex gap-3">
                <span aria-hidden style={{ color: 'var(--gold)', fontSize: '1.1rem', lineHeight: 1.3 }}>✦</span>
                <div>
                  <h4 className="font-display text-[1.15rem]" style={{ color: 'var(--green)' }}>{b.title}</h4>
                  <p className="mt-1.5 text-[0.92rem] leading-[1.6]" style={{ color: 'var(--muted)' }}>{b.body}</p>
                </div>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   Bienfaits
----------------------------------------------------------- */


function Bienfaits() {
  return (
    <section id="bienfaits" className="py-24 lg:py-32" style={{ background: 'var(--bg)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
        <Reveal>
          <div className="grid grid-cols-2 gap-4" style={{ height: 560 }}>
            <img
              src="./images/main-page/bienfaits/massage-cranien.webp"
              alt="Massage crânien japonais — BIO HEAD SPA"
              style={{ borderRadius: 20, height: '100%', width: '100%', objectFit: 'cover' }}
              loading="lazy"
            />
            <div className="flex flex-col gap-4">
              <img
                src="./images/main-page/bienfaits/product-beta-2.webp"
                alt="Produits naturels et bio utilisés pour les soins"
                style={{ borderRadius: 16, height: '48%', width: '100%', objectFit: 'cover' }}
                loading="lazy"
              />
              <img
                src="./images/main-page/bienfaits/ambiance-zen-bioheadspa-frameries.webp"
                alt="Ambiance zen et végétale du salon"
                style={{ borderRadius: 16, height: '48%', width: '100%', objectFit: 'cover' }}
                loading="lazy"
              />
            </div>
          </div>
          <div className="mt-4 grid grid-cols-2 gap-4">
            <img
                src="./images/main-page/bienfaits/head-spa-result.webp"
                alt="Résultat après soin — cheveux sains et brillants"
                style={{ borderRadius: 20, height: 180, width: '100%', objectFit: 'cover' }}
                loading="lazy"
              />
              <div className="flex items-center gap-3 px-2">
                <div style={{ width: 36, height: 1, background: 'var(--gold)' }}></div>
                <span className="font-display italic text-[1.05rem]" style={{ color: 'var(--green)' }}>Soins authentiques, gestes précis.</span>
              </div>
          </div>
        </Reveal>

        <div>
          <Reveal>
            <div className="label" style={{ color: 'var(--gold)' }}>Bienfaits</div>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="h-section mt-4 max-w-[520px]">
              Apaisez Vos Sens Avec Un Soin <em>Thérapeutique</em>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-5 text-[1.02rem] leading-[1.8] max-w-[480px]" style={{ color: 'var(--muted)' }}>
              Chaque protocole est pensé pour rééquilibrer le corps et l'esprit.
              Une parenthèse pour soi, sans concession sur la qualité des soins.
            </p>
          </Reveal>

          <ul className="mt-9 flex flex-col gap-1">
            {BIENFAITS.map((b, i) => (
              <Reveal as="li" key={b} delay={0.3 + i * 0.12} className="flex items-center gap-5 py-4" style={{ borderTop: i === 0 ? '1px solid rgba(201,169,110,0.35)' : 'none', borderBottom: '1px solid rgba(201,169,110,0.35)' }}>
                <span aria-hidden style={{ color: 'var(--gold)', fontSize: '0.9rem' }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 10.5L8 14.5L16 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </span>
                <span className="text-[1.02rem]" style={{ color: 'var(--ink)' }}>{b}</span>
              </Reveal>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   Testimonials
----------------------------------------------------------- */

function Testimonials() {
  return (
    <section id="avis" className="py-24 lg:py-32" style={{ background: 'var(--sand)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12">
        <Reveal className="text-center mb-16">
          <div className="label mb-4" style={{ color: 'var(--gold)' }}>Témoignages</div>
          <h2 className="h-section">Ce Qu'elles En <em>Disent</em></h2>
        </Reveal>

        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={t.author} delay={i * 0.12} className="card-shadow" style={{ background: '#FFFFFF', borderRadius: 20, padding: '2.5rem', boxShadow: '0 10px 40px -25px rgba(26,26,26,0.18)' }}>
              <div className="tquote leading-none">"</div>
              <p className="font-body italic text-[1rem] leading-[1.75]" style={{ color: 'var(--ink)', marginTop: '0.5rem' }}>
                {t.text}
              </p>
              <div className="my-6" style={{ height: 1, background: 'var(--gold)', opacity: 0.5 }}></div>
              <div className="flex items-center justify-between">
                <span className="font-body font-semibold text-[0.95rem]" style={{ color: 'var(--ink)', letterSpacing: '0.04em' }}>
                  — {t.author}
                </span>
                <span style={{ color: 'var(--gold)', letterSpacing: '2px', fontSize: '0.95rem' }}>
                  {'★'.repeat(t.stars)}
                </span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="mt-14 text-center" delay={0.3}>
          <a
            href="https://www.google.com/search?q=BIO+HEAD+SPA+Avis"
            target="_blank"
            rel="noreferrer"
            className="nav-link"
            style={{ color: 'var(--green)' }}
          >
            Laisser un avis sur Google →
          </a>
        </Reveal>
      </div>
    </section>
  );
}

/* -----------------------------------------------------------
   Contact
----------------------------------------------------------- */
function Contact() {
  return (
    <section id="contact" className="py-24 lg:py-32" style={{ background: 'var(--green)', color: 'var(--cream)' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <div>
          <Reveal>
            <div className="label" style={{ color: 'var(--gold)' }}>Une question ?</div>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="h-section mt-4" style={{ color: 'var(--cream)' }}>
              On Est Là Pour <em>Vous</em>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-5 text-[1rem] leading-[1.8] max-w-[480px]" style={{ color: 'var(--footer-text)' }}>
              Suite à un ajustement technique, notre formulaire de contact est temporairement indisponible.
              En attendant, n'hésitez pas à nous écrire par email — nous vous répondons sous 24 heures.
            </p>
          </Reveal>

          <Reveal delay={0.3} className="mt-10">
            <a href="mailto:bioheadspa@gmail.com" className="flex items-center gap-4"
              style={{ background: 'rgba(250,246,241,0.08)', borderRadius: 16, padding: '1.15rem 1.5rem', transition: 'background 0.3s', border: '1px solid rgba(184,134,90,0.25)', maxWidth: 480 }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(250,246,241,0.14)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(250,246,241,0.08)'}
            >
              <span style={{ width: 44, height: 44, borderRadius: '50%', border: '1px solid rgba(184,134,90,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: 'var(--gold)' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
              </span>
              <div>
                <div style={{ fontWeight: 500, fontSize: '0.95rem', color: 'var(--cream)' }}>Email</div>
                <div style={{ fontSize: '0.78rem', color: 'var(--footer-text)', marginTop: 2 }}>bioheadspa@gmail.com</div>
              </div>
              <span style={{ marginLeft: 'auto', color: 'var(--gold)', fontSize: '1.1rem' }}>→</span>
            </a>
          </Reveal>
        </div>

        {/* RIGHT — Image + infos */}
        <Reveal delay={0.2} className="relative" style={{ minHeight: 540 }}>
          <img
            src="./images/main-page/salon/headspa-frameries-accueil.webp"
            alt="Intérieur du salon BIO HEAD SPA"
            style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              borderRadius: 24,
              minHeight: 540,
              objectFit: 'cover',
            }}
            loading="lazy"
          />
          <div
            className="absolute"
            style={{
              left: 24,
              right: 24,
              bottom: 24,
              background: 'rgba(26,26,26,0.7)',
              backdropFilter: 'blur(8px)',
              borderRadius: 16,
              padding: '1.5rem 1.75rem',
              color: 'var(--cream)',
            }}
          >
            <div className="flex flex-col gap-3 text-[0.9rem]" style={{ lineHeight: 1.5 }}>
              <InfoLine icon="pin">Rue de l'Industrie 181, 7080 Frameries, Belgique</InfoLine>
              <InfoLine icon="clock">Mar–Sam · 10h30–12h30 / 13h30–18h</InfoLine>
              <InfoLine icon="phone">+32 491 495 753</InfoLine>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function InfoLine({ icon, children }) {
  const icons = {
    pin: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
        <circle cx="12" cy="10" r="3" />
      </svg>
    ),
    clock: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" />
        <polyline points="12 6 12 12 16 14" />
      </svg>
    ),
    phone: (
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
      </svg>
    ),
  };
  return (
    <div className="flex items-start gap-3">
      <span style={{ color: 'var(--gold)', flexShrink: 0, marginTop: 4 }}>{icons[icon]}</span>
      <span>{children}</span>
    </div>
  );
}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
function Footer() {
  return (
    <footer style={{ background: 'var(--footer-bg)', color: 'var(--footer-text)', padding: '4rem 0 2rem' }}>
      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 grid md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
        <div>
          <div className="font-display text-[1.5rem]" style={{ color: 'var(--cream)', letterSpacing: '0.1em' }}>BIO HEAD SPA</div>
          <p className="mt-5 text-[0.92rem] leading-[1.7] max-w-[260px]" style={{ color: 'var(--footer-text)' }}>
            Soins japonais du cuir chevelu, massage crânien et détente profonde à Frameries.
          </p>
          <div className="mt-7 flex items-center gap-4">
            <SocialIcon href="https://www.instagram.com/bio_head_spa" label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></svg>
            </SocialIcon>
            <SocialIcon href="https://www.facebook.com/share/1DWFuF9oaM/" label="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>
            </SocialIcon>
            <SocialIcon href="https://www.tiktok.com/@bio.head.spa" label="TikTok">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" /></svg>
            </SocialIcon>
          </div>
        </div>

        <FooterCol title="Rituels">
          {['Découverte', 'Évasion', 'Premium', 'K-Serenity', 'Circuit Bien-Être'].map((l) => (
            <a key={l} href="#rituels" className="f-link">{l}</a>
          ))}
        </FooterCol>

        <FooterCol title="Infos">
          <a href="#contact" className="f-link">Horaires</a>
          <a href="#contact" className="f-link">Contact</a>
          <a href="CGU.html" className="f-link">Mentions légales</a>
        </FooterCol>

        <FooterCol title="Contact">
          <span className="f-link">Rue de l'Industrie 181</span>
          <span className="f-link">7080 Frameries, Belgique</span>
          <a href="tel:+32491495753" className="f-link">+32 491 495 753</a>
          <a href="mailto:bioheadspa@gmail.com" className="f-link">bioheadspa@gmail.com</a>
        </FooterCol>
      </div>

      <div className="max-w-[1400px] mx-auto px-6 lg:px-12 mt-14 pt-6 text-center" style={{ borderTop: '1px solid #2A2A2A' }}>
        <span className="label" style={{ color: 'var(--footer-text)', fontSize: '0.7rem' }}>
          © 2026 BIO HEAD SPA — Tous droits réservés
        </span>
      </div>
    </footer>
  );
}

function FooterCol({ title, children }) {
  return (
    <div>
      <div className="label mb-5" style={{ color: 'var(--cream)' }}>{title}</div>
      <div className="flex flex-col gap-2">{children}</div>
    </div>
  );
}

function SocialIcon({ href, label, children }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      aria-label={label}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 36,
        height: 36,
        borderRadius: '50%',
        border: '1px solid rgba(168,159,148,0.35)',
        color: 'var(--footer-text)',
        transition: 'color 0.3s, border-color 0.3s',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--gold)'; e.currentTarget.style.borderColor = 'var(--gold)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--footer-text)'; e.currentTarget.style.borderColor = 'rgba(168,159,148,0.35)'; }}
    >
      {children}
    </a>
  );
}

/* -----------------------------------------------------------
   App
----------------------------------------------------------- */
function App() {
  return (
    <>
      <Navbar />
      <main>
        <Hero />
        <Rituels />
        <Stats />
        <Experience />
        <CinqTemps />
        <Bienfaits />
        <Testimonials />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);