// Sculty Dog — Schermate (Home, Galleria, Processo, TracciaOrdine)
// Il configuratore e il checkout sono in file separati per mantenere dimensioni gestibili.

// ══════════════ CAROSELLO RECENSIONI (LOOP INFINITO) ══════════════
// Recensioni reali estratte da Instagram (post sculty_dog).
// AUTOMATIZZATO: per aggiornare l'array, esegui la skill /sculty-recensioni.
// I markers qui sotto sono usati dallo script per riscrivere SOLO l'array.
// /* REVIEWS_START — non modificare manualmente, usa la skill */
const REVIEWS = [
  { u: 'valentinagalli10', dog: 'Peggy', t: 'Un piccolo capolavoro❤️ la mia Peggy realizzata in modo precisissimo e super attento ai dettagli! Comunicazione e invio del pacco ottima. Super consigliati👏' },
  { u: 'letyb81', dog: 'Marty', t: '❤️il mio Marty è appena arrivato...è un capolavoro di scultura che non credevo fosse cosi realistica! Mi avete commossa! Marty da 6 ha attraversato il ponte ma oggi ha fatto una capatina 😍!!!! Vi ringrazio infinitamente ❤️❤️❤️❤️❤️ Top!!! Bellissimo lavoro!!! Consigliatissimo!❤️' },
  { u: '_zinigiulia_', dog: 'Kelly', breed: 'Yorkshire', t: 'La miniatura della mia Yorkshire Kelly è arrivata oggi💌. Un ricordo stupendo e davvero dolce della mia piccola 🍯 Grazie ragazzi 🤍' },
  { u: 'cin_and_', dog: 'Oliver', t: 'Mi sono trovata molto bene, il mio Oliver è stupendo! Consegna arrivata in modo perfetto! Consiglio vivamente Sculty Dog anche perché la gentilezza e simpatia che ho trovato lo merita. Grazie ancora per il vostro bellissimo lavoro 🥰' },
  { u: 'stefanuccio79', t: "Lavoro molto ben fatto, dall'enorme valore tecnico (complimenti davvero per il lavoro che c'è dietro) ma soprattutto emotivo. Un qualcosa che resterà per sempre ❤️" },
  { u: 'annalisabazzani', dog: 'Belle', t: "Arrivata la Belle🐶 in versione miniatura.. uguale!!!! Per chi ha un amico/a a quattro zampe è un'idea veramente carina e originale per fare o farsi un regalo. Bravissimi e molto gentili, grazie e complimenti a tutto lo staff 👏🏻 voto ⭐⭐⭐⭐⭐" },
  { u: 'panda_obeso_', t: 'Un ricordo del nostro piccolo volato tra gli angeli, è identico 🥹❤️ Grazie grazie grazie' },
  { u: 'eli.lapa', dog: 'Timothee', t: "Il mio Timothee è bellissimo! Si vede che è fatto con amore! 🧡 Bravissimi, avete avuto un'idea stupenda veramente! E siete super gentili e disponibili! Grazie davvero di cuore ♥️" },
  { u: 'ventisette_dicembre', t: "Ho ricevuto la mia coppia oggi, sono stupendi 😍, lavoro veramente ben fatto e preciso. Il pacco ben imballato. Mi sono sentita seguita fin dalla redazione alla spedizione e ricezione del pacco. Lo raccomando vivamente a tutti! Grazie ancora ❤️" },
  { u: 'mariarita198224', dog: 'Mimmo', t: "Mi sono trovata davvero benissimo 🤗 gentilezza, disponibilità e simpatia... e poi è arrivato il mio Mimmo nei tempi previsti. Pazzesca la cura del dettaglio.. è lui in miniatura! Grazie 😍" },
  { u: 'bettyeli76', dog: 'Ares e Maia', t: 'Ho ricevuto Ares e Maia. Sono davvero meravigliosi. Nei minimi dettagli. E le ciotole super carine. Ho avuto un piccolo disguido che hanno saputo risolvere con la massima disponibilità e correttezza. Grazie ☺️' },
  { u: 'maurabrambilla', t: "FANTASTICHE!!!! Tempi un po' lunghi di attesa, ma sono fatti a mano.. ma ne è valsa l'attesa!!! Sono proprio loro!!! Le mie cagnette!!! Grazie di cuore ♥️ consiglio" },
  { u: 'andrea.ferra74', t: 'Hanno fatto un lavoro eccezionale e hanno rispettato i tempi di consegna che peraltro è stata celere. Consiglio vivamente' },
  { u: '_betty.na_', dog: 'Floki', t: 'Un capolavoro 😍 Floki meraviglioso e super realistico! Cordiali e professionali, pacco arrivato in perfette condizioni! Grazie mille 🩷🐾' },
  { u: 'barbara.buz', dog: 'Ole', t: 'Grazie grazie grazie, appena ricevuto il mio Ole in miniatura, bellissimo! Puntuale come un orologio svizzero, impacchettato e protetto a dovere, risultato migliore delle mie aspettative, consiglio a tutti !!!!' },
  { u: 'julessilve', t: 'La riproduzione è fedelissima. In più ho apprezzato la gentilezza e soprattutto la chiarezza nelle indicazioni su come il prodotto è stato realizzato, sulla spedizione, ecc. Semplicemente grazie ♥️' },
  { u: '_martinapedroni_', dog: 'Blue', t: 'Oggi finalmente è arrivato Blue in miniatura 🥰 Il mio compagno è entusiasta 😍 ci piace tantissimo, grazie mille. Ottimo lavoro 🥰' },
  { u: 'claudiafenzi', dog: 'Amelie', breed: 'Golden Retriever', t: 'Una piccola golden in miniatura identica alla mia Amelie. Grazie di cuore, bellissimo lavoro' },
  { u: 'fabriziapaci', dog: 'Brenda', t: 'La scultura di Brenda è arrivata oggi.. che dire, meravigliosa ❤️😍' },
  { u: 'toelettasullarcaperunpelo', dog: 'Olivia e Pepa', breed: 'Chihuahua', t: 'Le mie chihuahua Olivia e Pepa sono super belle 😍 grazie di cuore per il lavoro svolto 💪🏻😘' },
  { u: 'grazianas91', dog: 'Maia', t: 'Ho appena ricevuto la mia Maia ❤️ lavoro stupendo, è proprio lei! Grazie ancora per questo stupendo lavoro che fate 😍😍' },
  { u: 'nicolebronzetti', dog: 'Tosca', t: 'Grazie mille per la mia Tosca 😍 è bellissima e giovanissima' },
  { u: 'maox75', dog: 'Akira', t: "Finalmente è arrivata! La mia Akira: ho aspettato un pochino ma ne è valsa la pena. Che dire, è perfetta. Complimenti davvero, sono rimasto contentissimo" },
  { u: 'rosyfra64', t: 'Mi sono arrivati i miei gattini con la loro ciotola. Che dire, bellissimi. E ancora più apprezzati adesso che il mio Spritz sta molto male: mi rimarrà un bellissimo ricordo' },
  { u: 'fabio.b94_', dog: 'Logan', t: 'Appena arrivato il mio Logan in miniatura… spettacolare! Un lavoro fantastico, grazie 🙌❤️' },
  { u: 'melanie_agati', dog: 'Milo', t: 'Arrivato oggi, praticamente uguale al mio Milo. È stupendo. Siete bravissimi ❤️❤️❤️❤️' },
  { u: 'sdisilvia_', dog: 'Yoghi', t: 'Cura nel dettaglio e professionalità. Veramente un ottimo lavoro per il mio Yoghi 🩵' },
  { u: 'millina77', t: 'Arrivata oggi, sono rimasta senza parole. È veramente bella, nei minimi dettagli! Uno spettacolo. GRAZIE GRAZIE GRAZIE ❤️' },
  { u: '_barbara74', t: 'Grazie mille per il mio capolavoro. Arrivata oggi, mi sono emozionata ❤️ ottimo lavoro, grazie di cuore' },
  { u: 'angela_cecccarini', dog: 'Leo', t: 'Grazie, molto bello… il mio Leo sembra reale ❣️' },
  { u: '_cookie_e_leo_', dog: 'Cookie', t: 'È bellissimo! 😍 uguale a Cookie, lo consiglio a tutti ❤️' },
  { u: 'anna_perrero', t: 'Ottimo lavoro! 3 miniature perfette 🤩 bravissimi!!' },
  { u: 'leonedettobronci', t: 'Bellissimo e super realistico!! Sembro proprio io!!! ❤️ grazie 🙏' },
  { u: 'lilligoldenretriver', t: 'Meravigliosa creazione della mia creatura ♥️♥️♥️♥️ Grazie' },
  { u: 'nati.and.leon', t: '10 e lode per quanto mi riguarda 😍' },
  { u: 'mayabrussa', t: 'Lavoro impeccabile! 👏🔥👏' },
  { u: 'giovas88', t: 'Lavoro impeccabile, complimenti 💪🏼🩷🩷' },
  { u: 'federicavignaliii', t: 'Grazie mille per la scultura della mia cagnolina 😍 molto bella' }
];
/* REVIEWS_END */

