function Hero({ jewel, onPick }) {
  const { Button } = QDS();
  const models = (window.QJewel && window.QJewel.models) || [];
  return <section id="top" data-pin="" data-screen-label="Hero" className="hero pin" style={{ height: '190vh' }}>
    <div className="sticky">
      <div className="blob b1" data-par=""></div><div className="blob b2" data-par=""></div><div className="blob b3" data-par=""></div>
      <img src="assets/elements/02_etoile.svg" alt="" className="float-el" style={{ top: '16%', left: '44%', width: 70 }}></img>
      <img src="assets/elements/03_rayons.svg" alt="" className="float-el slow" style={{ bottom: '14%', left: '6%', width: 80 }}></img>
      <img src="assets/elements/07_constellation.svg" alt="" className="float-el" style={{ top: '22%', right: '4%', width: 90, animationDelay: '-2s' }}></img>
      <div className="hero-grid">
        <div className="hero-copy">
          <AnimatedLogo className="hero-logo"></AnimatedLogo>
          <h1 className="hero-h1"><Words text="Bijoux de créateurs & Accessoires à Bourges"></Words></h1>
          <p className="hero-sub" data-reveal="">Une sélection singulière, audacieuse et raffinée au cœur du centre historique.</p>
          <div className="hero-cta" data-reveal="" style={{ '--d': '.25s' }}>
            <Button variant="secondary" size="lg" iconRight="arrow-right" onClick={() => go('univers')}>Découvrir nos univers</Button>
            <Button variant="outline" size="lg" iconLeft="map-pin" onClick={() => go('visite')} style={{ color: 'var(--q-creme)', borderColor: 'rgba(255,248,236,.7)', background: 'transparent' }}>Nous rendre visite</Button>
          </div>
        </div>
        <div className="hero-stage">
          <div className="disc-wrap">
            <div className="disc d-sun"></div>
            <div className="disc d-cream"></div>
            <img src="assets/elements/09_cercle.svg" alt="" className="disc-ring"></img>
            <div className="jewel-anchor" data-jewel-anchor="0" data-jewel-drag="" title="Faites-le tourner"></div>
            <Paper n={3} color="var(--q-fuchsia)" className="sway turn-tag"><span>Tournez-le</span></Paper>
          </div>
          <div className="picker" role="radiogroup" aria-label="Choisir le bijou 3D">
            {models.map((m, i) => <button key={m.id} role="radio" aria-checked={jewel === m.id} className={'pick' + (jewel === m.id ? ' on' : '')} style={{ '--r': (i % 2 ? 2 : -2) + 'deg' }} onClick={() => onPick(m.id)}>{m.label}</button>)}
          </div>
        </div>
      </div>
      <div className="scroll-hint"><span></span>Faites défiler</div>
    </div>
  </section>;
}

function Marquee({ items, color = 'var(--q-sunflower)', rot = -1.6, speed = 28, reverse, ink = KEY }) {
  const row = items.map((t, i) => <React.Fragment key={i}><span>{t}</span><span className="mq-dot" style={{ color: i % 2 ? 'var(--q-coral)' : 'var(--q-fuchsia)' }}>•</span></React.Fragment>);
  return <div className="marquee-band" style={{ rotate: rot + 'deg' }}>
    <Paper n={4} color={color} style={{ padding: 0 }}>
      <div className="mq" style={{ color: ink, animationDuration: speed + 's', animationDirection: reverse ? 'reverse' : 'normal' }}><div>{row}</div><div aria-hidden="true">{row}</div></div>
    </Paper>
  </div>;
}

