/* FAQ + FOOTER */

const FAQ = ({ t }) => {
  const items = [
    {
      q: t('¿Cuál es el pedido mínimo?', 'What is the minimum order?'),
      a: t(
        'No tenemos pedido mínimo en cantidad — sí tenemos un mínimo logístico de aprox. $8,000 MXN para que valga la pena el flete y el setup de planta. Por debajo de eso, te sugerimos juntar varias piezas o esperar a un proyecto mayor.',
        "There's no minimum quantity — there is a logistic minimum of about MXN 8,000 to cover freight and shop setup. Below that we suggest bundling pieces or waiting for a larger project."
      ),
    },
    {
      q: t('¿Hacen una sola pieza o solo serie?', 'Do you make one-offs or only series?'),
      a: t(
        'Ambas. Hemos hecho desde una pieza única para un proyecto residencial hasta lotes de 200+ kioscos. La diferencia es el costo unitario: a más volumen, mejor precio.',
        'Both. We make anything from a single residential piece to 200+ kiosk runs. Volume drops unit cost.'
      ),
    },
    {
      q: t('¿Qué materiales manejan?', 'What materials do you work with?'),
      a: t(
        'Acero al carbón (placa, lámina, perfil), acero inoxidable (T304, T316), aluminio anodizado o pintado, vidrio templado y cristal de seguridad. Acabados: pintura electrostática, satinado, espejo, brillante, granallado.',
        'Carbon steel (plate, sheet, profile), stainless (T304, T316), anodized or painted aluminum, tempered & safety glass. Finishes: powder coat, satin, mirror, polished, sandblasted.'
      ),
    },
    {
      q: t('¿Instalan ustedes mismos?', 'Do you install yourselves?'),
      a: t(
        'Sí, en CDMX y zona conurbada lo hacemos directo. Para el resto del país coordinamos con instaladores certificados o, si el proyecto lo amerita, mandamos personal nuestro.',
        'Yes — in CDMX metro we install directly. Elsewhere we coordinate with certified installers, or send our team if the project warrants it.'
      ),
    },
    {
      q: t('¿Trabajan con arquitectos / interioristas?', 'Do you work with architects / designers?'),
      a: t(
        'Continuamente. Tenemos un kit de detalles constructivos editables que mandamos a estudios para que diseñen sabiendo de antemano lo que es factible y a qué costo.',
        'All the time. We share an editable construction-detail kit so studios can design knowing what is feasible and at what cost.'
      ),
    },
    {
      q: t('¿Qué pasa si algo sale mal?', 'What if something goes wrong?'),
      a: t(
        'Si hay un defecto de fabricación, regresamos a corregirlo — está cubierto por la garantía de 3 años. Llevamos 30+ años haciendo retrabajos cuando han hecho falta, sin discusión. Si fue uso indebido, te cotizamos la reparación a precio de costo.',
        'If there is a fabrication defect, we come back and fix it — covered by our 3-year warranty. 30+ years of doing reworks when needed, no argument. If misuse, we quote the repair at cost.'
      ),
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 64 }}>
          <span className="eyebrow">— 09</span>
          <h2 className="display display-lg" style={{ maxWidth: '14ch' }}>
            {t('Preguntas que ya nos hicieron antes.', 'Questions we have already been asked.')}
          </h2>
        </div>

        <div style={{ borderTop: '1px solid var(--hairline)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--hairline)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%',
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr auto',
                  gap: 24,
                  alignItems: 'center',
                  padding: '24px 0',
                  background: 'transparent',
                  border: 'none',
                  cursor: 'pointer',
                  textAlign: 'left',
                  color: 'var(--ink)',
                  fontFamily: 'inherit',
                }}
              >
                <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="display" style={{ fontSize: 'clamp(18px, 2vw, 24px)', fontWeight: 400, lineHeight: 1.3 }}>{it.q}</span>
                <span style={{
                  width: 32, height: 32,
                  borderRadius: '50%',
                  border: '1px solid var(--hairline)',
                  display: 'grid',
                  placeContent: 'center',
                  transition: 'transform 200ms, background 150ms',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  background: open === i ? 'var(--ink)' : 'transparent',
                  color: open === i ? 'var(--bg)' : 'var(--ink)',
                }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5"><line x1="6" y1="1" x2="6" y2="11"/><line x1="1" y1="6" x2="11" y2="6"/></svg>
                </span>
              </button>
              <div style={{
                display: 'grid',
                gridTemplateRows: open === i ? '1fr' : '0fr',
                transition: 'grid-template-rows 300ms ease',
              }}>
                <div style={{ overflow: 'hidden' }}>
                  <div style={{ paddingLeft: 84, paddingRight: 56, paddingBottom: 32, maxWidth: 720 }}>
                    <p style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7 }}>{it.a}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ t }) => (
  <footer style={{ background: 'var(--bg)', color: 'var(--ink)', padding: '64px 0 32px', borderTop: '1px solid var(--hairline)' }}>
    <div className="wrap">
      <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
        <div>
          <div style={{ marginBottom: 12 }}><AcerolabLogo size={28} variant="dark" /></div>
          <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.6, maxWidth: 320 }}>
            {t(
              'Acero, soldadura y diseño industrial. 30+ años fabricando bajo el mismo techo en Tlalnepantla, Estado de México. Garantía 3 años.',
              'Steel, welding and industrial design. 30+ years fabricating under one roof in Tlalnepantla, Estado de México. 3-year warranty.'
            )}
          </p>
        </div>

        {[
          { title: t('Navegación', 'Navigation'), items: [
            { l: t('Quiénes somos', 'About'), h: '#quienes' },
            { l: t('Capacidades', 'Capabilities'), h: '#capacidades' },
            { l: 'Portafolio', h: '#portafolio' },
            { l: t('Proceso', 'Process'), h: '#servilleta' },
            { l: 'FAQ', h: '#faq' },
          ]},
          { title: t('Contacto', 'Contact'), items: [
            { l: 'WhatsApp · +52 55 7868 0250', h: 'https://wa.me/525578680250' },
            { l: 'contacto@acerolab.com.mx', h: 'mailto:contacto@acerolab.com.mx' },
            { l: 'Tlalnepantla de Baz, EdoMex', h: 'https://maps.google.com/?q=Tlalnepantla+de+Baz' },
          ]},
          { title: t('Legal', 'Legal'), items: [
            { l: t('Aviso de privacidad', 'Privacy notice'), h: '#' },
            { l: t('Términos', 'Terms'), h: '#' },
          ]},
        ].map((col, i) => (
          <div key={i}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', marginBottom: 16 }}>{col.title.toUpperCase()}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {col.items.map((it, j) => (
                <li key={j}><a href={it.h} style={{ fontSize: 13, color: 'var(--ink)', textDecoration: 'none' }}>{it.l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>
          © 2026 ACEROLAB · {t('HECHO CON ACERO EN MÉXICO', 'MADE WITH STEEL IN MEXICO')}
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>v.2026.04 · LANDING</span>
      </div>
    </div>
    <style>{`
      @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
      @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </footer>
);

window.FAQ = FAQ;
window.Footer = Footer;