// Rotazioni leggere alternate per dare un feel "wall of love" (lieve disordine)
const REVIEW_ROT = [-0.8, 0.5, -0.4, 0.7, -0.6, 0.3, -0.5, 0.8, -0.3, 0.6];
const STAR_COLORS = ['#e87ba8', '#c88a5c', '#2a6fc9', '#d94c3a', '#8e3f26'];

// URL del post Instagram da cui sono state estratte tutte le recensioni.
const REVIEWS_POST_URL = 'https://www.instagram.com/p/DUn7p9CDJjn/';

function ReviewsCarousel() {
  const track = React.useMemo(() => [...REVIEWS, ...REVIEWS], []);
  const CARD_W = 340, GAP = 20;
  const CARD_W_M = 280, GAP_M = 16;
  const wrapRef = React.useRef(null);
  const rafRef = React.useRef(0);
  const pausedUntilRef = React.useRef(0);
  const halfWidthRef = React.useRef(0);

  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    // Misura metà larghezza (= un set di card) dopo render
    const measure = () => {
      halfWidthRef.current = el.scrollWidth / 2;
    };
    measure();
    window.addEventListener('resize', measure);

    let last = performance.now();
    // Velocità auto-scroll in px/sec (più lenta di un marquee CSS — leggibile)
    const speed = 36;

    const tick = (now) => {
      const dt = now - last;
      last = now;
      if (now > pausedUntilRef.current && !document.hidden) {
        el.scrollLeft += speed * (dt / 1000);
        // Loop seamless: quando supero un set, ritorno indietro della stessa quantità
        if (el.scrollLeft >= halfWidthRef.current && halfWidthRef.current > 0) {
          el.scrollLeft -= halfWidthRef.current;
        }
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);

    // Pausa SOLO su input utente reale (NON sul programmatic scroll che facciamo
    // noi, altrimenti si autopausa di continuo e resta ferma).
    const pause = () => { pausedUntilRef.current = performance.now() + 1000; };
    el.addEventListener('pointerdown', pause);
    el.addEventListener('wheel', pause, { passive: true });
    el.addEventListener('touchstart', pause, { passive: true });
    el.addEventListener('touchmove', pause, { passive: true });

    return () => {
      cancelAnimationFrame(rafRef.current);
      window.removeEventListener('resize', measure);
      el.removeEventListener('pointerdown', pause);
      el.removeEventListener('wheel', pause);
      el.removeEventListener('touchstart', pause);
      el.removeEventListener('touchmove', pause);
    };
  }, []);

  return (
    <div style={{ position: 'relative', margin: '0 -40px' }}>
      <style>{`
        .sd-reviews-scroll {
          overflow-x: auto;
          overflow-y: hidden;
          scrollbar-width: none;
          -ms-overflow-style: none;
          scroll-behavior: auto;
          -webkit-overflow-scrolling: touch;
          padding: 12px 0 24px;
        }
        .sd-reviews-scroll::-webkit-scrollbar { display: none; }
        @media (max-width: 720px) {
          .sd-reviews-track-inner { gap: ${GAP_M}px !important; }
          .sd-review-card-real { flex: 0 0 ${CARD_W_M}px !important; }
        }
      `}</style>

      {/* fade laterali */}
      <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 80, background: 'linear-gradient(to right, var(--sd-bg) 0%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: 80, background: 'linear-gradient(to left, var(--sd-bg) 0%, transparent 100%)', zIndex: 2, pointerEvents: 'none' }} />

      <div ref={wrapRef} className="sd-reviews-scroll">
        <div className="sd-reviews-track-inner" style={{
          display: 'flex', gap: GAP, width: 'max-content',
          paddingLeft: 40, paddingRight: 40
        }}>
          {track.map((r, i) => {
            const rot = REVIEW_ROT[i % REVIEW_ROT.length];
            const star = STAR_COLORS[i % STAR_COLORS.length];
            return (
              <div key={i} className="sd-review-card sd-review-card-real" style={{
                flex: `0 0 ${CARD_W}px`,
                background: 'var(--sd-paper)',
                borderRadius: 'var(--sd-r-lg)',
                padding: '26px 26px 22px',
                boxShadow: 'var(--sd-shadow-card)',
                transform: `rotate(${rot}deg)`,
                border: '1px solid rgba(26,23,21,0.06)',
                position: 'relative',
                minHeight: 260,
                display: 'flex', flexDirection: 'column', gap: 14
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ fontSize: 15, letterSpacing: '0.08em', color: star }}>★★★★★</div>
                  <a href={REVIEWS_POST_URL} target="_blank" rel="noopener noreferrer"
                    onClick={(e) => { e.preventDefault(); window.open(REVIEWS_POST_URL, '_blank', 'noopener,noreferrer'); }}
                    style={{
                      fontFamily: 'var(--sd-font-mono)', fontSize: 10,
                      color: 'var(--sd-ink-3)', letterSpacing: '0.06em',
                      textDecoration: 'none', textTransform: 'lowercase',
                      display: 'inline-flex', alignItems: 'center', gap: 6
                    }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor"/></svg>
                    via instagram
                  </a>
                </div>

                <p style={{
                  flex: 1, margin: 0,
                  fontFamily: 'var(--sd-font-sans)', fontSize: 14.5,
                  color: 'var(--sd-ink-2)', lineHeight: 1.55,
                  display: '-webkit-box', WebkitLineClamp: 8, WebkitBoxOrient: 'vertical',
                  overflow: 'hidden'
                }}>
                  {r.t}
                </p>

                <div style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  paddingTop: 14, borderTop: '1px solid rgba(26,23,21,0.08)'
                }}>
                  <img src={`assets/avatars/avatar-${r.u}.jpg`} alt={r.u}
                    loading="lazy"
                    style={{
                      width: 36, height: 36, borderRadius: '50%',
                      objectFit: 'cover', flexShrink: 0,
                      background: 'var(--sd-bg-soft)'
                    }} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--sd-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      @{r.u}
                    </div>
                    {r.dog &&
                      <div style={{ fontSize: 11, color: 'var(--sd-ink-3)', fontFamily: 'var(--sd-font-mono)', letterSpacing: '0.05em', marginTop: 2 }}>
                        🐾 {r.dog}{r.breed ? ` · ${r.breed}` : ''}
                      </div>
                    }
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>);

}

// ══════════════ HOMEPAGE ══════════════
function HeroVideo() {
  const t = window.useSdTweaks && window.useSdTweaks() || {
    videoLayout: 'split', videoHeight: 640, videoAspect: '16/10',
    videoFit: 'cover', videoZoom: 1.0, videoFocusY: 50, videoRadius: 22,
    videoBg: 'var(--sd-bg-soft)', videoOverlay: 0, videoCaption: true, videoSidePad: 40,
    videoOffsetY: 0, videoOffsetX: 0
  };

  const offsetY = t.videoOffsetY || 0;
  const offsetX = t.videoOffsetX || 0;
  const videoEl =
  <video
    autoPlay loop muted playsInline
    src="assets/logo-3d.mp4"
    style={{
      position: 'absolute', inset: 0, width: '100%', height: '100%',
      objectFit: t.videoFit,
      objectPosition: `center ${t.videoFocusY}%`,
      transform: `translate(${offsetX}%, ${offsetY}%) scale(${t.videoZoom})`,
      transformOrigin: 'center center',
      background: t.videoBg
    }} />;



  const overlay = t.videoOverlay > 0 ?
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    background: `linear-gradient(180deg, rgba(26,23,21,${t.videoOverlay / 100 * 0.5}) 0%, rgba(26,23,21,${t.videoOverlay / 100}) 100%)`
  }} /> :
  null;

  const caption = t.videoCaption ?
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 16, marginBottom: 16, flexWrap: 'wrap'
  }}>
      <div className="sd-eyebrow">▶ LOGO 3D · ANIMAZIONE IN LOOP</div>
      <div style={{ fontFamily: 'var(--sd-font-mono)', fontSize: 11, color: 'var(--sd-ink-3)', letterSpacing: '0.1em' }}>
        SCULTY DOG · MADE IN ITALY
      </div>
    </div> :
  null;

  // ── BANNER cinematic — full width, aspect-ratio dictates height
  if (t.videoLayout === 'banner') {
    return (
      <section style={{ padding: `32px ${t.videoSidePad}px 0` }}>
        {caption}
        <div style={{
          position: 'relative',
          width: '100%',
          aspectRatio: t.videoAspect.replace('/', ' / '),
          maxHeight: t.videoHeight,
          overflow: 'hidden',
          borderRadius: t.videoRadius,
          background: t.videoBg,
          boxShadow: 'var(--sd-shadow-card)'
        }}>
          {videoEl}
          {overlay}
        </div>
      </section>);

  }

  // ── FULL-BLEED — edge-to-edge, no rounding, large
  if (t.videoLayout === 'fullbleed') {
    return (
      <section style={{
        position: 'relative',
        width: '100vw',
        marginLeft: 'calc(50% - 50vw)',
        marginRight: 'calc(50% - 50vw)',
        aspectRatio: t.videoAspect.replace('/', ' / '),
        maxHeight: t.videoHeight,
        overflow: 'hidden',
        background: t.videoBg
      }}>
        {videoEl}
        {overlay}
      </section>);

  }

  // ── CARD centrata — contained, narrower
  if (t.videoLayout === 'card') {
    return (
      <section style={{ padding: `48px ${t.videoSidePad}px 0`, display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: '100%', maxWidth: 1100 }}>
          {caption}
          <div style={{
            position: 'relative',
            width: '100%',
            aspectRatio: t.videoAspect.replace('/', ' / '),
            maxHeight: t.videoHeight,
            overflow: 'hidden',
            borderRadius: t.videoRadius,
            background: t.videoBg,
            boxShadow: 'var(--sd-shadow-deep)',
            border: '1px solid rgba(26,23,21,0.06)'
          }}>
            {videoEl}
            {overlay}
          </div>
        </div>
      </section>);

  }

  // ── SPLIT (default) — video a sinistra, claim a destra, allineati
  return (
    <section style={{ padding: `40px ${t.videoSidePad}px 0` }}>
      <div style={{
        width: '100%', maxWidth: 1440, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.15fr 1fr',
        gap: 48, alignItems: 'stretch'
      }}>
        <div>
          {caption}
          <div style={{
            position: 'relative',
            width: '100%',
            aspectRatio: t.videoAspect.replace('/', ' / '),
            maxHeight: t.videoHeight,
            overflow: 'hidden',
            borderRadius: t.videoRadius,
            background: t.videoBg,
            boxShadow: 'var(--sd-shadow-card)'
          }}>
            {videoEl}
            {overlay}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingLeft: 8 }}>
          <div className="sd-eyebrow" style={{ marginBottom: 18 }}>🐾 IDENTITÀ · LOGO 3D</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 56, fontWeight: 400, lineHeight: 0.98, letterSpacing: '-0.02em' }}>
            Una firma che ruota.
          </h2>
          <p style={{ fontSize: 16, color: 'var(--sd-ink-2)', marginTop: 20, lineHeight: 1.65, maxWidth: 420 }}>
            Lo stesso processo che usiamo per i tuoi cani, applicato al nostro logo:
            modellato in 3D, stampato, rifinito. Ogni dettaglio conta.
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 24, fontFamily: 'var(--sd-font-mono)', fontSize: 11, color: 'var(--sd-ink-3)', letterSpacing: '0.08em' }}>
            <span>● LOOP CONTINUO</span>
            <span>● 3D · ALTA DEFINIZIONE</span>
          </div>
        </div>
      </div>
    </section>);

}