function Manifeste() {
  return <section data-pin="" data-screen-label="Manifeste" className="manif pin" style={{ height: '260vh' }}>
    <div className="sticky">
      <div className="m-band mb-a" aria-hidden="true">Bijoux • Accessoires • Vêtements • Bijoux • Accessoires • Vêtements •</div>
      <div className="m-band mb-b" aria-hidden="true">Douceur • Énergie • Caractère • Élégance • Douceur • Énergie • Caractère •</div>
      <div className="m-blob mb1"></div><div className="m-blob mb2"></div>
      <img src="assets/elements/01_fleur.svg" alt="" className="fly f1"></img>
      <img src="assets/elements/02_etoile.svg" alt="" className="fly f2"></img>
      <img src="assets/elements/08_feuille.svg" alt="" className="fly f3"></img>
      <img src="assets/elements/04_trait.svg" alt="" className="fly f5"></img>
      <div className="m-copy">
        <Paper n={7} color="var(--q-sunflower)" className="m-eyebrow"><span>Notre raison d'être</span></Paper>
        <h2 className="m-h2">Exprimez votre</h2>
        <div className="m-script">Quintescence</div>
        <p className="m-lead">Nous concevons le bijou comme le prolongement d'une personnalité.</p>
        <img src="assets/elements/10_arc.svg" alt="" className="m-arc"></img>
      </div>
      <div className="m-disc">
        <div className="disc d-sun"></div>
        <div className="disc d-cream"></div>
        <img src="assets/elements/09_cercle.svg" alt="" className="m-ring r1"></img>
        <img src="assets/elements/09_cercle.svg" alt="" className="m-ring r2"></img>
        <div className="jewel-anchor" data-jewel-anchor="1" data-jewel-drag=""></div>
        <div className="m-words">{['Douceur', 'Féminité', 'Énergie', 'Créativité', 'Caractère', 'Élégance'].map((w, i) => <span key={w} style={{ '--k': i }}>{w}</span>)}</div>
      </div>
      <div className="m-count"><span>N° 68</span>rue Mirebeau · Bourges</div>
    </div>
  </section>;
}

function Bienvenue() {
  const { TornPaper } = QDS();
  return <section className="layer" data-screen-label="Bienvenue" style={{ marginTop: '-12vh' }}>
    <TornPaper color="var(--q-creme)" edges="both" depth={16} seed={41} padding="clamp(64px,9vw,110px) 24px">
      <div className="wrap center" style={{ maxWidth: 940 }}>
        <Eyebrow color="var(--q-fuchsia)">Bienvenue</Eyebrow>
        <Words as="p" className="welcome-lead" step={0.025} text="Bienvenue chez Quintescence, votre écrin de créateurs niché au 68 rue Mirebeau. Depuis plus d'une décennie, notre boutique célèbre la créativité, l'artisanat d'art et l'élégance sous toutes ses formes."></Words>
        <p className="welcome-sub" data-reveal="">Poussez la porte d’un univers sensoriel où les couleurs, les matières nobles et les senteurs composent un voyage unique au fil des saisons.</p>
        <img src="assets/elements/01_fleur.svg" alt="" className="spin-slow" style={{ position: 'absolute', right: '4%', top: -30, width: 90 }}></img>
        <img src="assets/elements/02_etoile.svg" alt="" className="float-el" style={{ left: '3%', bottom: -10, width: 56 }}></img>
      </div>
    </TornPaper>
  </section>;
}

function Univers() {
  const { TornPaper } = QDS();
  const track = React.useRef(null), sec = React.useRef(null);
  React.useEffect(() => {
    const upd = () => { if (track.current && sec.current) { const w = track.current.scrollWidth - innerWidth; sec.current.style.setProperty('--tw', Math.max(0, w) + 'px'); sec.current.style.height = (innerHeight + Math.max(0, w) * 1.1) + 'px'; } };
    upd(); addEventListener('resize', upd); const t = setTimeout(upd, 800); return () => { removeEventListener('resize', upd); clearTimeout(t); };
  }, []);
  return <section id="univers" ref={sec} data-pin="" data-screen-label="Univers" className="univers pin layer">
    <div className="sticky">
      <div className="u-head wrap">
        <div><Eyebrow>Univers &amp; Créateurs</Eyebrow><h2 className="h2 cream">Les univers phares</h2></div>
        <div className="script pink">L'élégance dans chaque détail</div>
      </div>
      <div className="u-track" ref={track}>
        {UNIVERS.map((u, i) => <TornPaper key={u.t} color={u.c} rotate={[-2, 1.5, -1, 2][i]} seed={60 + i * 7} depth={11} padding="22px 22px 26px" className="u-card" style={{ '--i': i }}>
          <div className="u-img"><img src={u.img} alt={u.t} loading="lazy"></img></div>
          <span className="u-num">0{i + 1}</span>
          <div className="u-k">{u.k}</div>
          <h3>{u.t}</h3>
          <p>{u.d}</p>
          <div className="u-k" style={{ color: KEY, marginTop: 4 }}>Marques phares</div>
          <div className="chips">{u.b.map(b => <span key={b}>{b}</span>)}</div>
          <Tape n={i % 2 ? 2 : 7} style={{ top: -12, left: '40%', width: 100, height: 28, rotate: '-5deg' }}></Tape>
        </TornPaper>)}
        <div className="u-end"><div className="script pink" style={{ fontSize: 56 }}>Idées cadeaux</div><p>Une parure d'exception pour une célébration ou un cadeau coup de cœur.</p></div>
      </div>
      <div className="u-progress"><span></span></div>
    </div>
  </section>;
}

