/* global React, SFIcons */
const PM = window.MADECIDesignSystem_419fb1;
const { Truck: PgTruck, Shield: PgShield, Box: PgBox, Clock: PgClock, MapPin: PgMap, Phone: PgPhone, Check: PgCheck, ChevronDown: PgChev } = SFIcons;
const WAP = <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1 1 12 20Zm4.4-5.6c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.6.8-.8 1-.3.2-.5 0a6.5 6.5 0 0 1-1.9-1.2 7.3 7.3 0 0 1-1.4-1.7c-.1-.3 0-.4.1-.5l.4-.4.2-.4v-.4l-.8-1.8c-.2-.5-.4-.4-.5-.4h-.5a.9.9 0 0 0-.7.3 2.8 2.8 0 0 0-.9 2.1 4.9 4.9 0 0 0 1 2.6 11.2 11.2 0 0 0 4.3 3.8c2 .8 2 .6 2.4.5a2.5 2.5 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3Z" /></svg>;

function PageShell({ eyebrow, title, intro, children, narrow }) {
  return (
    <div className="sf-shell" style={{ maxWidth: narrow ? 820 : 1120, margin: '0 auto', padding: '48px 24px 80px' }}>
      <span className="madeci-eyebrow">{eyebrow}</span>
      <h1 style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-.02em', margin: '6px 0 0' }}>{title}</h1>
      {intro && <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, color: 'var(--text-muted)', marginTop: 12, maxWidth: 640, lineHeight: 1.55 }}>{intro}</p>}
      <div style={{ marginTop: 34 }}>{children}</div>
    </div>
  );
}

/* ---------- Nosotros ---------- */
function AboutView({ onShop }) {
  const stats = [['+1.200', 'Comercios abastecidos'], ['6', 'Comunas con reparto'], ['24-48 h', 'Despacho express'], ['+3.000', 'Productos en catálogo']];
  const vals = [
    { icon: PgTruck, t: 'Logística propia', d: 'Flota y bodega propias para cumplir cada entrega a tiempo.' },
    { icon: PgBox, t: 'Amplio surtido', d: 'Bebidas, cervezas, vinos y destilados de las marcas líderes.' },
    { icon: PgShield, t: 'Precios mayoristas', d: 'Condiciones pensadas para la rentabilidad de tu negocio.' },
    { icon: PgClock, t: 'Atención comercial', d: 'Un equipo que te asesora y acompaña en cada pedido.' },
  ];
  return (
    <PageShell eyebrow="Quiénes somos" title="MADECI" intro="Somos una distribuidora mayorista de bebidas y licores de la provincia de San Antonio. Abastecemos a minimarkets, botillerías, restaurantes, bares y hoteles con un catálogo amplio, precios mayoristas y despacho propio.">
      <div className="sf-cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 40 }}>
        {stats.map(([n, l]) => (
          <div key={l} 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-data)', fontWeight: 700, fontSize: 30, color: 'var(--madeci-red)' }}>{n}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 38 }} className="sf-stack">
        <div style={{ background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)' }}>
          <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Nuestra misión</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, color: 'var(--text-body)', lineHeight: 1.6 }}>Mantener abastecido al comercio local con un servicio confiable, rápido y con precios competitivos, para que cada cliente pueda enfocarse en vender.</p>
        </div>
        <div style={{ background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)' }}>
          <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Nuestra promesa</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, color: 'var(--text-body)', lineHeight: 1.6 }}>Tu inventario, siempre abastecido. Con dos despachos diarios recibe el mismo día, con soporte comercial cuando lo necesites.</p>
        </div>
      </div>
      <div className="sf-cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 40 }}>
        {vals.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-sm)', 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 }}>{t}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--text-muted)', marginTop: 4 }}>{d}</div>
          </div>
        ))}
      </div>
      <PM.Button size="lg" onClick={onShop}>Explorar catálogo</PM.Button>
    </PageShell>
  );
}