// Sigillo 3D: video del logo in autoplay loop continuo.
function ScrollScrubbedSeal({ src }) {
  return (
    <div style={{
      position: 'absolute', bottom: -36, left: -36,
      width: 196, height: 196,
      borderRadius: '50%', overflow: 'hidden',
      background: 'var(--sd-bg-deep)',
      boxShadow: '0 24px 40px -18px rgba(30,20,15,0.55), 0 0 0 6px var(--sd-bg)',
      transform: 'rotate(-5deg)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      <video autoPlay loop muted playsInline preload="auto"
        src={src}
        style={{
          width: '110%', height: '110%',
          objectFit: 'cover', objectPosition: 'center center'
        }} />
    </div>
  );
}

function Home({ onNavigate, onAdd }) {
  const featured = [DOGS[0], DOGS[13], DOGS[12], DOGS[3]];
  return (
    <div>
      {/* HERO unificato — claim + foto + 3D logo seal in una composizione */}
      <section style={{ padding: 'clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 80px)', position: 'relative' }}>
        <div style={{ width: '100%', maxWidth: 1400, margin: '0 auto' }}>
          <div className="sd-eyebrow" style={{ marginBottom: 28 }}>🐾 Made in Italy · Con amore</div>
          <div className="sd-hero-grid">
            <div style={{ animation: 'sd-float-in 0.9s ease-out' }}>
              <h1 style={{
                margin: 0,
                fontFamily: 'var(--sd-font-serif)',
                fontWeight: 400,
                lineHeight: 0.94,
                letterSpacing: '-0.025em',
                fontSize: 'clamp(64px, 8.4vw, 124px)',
                color: 'var(--sd-ink)'
              }}>
                Il tuo cane,<br />in miniatura.
              </h1>
              <p style={{
                fontSize: 19, color: 'var(--sd-ink-2)',
                maxWidth: 480, marginTop: 32, lineHeight: 1.6
              }}>
                Miniature alte 8–10 cm modellate in 3D su misura del tuo cane,
                stampate ad alta definizione e dipinte a mano, una a una.
                Ciotolina con il nome sempre inclusa.
              </p>
              <div style={{
                display: 'flex', gap: 14, marginTop: 36,
                alignItems: 'center', flexWrap: 'wrap'
              }}>
                <button onClick={() => onNavigate('configura')} style={{
                  ...sdPrimaryBtn,
                  background: 'var(--sd-terracotta)',
                  color: 'var(--sd-paper)'
                }}>
                  Crea la tua miniatura →
                </button>
                <button onClick={() => onNavigate('processo')} style={sdSecondaryBtn}>
                  Come funziona
                </button>
              </div>
              <div style={{
                marginTop: 36, display: 'flex', gap: 18,
                fontSize: 13, color: 'var(--sd-ink-3)',
                alignItems: 'center', flexWrap: 'wrap'
              }}>
                <span><strong style={{ color: 'var(--sd-ink)' }}>€70</strong> a miniatura</span>
                <span style={{ color: 'var(--sd-ink-4)' }}>·</span>
                <span><strong style={{ color: 'var(--sd-ink)' }}>15 gg</strong> lavorativi</span>
                <span style={{ color: 'var(--sd-ink-4)' }}>·</span>
                <span><strong style={{ color: 'var(--sd-ink)' }}>Bartolini</strong> 24/48h</span>
              </div>
            </div>

            {/* COMPOSITION: foto reale + 3D logo seal integrato (scroll-scrubbed) */}
            <div style={{ position: 'relative' }}>
              <Parallax strength={14}>
                <div style={{
                  aspectRatio: '4/5', borderRadius: 'var(--sd-r-xl)', overflow: 'hidden',
                  background: 'var(--sd-bg-soft)', boxShadow: 'var(--sd-shadow-deep)'
                }}>
                  <img src={DOG_HERO.img} alt={DOG_HERO.name}
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
              </Parallax>

              {/* 3D logo come "sigillo": il video non è in autoplay, ruota
                  scrubato dallo scroll della pagina. La rotazione del logo
                  diventa parte della navigazione, non un loop indipendente. */}
              <ScrollScrubbedSeal src="assets/logo-3d.mp4" />

              <div style={{
                position: 'absolute', top: 28, right: -18,
                background: 'var(--sd-paper)', padding: '14px 22px', borderRadius: 999,
                boxShadow: 'var(--sd-shadow-card)', fontFamily: 'var(--sd-font-mono)',
                fontSize: 11, letterSpacing: '0.1em',
                color: 'var(--sd-ink)'
              }}>
                ✦ {DOG_HERO.name.toUpperCase()}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STORY — manifesto artigianato, sostituisce il bento di 4 card */}
      <Reveal as="section" style={{
        background: 'var(--sd-terracotta-tint)',
        padding: 'clamp(72px, 9vw, 120px) clamp(20px, 4vw, 40px)',
        margin: '64px 0 0',
        position: 'relative',
        zIndex: 2
      }}>
        <div className="sd-story-grid" style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div>
            <div className="sd-eyebrow" style={{ marginBottom: 24 }}>Il nostro mestiere</div>
            <h2 style={{
              margin: 0,
              fontFamily: 'var(--sd-font-serif)',
              fontWeight: 400,
              fontSize: 'clamp(44px, 5.6vw, 78px)',
              lineHeight: 1.02,
              letterSpacing: '-0.02em',
              color: 'var(--sd-ink)'
            }}>
              Modellato in 3D.<br />
              <span style={{ color: 'var(--sd-terracotta-deep)' }}>Rifinito a mano.</span><br />
              Una alla volta.
            </h2>
            <p style={{
              fontSize: 18, color: 'var(--sd-ink-2)',
              maxWidth: 520, marginTop: 32, lineHeight: 1.65
            }}>
              Ogni miniatura nasce dalle tue foto. La modelliamo al computer
              per catturare la posa, il muso, la postura del tuo cane. Poi la
              stampiamo in alta definizione e la dipingiamo a mano. Il resto
              è emozione a prima vista.
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, marginTop: 36,
              display: 'flex', flexWrap: 'wrap',
              columnGap: 28, rowGap: 12,
              fontSize: 14, color: 'var(--sd-ink-2)'
            }}>
              <li><span style={{ color: 'var(--sd-terracotta-deep)' }}>·</span> Disegno 3D su misura</li>
              <li><span style={{ color: 'var(--sd-terracotta-deep)' }}>·</span> Pittura artigianale</li>
              <li><span style={{ color: 'var(--sd-terracotta-deep)' }}>·</span> Ciotolina con nome in rilievo</li>
              <li><span style={{ color: 'var(--sd-terracotta-deep)' }}>·</span> 3 anteprime gratis</li>
            </ul>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '4/5',
              borderRadius: 'var(--sd-r-xl)', overflow: 'hidden',
              background: 'var(--sd-bg-soft)',
              boxShadow: '0 40px 80px -30px rgba(142,63,38,0.4)',
              transform: 'rotate(1.5deg)'
            }}>
              <img src={DOGS[0].img} alt={DOGS[0].name}
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div style={{
              position: 'absolute', bottom: 20, left: 20,
              background: 'var(--sd-paper)', padding: '10px 16px', borderRadius: 999,
              fontFamily: 'var(--sd-font-mono)', fontSize: 11, letterSpacing: '0.1em',
              color: 'var(--sd-ink)',
              boxShadow: 'var(--sd-shadow-card)'
            }}>
              ✦ {DOGS[0].name.toUpperCase()}
            </div>
          </div>
        </div>
      </Reveal>

      {/* PROCESSO — timeline editoriale verticale */}
      <Reveal as="section" style={{ padding: 'clamp(72px, 9vw, 120px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 80px)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="sd-process-head">
            <div>
              <div className="sd-eyebrow" style={{ marginBottom: 16 }}>Il processo</div>
              <h2 style={{
                margin: 0,
                fontFamily: 'var(--sd-font-serif)',
                fontSize: 'clamp(44px, 5.4vw, 72px)',
                fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em'
              }}>
                Dalla tua foto<br />alla tua mensola.
              </h2>
            </div>
            <p style={{
              fontSize: 17, color: 'var(--sd-ink-2)',
              maxWidth: 480, lineHeight: 1.7, margin: 0
            }}>
              Dopo la prenotazione riceverai 3 anteprime del tuo cane in miniatura
              entro 24 ore. Se nessuna ti convince, ne riceverai altre 3, finché
              non troviamo quella perfetta per iniziare la lavorazione.
            </p>
          </div>

          <ol style={{ listStyle: 'none', margin: 0, padding: 0 }}>
            {[
              'Le tue foto',
              'Prenotazione',
              '3 anteprime',
              'Modellazione 3D',
              'Stampa e pittura',
              'A casa tua'
            ].map((step, i, arr) => (
              <li key={i} className="sd-process-row" style={{
                paddingBlock: 32,
                borderBottom: i < arr.length - 1 ? '1px solid rgba(184,89,58,0.22)' : 'none'
              }}>
                <div style={{
                  fontFamily: 'var(--sd-font-display)',
                  fontSize: 'clamp(48px, 5.4vw, 72px)',
                  lineHeight: 1,
                  color: 'var(--sd-terracotta)',
                  letterSpacing: '-0.02em'
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <h3 style={{
                  margin: 0,
                  fontFamily: 'var(--sd-font-serif)',
                  fontSize: 'clamp(32px, 3.6vw, 52px)',
                  fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.015em',
                  color: 'var(--sd-ink)'
                }}>
                  {step}
                </h3>
                <span aria-hidden="true" className="sd-process-annotation" style={{
                  fontFamily: 'var(--sd-font-mono)',
                  fontSize: 12, letterSpacing: '0.1em',
                  color: 'var(--sd-ink-3)',
                  alignSelf: 'center'
                }}>
                  {i === 0 && '· tu'}
                  {i === 1 && '· tu'}
                  {i === 2 && '· noi · 24h'}
                  {i === 3 && '· noi'}
                  {i === 4 && '· noi'}
                  {i === 5 && '· corriere'}
                </span>
              </li>
            ))}
          </ol>

          <div style={{ marginTop: 56, textAlign: 'center' }}>
            <button onClick={() => onNavigate('processo')} style={sdSecondaryBtn}>
              Scopri tutto il processo →
            </button>
          </div>
        </div>
      </Reveal>

      {/* GALLERY FEATURED */}
      <Reveal as="section" style={{ padding: 'clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px)' }}>
        <div className="sd-gallery-head">
          <div>
            <div className="sd-eyebrow" style={{ marginBottom: 12 }}>I NOSTRI LAVORI</div>
            <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(36px, 5.4vw, 64px)', fontWeight: 400, letterSpacing: '-0.02em' }}>
              I nostri ultimi amici.
            </h2>
          </div>
          <button onClick={() => onNavigate('galleria')} style={sdGhostBtn}>Vedi tutta la galleria →</button>
        </div>
        <div className="sd-gallery-grid">
          {featured.map((d) => <DogCard key={d.id} dog={d} onClick={() => onNavigate('galleria')} />)}
        </div>
      </Reveal>

      {/* PRICING */}
      <section className="sd-pricing-section">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="sd-eyebrow" style={{ color: 'var(--sd-paper-on-dark-2)', marginBottom: 16 }}>PREZZI</div>
          <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(38px, 5.6vw, 72px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
            Un prezzo, niente sorprese.
          </h2>
        </div>
        <div className="sd-pricing-grid">
          <div style={pricingCard()}>
            <div className="sd-eyebrow" style={{ color: 'var(--sd-paper-on-dark-2)', marginBottom: 20 }}>1 MINIATURA</div>
            <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 'clamp(72px, 12vw, 112px)', lineHeight: 1 }}>€70</div>
            <div style={{ fontSize: 13, color: 'var(--sd-paper-on-dark-2)', marginTop: 6 }}>+ €10 spedizione</div>
            <ul style={pricingUl()}>
              <li>Miniatura 8-10 cm in PLA</li>
              <li>Pittura a mano</li>
              <li>Ciotolina con nome inclusa</li>
              <li>Consegna in 24/48h dalla spedizione
</li>
            </ul>
            <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, background: 'var(--sd-paper)', color: 'var(--sd-ink)', width: '100%', marginTop: 20 }}>
              Inizia da una →
            </button>
          </div>
          <div style={{ ...pricingCard(), background: 'var(--sd-paper)', color: 'var(--sd-ink)', position: 'relative' }}>
            <div style={{ position: 'absolute', top: -14, right: 24, background: 'var(--sd-pink)', color: 'var(--sd-ink)', padding: '6px 14px', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '0.08em' }}>RISPARMI €10</div>
            <div className="sd-eyebrow" style={{ marginBottom: 20 }}>2 MINIATURE</div>
            <div style={{ fontFamily: 'var(--sd-font-display)', fontSize: 'clamp(72px, 12vw, 112px)', lineHeight: 1 }}>€130</div>
            <div style={{ fontSize: 13, color: 'var(--sd-ink-3)', marginTop: 6 }}>+ €10 spedizione unica</div>
            <ul style={{ ...pricingUl(), color: 'var(--sd-ink-2)' }}>
              <li>2 Miniature 8-10 cm in PLA</li>
              <li>Pittura a mano</li>
              <li>Ciotoline con nome incluse</li>
              <li>Consegna in 24/48h dalla spedizione</li>
            </ul>
            <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, width: '100%', marginTop: 20 }}>
              Crea la coppia →
            </button>
          </div>
        </div>
      </section>

      {/* RECENSIONI — vere, estratte dai commenti Instagram */}
      <Reveal as="section" style={{ padding: 'clamp(72px, 9vw, 100px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 60px)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 40, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div className="sd-eyebrow" style={{ marginBottom: 12 }}>★★★★★ Dicono di noi</div>
            <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(36px, 5.4vw, 64px)', fontWeight: 400, letterSpacing: '-0.02em' }}>
              Le coccole dei nostri clienti.
            </h2>
          </div>
          <a href="https://www.instagram.com/sculty_dog/" target="_blank" rel="noopener noreferrer"
            onClick={(e) => { e.preventDefault(); window.open('https://www.instagram.com/sculty_dog/', '_blank', 'noopener,noreferrer'); }}
            style={{
              fontSize: 13, color: 'var(--sd-ink-2)', fontFamily: 'var(--sd-font-mono)',
              letterSpacing: '0.05em', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor"/></svg>
            tutte su @sculty_dog →
          </a>
        </div>
        <ReviewsCarousel />
      </Reveal>

      {/* INSTAGRAM CTA */}
      <section style={{ padding: 'clamp(56px, 7vw, 80px) clamp(20px, 4vw, 40px)', textAlign: 'center' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 16 }}>@SCULTY_DOG</div>
        <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(36px, 5.4vw, 64px)', fontWeight: 400, letterSpacing: '-0.02em' }}>
          Vieni a trovarci su Instagram.
        </h2>
        <p style={{ fontSize: 16, color: 'var(--sd-ink-2)', maxWidth: 500, margin: '20px auto 32px' }}>Lavorazioni in corso, testimonianze dei clienti, dietro le quinte.

        </p>
        <a href="https://www.instagram.com/sculty_dog/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }} onClick={(e) => {e.preventDefault();window.open('https://www.instagram.com/sculty_dog/', '_blank', 'noopener,noreferrer');}}>
          <button style={sdPrimaryBtn}>Seguici su Instagram →</button>
        </a>
        <div className="sd-instagram-grid">
          {[DOGS[2], DOGS[5], DOGS[9], DOGS[11], DOGS[14], DOGS[17]].map((d) => <div key={d.id} style={{ aspectRatio: '1/1', borderRadius: 'var(--sd-r-md)', overflow: 'hidden', background: 'var(--sd-bg-soft)' }}>
              <img src={d.img} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          )}
        </div>
      </section>
    </div>);

}

function pricingCard() {
  return {
    background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 'var(--sd-r-lg)', padding: 36
  };
}
function pricingUl() {
  return {
    listStyle: 'none', padding: 0, margin: '24px 0 0',
    display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, lineHeight: 1.5
  };
}

// ══════════════ GALLERIA ══════════════
function Galleria({ onNavigate }) {
  const [filter, setFilter] = React.useState('tutti');
  const filtered = filter === 'tutti' ? DOGS :
  filter === 'pink' ? DOGS.filter((d) => d.bowl === 'pink') :
  filter === 'blue' ? DOGS.filter((d) => d.bowl === 'blue') :
  filter === 'piccoli' ? DOGS.filter((d) => ['Chihuahua', 'Pinscher', 'Pechinese', 'Pomerania'].includes(d.breed)) :
  DOGS;

  const filters = [
  ['tutti', 'Tutti'],
  ['blue', 'Ciotola blu'],
  ['pink', 'Ciotola rosa'],
  ['piccoli', 'Taglia piccola']];


  return (
    <div style={{ padding: 'clamp(20px, 4vw, 40px)' }}>
      <div style={{ padding: 'clamp(24px, 4vw, 40px) 0 clamp(32px, 5vw, 48px)', textAlign: 'center' }}>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(48px, 9vw, 96px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1 }}>
          La nostra galleria.
        </h1>
        <p style={{ fontSize: 16, color: 'var(--sd-ink-2)', maxWidth: 520, margin: '20px auto 0' }}>Ogni pezzo è dipinto a mano e irripetibile. Ecco alcuni dei cani che abbiamo scolpito finora.</p>
      </div>

      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 32, flexWrap: 'wrap' }}>
        {filters.map(([k, label]) =>
        <button key={k} onClick={() => setFilter(k)} style={{
          padding: '10px 18px', borderRadius: 999, fontSize: 13, fontWeight: 500,
          background: filter === k ? 'var(--sd-ink)' : 'transparent',
          color: filter === k ? 'var(--sd-paper)' : 'var(--sd-ink-2)',
          border: '1px solid ' + (filter === k ? 'var(--sd-ink)' : 'rgba(26,23,21,0.15)'),
          cursor: 'pointer', transition: 'all 0.2s'
        }}>{label}</button>
        )}
      </div>

      <div className="sd-gallery-grid">
        {filtered.map((d, i) => <DogCard key={d.id + i} dog={d} onClick={() => onNavigate('configura')} />)}
      </div>

      <div style={{ textAlign: 'center', padding: 'clamp(56px, 8vw, 80px) clamp(16px, 3vw, 20px) clamp(32px, 5vw, 40px)' }}>
        <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(32px, 5.4vw, 56px)', fontWeight: 400, lineHeight: 1.05, margin: 0 }}>
          Il prossimo è il tuo cane?
        </h2>
        <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, marginTop: 24 }}>
          Crea la sua miniatura →
        </button>
      </div>
    </div>);

}