function Garanties() {
  const { Icon } = QDS();
  const g = [['sparkles', 'Conseil stylistique personnalisé', 'Une écoute sur-mesure pour sublimer votre carnation, votre coiffure et vos tenues.'], ['gem', 'Exclusivité berruyère', 'Une sélection rigoureuse de designers indépendants français et internationaux.'], ['star', 'Confiance de nos clientes', 'Établissement noté 4,9/5 sur Google et recommandé par le Petit Futé (5/5).']];
  return <section className="layer wrap" data-screen-label="Garanties" style={{ padding: 'clamp(80px,10vw,120px) 24px' }}>
    <Eyebrow>Vos garanties</Eyebrow>
    <div className="gar-grid">{g.map(([ic, t, d], i) => <div key={t} className="gar" data-reveal="" style={{ '--d': i * 0.12 + 's' }}>
      <span className="gar-ic" style={{ animationDelay: -i * 0.8 + 's' }}><Icon name={ic} size={26} color={KEY}></Icon></span>
      <h3>{t}</h3><p>{d}</p></div>)}</div>
  </section>;
}

function H({ t, children, d }) { return <div data-reveal="" style={{ '--d': d }}><h3 className="h3">{t}</h3><p className="body">{children}</p></div>; }
function Histoire() {
  const { TornPaper } = QDS();
  return <section id="histoire" className="layer" data-screen-label="Notre histoire">
    <TornPaper color="var(--q-creme)" edges="both" depth={18} seed={77} padding="clamp(80px,10vw,110px) 24px">
      <div className="wrap hist-grid">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 34 }}>
          <div><Eyebrow color="var(--q-fuchsia)">Notre histoire</Eyebrow><div className="script fuchsia" style={{ marginTop: 6 }}>depuis plus d'une décennie</div></div>
          <H t="Une institution de la rue Mirebeau" d="0s">Implantée dans la principale artère piétonne historique de Bourges, Quintescence est bien plus qu’une boutique : c’est une véritable « caverne d’Ali Baba » pensée pour surprendre et émerveiller. Dès l'origine, l'établissement s'est forgé une identité à contre-courant de la standardisation, en privilégiant l'audace de designers inspirés et de manufactures artisanales.</H>
          <H t="La transmission : continuité et modernité" d=".1s">Reprise fin août 2023 par Morgane Aubailly, l’aventure Quintescence perpétue cet héritage tout en affirmant un regard contemporain sur la mode et l’accessoire. L'ambition demeure intacte : dénicher des pièces d'exception, renouveler constamment les collections et faire rayonner le commerce de proximité berruyer.</H>
        </div>
        <div className="hist-photos">
          <div className="ph ph1" data-par=""><TornPaper texture="assets/photos/facade-boutique.png" rotate={-3} seed={5} depth={10} style={{ width: '100%', height: '100%' }}></TornPaper><Tape n={10} style={{ top: -10, left: '12%', width: 110, height: 30, rotate: '-8deg' }}></Tape></div>
          <div className="ph ph2" data-par=""><TornPaper texture="assets/photos/vitrine-quintescence.png" rotate={4} seed={9} depth={10} style={{ width: '100%', height: '100%' }}></TornPaper></div>
          <div className="ph ph3" data-par="">
            <TornPaper color={KEY} rim="#F7D7E6" rotate={2.5} seed={14} depth={10} padding="28px 30px">
              <div className="u-k" style={{ color: 'var(--q-peach)' }}>L'art du conseil sur-mesure</div>
              <p className="body" style={{ color: 'var(--q-creme)', marginTop: 10 }}>Nous concevons le bijou comme le prolongement d'une personnalité. Que vous cherchiez l'accessoire discret d'un vestiaire quotidien, une parure d'exception pour une célébration ou un cadeau coup de cœur, nous prenons le temps de composer avec vous l'harmonie parfaite.</p>
            </TornPaper>
          </div>
        </div>
      </div>
    </TornPaper>
  </section>;
}

