/* eslint-disable */

function WhySection({ onCta }) {
  const cards = [
    { icon: 'factory', title: 'Fábrica propia en Taizhou',
      body: 'Producción directa sin intermediarios para mantener control, trazabilidad y competitividad.' },
    { icon: 'anchor', title: 'Puerto de Ningbo',
      body: 'Condiciones FOB Ningbo preparadas para operaciones recurrentes con América Latina.' },
    { icon: 'layers', title: 'Línea completa',
      body: 'PE, PVDF, Mirror, Brushed, Wooden, Marble y Aluminum Coils desde una sola fuente.' },
    { icon: 'badge-check', title: 'ISO 9001 certificado',
      body: 'Sistema de gestión de calidad para compras B2B con documentación formal.' },
    { icon: 'gauge', title: 'Alta resistencia al peeling',
      body: 'Paneles diseñados para desempeño estable en distribución, transformación e instalación.' },
    { icon: 'headset', title: 'Soporte comercial dedicado',
      body: 'Atención para importadores con cotización, muestras, producción y despacho.' },
  ];

  return (
    <section className="section section--green" id="ventajas" data-screen-label="Por qué JIEYAO">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow eyebrow--on-color">Por qué JIEYAO</span>
          <h2 className="h-section h-section--white">
            Una fábrica preparada para relaciones B2B de largo plazo.
          </h2>
        </Reveal>

        <Reveal className="why-grid" delay={80}>
          {cards.map((c, i) => (
            <article key={c.title} className="why-cell">
              <span className="why-cell__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="why-cell__icon">
                <Icon name={c.icon} size={22} strokeWidth={1.6}/>
              </span>
              <h3 className="why-cell__title">{c.title}</h3>
              <p className="why-cell__body">{c.body}</p>
            </article>
          ))}
        </Reveal>

        <Reveal delay={180} style={{ marginTop: 48, display: 'flex', justifyContent: 'flex-start' }}>
          <button className="btn btn--lg btn--white" onClick={onCta}>
            Solicitar cotización B2B
            <span className="arrow-circ"><Icon name="arrow-right" size={14}/></span>
          </button>
        </Reveal>
      </div>
    </section>
  );
}

const PRODUCTS = [
  {
    code: 'JY-PE',
    visualClass: 'pv-pe',
    title: 'PE Coated',
    sub: 'Uso comercial',
    desc: 'Panel ACM versátil para señalización, fachadas interiores y aplicaciones comerciales de alto volumen.',
    specs: ['Espesor 3–6 mm', 'Ancho 1220 / 1250 / 1500 mm', 'Acabado PE coating'],
    cta: 'Cotizar PE Coated',
  },
  {
    code: 'JY-PVDF',
    visualClass: 'pv-pvdf',
    title: 'PVDF Coated',
    sub: 'Exterior premium',
    desc: 'Recubrimiento PVDF de alta durabilidad para fachadas exteriores y proyectos con mayor exposición climática.',
    specs: ['Alta resistencia UV', 'Uso exterior', 'Color estable'],
    cta: 'Cotizar PVDF',
  },
  {
    code: 'JY-MIRROR',
    visualClass: 'pv-mirror',
    title: 'Mirror Finish',
    sub: 'Decorativo',
    desc: 'Superficie reflectiva para proyectos decorativos, retail, interiores comerciales y acabados de alto impacto.',
    specs: ['Mirror aluminum', 'Superficie brillante', 'Aplicación interior'],
    cta: 'Cotizar Mirror',
  },
  {
    code: 'JY-BRUSH',
    visualClass: 'pv-brushed',
    title: 'Brushed',
    sub: 'Metálico',
    desc: 'Acabado cepillado para diseños modernos con apariencia metálica, sobria y resistente.',
    specs: ['Brushed aluminum', 'Textura lineal', 'Diseño arquitectónico'],
    cta: 'Cotizar Brushed',
  },
  {
    code: 'JY-WM',
    visualClass: 'pv-wood',
    title: 'Wooden & Marble',
    sub: 'Diseño especial',
    desc: 'Acabados tipo madera y mármol para distribuidores que atienden proyectos decorativos y arquitectónicos.',
    specs: ['Patrones madera', 'Patrones mármol', 'Series decorativas'],
    cta: 'Cotizar Wooden & Marble',
  },
  {
    code: 'JY-COIL',
    visualClass: 'pv-coil',
    title: 'Aluminum Coils',
    sub: 'Materia prima',
    desc: 'Bobinas de aluminio para clientes industriales que requieren suministro estable y especificaciones consistentes.',
    specs: ['Coils recubiertas', 'Producción continua', 'Suministro B2B'],
    cta: 'Cotizar Aluminum Coils',
  },
];