// ══════════════ COME FUNZIONA ══════════════
function Processo({ onNavigate }) {
  const steps = [
  { n: '01', title: 'Invii le foto', desc: 'Carica foto del viso, del corpo e della coda del tuo cane. Più angolazioni abbiamo, più la miniatura sarà fedele.', time: 'Ora zero', color: 'blue' },
  { n: '02', title: 'Compili i dati', desc: 'Nome del cane, colore ciotola, note particolari.\n', time: 'Lo stesso giorno', color: 'pink' },
  { n: '03', title: 'Prenotazione', desc: 'Scegli il metodo che preferisci: Bonifico o Paypal. \n', time: 'Lo stesso giorno', color: 'cream' },
  { n: '04', title: 'Ricevi 3 anteprime', desc: 'Entro 24 ore riceverai 3 anteprime del tuo cane in miniatura. Scegli quella che preferisci, oppure richiedine altre 3, senza nessun costo aggiuntivo.', time: 'Entro 24h', color: 'red' },
  { n: '05', title: 'Produciamo', desc: "Una volta confermata l'anteprima inizieremo il lavoro di modellazione 3D su misura, stampa ad alta definizione, rifinitura e pittura a mano. Ogni dettaglio conta!", time: '15 gg lavorativi', color: 'blue' },
  { n: '06', title: 'Arriva a casa', desc: 'Finita la lavorazione spediremo il pacco: spedizione Bartolini con consegna in 24/48h in tutta Italia. ', time: '24/48h dopo', color: 'pink' }];


  return (
    <div>
      <section style={{ padding: 'clamp(48px, 7vw, 72px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 40px)', textAlign: 'center' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 16 }}>COME FUNZIONA</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(44px, 8vw, 88px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1 }}>
          Sei passi, nessuna magia.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--sd-ink-2)', maxWidth: 560, lineHeight: 1.6, margin: '20px auto 0' }}>
          Ore di lavoro manuale per trasformare il tuo cane nella sua miniatura ultra fedele.
          Da una foto alla tua mensola.
        </p>
      </section>

      <section style={{ padding: 'clamp(20px, 4vw, 40px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {steps.map((s, i) =>
          <div key={s.n} className="sd-process-detail-row" style={{
            background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)',
            padding: 'clamp(24px, 4vw, 32px) clamp(20px, 4vw, 36px)', boxShadow: 'var(--sd-shadow-soft)'
          }}>
              <div style={{
              fontFamily: 'var(--sd-font-display)', fontSize: 'clamp(48px, 7vw, 64px)',
              color: 'var(--sd-terracotta)', lineHeight: 1
            }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(26px, 3.4vw, 32px)', marginBottom: 8 }}>{s.title}</div>
                <div style={{ fontSize: 15, color: 'var(--sd-ink-2)', lineHeight: 1.6, whiteSpace: 'pre-line' }}>{s.desc}</div>
              </div>
              <div className="sd-process-detail-meta">
                <div className="sd-eyebrow" style={{ marginBottom: 8 }}>TEMPISTICA</div>
                <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 22 }}>{s.time}</div>
              </div>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 48, padding: 'clamp(32px, 5vw, 40px) clamp(24px, 4vw, 48px)',
          background: 'var(--sd-bg-deep)', color: 'var(--sd-paper-on-dark)',
          borderRadius: 'var(--sd-r-xl)', textAlign: 'center'
        }}>
          <div className="sd-eyebrow" style={{ color: 'var(--sd-paper-on-dark-2)', marginBottom: 14 }}>GARANZIA ANTEPRIMA</div>
          <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(28px, 4.4vw, 40px)', fontWeight: 400, letterSpacing: '-0.01em', maxWidth: 720, margin: '0 auto', lineHeight: 1.15 }}>
            Non partiamo a produrre finché l'anteprima non ti fa dire: "è proprio lui."
          </div>
          <button onClick={() => onNavigate('configura')} style={{ ...sdPrimaryBtn, background: 'var(--sd-paper)', color: 'var(--sd-ink)', marginTop: 32 }}>
            Inizia adesso →
          </button>
        </div>
      </section>
    </div>);

}

