// =============================================================
// Galerie Guzman — App
// Site immersif. Toggle allégorique/moderne global.
// Curseur perso, parallaxe douce, fondus longs, lightbox.
// =============================================================

const { useState, useEffect, useRef, useCallback, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "grain": 4,
  "tempo": "medium",
  "hero": "triptyque",
  "glass": false
} /*EDITMODE-END*/;

// ---------- Custom cursor ----------
function CustomCursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);

  useEffect(() => {
    if (matchMedia('(pointer: coarse)').matches) return;
    document.body.classList.add('has-cursor');

    let mx = window.innerWidth / 2,my = window.innerHeight / 2;
    let rx = mx,ry = my;
    let dx = mx,dy = my;
    let raf;

    const onMove = (e) => {mx = e.clientX;my = e.clientY;};
    const tick = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      dx += (mx - dx) * 0.42;
      dy += (my - dy) * 0.42;
      if (ringRef.current) ringRef.current.style.transform = `translate3d(${rx}px, ${ry}px, 0) translate(-50%, -50%)`;
      if (dotRef.current) dotRef.current.style.transform = `translate3d(${dx}px, ${dy}px, 0) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onOver = (e) => {
      if (!ringRef.current) return;
      const art = e.target.closest('[data-cursor="art"]');
      const link = e.target.closest('a, button, [role="button"], input, textarea, select');
      ringRef.current.classList.toggle('is-art', !!art);
      ringRef.current.classList.toggle('is-link', !art && !!link);
      if (dotRef.current) dotRef.current.classList.toggle('is-art', !!art);
    };

    window.addEventListener('mousemove', onMove);
    document.addEventListener('mouseover', onOver);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onOver);
      document.body.classList.remove('has-cursor');
    };
  }, []);

  return (
    <>
      <div ref={ringRef} className="cursor-ring"></div>
      <div ref={dotRef} className="cursor-dot" style={{ width: '8px', height: '8px' }}></div>
    </>);

}

// ---------- Reveal-on-scroll ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ---------- Parallax (gentle) ----------
function useParallax() {
  useEffect(() => {
    let raf;
    const elems = () => document.querySelectorAll('[data-parallax]');
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const vh = window.innerHeight;
        elems().forEach((el) => {
          const speed = parseFloat(el.dataset.parallax) || 0.08;
          const r = el.getBoundingClientRect();
          const center = r.top + r.height / 2 - vh / 2;
          el.style.transform = `translate3d(0, ${center * -speed}px, 0) scale(1.06)`;
        });
        raf = 0;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {window.removeEventListener('scroll', onScroll);window.removeEventListener('resize', onScroll);cancelAnimationFrame(raf);};
  }, []);
}

// ---------- Header ----------
function Header({ vision, setVision }) {
  return (
    <header className="header">
      <a className="header-brand" href="#top">
        Guzman
        <small style={{ height: "39.1406px" }}>PEINTRE · ARTISANT PROVENÇAL</small>
      </a>
      <div className="header-toggle" data-vision={vision} role="group" aria-label="Choix de salle">
        <div className="header-toggle-pill"></div>
        <button aria-pressed={vision === 'allegorique'} onClick={() => setVision('allegorique')}>Récits</button>
        <button aria-pressed={vision === 'moderne'} onClick={() => setVision('moderne')}>Formes</button>
      </div>
      <nav className="header-nav">
        <a href="#salle">La salle</a>
        <a href="#intention">Note d'intention</a>
        <a href="#bio">Biographie</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>);

}

// ---------- Intro Hero — common, with auto-cycling carousel ----------
function IntroHero({ setVision }) {
  const slides = useMemo(() => [
  { src: 'assets/intro-1.svg', caption: 'lisière du soir, atelier' },
  { src: 'assets/intro-2.svg', caption: 'aube en forêt, Sologne' },
  { src: 'assets/intro-3.svg', caption: 'voile d’eau, étude' },
  { src: 'assets/intro-4.svg', caption: 'partition bleue et verte' }],
  []);
  const [active, setActive] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % slides.length), 6000);
    return () => clearInterval(t);
  }, [slides.length]);

  const enter = (vision) => {
    setVision(vision);
    setTimeout(() => {
      document.getElementById('salle')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 50);
  };

  return (
    <section className="intro-hero" id="intro">
      <div className="intro-slides">
        {slides.map((s, i) =>
        <div key={i} className={`intro-slide ${i === active ? 'is-active' : ''}`}>
            <img src={s.src} alt="" aria-hidden="true" />
          </div>
        )}
      </div>
      <div className="intro-overlay"></div>
      <div className="intro-content">
        <div className="intro-eyebrow">GALERIE YVON GUZMAN</div>
        <div className="intro-center">
          <h1 className="intro-title" style={{ letterSpacing: "-2.6px", textAlign: "center" }}>
            Faire vivre<br /><em>l'impossible.</em>
          </h1>
          <p className="intro-lede">Une passion pour la création, deux salles ouvertes.
Une exposition à parcourir comme on parcourt un poème.

          </p>
          <div className="intro-cta">
            <button className="intro-cta-btn" data-vision="allegorique" data-cursor="link" onClick={() => enter('allegorique')}>
              <span className="intro-cta-eyebrow">Salle 01</span>
              <span className="intro-cta-title">Les Récits</span>
              <span className="intro-cta-meta">UNIVERS ALLEGORIQUE · 10 TOILES</span>
            </button>
            <button className="intro-cta-btn" data-vision="moderne" data-cursor="link" onClick={() => enter('moderne')}>
              <span className="intro-cta-eyebrow">Salle 02</span>
              <span className="intro-cta-title">Les Formes</span>
              <span className="intro-cta-meta">UNIVERS MODERNE · 10 ŒUVRES</span>
            </button>
          </div>
        </div>
        <div className="intro-bottom">
          <div className="intro-pagination">
            {slides.map((_, i) =>
            <button key={i}
            className={i === active ? 'is-active' : ''}
            onClick={() => setActive(i)}
            aria-label={`Image ${i + 1}`}></button>
            )}
          </div>
          <div className="intro-scroll">
            <span>Entrer</span>
            <span className="intro-scroll-line"></span>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Hero — triptyque ----------
function HeroTriptyque({ vision, onOpenOeuvre, oeuvres }) {
  const featured = useMemo(() => {
    const allegoMain = ['passage-soir', 'recits-laiton', 'songe-orange'];
    const moderneMain = ['suspension-4', 'blanc-rouge', 'geometrie-jaune'];
    const ids = vision === 'allegorique' ? allegoMain : moderneMain;
    return ids.map((id) => oeuvres.find((o) => o.id === id)).filter(Boolean);
  }, [vision, oeuvres]);

  return (
    <section className="hero" data-variant="triptyque">
      <div className="hero-head reveal">
        <div className="hero-eyebrow section-eyebrow">
          {vision === 'allegorique' ? "Mot de l'artiste" : 'Salle des formes · 2026'}
        </div>
      </div>
      <div className="reveal" style={{ '--reveal-delay': '120ms' }}>
        {vision === 'allegorique' ?
        <h1 className="hero-title">
            Un regard,<br /><em>3 chefs d'oeuvre.</em>
          </h1> :

        <h1 className="hero-title">
            La couleur,<br /><em>posée.</em>
          </h1>
        }
      </div>
      <div className="triptyque reveal" style={{ '--reveal-delay': '320ms' }}>
        {featured.map((o, i) =>
        <button key={o.id} className="triptyque-slot" data-cursor="art" onClick={() => onOpenOeuvre(o.id)}>
            <div className="triptyque-frame">
              <img src={o.image} alt={o.titre} data-parallax="0.04" style={{ opacity: "1" }} />
            </div>
            <div className="triptyque-cartel">
              <div className="triptyque-cartel-title"><em>{o.titre}</em></div>
              
            </div>
          </button>
        )}
      </div>
    </section>);

}

// ---------- Hero — fullbleed ----------
function HeroFullbleed({ vision, onOpenOeuvre, oeuvres }) {
  const work = useMemo(() => {
    const id = vision === 'allegorique' ? 'songe-orange' : 'geometrie-jaune';
    return oeuvres.find((o) => o.id === id);
  }, [vision, oeuvres]);

  return (
    <section className="hero" data-variant="fullbleed">
      <div className="hero-fullbleed-art" data-cursor="art" onClick={() => onOpenOeuvre(work.id)}>
        <img src={work.image} alt={work.titre} data-parallax="0.05" />
      </div>
      <div className="hero-fullbleed-overlay"></div>
      <div className="hero-fullbleed-text">
        <div className="hero-head reveal">
          <div className="hero-eyebrow section-eyebrow" style={{ color: 'var(--ink)' }}>
            {vision === 'allegorique' ? 'Salle des récits · printemps 2026' : 'Salle des formes · printemps 2026'}
          </div>
          <div className="hero-meta">
            Œuvre courante<br />
            <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink)' }}>{work.titre}</em>
          </div>
        </div>
        <div className="reveal" style={{ '--reveal-delay': '180ms' }}>
          {vision === 'allegorique' ?
          <h1 className="hero-title">
              Le regard,<br /><em>au ralenti.</em>
            </h1> :

          <h1 className="hero-title">
              La couleur,<br /><em>posée.</em>
            </h1>
          }
        </div>
      </div>
    </section>);

}

// ---------- Hero — editorial ----------
function HeroEditorial({ vision, onOpenOeuvre, oeuvres }) {
  const work = useMemo(() => {
    const id = vision === 'allegorique' ? 'recits-laiton' : 'blanc-rouge';
    return oeuvres.find((o) => o.id === id);
  }, [vision, oeuvres]);

  return (
    <section className="hero" data-variant="editorial">
      <div className="hero-editorial-text">
        <div className="hero-head reveal">
          <div className="hero-eyebrow section-eyebrow">
            {vision === 'allegorique' ? 'Salle des récits · printemps 2026' : 'Salle des formes · printemps 2026'}
          </div>
        </div>
        <div className="reveal" style={{ '--reveal-delay': '120ms' }}>
          {vision === 'allegorique' ?
          <h1 className="hero-title">
              Le regard,<br /><em>au ralenti.</em>
            </h1> :

          <h1 className="hero-title">
              La couleur,<br /><em>posée.</em>
            </h1>
          }
        </div>
        <p className="reveal" style={{
          fontFamily: 'var(--font-display)',
          fontStyle: 'italic',
          fontSize: 'clamp(20px, 1.8vw, 26px)',
          lineHeight: 1.5,
          fontWeight: 300,
          color: 'var(--ink-soft)',
          maxWidth: '36ch',
          margin: 0,
          '--reveal-delay': '260ms'
        }}>
          {vision === 'allegorique' ?
          "Quinze toiles où la matière raconte. Une exposition lente, à parcourir comme on parcourt un poème." :
          "Douze œuvres récentes. Géométrie, couleur, équilibre — l'épure d'un regard contemporain."}
        </p>
        <div className="hero-cta reveal" style={{ '--reveal-delay': '380ms' }}>
          <a href="#salle" className="btn-line">Entrer dans la salle <span className="arrow"></span></a>
          <a href="#intention" className="btn-line" style={{ borderBottomColor: 'var(--rule-strong)' }}>Lire la note d'intention</a>
        </div>
      </div>
      <button className="hero-editorial-art reveal" data-cursor="art" onClick={() => onOpenOeuvre(work.id)} style={{ background: 'var(--bg-elev)', '--reveal-delay': '420ms' }}>
        <img src={work.image} alt={work.titre} data-parallax="0.05" />
      </button>
    </section>);

}

// ---------- Intent ribbon ----------
function IntentRibbon() {
  return (
    <section className="intent-ribbon reveal">
      <blockquote className="pullquote">« L'art a toujours été partie intégrante dans ma vie. Aujourd'hui, je vous partage ma passion »

      </blockquote>
      <div className="signature">— YVON GUZMAN</div>
    </section>);

}

// ---------- Salle (mur de musée) ----------
function Salle({ vision, onOpenOeuvre, oeuvres }) {
  const works = oeuvres.filter((o) => o.salle === vision);

  return (
    <section className="section" id="salle">
      <div className="salles-intro reveal">
        <div>
          <div className="section-eyebrow" style={{ marginBottom: 24 }}>
            {vision === 'allegorique' ? 'Salle 01 · des récits' : 'Salle 02 · des formes'}
          </div>
          <h2>
            {vision === 'allegorique' ?
            <>Dix toiles,<br />qui vous <em>transportent</em>.</> :

            <>Dix œuvres<br />où la couleur <em>se pose</em>.</>
            }
          </h2>
        </div>
        <p>
          {vision === 'allegorique' ?
          "Laissez vous transporter dans mes pensées à travers mes toiles. Un style authentique, où chaque couleur trouve sa place. " :
          "Une exposition à hauteur d'œil. Chaque tableau cherche un équilibre de couleur, un instant qui tient — comme une partition jouée sans préméditation."}
        </p>
      </div>

      <div className="wall">
        {works.map((o, i) =>
        <button key={o.id} className="wall-item reveal" style={{ '--reveal-delay': `${i * 80}ms` }} data-cursor="art" onClick={() => onOpenOeuvre(o.id)}>
            <span className="wall-num">{o.num}</span>
            <div className="wall-art" data-format={o.format}>
              <img src={o.image} alt={o.titre} data-parallax="0.035" />
            </div>
            <div className="wall-cartel">
              <div className="wall-cartel-title"><em>{o.titre}</em></div>
              <div className="wall-cartel-meta">
                {vision !== "moderne" && (
                  <>
                    <span>{o.technique}</span>
                    <span>·</span>
                    <span>{o.dim}</span>
                  </>
                )}
                {o.statut && <span className="wall-cartel-status" data-statut={o.statut}>{o.statut}</span>}
              </div>
            </div>
          </button>
        )}
      </div>
    </section>);

}

// ---------- Intention ----------
function Intention({ data }) {
  return (
    <section className="intent" id="intention">
      <div className="reveal">
        <div className="section-eyebrow" style={{ marginBottom: 32 }}>Note d'intention</div>
        <span className="intent-rule"></span>
      </div>
      <div className="intent-paragraphs">
        {data.intention.map((p, i) =>
        <p key={i} className="reveal" style={{ '--reveal-delay': `${i * 120}ms` }}>{p}</p>
        )}
      </div>
      <div className="intent-signature reveal">
        <div className="intent-signature-name">Y. Guzman</div>
        <div className="intent-signature-meta">
          ALLAUCH · 2026
        </div>
      </div>
    </section>);

}

// ---------- Bio + Expositions ----------
function Biographie({ data }) {
  return (
    <section className="bio" id="bio">
      <div className="bio-left reveal">
        <div className="section-eyebrow">Biographie</div>
        <h2>L'artiste,<br />en quelques mots.</h2>
        <div className="bio-portrait">
          <img src="assets/guzman-portrait.jpg" alt="Portrait d'Yvon Guzman en atelier" style={{ borderRadius: "10px" }} />
        </div>
      </div>
      <div className="bio-right">
        <p className="body-lede reveal">Yvon Guzman vit et travaille à Allauch depuis plus de 30 ans. Il adopte un point de vue unique, partagé entre figuration allégorique et sculptures ou verreries.

        </p>
        <p className="body reveal" style={{ '--reveal-delay': '120ms' }}>{data.bio}</p>

        <div className="expos reveal" style={{ '--reveal-delay': '240ms' }}>
          <div className="expos-head">
            <h3>Expositions sélectionnées</h3>
          </div>
          <ul className="expos-list">
            {data.expositions.map((e, i) =>
            <li key={i}>
                <span className="expos-year">{e.annee}</span>
                <span className="expos-titre">
                  {e.titre ? <em>{e.titre}</em> : <span style={{ color: 'var(--ink-mute)' }}>Martinique</span>}
                  <small>{e.lieu}{e.ville ? (e.lieu ? `, ${e.ville.toUpperCase()}` : e.ville.toUpperCase()) : ''}</small>
                </span>
                <span className="expos-type">{e.type}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

// ---------- Contact ----------
function Contact() {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [form, setForm] = useState({ nom: '', email: '', sujet: 'oeuvre', oeuvre: '', message: '' });

  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);

    try {
      const response = await fetch('https://formspree.io/f/xqevvdrw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });

      if (response.ok) {
        setSent(true);
        setForm({ nom: '', email: '', sujet: 'oeuvre', oeuvre: '', message: '' });
      } else {
        setError('Erreur lors de l\'envoi. Veuillez réessayer.');
      }
    } catch (err) {
      setError('Problème de connexion. Veuillez réessayer.');
      console.error(err);
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact" id="contact">
      <div className="contact-inner">
        <div className="contact-left reveal">
          <div className="section-eyebrow">Acquérir · échanger</div>
          <h2>Pour <em>recevoir</em><br />la note d'une toile.</h2>
          <p>Les prix ne figurent pas sur le site, chaque œuvre fait l'objet d'un échange. Écrivez à Yvon Guzman, il vous renseignera personnellement.</p>
          <div className="contact-meta">
            <div className="contact-meta-row">
              <span className="contact-meta-label">Atelier</span>
              <span className="contact-meta-value">Allauch, France</span>
            </div>

            <div className="contact-meta-row">
              <span className="contact-meta-label">Écrire</span>
              <span className="contact-meta-value"><a href="mailto:yvonguzman@neuf.fr">yvonguzman@neuf.fr</a></span>
            </div>
          </div>
        </div>

        <div className="contact-form reveal" style={{ '--reveal-delay': '120ms' }}>
          <form className="contact-form-grid" onSubmit={submit}>
            <div className="contact-row-2">
              <div className="contact-field">
                <label htmlFor="nom">Votre nom</label>
                <input id="nom" type="text" required value={form.nom} onChange={(e) => setForm({ ...form, nom: e.target.value })} placeholder="Camille Béranger" />
              </div>
              <div className="contact-field">
                <label htmlFor="email">Adresse courriel</label>
                <input id="email" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="vous@exemple.fr" />
              </div>
            </div>
            <div className="contact-field">
              <label htmlFor="sujet">Objet de votre message</label>
              <select id="sujet" value={form.sujet} onChange={(e) => setForm({ ...form, sujet: e.target.value })}>
                <option value="oeuvre">Acquérir une œuvre</option>

                <option value="presse">Presse / exposition</option>
                <option value="autre">Autre échange</option>
              </select>
            </div>
            {form.sujet === 'oeuvre' &&
            <div className="contact-field">
                <label htmlFor="oeuvre">Œuvre concernée (facultatif)</label>
                <input id="oeuvre" type="text" value={form.oeuvre} onChange={(e) => setForm({ ...form, oeuvre: e.target.value })} placeholder="" />
              </div>
            }
            <div className="contact-field">
              <label htmlFor="message">Votre message</label>
              <textarea id="message" rows="5" required value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder=""></textarea>
            </div>
            {sent ?
            <div className="contact-success">Votre message est parti. Yvon Guzman vous répondra dans les jours qui viennent.</div> :

            error ?
            <div className="contact-error" style={{ color: 'var(--ink-alert, #b00020)', fontFamily: 'var(--font-display)', fontSize: 14 }}>
              {error}
            </div> :

            <button className="contact-submit" type="submit" disabled={sending} style={{ opacity: sending ? 0.6 : 1, cursor: sending ? 'not-allowed' : 'pointer' }}>
                {sending ?
              <>
                    <span style={{ display: 'inline-block', marginRight: '8px' }}>⏳</span>
                    Envoi en cours…
                  </> :

              <>
                    Envoyer la note
                    <span className="contact-submit-arrow"></span>
                  </>
              }
              </button>
            }
          </form>
        </div>
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="footer-wordmark"><em>Guzman</em></div>
          <p className="footer-tag">Un peintre. Deux salles, un même musée. </p>
        </div>
        <div>
          <h4>Salles</h4>
          <ul className="footer-list">
            <li>Récits — allégorique</li>
            <li>Formes — moderne</li>
          </ul>
        </div>
        <div>
          <h4>Pages</h4>
          <ul className="footer-list">
            <li><a href="#intention">Note d'intention</a></li>
            <li><a href="#bio">Biographie</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Suivre</h4>
          <ul className="footer-list">
            <li><a href="#">Nouvelles toiles</a></li>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Revue de presse</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Guzman</span>
        <span>ATELIER · ALLAUCH</span>
        <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('mentions'); }}>Mentions légales</a>
      </div>
    </footer>);

}

// ---------- Lightbox ----------
function Lightbox({ id, oeuvres, onClose, onNav }) {
  const open = id != null;
  const current = oeuvres.find((o) => o.id === id);
  const sameSalle = current ? oeuvres.filter((o) => o.salle === current.salle) : [];
  const idx = current ? sameSalle.findIndex((o) => o.id === id) : 0;
  const prevId = sameSalle.length ? sameSalle[(idx - 1 + sameSalle.length) % sameSalle.length].id : null;
  const nextId = sameSalle.length ? sameSalle[(idx + 1) % sameSalle.length].id : null;

  useEffect(() => {
    document.body.classList.toggle('lightbox-open', open);
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft' && prevId) onNav(prevId);
      if (e.key === 'ArrowRight' && nextId) onNav(nextId);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, prevId, nextId, onClose, onNav]);

  if (!current) {
    return <div className={`lightbox ${open ? 'is-open' : ''}`} aria-hidden="true"></div>;
  }

  return (
    <div className={`lightbox ${open ? 'is-open' : ''}`} data-format={current.format} role="dialog" aria-modal="true" aria-label={current.titre}>
      <button className="lightbox-close" onClick={onClose} aria-label="Fermer"></button>
      {prevId && <button className="lightbox-nav prev" onClick={() => onNav(prevId)} aria-label="Œuvre précédente">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M10 2 L4 8 L10 14" /></svg>
      </button>}
      {nextId && <button className="lightbox-nav next" onClick={() => onNav(nextId)} aria-label="Œuvre suivante">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M6 2 L12 8 L6 14" /></svg>
      </button>}
      <div className="lightbox-art">
        <div className="lightbox-art-frame">
          <img src={current.image} alt={current.titre} />
        </div>
      </div>
      <div className="lightbox-info">
        <div className="lightbox-eyebrow">
          {current.salle === 'allegorique' ? 'Salle des récits' : 'Salle des formes'} · n° {current.num}
        </div>
        <h2 className="lightbox-title"><em>{current.titre}</em></h2>
        <p className="lightbox-note" style={{ textAlign: "center" }}>{current.note}</p>
        <dl className="lightbox-cartel">
          {current.salle !== 'moderne' && (
            <>
              <dt>Technique</dt>           <dd>{current.technique}</dd>
              <dt>Dimensions</dt>          <dd>{current.dim}</dd>
            </>
          )}
          
          <dt>Disponibilité</dt>       <dd className="statut" data-statut={current.statut}>{current.statut}</dd>
        </dl>
        <div className="lightbox-actions">
          {current.statut === 'disponible' || current.statut === 'réservée' ?
          <a href="#contact" className="btn-line" onClick={onClose}>Contacter pour acquérir <span className="arrow"></span></a> :

          <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--ink-mute)' }}>Cette œuvre a trouvé sa place.</span>
          }
        </div>
      </div>

    </div>);

}

// ---------- Philosophie artistique ----------
function PhilosophieSection() {
  const cards = [
  {
    num: '01',
    titre: 'La dualité',
    texte: 'Deux univers se côtoient dans mon œuvre — le récit allégorique et la forme abstraite. Non pas comme une contradiction, mais comme deux langages d\'une même pensée.'
  },
  {
    num: '02',
    titre: 'L\'authenticité',
    texte: 'Peindre sans compromis. Chaque toile est un engagement envers la matière, envers les couleurs, envers ce qui m\'a poussé à poser le premier coup de pinceau. '
  },
  {
    num: '03',
    titre: 'L\'innovation',
    texte: 'Explorer sans relâche les possibilités de la matière. L\'innovation n\'est pas une rupture, c\'est une curiosité qui dure.'
  }];


  return (
    <section className="philosophie" id="philosophie">
      <div className="philosophie-head reveal">
        <div className="section-eyebrow" style={{ marginBottom: 24 }}>Ma philosophie artistique</div>
        <h2>Deux regards,<br /><em>une seule main.</em></h2>
      </div>
      <div className="philosophie-cards">
        {cards.map((c, i) =>
        <div key={i} className="philosophie-card reveal" style={{ '--reveal-delay': `${i * 140}ms` }}>
            <div className="philosophie-card-num">{c.num}</div>
            <h3 className="philosophie-card-titre"><em>{c.titre}</em></h3>
            <p className="philosophie-card-texte">{c.texte}</p>
          </div>
        )}
      </div>
    </section>);

}

// ---------- Stats bandeau ----------
function StatsBandeau() {
  const stats = [
  { valeur: '+30', unite: '', label: 'ans d\'atelier' },
  { valeur: '20', unite: '+', label: 'expositions' },
  { valeur: '100', unite: '+', label: 'oeuvres' },
  { valeur: '2', unite: '', label: 'outres mers' }];


  return (
    <section className="stats-bandeau">
      {stats.map((s, i) =>
      <div key={i} className="stats-item">
          <div className="stats-valeur">
            <span className="stats-nombre">{s.valeur}</span>
            {s.unite && <span className="stats-unite">{s.unite}</span>}
          </div>
          <div className="stats-label">{s.label}</div>
        </div>
      )}
    </section>);

}

// ---------- App ----------
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [vision, setVision] = useState('allegorique');
  const [lightboxId, setLightboxId] = useState(null);
  const [page, setPage] = useState('galerie');

  const oeuvres = window.GUZMAN_DATA.oeuvres;

  const navigateTo = useCallback((p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);
  const backToGalerie = useCallback(() => navigateTo('galerie'), [navigateTo]);

  // sync vision to html attr
  useEffect(() => {
    document.documentElement.setAttribute('data-vision', vision);
  }, [vision]);

  // sync tweaks to html attrs / css vars
  useEffect(() => {
    document.documentElement.style.setProperty('--grain', tweaks.grain / 100);
    document.documentElement.setAttribute('data-tempo', tweaks.tempo);
    document.documentElement.setAttribute('data-glass', tweaks.glass ? 'on' : 'off');
  }, [tweaks.grain, tweaks.tempo, tweaks.glass]);

  useReveal();
  useParallax();

  const openOeuvre = useCallback((id) => setLightboxId(id), []);
  const closeOeuvre = useCallback(() => setLightboxId(null), []);

  // Render hero by variant
  let Hero;
  if (tweaks.hero === 'fullbleed') Hero = HeroFullbleed;else
  if (tweaks.hero === 'editorial') Hero = HeroEditorial;else
  Hero = HeroTriptyque;

  if (page === 'mentions') {
    return (
      <>
        <CustomCursor />
        <MentionsLegales onBack={backToGalerie} />
      </>
    );
  }

  return (
    <>
      <CustomCursor />
      <Header vision={vision} setVision={setVision} />
      <main id="top">
        <IntroHero setVision={setVision} />
        <Hero vision={vision} onOpenOeuvre={openOeuvre} oeuvres={oeuvres} />
        <IntentRibbon />
        <Salle vision={vision} onOpenOeuvre={openOeuvre} oeuvres={oeuvres} />
        <PhilosophieSection />
        <StatsBandeau />
        <Intention data={window.GUZMAN_DATA} />
        <Biographie data={window.GUZMAN_DATA} />
        <Contact />
      </main>
      <Lightbox id={lightboxId} oeuvres={oeuvres} onClose={closeOeuvre} onNav={openOeuvre} />
      <Footer onNavigate={navigateTo} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Atmosphère">
          <TweakSlider label="Grain papier" value={tweaks.grain} min={0} max={14} step={1} unit="%" onChange={(v) => setTweak('grain', v)} />
          <TweakRadio label="Tempo" value={tweaks.tempo} options={[
          { value: 'lent', label: 'Lent' },
          { value: 'medium', label: 'Médium' },
          { value: 'rapide', label: 'Rapide' }]
          } onChange={(v) => setTweak('tempo', v)} />
        </TweakSection>
        <TweakSection label="Accueil">
          <TweakRadio label="Hero" value={tweaks.hero} options={[
          { value: 'triptyque', label: 'Triptyque' },
          { value: 'editorial', label: 'Éditorial' },
          { value: 'fullbleed', label: 'Plein-écran' }]
          } onChange={(v) => setTweak('hero', v)} />
        </TweakSection>
        <TweakSection label="Effets">
          <TweakToggle label="Liquid glass" value={tweaks.glass} onChange={(v) => setTweak('glass', v)} />
        </TweakSection>
      </TweaksPanel>
    </>);

}

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