function Visite() {
  const { Button, Icon, TornPaper } = QDS();
  const rows = [['map-pin', 'Adresse', '68 Rue Mirebeau, 18000 Bourges'], ['phone', 'Téléphone', '02 48 65 07 15'], ['clock', 'Du mardi au samedi', '10h00 – 12h30 / 14h00 – 19h00'], ['moon', 'Dimanche et Lundi', 'Fermé'], ['instagram', 'Instagram', '@quintescencebourges'], ['facebook', 'Facebook', 'QuintescenceB']];
  return <section id="visite" className="layer wrap visite" data-screen-label="Nous rendre visite">
    <div>
      <Eyebrow>Nous rendre visite</Eyebrow>
      <h2 className="h2 cream"><Words text="Poussez la porte du 68 rue Mirebeau"></Words></h2>
      <div className="v-rows">{rows.map(([ic, l, v], i) => <div key={l} className="v-row" data-reveal="" style={{ '--d': i * 0.07 + 's' }}><span className="gar-ic sm"><Icon name={ic} size={18} color={KEY}></Icon></span><div><div className="u-k" style={{ color: 'var(--q-peach)' }}>{l}</div><div className="v-val">{v}</div></div></div>)}</div>
      <p className="body" style={{ color: 'var(--q-creme)', opacity: .85, marginTop: 24 }}>Membre actif de l'Office de Commerce et de l'Artisanat de Bourges (OCAB).</p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 26 }}>
        <Button variant="secondary" iconLeft="map-pin" onClick={() => open('https://maps.google.com/?q=68+rue+Mirebeau+18000+Bourges')}>Itinéraire</Button>
        <Button variant="outline" iconLeft="phone" onClick={() => (location.href = 'tel:+33248650715')} style={{ color: 'var(--q-creme)', borderColor: 'rgba(255,248,236,.7)', background: 'transparent' }}>Appeler</Button>
      </div>
    </div>
    <div className="v-photo" data-par="">
      <TornPaper texture="assets/photos/vitrine-quintescence.png" rotate={3} seed={12} depth={12} style={{ width: '100%', aspectRatio: '4/3' }}></TornPaper>
      <TornPaper color="var(--q-blush)" rotate={-5} seed={27} padding="16px 24px" className="sway" style={{ position: 'absolute', left: -20, bottom: -26 }}><span className="script" style={{ fontSize: 34, color: '#7A0F33' }}>À très vite !</span></TornPaper>
    </div>
  </section>;
}

function Footer({ onLegal }) {
  return <footer className="layer foot">
    <Marquee items={BRANDS.slice(0, 9)} color="var(--q-blush)" rot={1.2} speed={40}></Marquee>
    <Marquee items={BRANDS.slice(9)} color="var(--q-peach)" rot={-1} speed={34} reverse></Marquee>
    <div className="wrap foot-grid">
      <AnimatedLogo className="foot-logo"></AnimatedLogo>
      <div className="foot-links">
        <a onClick={() => go('boutique')}>Boutique en ligne</a><a onClick={() => go('univers')}>Univers &amp; Créateurs</a><a onClick={() => go('histoire')}>Notre histoire</a><a onClick={() => go('visite')}>Nous rendre visite</a><a onClick={onLegal}>Mentions légales</a>
      </div>
      <div className="foot-small">© 2026 Quintescence · Entreprise AUBAILLY (EURL) · 68 Rue Mirebeau, 18000 Bourges</div>
    </div>
  </footer>;
}

function go(id) { const el = document.getElementById(id); if (el) scrollTo({ top: el.getBoundingClientRect().top + scrollY - 70, behavior: 'smooth' }); }

Object.assign(window, { Hero, Marquee, Manifeste, Bienvenue, Univers, Garanties, Histoire, Visite, Footer, go });