// ══════════════ TRACCIA ORDINE (via link univoco) ══════════════
// Sostituisce il sistema di account. Il cliente arriva qui dal magic-link
// inviato via email dopo l'acquisto. URL esempio: ?ordine=SD-0247-x9k2
function TracciaOrdine({ onNavigate }) {
  // Ordine fittizio — in produzione verrà caricato dall'URL token
  const order = {
    id: 'SD-0247',
    token: 'x9k2m4',
    placed: '18 Apr 2026',
    email: 'giulia@example.it',
    dog: 'Nina',
    breed: 'Golden Retriever',
    img: DOGS[7].img,
    total: 80,
    step: 3, // 1 foto ricevute · 2 anteprime · 3 in produzione · 4 controllo qualità · 5 spedito · 6 consegnato
    estimatedDelivery: '9 Mag 2026',
    address: 'Via Brera 12, 20121 Milano (MI)',
    updates: [
    { date: '18 Apr', time: '14:32', label: 'Ordine ricevuto', body: 'Grazie Giulia! Abbiamo ricevuto le foto di Nina.' },
    { date: '22 Apr', time: '10:15', label: 'Anteprime inviate', body: 'Ti abbiamo inviato 3 anteprime via email.' },
    { date: '23 Apr', time: '18:40', label: 'Anteprima confermata', body: 'Hai scelto l\'anteprima #2. Iniziamo la produzione!' },
    { date: '25 Apr', time: '09:00', label: 'In produzione', body: 'La statuetta di Nina è in stampa. Ti aggiorniamo quando passa al controllo qualità.' }]

  };

  const steps = [
  ['Foto ricevute', '📸'],
  ['Anteprime', '✏️'],
  ['In produzione', '🖨️'],
  ['Controllo qualità', '🔍'],
  ['Spedizione', '📦'],
  ['Consegnato', '🏡']];


  return (
    <div style={{ padding: 'clamp(36px, 5vw, 56px) clamp(20px, 4vw, 40px)', maxWidth: 980, margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: 'var(--sd-font-mono)', fontSize: 12, color: 'var(--sd-ink-3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
            Ordine #{order.id}
          </div>
          <h1 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(34px, 5.4vw, 56px)', fontWeight: 400, margin: 0, lineHeight: 1.05 }}>
            La miniatura di {order.dog}
          </h1>
          <div style={{ fontSize: 14, color: 'var(--sd-ink-3)', marginTop: 10 }}>
            Ordinata il {order.placed} · Consegna stimata <strong style={{ color: 'var(--sd-ink)' }}>{order.estimatedDelivery}</strong>
          </div>
        </div>
        <button onClick={() => onNavigate('home')} style={sdGhostBtn}>← Torna alla home</button>
      </div>

      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 'clamp(20px, 4vw, 32px)', boxShadow: 'var(--sd-shadow-soft)', marginBottom: 24 }}>
        <div className="sd-traccia-summary">
          <div style={{ width: 180, height: 180, borderRadius: 'var(--sd-r-md)', overflow: 'hidden', background: 'var(--sd-bg-soft)' }}>
            <img src={order.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 32, fontStyle: 'italic', marginBottom: 6 }}>{order.dog}</div>
            <div style={{ fontSize: 14, color: 'var(--sd-ink-3)', marginBottom: 18 }}>{order.breed} · Statuetta 8–10 cm · Ciotolina con nome inclusa</div>
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', fontSize: 13 }}>
              <div>
                <div style={{ color: 'var(--sd-ink-3)', marginBottom: 4 }}>Totale</div>
                <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 22 }}>€{order.total},00</div>
              </div>
              <div>
                <div style={{ color: 'var(--sd-ink-3)', marginBottom: 4 }}>Spedizione</div>
                <div style={{ fontSize: 15 }}>{order.address}</div>
              </div>
              <div>
                <div style={{ color: 'var(--sd-ink-3)', marginBottom: 4 }}>Email</div>
                <div style={{ fontSize: 15 }}>{order.email}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 'clamp(20px, 4vw, 32px)', boxShadow: 'var(--sd-shadow-soft)', marginBottom: 24 }}>
        <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 28, fontWeight: 400, margin: '0 0 24px' }}>A che punto siamo</h2>
        <div className="sd-traccia-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8, position: 'relative' }}>
          {steps.map(([label, emoji], i) => {
            const idx = i + 1;
            const done = idx < order.step;
            const current = idx === order.step;
            return (
              <div key={label} style={{ textAlign: 'center', position: 'relative' }}>
                {/* Linea connettore */}
                {i < 5 &&
                <div style={{
                  position: 'absolute', top: 28, left: 'calc(50% + 28px)', right: 'calc(-50% + 28px)',
                  height: 2, background: idx < order.step ? 'var(--sd-ink)' : 'rgba(26,23,21,0.12)',
                  zIndex: 0
                }} />
                }
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: current ? 'var(--sd-pink)' : done ? 'var(--sd-ink)' : 'var(--sd-bg-soft)',
                  color: done ? 'white' : 'var(--sd-ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, margin: '0 auto 10px', position: 'relative', zIndex: 1,
                  border: current ? '2px solid var(--sd-ink)' : 'none',
                  boxShadow: current ? '0 0 0 6px rgba(244,168,196,0.35)' : 'none',
                  transition: 'all 0.3s'
                }}>
                  {done ? '✓' : emoji}
                </div>
                <div style={{
                  fontSize: 12, fontWeight: current ? 700 : 500,
                  color: done || current ? 'var(--sd-ink)' : 'var(--sd-ink-3)',
                  lineHeight: 1.3
                }}>{label}</div>
              </div>);

          })}
        </div>
      </div>

      {/* Aggiornamenti */}
      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 32, boxShadow: 'var(--sd-shadow-soft)', marginBottom: 24 }}>
        <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 28, fontWeight: 400, margin: '0 0 24px' }}>Aggiornamenti</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {order.updates.slice().reverse().map((u, i) =>
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 20, paddingBottom: 18, borderBottom: i < order.updates.length - 1 ? '1px solid rgba(26,23,21,0.08)' : 'none' }}>
              <div style={{ fontFamily: 'var(--sd-font-mono)', fontSize: 12, color: 'var(--sd-ink-3)' }}>
                <div>{u.date}</div>
                <div>{u.time}</div>
              </div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{u.label}</div>
                <div style={{ fontSize: 14, color: 'var(--sd-ink-2)', lineHeight: 1.5 }}>{u.body}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Contatti */}
      <div style={{ background: 'var(--sd-bg-soft)', borderRadius: 'var(--sd-r-lg)', padding: 28, textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 24, marginBottom: 8, fontStyle: 'italic' }}>Hai bisogno di aiuto?</div>
        <div style={{ fontSize: 14, color: 'var(--sd-ink-2)', marginBottom: 16 }}>Scrivici a ciao@scultydog.it oppure su Instagram @sculty_dog</div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button style={sdSecondaryBtn}>Scrivici su WhatsApp</button>
          <button style={sdGhostBtn}>Invia una email</button>
        </div>
      </div>

      {/* Nota link univoco */}
      <div style={{ marginTop: 20, fontSize: 12, color: 'var(--sd-ink-3)', textAlign: 'center', fontFamily: 'var(--sd-font-mono)' }}>
        🔒 Questa pagina è privata e accessibile solo dal link inviato a {order.email}
      </div>
    </div>);

}