function ProductsSection({ onCta }) {
  return (
    <section className="section" id="productos" data-screen-label="Productos">
      <div className="container">
        <Reveal className="section-head" style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          alignItems: 'flex-end',
          justifyContent: 'space-between',
          maxWidth: 'none',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 720 }}>
            <span className="eyebrow">Productos</span>
            <h2 className="h-section">Línea completa de paneles ACM y bobinas de aluminio.</h2>
          </div>
          <button className="btn btn--ghost" onClick={onCta} style={{ marginTop: 8 }}>
            Pedir specs y precios
            <span className="arrow-circ"><Icon name="arrow-right" size={14}/></span>
          </button>
        </Reveal>

        <div className="grid grid--3">
          {PRODUCTS.map((p, i) => (
            <Reveal key={p.code} delay={i * 60}>
              <article className="product-card">
                <div className={`product-card__visual ${p.visualClass}`} aria-hidden="true">
                  <span className="product-card__badge">
                    <span className={`pill ${i % 2 === 0 ? 'pill--green' : ''}`}>
                      <span className="pill__check"><Icon name="check" size={12} strokeWidth={2.4}/></span>
                      {p.sub}
                    </span>
                  </span>
                  <span className="product-card__num">/ {String(i + 1).padStart(2, '0')}</span>
                </div>
                <div className="product-card__body">
                  <h3 className="product-card__title">{p.title}</h3>
                  <p className="product-card__desc">{p.desc}</p>
                  <div className="product-card__specs">
                    {p.specs.map((s, j) => (
                      <div key={j} className="product-card__spec">
                        <span className="product-card__spec-check">
                          <Icon name="check" size={12} strokeWidth={2.4}/>
                        </span>
                        {s}
                      </div>
                    ))}
                  </div>
                  <button className="product-card__cta" onClick={onCta}>
                    {p.cta}
                    <span className="product-card__cta-circle">
                      <Icon name="arrow-right" size={14}/>
                    </span>
                  </button>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ExportSection() {
  const steps = [
    { n: '01', title: 'Solicitud de cotización' },
    { n: '02', title: 'Muestra y negociación' },
    { n: '03', title: 'Producción y despacho' },
    { n: '04', title: 'Entrega en destino' },
  ];
  return (
    <section className="section section--blue" id="exportacion" data-screen-label="Exportación y logística">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow eyebrow--on-color">Exportación y logística</span>
          <h2 className="h-section h-section--white">Operación FOB Ningbo para importadores de América Latina.</h2>
          <p className="lead lead--on-color">
            JIEYAO prepara cotizaciones, documentación y despacho desde China para compradores
            B2B que importan paneles ACM/ACP de forma recurrente.
          </p>
        </Reveal>

        <div className="export-wrap">
          <Reveal>
            <div className="process-list">
              {steps.map((s) => (
                <div key={s.n} className="process-step">
                  <span className="process-step__num">{s.n}</span>
                  <h3 className="process-step__title">{s.title}</h3>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={120}>
            <aside className="export-box">
              <span className="export-box__eyebrow">
                <Icon name="ship" size={16}/> Exportación FOB Ningbo
              </span>
              <h3 className="export-box__title">Cobertura comercial para distribuidores e importadores en toda América Latina.</h3>
              <div className="export-box__rule">
                <span className="export-box__rule-icon"><Icon name="pin" size={14}/></span>
                Origen — Ningbo, China
              </div>
              <div className="export-box__rule">
                <span className="export-box__rule-icon"><Icon name="globe" size={14}/></span>
                Destino — América Latina
              </div>
            </aside>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.WhySection = WhySection;
window.ProductsSection = ProductsSection;
window.ExportSection = ExportSection;