// MRB Auto storefront — content sections
const _mkS = (n) => (props) => { const C = window.MRBAutoDesignSystem_73c751 && window.MRBAutoDesignSystem_73c751[n]; return C ? React.createElement(C, props) : null; };
const Icon = _mkS('Icon'), Button = _mkS('Button'), SectionHeader = _mkS('SectionHeader'),
  ProductCard = _mkS('ProductCard'), BrandTile = _mkS('BrandTile'), TrustItem = _mkS('TrustItem'),
  VehicleSelector = _mkS('VehicleSelector'), Rating = _mkS('Rating'), Card = _mkS('Card'), Badge = _mkS('Badge');

const Wrap = ({ children, style, className }) => (
  <div className={className} style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 16px', ...style }}>{children}</div>
);

/* ---------------- Hero ---------------- */
function Hero({ onSelect }) {
  const stats = [['10 000+', 'commandes livrées'], ['11', 'marques couvertes'], ['4,8/5', 'avis clients']];
  return (
    <section style={{ background: 'var(--ink-900)', color: 'var(--white)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 38px, rgba(255,255,255,0.018) 38px 40px)' }} />
      <Wrap className="home-hero" style={{ position: 'relative' }}>
        <div>
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '12px', letterSpacing: 'var(--ls-caps)', textTransform: 'uppercase', color: 'var(--accent)' }}>Relooking & carrosserie — SUV & berlines premium</span>
          <h1 className="h-hero" style={{ margin: '18px 0 0', fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: 'var(--ls-display)', lineHeight: 0.92 }}>
            Accessoires auto<br /><span style={{ color: 'var(--accent)' }}>au meilleur prix</span>
          </h1>
          <p style={{ margin: '24px 0 0', maxWidth: 520, fontFamily: 'var(--font-sans)', fontSize: '16px', lineHeight: 1.6, color: 'var(--ink-300)' }}>
            Marche-pieds, calandres, kits AMG-look, extensions d'ailes et jantes — des pièces adaptables de qualité OEM, montées sur les points d'origine. Sélectionnez votre véhicule, on vous montre uniquement ce qui s'adapte.
          </p>
          <div style={{ display: 'flex', gap: 40, marginTop: 38 }}>
            {stats.map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: '2.5rem', lineHeight: 1, letterSpacing: '-0.01em' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '12.5px', color: 'var(--ink-400)', marginTop: 4, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <VehicleSelector data={window.MRB_DATA.vehicles} onSubmit={onSelect} style={{ boxShadow: 'var(--shadow-xl)' }} />
      </Wrap>
    </section>
  );
}

/* ---------------- Trust strip ---------------- */
function TrustStrip() {
  const items = [
    ['truck', 'Expédition 24-48h', 'France & Europe, colis renforcé'],
    ['creditCard', 'Paiement 3x / 4x', 'Sans frais, 100% sécurisé'],
    ['shieldCheck', 'Satisfait ou remboursé', '14 jours pour changer d\'avis'],
    ['mapPin', 'Entreprise française', 'Basée dans l\'Essonne depuis 2015'],
  ];
  return (
    <section style={{ borderBottom: '1px solid var(--border-default)' }}>
      <Wrap className="trust-grid">
        {items.map(([icon, title, text]) => <TrustItem key={title} icon={icon} title={title} text={text} />)}
      </Wrap>
    </section>
  );
}

/* ---------------- Brand grid ---------------- */
function BrandGrid({ onPick }) {
  return (
    <section className="sec-pad">
      <Wrap>
        <SectionHeader eyebrow="Par marque" title="Choisissez votre véhicule"
          description="Des accessoires pensés modèle par modèle, génération par génération."
          link={{ label: 'Toutes les marques', href: '#' }} />
        <div className="brand-grid" style={{ marginTop: 32 }}>
          {window.MRB_DATA.brands.map((b) => <BrandTile key={b.name} name={b.name} count={b.count} onClick={(e) => { e.preventDefault(); onPick && onPick(b.name); }} />)}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------------- Category grid ---------------- */
function CategoryGrid() {
  return (
    <section style={{ padding: '0 0 48px' }}>
      <Wrap>
        <SectionHeader eyebrow="Univers produits" title="Que recherchez-vous ?"
          link={{ label: 'Tout le catalogue', href: 'catalog.html' }} />
        <div className="cat-grid" style={{ marginTop: 32 }}>
          {window.MRB_DATA.categories.map((c) => (
            <a key={c.name} href="catalog.html" className="mrb-cat" style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '22px', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-card)', transition: 'border-color var(--dur-base), transform var(--dur-base)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--ink-900)', color: 'var(--white)' }}>
                <Icon name={c.icon} size={22} />
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.01em', fontSize: '1.2rem', color: 'var(--text-primary)' }}>{c.name}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '13px', color: 'var(--text-muted)', marginTop: 3 }}>{c.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------------- Product rail ---------------- */
function ProductRail({ eyebrow, title, description, link, items, bg, onAdd }) {
  return (
    <section className="sec-pad" style={{ background: bg || 'transparent' }}>
      <Wrap>
        <SectionHeader eyebrow={eyebrow} title={title} description={description} link={{ label: link, href: 'catalog.html' }} />
        <div className="prod-grid" style={{ marginTop: 32 }}>
          {items.map((p) => <a key={p.title} href="product.html" style={{ display: 'block' }}><ProductCard {...p} onAdd={() => onAdd && onAdd(p)} /></a>)}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------------- Why MRB ---------------- */
function WhyMRB() {
  return (
    <section className="sec-pad" style={{ background: 'var(--surface-alt)' }}>
      <Wrap>
        <SectionHeader eyebrow="Pourquoi MRB Auto" title="Le réflexe relooking, sans erreur de montage" align="center" />
        <div className="why-grid" style={{ marginTop: 40 }}>
          {window.MRB_DATA.whyMrb.map((w) => (
            <div key={w.title} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-card)', padding: '26px 22px' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--accent-tint)', color: 'var(--accent)' }}>
                <Icon name={w.icon} size={22} />
              </span>
              <h3 style={{ margin: '16px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', fontSize: '1.15rem', lineHeight: 1.05, color: 'var(--text-primary)' }}>{w.title}</h3>
              <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '13.5px', lineHeight: 1.55, color: 'var(--text-secondary)' }}>{w.text}</p>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------------- Testimonials ---------------- */
function Testimonials() {
  return (
    <section className="sec-pad">
      <Wrap>
        <SectionHeader eyebrow="Avis clients" title="Nos clients parlent de nous"
          link={{ label: '4,8/5 sur les avis vérifiés', href: '#' }} />
        <div className="testi-grid" style={{ marginTop: 32 }}>
          {window.MRB_DATA.testimonials.map((t) => (
            <div key={t.name} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-card)', padding: '26px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Rating value={5} showValue={false} size={16} />
              <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: '14.5px', lineHeight: 1.6, color: 'var(--text-primary)' }}>« {t.text} »</p>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: '13px', color: 'var(--text-muted)' }}>
                <Icon name="checkCircle" size={15} color="var(--status-success)" />
                <strong style={{ color: 'var(--text-primary)' }}>{t.name}</strong> · achat vérifié
              </div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

/* ---------------- Newsletter ---------------- */
function Newsletter() {
  return (
    <section style={{ padding: '0 0 48px' }}>
      <Wrap>
        <div className="news-box" style={{ background: 'var(--ink-900)', borderRadius: 'var(--radius-2xl)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 38px, rgba(255,255,255,0.02) 38px 40px)' }} />
          <div style={{ position: 'relative' }}>
            <h2 className="h-sec" style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: 'var(--ls-display)', lineHeight: 0.95, color: 'var(--white)' }}>
              <span style={{ color: 'var(--accent)' }}>-10%</span> sur votre 1ʳᵉ commande
            </h2>
            <p style={{ margin: '16px 0 0', maxWidth: 440, fontFamily: 'var(--font-sans)', fontSize: '15px', lineHeight: 1.55, color: 'var(--ink-300)' }}>
              Nouveautés sur vos modèles, conseils de montage et offres exclusives, directement par email.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <input placeholder="Votre adresse email" style={{ flex: 1, minWidth: 180, height: 52, border: 'none', borderRadius: 'var(--radius-pill)', padding: '0 22px', fontFamily: 'var(--font-sans)', fontSize: '15px', outline: 'none' }} />
              <Button variant="accent" size="lg">Je m'inscris</Button>
            </div>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: '11.5px', color: 'var(--ink-400)' }}>En vous inscrivant, vous acceptez les conditions générales et la politique de confidentialité.</span>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

Object.assign(window, { MRBHero: Hero, MRBTrustStrip: TrustStrip, MRBBrandGrid: BrandGrid, MRBCategoryGrid: CategoryGrid, MRBProductRail: ProductRail, MRBWhyMRB: WhyMRB, MRBTestimonials: Testimonials, MRBNewsletter: Newsletter });