function _UnusedAccountOrdini({ onNavigate }) {
  const orders = [
  { id: 'SD-0247', date: '18 Apr 2026', dog: 'Nina', status: 'In produzione', statusColor: 'var(--sd-blue)', step: 3, img: DOGS[7].img, total: 80 },
  { id: 'SD-0231', date: '02 Apr 2026', dog: 'Milo', status: 'Anteprime pronte', statusColor: 'var(--sd-pink-deep)', step: 2, img: DOGS[4].img, total: 80 },
  { id: 'SD-0198', date: '15 Mar 2026', dog: 'Bella', status: 'Consegnato', statusColor: 'var(--sd-success)', step: 6, img: DOGS[13].img, total: 80 }];

  return (
    <div>
      <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 44, margin: '0 0 28px', fontWeight: 400 }}>I miei ordini</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {orders.map((o) =>
        <div key={o.id} style={{
          background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)',
          padding: 20, display: 'grid', gridTemplateColumns: '100px 1fr auto',
          gap: 20, alignItems: 'center', boxShadow: 'var(--sd-shadow-soft)'
        }}>
            <div style={{ width: 100, height: 100, borderRadius: 'var(--sd-r-md)', overflow: 'hidden', background: 'var(--sd-bg-soft)' }}>
              <img src={o.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 }}>
                <span style={{ fontFamily: 'var(--sd-font-mono)', fontSize: 11, color: 'var(--sd-ink-3)' }}>{o.id}</span>
                <span style={{
                background: o.statusColor, color: 'white',
                padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700
              }}>{o.status}</span>
              </div>
              <div style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 26, fontStyle: 'italic', marginBottom: 4 }}>Miniatura di {o.dog}</div>
              <div style={{ fontSize: 13, color: 'var(--sd-ink-3)' }}>Ordinata il {o.date} · €{o.total}</div>
              <div style={{ display: 'flex', gap: 3, marginTop: 10 }}>
                {[1, 2, 3, 4, 5, 6].map((i) =>
              <div key={i} style={{ height: 4, flex: 1, borderRadius: 2, background: i <= o.step ? o.statusColor : 'rgba(26,23,21,0.08)' }} />
              )}
              </div>
            </div>
            <button style={sdSecondaryBtn}>Dettagli →</button>
          </div>
        )}
      </div>
    </div>);

}

