// ProductsPage.jsx — Catalogo prodotti Mia Cosmetici
// Layout: 2 colonne su desktop (1 su mobile). Per ogni prodotto: immagine a sx, info a dx.

const PRODUCTS_CATEGORIES = [
  {
    id: 'viso',
    n: '01',
    title: 'Linea viso',
    eyebrow: 'Cura del viso',
    blurb: "Creme, sieri, detergenti e maschere. Per ogni tipo di pelle, ogni esigenza.",
    items: [
      { img: 'assets/products/ph-protection.jpg', name: 'PH Protection', sub: 'Crema Lenitiva', desc: "Protegge e calma le pelli sensibili grazie alla camomilla." },
      { img: 'assets/products/age-repair.jpg', name: 'Age Repair', sub: 'Crema Antirughe', desc: "Retinolo e olio di baobab per ridurre le rughe e migliorare l'elasticità." },
      { img: 'assets/products/puri-cream.jpg', name: 'Puri Cream', sub: 'Crema Purificante', desc: "Purifica e normalizza le pelli grasse e impure con un'azione delicata alla bardana." },
      { img: 'assets/products/hydra-cream.jpg', name: 'Hydra Cream', sub: 'Crema Idratante', desc: "Collagene e proteine di soia per un'idratazione profonda, ideale per pelli secche." },
      { img: 'assets/products/snail-cream.jpg', name: 'Snail Cream', sub: 'Crema Antirughe', desc: "Bava di lumaca e peptidi botulino-simili per attenuare rughe e ridare elasticità." },
      { img: 'assets/products/jaluronic-acid.jpg', name: 'Jaluronic Acid', sub: 'Acido Jaluronico', desc: "Siero con acido jaluronico e ginseng per idratazione intensa e tonicità del viso." },
      { img: 'assets/products/venom-viper-lift-serum.jpg', name: 'Venom Viper Lift Serum', sub: 'Siero Lifting Antirughe', desc: "Dipeptide ispirato al veleno di vipera per un effetto tensore immediato su viso e collo." },
      { img: 'assets/products/venom-viper-lift-cream.jpg', name: 'Venom Viper Lift Cream', sub: 'Crema Lifting Antirughe', desc: "Stessa azione del siero in formula crema, arricchita con olio di mandorle." },
      { img: 'assets/products/additivo-jalurofiller.png', name: 'Additivo Jalurofiller', sub: 'Siero Performante', desc: "Acido jaluronico di ultima generazione, NMF e vitamina C stabilizzata per potenziare idratazione e luminosità." },
      { img: 'assets/products/hyalurofiller-9x.jpg', name: 'Hyalurofiller 9x', sub: 'Crema Filler', desc: "Acido jaluronico crosslinkato ad effetto filler per un'azione antirughe visibile." },
      { img: 'assets/products/illumina.jpg', name: 'Illumina', sub: 'Siero Borse & Occhiaie', desc: "Olio di argan, caffeina e cellule staminali di quercia per ridurre borse e occhiaie." },
      { img: 'assets/products/total-milk.jpg', name: 'Total Milk', sub: 'Latte Detergente', desc: "Latte a pH fisiologico con olio di mandorle, adatto a tutti i tipi di pelle." },
      { img: 'assets/products/mousse.jpg', name: 'Mousse', sub: 'Mousse Detergente', desc: "Mousse vellutata all'aloe che deterge preservando l'idratazione naturale." },
      { img: 'assets/products/fresh-tonic.jpg', name: 'Fresh Tonic', sub: 'Tonico Polivalente', desc: "Tonico analcolico all'hamamelis per pelli sensibili e che si arrossano facilmente." },
      { img: 'assets/products/mask-botosystem.jpg', name: 'Mask Botosystem', sub: 'Maschera TNT Antirughe', desc: "Maschera in tessuto con acetyl dipeptide per distendere e illuminare la pelle." },
      { img: 'assets/products/lip-butter.jpg', name: 'Lip Butter', sub: 'Burro Labbra', desc: "Balsamo al burro di karité che nutre le labbra, disponibile in tre gusti." },
      { img: 'assets/products/hydrogel-patch.jpg', name: 'Hydrogel Patch', sub: 'Contorno Occhi in Hydrogel', desc: "Patch rinfrescanti con vitamina E, retinolo e acido jaluronico per un effetto immediato." },
      { img: 'assets/products/sugar-scrub.jpg', name: 'Sugar Scrub', sub: 'Scrub Viso', desc: "Scrub delicato allo zucchero di canna, adatto anche alle pelli più sensibili." },
    ],
  },
  {
    id: 'corpo',
    n: '02',
    title: 'Linea corpo',
    eyebrow: 'Cura del corpo',
    blurb: "Burri, scrub, mousse e trattamenti specifici. Texture che senti subito sulla pelle.",
    items: [
      { img: 'assets/products/body-butter.jpg', name: 'Body Butter', sub: 'Burro Corpo', desc: "Burro di karité, olio di rosa mosqueta e mandorle per pelle elastica e nutrita." },
      { img: 'assets/products/butter-scrub.jpg', name: 'Butter Scrub', sub: 'Burro Scrub in Spuma', desc: "Mousse esfoliante con sale del mar morto e burro di karité per pelle morbida e levigata." },
      { img: 'assets/products/thalasso-scrub.jpg', name: 'Thalasso Scrub', sub: 'Scrub Salino Papaya', desc: "Sale del mar morto e oli vegetali per rimuovere le cellule morte e donare luminosità." },
      { img: 'assets/products/mousse-cell.jpg', name: 'Mousse Cell', sub: 'Mousse Cell', desc: "Fosfatidilcolina per contrastare cellulite e ritenzione idrica mantenendo la pelle idratata." },
      { img: 'assets/products/body-wrap-tonic.jpg', name: 'Body Wrap Tonic', sub: 'Benda Tonificante', desc: "Bende monouso con acido jaluronico, centella ed equiseto per tonificare e idratare la pelle del corpo." },
      { img: 'assets/products/slim-complex.jpg', name: 'Slim Complex', sub: 'Crema Adipe Cell', desc: "Caffeina ed estratti vegetali per trattare gli inestetismi da cellulite e adipe localizzato." },
      { img: 'assets/products/fango-gel-extra-dren.jpg', name: 'Fango Gel Extra Dren', sub: 'Fango Gel', desc: "Gel al fungo Reishi per contrastare cellulite e ritenzione idrica, utilizzabile anche con trattamenti specifici." },
    ],
  },
  {
    id: 'solari',
    n: '03',
    title: 'Linea solari',
    eyebrow: 'Acceleratori, protezioni, doposole',
    blurb: "Tutto quello che serve prima, durante e dopo l'esposizione. Se non sai quale scegliere, chiedi a Franco.",
    items: [
      { img: 'assets/products/tanning-gel-super-bronze.jpg', name: 'Tanning Gel Super Bronze', sub: 'Acceleratore', desc: "Gel con tirosina e proteine vegetali per favorire e intensificare l'abbronzatura." },
      { img: 'assets/products/tanning-gel-glitter.jpg', name: 'Tanning Gel Acceleratore Glitter in Gel', sub: 'Acceleratore Glitter', desc: "Tirosina e polvere dorata per un'abbronzatura rapida, intensa e luminosa." },
      { img: 'assets/products/low-medium-hight-protection.jpg', name: 'Solari SPF 10 · 25 · 35 · 50', sub: 'Bassa · Media · Alta Protezione', desc: "Quattro formule a base di vitamina E e bisabololo per scegliere la protezione giusta per la tua pelle. Non ungono e si assorbono rapidamente." },
      { img: 'assets/products/hight-protection-spf50.jpg', name: 'Hight Protection SPF 50+', sub: 'Solare Altissima Protezione', desc: "Protezione massima SPF 50+ con bava di lumaca, indicata per fototipi I e II e pelli particolarmente delicate." },
      { img: 'assets/products/alta-protezione-stick.jpg', name: 'Alta Protezione Stick', sub: 'Stick SPF 50+', desc: "Stick solare vegan SPF 50+, pratico per applicazioni mirate su viso e zone delicate." },
      { img: 'assets/products/sun-protection-super-bronze.jpg', name: 'Sun Protection Super Bronze', sub: 'Acqua Solare · Mediterranea & Fresh', desc: "Acqua abbronzante con filtri solari e stimolante della melanina. Disponibile in due profumazioni: Mediterranea ad arancio e uva, Fresh alla menta." },
      { img: 'assets/products/dopo-sole.jpg', name: 'Dopo Sole', sub: 'Emulsione Idratante Papaya', desc: "Emulsione leggera alla papaya che idrata e lenisce la pelle dopo l'esposizione." },
      { img: 'assets/products/attivatore-star-sun.jpg', name: 'Attivatore Star Sun', sub: 'Attivatore Solare da Cabina', desc: "Crema professionale con albicocca, aloe e tirosina per favorire un'abbronzatura uniforme su tutti i fototipi." },
      { img: 'assets/products/bagnodoccia-vitamina-c.png', name: 'Bagnodoccia Vitamina C', sub: 'Energy Shower', desc: "Bagnodoccia delicato alla vitamina C con fragranza all'arancio. Senza parabeni e senza SLES." },
    ],
  },
];

