// Product detail — gallery, buy box, lab specs, related
function ProductScreen({ product, onAdd, onOpen, onNav }) {
  const { Icon } = window;
  const { Button, Badge, Rating, ProductCard, TrustBlock, ReviewSummary, ReviewCard } = window.SinopharmaDesignSystem_d11735;
  const p = product;
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState('desc');
  const related = window.SP_DATA.products.filter((x) => x.id !== p.id).slice(0, 4);

  const specs = [
    ['Forme', p.form], ['Conditionnement', p.count], ['Catégorie', p.category],
    ['Origine', 'Producteurs identifiés'], ['Lot', 'L24·06·B'], ['Conservation', '15–25 °C'],
  ];
  const tabs = { desc: 'Description', compo: 'Composition', dose: 'Posologie' };
  // Structured composition (plant · part · titrage) — clearer fiche for the
  // regulated context. Falls back gracefully if a product lacks the data.
  const composition = p.composition || [
    { plant: 'Jujubier (Suan Zao Ren)', part: 'Graine', amount: '250 mg', titre: '≥ 1.5 % saponines' },
    { plant: 'Schisandra (Wu Wei Zi)', part: 'Fruit', amount: '120 mg', titre: '≥ 2 % schisandrines' },
    { plant: 'Poria (Fu Ling)', part: 'Sclérote', amount: '90 mg', titre: '—' },
  ];
  const posology = p.posology || [
    { label: 'Dose', value: '2 gélules par jour' },
    { label: 'Moment', value: 'Le matin, à distance des repas' },
    { label: 'Prise', value: "Avec un grand verre d'eau" },
    { label: 'Durée', value: 'Cure de 3 semaines, renouvelable' },
  ];
  const descBody = (p.blurb || '') + " Une formule pensée pour s'intégrer simplement à votre routine, dans le respect des principes de la médecine traditionnelle chinoise.";

  return (
    <main>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '28px 28px 0', fontSize: 13, color: 'var(--gray-500)', display: 'flex', alignItems: 'center', gap: 7 }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{ color: 'var(--gray-500)' }}>Accueil</a>
        <Icon name="chevron-right" size={14} color="var(--gray-400)" />
        <a href="#" onClick={(e) => { e.preventDefault(); onNav('shop'); }} style={{ color: 'var(--gray-500)' }}>Boutique</a>
        <Icon name="chevron-right" size={14} color="var(--gray-400)" />
        <span style={{ color: 'var(--gray-700)' }}>{p.name}</span>
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '28px 28px 80px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
        {/* GALLERY */}
        <div>
          <div style={{ aspectRatio: '1/1', borderRadius: 'var(--radius-xl)', background: 'var(--wave-sage)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'var(--glow-sage)' }} />
            {p.badge ? <div style={{ position: 'absolute', top: 18, left: 18 }}><Badge tone={p.badgeTone}>{p.badge}</Badge></div> : null}
            <Icon name="leaf" size={150} color="rgba(111,124,94,0.32)" />
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 14 }}>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} style={{ width: 78, height: 78, borderRadius: 'var(--radius-md)', background: i === 0 ? 'var(--sage-200)' : 'var(--cream-200)', border: i === 0 ? '1.5px solid var(--green-500)' : '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <Icon name="leaf" size={26} color="var(--sage-500)" />
              </div>
            ))}
          </div>
        </div>

        {/* BUY BOX */}
        <div>
          <span className="sp-eyebrow">{p.category}</span>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.8rem,1.3rem+1.6vw,2.5rem)', letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: '10px 0 4px' }}>{p.name}</h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--text-muted)', margin: '0 0 16px' }}>{p.latin}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <Rating value={p.rating} count={p.reviews} showValue />
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--gray-300)' }} />
            <span style={{ fontSize: 13.5, color: 'var(--green-700)', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="check" size={15} color="var(--green-600)" /> En stock</span>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--gray-700)', margin: '0 0 24px', maxWidth: 480 }}>{p.blurb}</p>

          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 24 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 600, color: 'var(--gray-900)' }}>{p.price} €</span>
            {p.oldPrice ? <span style={{ fontSize: 18, color: 'var(--text-faint)', textDecoration: 'line-through' }}>{p.oldPrice} €</span> : null}
            <span style={{ fontSize: 13, color: 'var(--gray-500)' }}>· {p.count}</span>
          </div>

          <div style={{ display: 'flex', gap: 14, marginBottom: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--border-soft)', borderRadius: 'var(--radius-md)', height: 54 }}>
              <button onClick={() => setQty(Math.max(1, qty - 1))} style={stepBtn}><Icon name="minus" size={18} /></button>
              <span style={{ width: 38, textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600 }}>{qty}</span>
              <button onClick={() => setQty(qty + 1)} style={stepBtn}><Icon name="plus" size={18} /></button>
            </div>
            <Button variant="primary" size="lg" fullWidth onClick={() => onAdd(p, qty)} leftIcon={<Icon name="shopping-bag" size={18} />}>Ajouter au panier</Button>
          </div>
          <div style={{ display: 'flex', gap: 18, marginBottom: 28, flexWrap: 'wrap' }}>
            {[['truck', 'Livraison offerte dès 49 €'], ['rotate-ccw', 'Retours sous 30 jours'], ['shield-check', 'Paiement sécurisé']].map(([ic, t]) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'var(--gray-600)' }}>
                <Icon name={ic} size={16} color="var(--green-600)" /> {t}
              </span>
            ))}
          </div>

          {/* SPECS */}
          <div style={{ border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
            <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-hairline)' }}>
              {Object.entries(tabs).map(([k, lbl]) => (
                <button key={k} onClick={() => setTab(k)} style={{ flex: 1, padding: '13px 10px', border: 'none', borderBottom: tab === k ? '2px solid var(--green-500)' : '2px solid transparent', background: tab === k ? 'var(--sage-50)' : 'var(--surface-card)', color: tab === k ? 'var(--green-700)' : 'var(--gray-600)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, cursor: 'pointer' }}>{lbl}</button>
              ))}
            </div>
            <div style={{ padding: '18px 20px' }}>
              {tab === 'desc' ? (
                <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65, color: 'var(--gray-700)' }}>{descBody}</p>
              ) : null}

              {tab === 'compo' ? (
                <div>
                  <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
                    <thead>
                      <tr style={{ textAlign: 'left', color: 'var(--gray-400)' }}>
                        <th style={{ fontWeight: 600, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '0 0 8px', fontFamily: 'var(--font-mono)' }}>Plante</th>
                        <th style={{ fontWeight: 600, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '0 0 8px', fontFamily: 'var(--font-mono)' }}>Partie</th>
                        <th style={{ fontWeight: 600, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '0 0 8px', fontFamily: 'var(--font-mono)', textAlign: 'right' }}>Quantité</th>
                        <th style={{ fontWeight: 600, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '0 0 8px', fontFamily: 'var(--font-mono)', textAlign: 'right' }}>Titrage</th>
                      </tr>
                    </thead>
                    <tbody>
                      {composition.map((row, i) => (
                        <tr key={i} style={{ borderTop: '1px solid var(--border-hairline)' }}>
                          <td style={{ padding: '10px 0', fontWeight: 600, color: 'var(--gray-900)' }}>{row.plant}</td>
                          <td style={{ padding: '10px 0', color: 'var(--gray-600)' }}>{row.part}</td>
                          <td style={{ padding: '10px 0', textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--gray-800)' }}>{row.amount}</td>
                          <td style={{ padding: '10px 0', textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--gray-500)' }}>{row.titre}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  <p style={{ margin: '12px 0 0', fontSize: 12.5, color: 'var(--gray-500)', fontStyle: 'italic' }}>Sans excipient inutile. Contrôle d'identité botanique et dosage des principes actifs à chaque lot.</p>
                </div>
              ) : null}

              {tab === 'dose' ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {posology.map((row, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                      <span style={{ width: 78, flexShrink: 0, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gray-400)', fontFamily: 'var(--font-mono)' }}>{row.label}</span>
                      <span style={{ fontSize: 14.5, color: 'var(--gray-800)', fontWeight: 500 }}>{row.value}</span>
                    </div>
                  ))}
                  <div style={{ marginTop: 6, display: 'flex', gap: 9, padding: '11px 14px', background: 'var(--sage-50)', border: '1px solid var(--sage-200)', borderRadius: 'var(--radius-md)' }}>
                    <Icon name="info" size={16} color="var(--green-600)" style={{ flexShrink: 0, marginTop: 1 }} />
                    <span style={{ fontSize: 12.5, color: 'var(--gray-600)', lineHeight: 1.5 }}>Demandez conseil à votre praticien. Déconseillé pendant la grossesse sans avis médical. Ne se substitue pas à un avis médical.</span>
                  </div>
                </div>
              ) : null}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--border-hairline)' }}>
              {specs.map(([k, v], i) => (
                <div key={k} style={{ padding: '12px 20px', borderTop: i > 1 ? '1px solid var(--border-hairline)' : 'none', borderLeft: i % 2 ? '1px solid var(--border-hairline)' : 'none' }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gray-400)', fontFamily: 'var(--font-mono)' }}>{k}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--gray-800)', marginTop: 2 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* TRUST BAND */}
      <section style={{ background: 'var(--cream-100)', borderTop: '1px solid var(--border-hairline)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 28px 0' }}>
          <TrustBlock variant="sage" eyebrow="Notre engagement" heading="Sérieux, conformité, traçabilité" />
        </div>
      </section>

      {/* REVIEWS — preuve sociale encadrée */}
      <section style={{ background: 'var(--cream-100)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 28px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
            <div>
              <span className="sp-eyebrow">Avis clients</span>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.5rem,1.2rem+1.2vw,2rem)', letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: '10px 0 0' }}>Ce qu'en disent nos clients</h2>
            </div>
          </div>
          <ReviewSummary {...window.SP_DATA.reviewSummary} onWrite={() => {}} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16, marginTop: 18 }}>
            {window.SP_DATA.reviews.map((r, i) => (
              <ReviewCard key={i} {...r} />
            ))}
          </div>
        </div>
      </section>

      {/* RELATED */}
      <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-hairline)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '72px 28px' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.5rem,1.2rem+1.2vw,2rem)', letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: '0 0 28px' }}>À associer</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 22 }}>
            {related.map((r) => (
              <div key={r.id} onClick={() => onOpen(r)} style={{ cursor: 'pointer' }}>
                <ProductCard {...r} onAdd={() => onAdd(r)} />
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}
const stepBtn = { width: 44, height: '100%', border: 'none', background: 'transparent', color: 'var(--gray-700)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' };
window.ProductScreen = ProductScreen;