function _UnusedAccountAnteprime() {
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 44, margin: '0 0 28px', fontWeight: 400 }}>Anteprime da confermare</h2>
      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 32, boxShadow: 'var(--sd-shadow-soft)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
          <span style={{ background: 'var(--sd-pink)', color: 'var(--sd-ink)', padding: '4px 12px', borderRadius: 999, fontSize: 11, fontWeight: 700 }}>DA CONFERMARE</span>
          <span style={{ fontSize: 13, color: 'var(--sd-ink-3)' }}>Ordine SD-0231 · Milo</span>
        </div>
        <p style={{ fontSize: 15, color: 'var(--sd-ink-2)', marginTop: 0 }}>Scegli l'anteprima che preferisci. Se nessuna ti convince, possiamo proporne altre 3.</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginTop: 24 }}>
          {[DOGS[3], DOGS[4], DOGS[5]].map((d, i) =>
          <div key={i} style={{ border: '2px solid rgba(26,23,21,0.08)', borderRadius: 'var(--sd-r-md)', overflow: 'hidden', cursor: 'pointer', transition: 'border-color 0.2s' }}
          onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--sd-ink)'}
          onMouseLeave={(e) => e.currentTarget.style.borderColor = 'rgba(26,23,21,0.08)'}>
              <div style={{ aspectRatio: '1/1', background: 'var(--sd-bg)' }}>
                <img src={d.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>Anteprima {i + 1}</span>
                <button style={{ ...sdPrimaryBtn, padding: '8px 14px', fontSize: 12 }}>Scegli</button>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
          <button style={sdSecondaryBtn}>Chiedi altre 3 anteprime</button>
        </div>
      </div>
    </div>);

}

