/* eslint-disable */

function SiteHeader({ onCta }) {
  const [open, setOpen] = React.useState(false);
  const navItems = [
    { id: 'productos', label: 'Productos' },
    { id: 'ventajas', label: 'Ventajas' },
    { id: 'exportacion', label: 'Exportación' },
    { id: 'calidad', label: 'Calidad' },
    { id: 'contacto', label: 'Contacto' },
  ];

  const close = () => setOpen(false);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      <header className="site-header" data-screen-label="Header">
        <div className="container site-header__inner">
          <a className="site-header__logo" href="#top" onClick={close}>
            <img src="assets/logo-jieyao-mark.png" alt="Jieyao"/>
            <div className="site-header__brand">
              <span className="site-header__brand-name">Jieyao</span>
              <span className="site-header__brand-sub">Technology</span>
            </div>
          </a>
          <nav className="site-header__nav" aria-label="primary">
            {navItems.map((it) => (
              <a key={it.id} href={`#${it.id}`}>{it.label}</a>
            ))}
          </nav>
          <button className="btn btn--green site-header__cta" onClick={onCta}>
            <span className="site-header__cta-full-label">Solicitar catálogo</span>
            <span className="site-header__cta-mobile-label">Catálogo</span>
          </button>
          <button
            className="site-header__menu-btn"
            aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={open}
            onClick={() => setOpen(v => !v)}
          >
            <Icon name={open ? 'close' : 'menu'} size={20}/>
          </button>
        </div>
      </header>

      <div className={`mobile-menu ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        {[
          { id: 'productos', label: 'Productos' },
          { id: 'ventajas', label: 'Ventajas' },
          { id: 'exportacion', label: 'Exportación' },
          { id: 'calidad', label: 'Calidad' },
          { id: 'contacto', label: 'Contacto' },
        ].map((it) => (
          <a key={it.id} href={`#${it.id}`} onClick={close}>{it.label}</a>
        ))}
      </div>
    </>
  );
}

function Hero({ onCta }) {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <span className="hero__wedge" aria-hidden="true"/>
      <span className="hero__mark" aria-hidden="true"/>
      <span className="hero__blue-shape" aria-hidden="true"/>

      <div className="container">
        <div className="hero__inner">
          <div>
            <Reveal>
              <span className="hero__tag">Fabricante directo — Taizhou, China</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="hero__h1">
                Paneles de aluminio compuesto <em>directo de fábrica</em> para América Latina
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero__sub">
                JIEYAO fabrica ACM/ACP para importadores, distribuidores y grandes
                revendedores que buscan suministro estable, línea completa y cotización
                FOB Ningbo.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div className="hero__notice">
                Registro orientado exclusivamente a empresas distribuidoras, importadoras o
                compradoras mayoristas. No atendemos usuarios finales.
              </div>
            </Reveal>
            <Reveal delay={280}>
              <div className="hero__ctas">
                <button className="btn btn--lg btn--green" onClick={onCta}>
                  Solicitar catálogo técnico y cotización
                  <span className="arrow-circ"><Icon name="arrow-right" size={14}/></span>
                </button>
              </div>
            </Reveal>
            <Reveal delay={340}>
              <div className="hero__pills">
                <span className="pill">
                  <span className="pill__check"><Icon name="check" size={12} strokeWidth={2.4}/></span>
                  20+ años de fábrica
                </span>
                <span className="pill pill--green">
                  <span className="pill__check"><Icon name="check" size={12} strokeWidth={2.4}/></span>
                  ISO 9001 certificado
                </span>
                <span className="pill">
                  <span className="pill__check"><Icon name="check" size={12} strokeWidth={2.4}/></span>
                  FOB Puerto de Ningbo
                </span>
              </div>
            </Reveal>
          </div>


        </div>

        <Reveal delay={360}>
          <div className="hero__stats">
            <div className="hero__stat">
              <span className="hero__stat__icon"><Icon name="factory" size={18}/></span>
              <span className="hero__stat__num">20+ años</span>
              <span className="hero__stat__lbl">de fábrica</span>
            </div>
            <div className="hero__stat">
              <span className="hero__stat__icon"><Icon name="badge-check" size={18}/></span>
              <span className="hero__stat__num">ISO 9001</span>
              <span className="hero__stat__lbl">certificado</span>
            </div>
            <div className="hero__stat">
              <span className="hero__stat__icon"><Icon name="anchor" size={18}/></span>
              <span className="hero__stat__num">FOB Ningbo</span>
              <span className="hero__stat__lbl">Puerto de Ningbo</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function AudienceSection() {
  const cards = [
    {
      n: '01',
      title: 'Importadores y distribuidores',
      body: 'Empresas que compran contenedores y necesitan proveedor directo en China.',
    },
    {
      n: '02',
      title: 'Distribuidores regionales',
      body: 'Revendedores mayoristas con cartera en materiales de construcción, fachadas o señalización.',
    },
    {
      n: '03',
      title: 'Experiencia en importación',
      body: 'Compradores B2B que conocen Incoterms, documentación y negociación internacional.',
    },
  ];
  return (
    <section className="section section--alt" id="audiencia" data-screen-label="Para quién es esto">
      <div className="container">
        <Reveal className="section-head">
          <span className="eyebrow">Para quién es esto</span>
          <h2 className="h-section">Suministro ACM para empresas que compran en volumen.</h2>
          <p className="lead">
            Esta página está dirigida a importadores, distribuidores y grandes revendedores de
            paneles de aluminio compuesto que buscan una fábrica estable para abastecer mercados
            de América Latina.
          </p>
        </Reveal>

        <div className="grid grid--3">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={i * 80}>
              <article className="audience-card">
                <span className="audience-card__num">{c.n}</span>
                <h3 className="audience-card__title">{c.title}</h3>
                <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--c-ink-2)' }}>
                  {c.body}
                </p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteHeader = SiteHeader;
window.Hero = Hero;
window.AudienceSection = AudienceSection;