/* ---------- Cobertura ---------- */
function CoverageView() {
  return (
    <PageShell eyebrow="Reparto" title="Cobertura de despacho" intro="Realizamos despacho propio en la provincia de San Antonio. Dos despachos diarios (mañana y tarde) de lunes a sábado y uno el domingo en la mañana.">
      {window.CoberturaPanel ? React.createElement(window.CoberturaPanel) : <PM.CoveragePanel leadTime="Express" />}
      <a href="https://wa.me/56994437835" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginTop: 16, height: 46, padding: '0 20px', borderRadius: 'var(--radius-sm)', background: '#1FA855', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{WAP} Consultar por WhatsApp</a>
    </PageShell>
  );
}

/* ---------- Términos y condiciones ---------- */
function TermsView() {
  const secs = [
    ['1. Uso del portal', 'El portal B2B de MADECI es de uso exclusivo para clientes con giro comercial registrados y validados. El acceso es personal e intransferible.'],
    ['2. Pedidos y pedido mínimo', 'Los pedidos están sujetos a un monto mínimo de $30.000 y a disponibilidad de producto. MADECI podrá confirmar o ajustar el pedido antes del despacho.'],
    ['3. Precios', 'Los precios se expresan en pesos chilenos (CLP) con IVA incluido y corresponden a valores mayoristas. Pueden variar sin previo aviso; rige el precio vigente al confirmar el pedido.'],
    ['4. Formas de pago', 'En esta etapa el pago es contra entrega (efectivo o tarjeta), por transferencia electrónica o mediante link de pago. No se opera con cuenta corriente ni crédito.'],
    ['5. Despacho', 'El despacho se realiza dentro de la zona de cobertura informada. Los tiempos de entrega son estimados y pueden variar por factores logísticos.'],
    ['6. Venta de alcohol', 'La venta de bebidas alcohólicas es exclusiva para mayores de 18 años y para negocios con giro que lo permita. MADECI podrá solicitar documentación que lo acredite.'],
    ['7. Datos personales', 'Los datos entregados se utilizan para gestionar pedidos, despachos y contacto comercial, conforme a la legislación vigente sobre protección de datos.'],
  ];
  return (
    <PageShell eyebrow="Legal" title="Términos y condiciones" intro="Al usar el portal mayorista de MADECI aceptas las siguientes condiciones." narrow>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {secs.map(([t, d]) => (
          <div key={t}>
            <h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>{t}</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-body)', lineHeight: 1.6 }}>{d}</p>
          </div>
        ))}
      </div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-subtle)', marginTop: 28 }}>Última actualización: julio 2026. Documento referencial de la etapa 1.</p>
    </PageShell>
  );
}

/* ---------- Contacto ---------- */
const cInput = { height: 46, padding: '0 14px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: '#fff', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-strong)', outline: 'none', width: '100%', boxSizing: 'border-box' };
function CField({ label, children }) {
  return <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}><span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, letterSpacing: '.02em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>{children}</label>;
}
function ContactView() {
  const [sent, setSent] = React.useState(false);
  const [f, setF] = React.useState({ nombre: '', negocio: '', tel: '', mail: '', msg: '' });
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  return (
    <PageShell eyebrow="Contacto" title="Hablemos de tu negocio" intro="Déjanos tus datos y un ejecutivo comercial se pondrá en contacto contigo. También puedes escribirnos directo por WhatsApp.">
      <div className="sf-register-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 28, alignItems: 'start' }}>
        <PM.Card padding="lg">
          {sent ? (
            <div style={{ textAlign: 'center', padding: '20px 8px' }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--status-success-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}><PgCheck size={34} stroke="var(--status-success)" strokeWidth={2.4} /></div>
              <h3 style={{ fontSize: 22, fontWeight: 800 }}>Solicitud enviada</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-muted)', marginTop: 8 }}>Recibimos tu mensaje y notificamos a nuestro equipo comercial. Te contactaremos a la brevedad.</p>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <CField label="Nombre"><input style={cInput} value={f.nombre} onChange={set('nombre')} placeholder="Tu nombre" /></CField>
                <CField label="Negocio"><input style={cInput} value={f.negocio} onChange={set('negocio')} placeholder="Nombre del negocio" /></CField>
                <CField label="Teléfono"><input style={cInput} value={f.tel} onChange={set('tel')} placeholder="+56 9 ..." /></CField>
                <CField label="Correo"><input style={cInput} value={f.mail} onChange={set('mail')} placeholder="correo@negocio.cl" /></CField>
              </div>
              <CField label="Comentario"><textarea value={f.msg} onChange={set('msg')} placeholder="Cuéntanos en qué te ayudamos" style={{ ...cInput, height: 120, padding: '12px 14px', resize: 'vertical' }} /></CField>
              <PM.Button size="lg" onClick={() => { setSent(true); window.scrollTo(0, 0); }}>Enviar solicitud</PM.Button>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-subtle)' }}>Al enviar, notificamos a nuestro equipo la solicitud de contacto comercial.</p>
            </div>
          )}
        </PM.Card>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <PM.Card padding="lg">
            <h3 style={{ fontSize: 17, fontWeight: 700, marginBottom: 12 }}>Prefiero escribir por WhatsApp</h3>
            <a href="https://wa.me/56994437835" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, height: 48, borderRadius: 'var(--radius-sm)', background: '#1FA855', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{WAP} +56 9 9443 7835</a>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-body)' }}>
              <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}><PgPhone size={16} stroke="var(--madeci-red)" /> Call Center 600 612 9877</span>
              <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}><PgMap size={16} stroke="var(--madeci-red)" /> Av. Cartagena 498, Cartagena</span>
            </div>
          </PM.Card>
        </div>
      </div>
    </PageShell>
  );
}