function _UnusedAccountIndirizzi() {
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 44, margin: '0 0 28px', fontWeight: 400 }}>I miei indirizzi</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16 }}>
        {[['Casa', 'Via Brera 12, 20121 Milano (MI)', true], ['Ufficio', 'Corso Como 4, 20154 Milano (MI)', false]].map(([label, addr, main], i) =>
        <div key={i} style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 24, boxShadow: 'var(--sd-shadow-soft)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{label}</span>
              {main && <span style={{ fontSize: 11, background: 'var(--sd-pink)', padding: '2px 8px', borderRadius: 999, fontWeight: 700 }}>Principale</span>}
            </div>
            <div style={{ fontSize: 14, color: 'var(--sd-ink-2)' }}>{addr}</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <button style={{ ...sdGhostBtn, fontSize: 13 }}>Modifica</button>
              <button style={{ ...sdGhostBtn, fontSize: 13, color: 'var(--sd-danger)' }}>Rimuovi</button>
            </div>
          </div>
        )}
        <button style={{ ...sdSecondaryBtn, height: 140, border: '1px dashed rgba(26,23,21,0.2)', background: 'transparent' }}>+ Aggiungi indirizzo</button>
      </div>
    </div>);

}

function _UnusedAccountImpostazioni() {
  return (
    <div>
      <h2 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 44, margin: '0 0 28px', fontWeight: 400 }}>Impostazioni</h2>
      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 32, boxShadow: 'var(--sd-shadow-soft)', maxWidth: 560 }}>
        {[['Nome completo', 'Giulia Marchetti'], ['Email', 'giulia@example.it'], ['Telefono', '+39 347 xxx xxxx'], ['Password', '••••••••']].map(([l, v]) =>
        <div key={l} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 0', borderBottom: '1px solid rgba(26,23,21,0.08)' }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--sd-ink-3)' }}>{l}</div>
              <div style={{ fontSize: 15 }}>{v}</div>
            </div>
            <button style={{ ...sdGhostBtn, fontSize: 13 }}>Modifica</button>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { Home, Galleria, Processo, TracciaOrdine });