function ProductsPage({ onNavigate }) {
  return (
    <main>
      <ProductsHero />
      {PRODUCTS_CATEGORIES.map((cat) => (
        <ProductsCategory key={cat.id} cat={cat} />
      ))}
      <ProductsCTA onNavigate={onNavigate} />
    </main>
  );
}

/* SEZIONE 1 — Intro */
function ProductsHero() {
  const total = PRODUCTS_CATEGORIES.reduce((s, c) => s + c.items.length, 0);

  const jump = (id) => {
    const el = document.getElementById(`cat-${id}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <section style={{ background: 'var(--ds-grad-brace-diag)', color: '#FFFFFF', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', pointerEvents: 'none' }} />
      {/* offset sun mark watermark — stessa firma della home */}
      <div style={{ position: 'absolute', top: '-12%', right: '-6%', opacity: 0.12, pointerEvents: 'none' }}>
        <LogoMark size={420} style={{ filter: 'brightness(0) invert(1)' }} />
      </div>
      <div className="container" style={{ position: 'relative', padding: '88px 32px 72px' }}>
        <div style={{ maxWidth: 880 }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 16 }}>Prodotti · Mia Cosmetici Professionali</div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-1.2px', color: '#FFFFFF', marginBottom: 28, textWrap: 'balance' }}>
            I prodotti che trovi da noi.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: 'rgba(255,255,255,0.92)', maxWidth: 760, marginBottom: 18 }}>
            Tutto quello che vedi sullo scaffale da Deux Soleil è stato scelto perché funziona — non per riempire uno spazio. Franco usa gli stessi prodotti che vende. Linea <strong style={{ color: '#FFFFFF' }}>Mia Cosmetici Professionali</strong>, selezionata con cura per chi prende sul serio la cura della propria pelle.
          </p>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontStyle: 'italic', lineHeight: 1.6, color: 'rgba(255,255,255,0.7)' }}>
            I prezzi sono disponibili direttamente in sede.
          </p>
        </div>

        {/* Quick-jump chips — bianchi su sfondo gradiente */}
        <div style={{ marginTop: 44, display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          {PRODUCTS_CATEGORIES.map((c) => (
            <button key={c.id} onClick={() => jump(c.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '12px 20px',
              borderRadius: 999,
              background: '#FFFFFF',
              border: '1px solid rgba(255,255,255,0.4)',
              fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, fontWeight: 500,
              color: '#1A1A1A',
              boxShadow: '0 4px 14px rgba(132,20,16,0.18)',
              transition: 'transform 240ms, box-shadow 240ms',
              cursor: 'pointer',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(132,20,16,0.28)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 14px rgba(132,20,16,0.18)'; }}
            >
              <span style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 11, letterSpacing: 1.6, color: '#E8621A' }}>{c.n}</span>
              <span>{c.title}</span>
              <span style={{ color: '#9A9A9A', fontSize: 12 }}>· {c.items.length}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 2/3/4 — Categoria con griglia 2 colonne */
function ProductsCategory({ cat }) {
  // Sand/light backgrounds for visual variety per category, kept within DS palette
  const bgMap = {
    viso:    '#FFFFFF',
    corpo:   '#F7F3EF',
    solari:  '#FFFFFF',
  };
  const bg = bgMap[cat.id] || '#FFFFFF';

  return (
    <section id={`cat-${cat.id}`} className="section" style={{ background: bg, position: 'relative', scrollMarginTop: 80 }}>
      <div className="container">
        {/* Category header */}
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 680 }}>
            <div className="ds-eyebrow" style={{ marginBottom: 14 }}>{cat.eyebrow}</div>
            <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance', marginBottom: 14 }}>
              {cat.title}
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16.5, lineHeight: 1.65, color: '#3a3a3a' }}>
              {cat.blurb}
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(56px, 7vw, 84px)', lineHeight: 0.9, color: 'transparent', WebkitTextStroke: '1.5px #E8621A', letterSpacing: '-2px' }}>{cat.n}</span>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 500, color: '#6B6B6B' }}>{cat.items.length} prodotti</span>
          </div>
        </div>

        {/* Product grid */}
        <div className="products-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22 }}>
          {cat.items.map((p, i) => (
            <ProductCard key={`${cat.id}-${i}`} p={p} bg={bg} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* Singola scheda prodotto: immagine sx + box info dx */
function ProductCard({ p, bg }) {
  // Card surface contrasts the section background slightly
  const cardBg = bg === '#F7F3EF' ? '#FFFFFF' : '#FBF8F4';
  const imgBg  = '#FFFFFF';

  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: '180px 1fr',
      gap: 0,
      background: cardBg,
      border: '1px solid #F0EBE5',
      borderRadius: 18,
      overflow: 'hidden',
      transition: 'transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 380ms',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 14px 32px rgba(0,0,0,0.08)'; e.currentTarget.style.borderColor = '#EDD9C2'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = '#F0EBE5'; }}
    >
      <div style={{
        background: imgBg,
        borderRight: '1px solid #F4EFE7',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 16,
        aspectRatio: '1 / 1',
        overflow: 'hidden',
      }}>
        <img src={p.img} alt={`${p.name} — ${p.sub}`} loading="lazy"
          style={{ maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto', objectFit: 'contain', display: 'block' }} />
      </div>
      <div style={{ padding: '22px 24px 22px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10.5, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#E8621A', marginBottom: 10 }}>
          {p.sub}
        </div>
        <h3 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, lineHeight: 1.15, color: '#1A1A1A', marginBottom: 10, letterSpacing: '-0.3px' }}>
          {p.name}
        </h3>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, lineHeight: 1.55, color: '#3a3a3a', margin: 0, textWrap: 'pretty' }}>
          {p.desc}
        </p>
      </div>
    </article>
  );
}

/* SEZIONE 5 — CTA */
function ProductsCTA({ onNavigate }) {
  return (
    <section style={{ background: '#FFFFFF', padding: '40px 0 88px' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, padding: '40px 48px', borderRadius: 20, background: 'var(--ds-grad-alba-diag)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', maxWidth: 620 }}>
            <h3 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.15, letterSpacing: '-0.5px', color: '#1A1A1A', textWrap: 'balance' }}>
              Vuoi sapere quale prodotto fa per te?
            </h3>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.6, color: '#3a3a3a', marginTop: 10 }}>
              Passa da noi — Franco ti dice quello che ti serve, senza giri di parole.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => onNavigate && onNavigate('contatti')}>Vieni a trovarci <Icon.Arrow size={14} color="#fff"/></button>
            <a href="tel:0119721717" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
              <Icon.Phone size={14} /> 011 972 1717
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductsPage });