/* global React, SFIcons */
const { Truck: TruckI, Box, Shield, Clock, ChevronRight } = SFIcons;
const { Button: B, ProductCard: PCard } = window.MADECIDesignSystem_419fb1;
const M2 = window.MADECIDesignSystem_419fb1;
function HeadsetIcon() {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--madeci-red)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 14v-2a9 9 0 0 1 18 0v2" /><path d="M21 16a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2Z" /><path d="M3 16a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2Z" /><path d="M21 14v3a4 4 0 0 1-4 4h-5" /></svg>;
}

function Hero({ onShop }) {
  return (
    <section style={{ background: 'var(--madeci-ink)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/mark.png" alt="" aria-hidden="true"
        style={{ position: 'absolute', right: -40, top: '50%', transform: 'translateY(-50%)', height: 420, opacity: 0.13 }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '72px 24px', position: 'relative' }}>
        <div style={{ maxWidth: 660 }}>
          <span className="madeci-eyebrow" style={{ color: 'var(--madeci-red)' }}>Distribuidora de bebidas y licores · B2B</span>
          <h1 style={{ color: '#fff', fontSize: 60, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-.02em', margin: '14px 0 0' }}>
            Tu inventario, <span style={{ color: 'var(--madeci-red)' }}>siempre abastecido.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.78)', margin: '18px 0 0', maxWidth: 540 }}>
            Pedidos mayoristas con dos despachos diarios para minimarkets, restaurantes y hoteles de la provincia de San Antonio. Stock real, precios claros y soporte comercial.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 30 }}>
            <B size="lg" onClick={onShop} iconRight={<ChevronRight size={18} />}>Explorar catálogo</B>
            <a href="https://wa.me/56994437835" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 48, padding: '0 22px', borderRadius: 'var(--radius-sm)', background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.35)', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>Hablar con ventas</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ValueProps() {
  const items = [
    { icon: TruckI, t: 'Dos despachos al día', d: 'Pide antes de las 10:00 o 15:00 y recibe el mismo día.' },
    { icon: Box, t: 'Amplio catálogo', d: 'Bebidas, cervezas, vinos y destilados en un solo lugar.' },
    { icon: Shield, t: 'Precios mayoristas', d: 'Descuentos por volumen para tu negocio.' },
    { icon: Clock, t: 'Pedidos 24/7', d: 'Ordena cuando quieras desde el portal.' },
  ];
  return (
    <section style={{ maxWidth: 1280, margin: '0 auto', padding: '0 24px' }} className="sf-shell">
      <div className="sf-cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: -36, position: 'relative' }}>
        {items.map(({ icon: Icon, t, d }) => (
          <div key={t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', padding: 'var(--space-5)' }}>
            <div style={{ width: 42, height: 42, borderRadius: 'var(--radius-sm)', background: 'var(--madeci-red-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
              <Icon size={22} stroke="var(--madeci-red)" />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--text-strong)' }}>{t}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', marginTop: 4 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
      <div>
        <span className="madeci-eyebrow">{eyebrow}</span>
        <h2 style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-.015em', margin: '4px 0 0' }}>{title}</h2>
      </div>
      {action && <a style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>{action} <ChevronRight size={16} /></a>}
    </div>
  );
}

function HomeView({ products, onAdd, qtyEnCarrito, onShop, onView, loggedIn, onLogin, showExec, account }) {
  // Selección variada (con stock, mezclando categorías) para no mostrar 8 de la misma.
  const featured = window.destacadosDe ? window.destacadosDe(products, 8) : products.slice(0, 8);
  return (
    <div>
      <Hero onShop={onShop} />
      <ValueProps />
      {showExec && (
        <section className="sf-shell" style={{ maxWidth: 1280, margin: '0 auto', padding: '48px 24px 0' }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 16 }}>
            <div>
              <span className="madeci-eyebrow">¿Necesitas ayuda?</span>
              <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-.015em', margin: '4px 0 0' }}>¿No sabes qué pedir? Te ayudamos a armar tu pedido</h2>
            </div>
          </div>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 'var(--space-5)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--madeci-red)', marginBottom: 14 }}>Central de pedidos MADECI</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 52, height: 52, flex: 'none', borderRadius: 'var(--radius-md)', background: 'var(--madeci-red-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><HeadsetIcon /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--text-strong)', lineHeight: 1.1 }}>Nuestro equipo comercial te asesora</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>Un asesor disponible te ayuda a cotizar y armar tu pedido</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 9, marginTop: 16 }} className="sf-stack">
              <a href="https://wa.me/56994437835" target="_blank" rel="noopener noreferrer" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, height: 46, borderRadius: 'var(--radius-sm)', background: '#1FA855', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5 }}>WhatsApp +56 9 9443 7835</a>
              <a href="tel:6006129877" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, height: 46, borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', border: '1px solid var(--border-default)', color: 'var(--text-strong)', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5 }}>Call Center 600 612 9877</a>
            </div>
          </div>
        </section>
      )}
      <section className="sf-shell" style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 24px 72px' }}>
        <SectionHead eyebrow="Más pedidos esta semana" title="Productos destacados" action="Ver todo" />
        <div className="sf-cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
          {featured.map((p) => loggedIn ? (
            <div key={p.id} onClick={(e) => { if (e.target.closest('button')) return; onView(p); }} style={{ cursor: 'pointer', height: '100%' }}>
              <PCard {...p} cartQty={qtyEnCarrito ? { CJ: qtyEnCarrito(p.sku, 'CJ'), UN: qtyEnCarrito(p.sku, 'UN') } : undefined} onAdd={(q, modo) => onAdd(p, q, modo)} style={{ height: '100%' }} />
            </div>
          ) : (
            <GuestProductCard key={p.id} product={p} onLogin={onLogin} />
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeView, SectionHead });