// Home — hero, réassurance, besoins, best sellers, univers MTC/MTV, qualité, équipe, espace pro, journal, avis, newsletter
// `m` = rendu mobile 375px · `pfx` = préfixe des ids de slots photo
function HomeScreen({ onNav = () => {}, onAdd = () => {}, onOpen = () => {}, m = false, pfx = 'h' }) {
  const { Icon } = window;
  const { Button, ProductCard, Badge, Rating } = window.SinopharmaDesignSystem_d11735;
  const D = window.SP_DATA;
  const g = D.google;

  const wrap = { maxWidth: 1240, margin: '0 auto', padding: m ? '0 20px' : '0 28px' };
  const sec = (extra) => ({ padding: m ? '44px 0' : '80px 0', ...extra });
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 25 : 36, lineHeight: 1.16, letterSpacing: '-0.02em', color: 'var(--gray-900)', margin: 0 };
  const eyebrow = { fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--sage-600)', margin: '0 0 12px' };
  const body = { fontFamily: 'var(--font-body)', fontSize: m ? 15 : 16.5, lineHeight: 1.7, color: 'var(--gray-700)', textWrap: 'pretty' };
  const slot = (id, alt, style) => React.createElement('image-slot', { id: `${pfx}-${id}`, shape: 'rounded', radius: 6, placeholder: alt, style: { display: 'block', ...style } });

  const pillars = [
    { icon: 'leaf', t: 'Plantes tracées', d: 'Origine, lot et titrage documentés pour chaque formule.' },
    { icon: 'flask-conical', t: 'Laboratoires certifiés', d: 'Fabrication européenne, certification FSSC 22000, contrôles BPF.' },
    { icon: 'scroll-text', t: 'Savoir transmis', d: 'Formules issues de la tradition, portées par des praticiens formés au Vietnam et en Europe.' },
    { icon: 'stethoscope', t: 'Conseil de praticien', d: 'Une question, une vraie réponse, avant comme après l’achat.' },
  ];
  const stats = [
    { n: `${String(g.average).replace('.', ',')}/5`, l: `sur ${g.total} avis Google` },
    { n: '40+', l: 'formules traditionnelles' },
    { n: '200+', l: 'thérapeutes nous font confiance' },
    { n: '2015', l: 'à votre service depuis' },
  ];

  return (
    <main>
      {/* 1 · HERO */}
      <section style={{ position: 'relative', background: 'var(--wave-sage)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'var(--glow-sage)', opacity: 0.6 }} />
        <div style={{ position: 'relative', ...wrap, padding: m ? '32px 20px 40px' : '80px 28px 88px', display: 'grid', gridTemplateColumns: m ? '1fr' : '1.05fr 0.95fr', gap: m ? 26 : 48, alignItems: 'center' }}>
          <div>
            <span className="sp-chip" style={{ background: 'rgba(251,250,245,0.7)', borderColor: 'var(--sage-300)' }}>
              <Icon name="sparkles" size={13} color="var(--green-600)" /> Pharmacopée chinoise et vietnamienne
            </span>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: m ? 31 : 50, lineHeight: 1.07, letterSpacing: '-0.028em', color: 'var(--gray-900)', margin: '20px 0 16px' }}>
              La pharmacopée chinoise et vietnamienne, conseillée par des praticiens
            </h1>
            <p style={{ ...body, fontSize: m ? 15.5 : 18, color: 'var(--gray-700)', maxWidth: 520, margin: '0 0 28px' }}>
              Des formules traditionnelles MTC et MTV, sélectionnées par des praticiens, fabriquées en Europe sous contrôle qualité, et accompagnées d’un vrai conseil.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={() => onNav('shop')} rightIcon={<Icon name="arrow-right" size={18} />}>Découvrir la boutique</Button>
              <Button variant="outline" size="lg" onClick={() => onNav('about')}>Demander un conseil</Button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, auto)', gap: m ? 14 : 30, marginTop: m ? 28 : 38, justifyContent: 'start' }}>
              {stats.map((s) => (
                <div key={s.l}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: m ? 21 : 25, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--gray-900)' }}>{s.n}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-600)', lineHeight: 1.4, maxWidth: 140 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            {slot('hero', 'Photo praticien / plantes en situation', { width: '100%', aspectRatio: m ? '4 / 3' : '4 / 5', boxShadow: 'var(--shadow-lg)' })}
          </div>
        </div>
      </section>

      {/* 2 · RÉASSURANCE */}
      <section style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-hairline)' }}>
        <div style={{ ...wrap, padding: m ? '26px 20px' : '40px 28px', display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(4, 1fr)', gap: m ? 16 : 28 }}>
          {pillars.map((p) => (
            <div key={p.t}>
              <Icon name={p.icon} size={m ? 22 : 26} color="var(--green-600)" />
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 14.5 : 16, color: 'var(--gray-900)', marginTop: 10 }}>{p.t}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: m ? 12.5 : 13.5, lineHeight: 1.55, color: 'var(--gray-600)', margin: '5px 0 0' }}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 3 · PAR BESOIN */}
      <section style={sec()}>
        <div style={wrap}>
          <p style={eyebrow}>Par besoin</p>
          <h2 style={{ ...h2, marginBottom: m ? 20 : 32 }}>Trouvez votre formule selon votre besoin</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr 1fr' : 'repeat(5, 1fr)', gap: m ? 10 : 16 }}>
            {D.needs.map((c) => (
              <a key={c.label} href="#" onClick={(e) => { e.preventDefault(); onNav('shop'); }}
                style={{ background: 'var(--cream-50)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', padding: m ? '16px 12px' : '22px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center' }}>
                <span style={{ width: m ? 40 : 46, height: m ? 40 : 46, borderRadius: '50%', background: 'var(--surface-card)', border: '1px solid var(--sage-200)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={c.icon} size={m ? 19 : 21} color="var(--green-600)" />
                </span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: m ? 13 : 14, fontWeight: 600, color: 'var(--gray-800)', lineHeight: 1.35 }}>{c.label}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* 4 · BEST SELLERS */}
      <section style={sec({ background: 'var(--cream-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={wrap}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: m ? 18 : 30 }}>
            <div>
              <p style={eyebrow}>Best sellers</p>
              <h2 style={h2}>Les formules plébiscitées par nos clients et les thérapeutes</h2>
            </div>
            {!m ? (
              <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                <span style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--border-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-card)' }}><Icon name="chevron-left" size={18} color="var(--gray-500)" /></span>
                <span style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--border-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-card)' }}><Icon name="chevron-right" size={18} color="var(--gray-700)" /></span>
              </div>
            ) : null}
          </div>
          <div style={{ display: 'flex', gap: m ? 12 : 20, overflowX: 'auto', paddingBottom: 8 }}>
            {D.bestSellers.map((p) => (
              <div key={p.id} onClick={() => onOpen(p)} style={{ flex: `0 0 ${m ? 200 : 268}px`, cursor: 'pointer' }}>
                <ProductCard {...p} onAdd={() => onAdd(p)} />
              </div>
            ))}
          </div>
          <div style={{ marginTop: m ? 18 : 26 }}>
            <Button variant="outline" size={m ? 'md' : 'lg'} fullWidth={m} onClick={() => onNav('shop')} rightIcon={<Icon name="arrow-right" size={18} />}>Voir toute la boutique</Button>
          </div>
        </div>
      </section>

      {/* 5 · UNIVERS MTC / MTV */}
      <section style={sec()}>
        <div style={wrap}>
          <p style={eyebrow}>Nos deux univers</p>
          <h2 style={{ ...h2, marginBottom: m ? 20 : 34 }}>Deux pharmacopées, une même exigence</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 16 : 24 }}>
            {[
              { k: 'mtc', h3: 'Médecine traditionnelle chinoise : les grandes formules classiques', txt: 'Les formules de référence de la pharmacopée chinoise, sélectionnées par Richard Zagorski, praticien et enseignant en diététique chinoise depuis plus de 25 ans.', cta: 'Explorer l’univers MTC', alt: 'Visuel plantes et formules MTC' },
              { k: 'mtv', h3: 'Médecine traditionnelle vietnamienne : les formules exclusives de Marc Mézard', txt: 'Des formules élaborées par Marc Mézard, praticien et enseignant formé dès 1991 au Vietnam, disponibles uniquement chez Sino-Pharma.', cta: 'Explorer l’univers MTV', alt: 'Photo de Marc Mézard' },
            ].map((u) => (
              <div key={u.k} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                {slot(u.k, u.alt, { width: '100%', aspectRatio: m ? '16 / 10' : '16 / 9', borderRadius: 0 })}
                <div style={{ padding: m ? '18px' : '26px 28px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <Badge tone={u.k === 'mtc' ? 'sage' : 'plum'}>{u.k === 'mtc' ? 'MTC' : 'MTV'}</Badge>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 17 : 20, lineHeight: 1.28, color: 'var(--gray-900)', margin: '12px 0 10px' }}>{u.h3}</h3>
                  <p style={{ ...body, fontSize: m ? 14.5 : 15.5, margin: '0 0 18px' }}>{u.txt}</p>
                  <div style={{ marginTop: 'auto' }}>
                    <Button variant={u.k === 'mtc' ? 'sage' : 'secondary'} size="md" onClick={() => onNav('shop')} rightIcon={<Icon name="arrow-right" size={17} />}>{u.cta}</Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6 · DÉMARCHE QUALITÉ */}
      <section style={{ background: 'var(--ink-900)', color: 'var(--text-on-dark)' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 26 : 56, padding: m ? '44px 20px' : '80px 28px', alignItems: 'center' }}>
          <div>
            <p style={{ ...eyebrow, color: 'var(--sage-300)' }}>Notre démarche</p>
            <h2 style={{ ...h2, color: 'var(--cream-100)' }}>Du champ au flacon, une qualité contrôlée à chaque étape</h2>
            <p style={{ fontFamily: 'var(--font-body)', color: 'var(--text-on-dark-muted)', fontSize: m ? 15 : 16.5, lineHeight: 1.7, maxWidth: 470, margin: '16px 0 26px' }}>
              Chaque plante est sourcée auprès de producteurs identifiés, contrôlée pour ses principes actifs, puis formulée selon les principes des médecines traditionnelles orientales. Fabrication européenne, lot tracé et daté.
            </p>
            <Button variant="sage" size={m ? 'md' : 'lg'} fullWidth={m} onClick={() => onNav('about')}>Lire notre charte de qualité</Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: m ? 10 : 16 }}>
            {[['sprout', 'Sourcing identifié'], ['flask-conical', 'Titrage contrôlé'], ['shield-check', 'Sans additifs superflus'], ['file-check', 'Lot tracé et daté']].map(([ic, t]) => (
              <div key={t} style={{ background: 'var(--surface-dark-soft)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-lg)', padding: m ? 16 : 22 }}>
                <Icon name={ic} size={m ? 22 : 26} color="var(--sage-300)" />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: m ? 14 : 15, fontWeight: 600, color: 'var(--cream-100)', marginTop: 12, lineHeight: 1.35 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 7 · ÉQUIPE */}
      <section style={sec({ background: 'var(--cream-50)', borderBottom: '1px solid var(--border-hairline)', padding: m ? '38px 0' : '62px 0' })}>
        <div style={wrap}>
          <div style={{ display: 'flex', alignItems: m ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 20, flexDirection: m ? 'column' : 'row', marginBottom: m ? 20 : 28 }}>
            <div>
              <p style={eyebrow}>L’équipe</p>
              <h2 style={{ ...h2, fontSize: m ? 23 : 32 }}>Des praticiens derrière chaque conseil</h2>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: m ? 14 : 22, flexShrink: 0 }}>
              <div style={{ textAlign: m ? 'left' : 'right' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: m ? 26 : 32, letterSpacing: '-0.02em', color: 'var(--green-600)', lineHeight: 1 }}>30 ans</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-600)', marginTop: 4 }}>de pratique des médecines orientales</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 14 : 24 }}>
            {[
              { id: 'richard', n: 'Richard Zagorski', b: 'Gérant et conseil MTC, diététique chinoise et pharmacopée depuis plus de 25 ans.' },
              { id: 'marc', n: 'Marc Mézard', b: 'Praticien, chercheur et enseignant, il supervise la gamme MTV.' },
              { id: 'jacques', n: 'Jacques Penna', b: 'Ancien directeur des laboratoires Dolisos, il veille à la qualité et à la logistique.' },
            ].map((p) => (
              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: m ? 62 : 74, flexShrink: 0 }}>
                  {slot(`team-${p.id}`, p.n, { width: '100%', aspectRatio: '1 / 1', borderRadius: '50%' })}
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 15.5 : 16.5, color: 'var(--gray-900)' }}>{p.n}</div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: m ? 13 : 13.5, lineHeight: 1.5, color: 'var(--gray-600)', margin: '4px 0 0' }}>{p.b}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: m ? 20 : 28 }}>
            <Button variant="ghost" size="md" onClick={() => onNav('about')} rightIcon={<Icon name="arrow-right" size={17} />}>Découvrir qui nous sommes</Button>
          </div>
        </div>
      </section>

      {/* 8 · ESPACE PRO */}
      <section style={{ background: 'var(--wave-dark)', color: 'var(--text-on-dark)', padding: m ? '38px 0' : '58px 0' }}>
        <div style={{ ...wrap, display: 'grid', gridTemplateColumns: m ? '1fr' : '1fr auto', gap: m ? 20 : 44, alignItems: 'center' }}>
          <div>
            <h2 style={{ ...h2, color: 'var(--cream-100)', fontSize: m ? 21 : 29 }}>Thérapeutes, praticiens, élèves en formation : votre espace dédié</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: m ? 14.5 : 16, lineHeight: 1.68, color: 'var(--text-on-dark-muted)', margin: '12px 0 0', maxWidth: 660 }}>
              Plus de 200 professionnels s’approvisionnent chez Sino-Pharma. Retrouvez les formules classiques, les exclusivités MTV et un interlocuteur qui parle votre langue.
            </p>
          </div>
          <Button variant="primary" size="lg" fullWidth={m} onClick={() => onNav('pro')} rightIcon={<Icon name="arrow-right" size={18} />}>Accéder à l’Espace pro</Button>
        </div>
      </section>

      {/* 9 · LE JOURNAL */}
      <section style={sec()}>
        <div style={wrap}>
          <p style={eyebrow}>Le Journal</p>
          <h2 style={{ ...h2, marginBottom: m ? 20 : 30 }}>Le Journal : conseils et savoirs des médecines orientales</h2>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 16 : 24 }}>
            {D.journal.map((a, i) => (
              <a key={a.t} href="#" style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                {slot(`journal-${i}`, `Illustration article ${i + 1}`, { width: '100%', aspectRatio: '16 / 10', borderRadius: 0 })}
                <div style={{ padding: m ? '16px 18px 20px' : '20px 22px 24px' }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--sage-600)' }}>{a.cat}</span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: m ? 16 : 17.5, lineHeight: 1.3, color: 'var(--gray-900)', margin: '8px 0 6px' }}>{a.t}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--gray-600)', margin: 0 }}>{a.d}</p>
                </div>
              </a>
            ))}
          </div>
          <div style={{ marginTop: m ? 18 : 26 }}>
            <Button variant="outline" size="md" fullWidth={m} rightIcon={<Icon name="arrow-right" size={17} />}>Tous nos conseils</Button>
          </div>
        </div>
      </section>

      {/* 10 · AVIS CLIENTS */}
      <section style={sec({ background: 'var(--cream-50)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' })}>
        <div style={wrap}>
          <div style={{ display: 'flex', alignItems: m ? 'flex-start' : 'flex-end', justifyContent: 'space-between', gap: 16, flexDirection: m ? 'column' : 'row', marginBottom: m ? 18 : 28 }}>
            <div>
              <p style={eyebrow}>Avis clients</p>
              <h2 style={h2}>Ce que nos clients disent de nous</h2>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: '12px 16px' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 30, lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--gray-900)' }}>{String(g.average).replace('.', ',')}</div>
              <div>
                <Rating value={g.average} size={15} />
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--gray-600)', marginTop: 3 }}>{g.total} avis Google</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)', gap: m ? 12 : 20 }}>
            {g.reviews.map((r) => (
              <div key={r.author} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-lg)', padding: m ? '18px' : '22px 24px' }}>
                <Rating value={r.rating} size={15} />
                <p style={{ ...body, fontSize: m ? 14.5 : 15, margin: '12px 0 14px' }}>{r.body}</p>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--gray-500)' }}>{r.author} · {r.date}</div>
              </div>
            ))}
          </div>
          <a href={g.url} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 18, fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--accent-link)' }}>
            Voir tous les avis sur Google <Icon name="external-link" size={16} color="var(--accent-link)" />
          </a>
        </div>
      </section>

      {/* 11 · NEWSLETTER */}
      <section style={{ background: 'var(--wave-cream)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', padding: m ? '40px 20px' : '68px 28px', textAlign: 'center' }}>
          <Icon name="mail" size={28} color="var(--green-600)" />
          <h2 style={{ ...h2, fontSize: m ? 23 : 32, margin: '14px 0 10px' }}>Le carnet du praticien</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: m ? 15 : 16, color: 'var(--gray-600)', margin: '0 0 24px' }}>Conseils saisonniers, plantes du moment et offres réservées. Une lettre par mois, sans surplus.</p>
          <div style={{ display: 'flex', gap: 10, maxWidth: 440, margin: '0 auto', flexDirection: m ? 'column' : 'row' }}>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', height: 50, padding: '0 18px', background: 'var(--surface-card)', border: '1.5px solid var(--border-soft)', borderRadius: 'var(--radius-pill)' }}>
              <input placeholder="vous@exemple.fr" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 15 }} />
            </div>
            <Button variant="primary" size="lg" fullWidth={m}>S’abonner</Button>
          </div>
        </div>
      </section>
    </main>
  );
}
window.HomeScreen = HomeScreen;