/* ---------- Preguntas frecuentes ---------- */
function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', overflow: 'hidden' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '16px 18px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--text-strong)' }}>
        {q} <PgChev size={18} stroke="var(--text-muted)" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .18s', flex: 'none' }} />
      </button>
      {open && <div style={{ padding: '0 18px 16px', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-body)', lineHeight: 1.6 }}>{a}</div>}
    </div>
  );
}
function FaqView() {
  const faqs = [
    ['¿Quién puede comprar en MADECI?', 'El portal es exclusivo para negocios con giro comercial (minimarkets, botillerías, restaurantes, bares, hoteles). Debes registrarte y validar tu cuenta para ver precios y comprar.'],
    ['¿Cuál es el pedido mínimo?', 'El pedido mínimo es de $30.000. Puedes combinar productos de distintas categorías para alcanzarlo.'],
    ['¿Cómo son los despachos?', 'Tenemos dos despachos diarios de lunes a sábado (mañana y tarde) y uno el domingo en la mañana. Pide antes de las 10:00 y recibe antes de las 13:00; antes de las 15:00 y recibe en la tarde. También puedes programar tu despacho hasta 7 días.'],
    ['¿Qué formas de pago aceptan?', 'Pago contra entrega (efectivo o tarjeta), transferencia electrónica y link de pago electrónico. En esta etapa no operamos con cuenta corriente.'],
    ['¿Cómo creo una cuenta?', 'Ingresa a "Crear cuenta comercial", completa los datos de tu negocio y un ejecutivo validará la información y solicitará la documentación que acredite el giro.'],
    ['¿Cómo obtengo ayuda para armar mi pedido?', 'Puedes escribirnos por WhatsApp o llamar al Call Center 600 612 9877 y un asesor te ayuda a cotizar y armar tu pedido.'],
  ];
  return (
    <PageShell eyebrow="Ayuda" title="Preguntas frecuentes" intro="Resolvemos las dudas más comunes sobre comprar en el portal mayorista de MADECI." narrow>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {faqs.map(([q, a]) => <FaqItem key={q} q={q} a={a} />)}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 26, padding: '16px 18px', background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)' }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--text-body)', flex: 1 }}>¿No encuentras tu respuesta?</span>
        <a href="https://wa.me/56994437835" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 44, padding: '0 18px', borderRadius: 'var(--radius-sm)', background: '#1FA855', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14.5 }}>{WAP} WhatsApp</a>
      </div>
    </PageShell>
  );
}

Object.assign(window, { AboutView, CoverageView, TermsView, ContactView, FaqView });