/* global React, Glyphs, Social, useReveal */
// vertical.jsx — Renderer reutilizable de página vertical FersaMedia.
// Lee la config en window.__vertical y monta la página completa.
const { useState, useEffect } = React;

const HOME = 'index.html';
const CONTACT = 'contacto.html';

function VWordmark() {
  return <span className="wordmark"><span className="b">FERSA</span><span className="t">MEDIA</span></span>;
}

/* ---------- NAV ---------- */
function VNav({ links }) {
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const navLinks = links || [[HOME, 'Inicio'], ['#pilares', 'Enfoque'], ['#servicios', 'Servicios'], ['#planes', 'Planes']];
  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
        <div className="nav-inner">
          <a href={HOME} aria-label="FersaMedia inicio"><VWordmark /></a>
          <div className="nav-links">
            {navLinks.map(([h, l]) => <a key={l} href={h}>{l}</a>)}
          </div>
          <div className="nav-actions">
            <div className="nav-divider" />
            <a className="btn btn-primary" href={CONTACT}>Contactar</a>
            <button className="nav-toggle" aria-label="Abrir menú" onClick={() => setMenu(true)}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
            </button>
          </div>
        </div>
      </nav>
      <div className={'mobile-menu' + (menu ? ' open' : '')}>
        <button className="menu-close" aria-label="Cerrar menú" onClick={() => setMenu(false)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6 6 18" /></svg>
        </button>
        {navLinks.map(([h, l]) => <a key={l} href={h} onClick={() => setMenu(false)}>{l}</a>)}
      </div>
    </React.Fragment>);
}

/* wrap an emphasis phrase inside a headline string */
function emphasize(text, em) {
  if (!em || !text.includes(em)) return <span className="dim">{text}</span>;
  const [before, after] = text.split(em);
  return <React.Fragment><span className="dim">{before}</span><span className="em">{em}</span><span className="dim">{after}</span></React.Fragment>;
}

/* ---------- HERO ---------- */
function VHero({ c }) {
  return (
    <header className="vhero shell" id="top">
      <div className="vhero-glow" />
      <p className="vhero-eyebrow reveal" style={{ display: 'none' }}>{c.eyebrow}</p>
      <h1 className="reveal" data-delay="1">{emphasize(c.headline, c.headlineEm)}</h1>
      <p className="vhero-sub reveal" data-delay="2">{c.subheadline}</p>
      <div className="vhero-cta reveal" data-delay="3">
        <a className="btn btn-primary btn-lg" href={CONTACT}>{c.ctaButton} <span className="arrow">→</span></a>
        {c.heroTiny ? <span className="tiny" style={{ fontWeight: 400, color: 'var(--color-ash)', fontSize: '15px' }}>{c.heroTiny}</span> : null}
      </div>
    </header>);
}

/* ---------- VALUE PROP ---------- */
function VProp({ c }) {
  if (!c.valueProp) return null;
  return (
    <section className="vprop shell">
      <div className="vprop-inner reveal">
        <p><span className="lead">{c.valuePropLead || 'Nuestra propuesta.'}</span> {c.valueProp}</p>
      </div>
    </section>);
}

/* ---------- PILARES ---------- */
function VPilares({ c }) {
  return (
    <section className="pilares shell" id="pilares">
      <div className="sec-head reveal">
        <p className="sec-kicker">Nuestro enfoque</p>
        <h2 className="sec-title">{c.pilaresTitle || 'Tres pilares, un objetivo'}</h2>
      </div>
      <div className="pilares-grid">
        {c.pilares.map((p, i) =>
        <div className="pilar-card reveal" data-delay={i + 1} key={p.name}>
            <h3 className="pilar-name">{p.name}</h3>
            <p className="pilar-desc">{p.desc}</p>
          </div>
        )}
      </div>
    </section>);
}

/* ---------- SERVICIOS ---------- */
function VServicios({ c }) {
  return (
    <section className="servicios shell" id="servicios">
      <div className="sec-head reveal">
        <p className="sec-kicker">Servicios</p>
        <h2 className="sec-title">{c.serviciosTitle || 'Todo lo que necesitas'}</h2>
        {c.serviciosSub ? <p className="sec-sub">{c.serviciosSub}</p> : null}
      </div>
      <div className="serv-grid">
        {c.servicios.map((s, i) =>
        <div className="serv-card reveal" data-delay={i % 3 + 1} key={s.name}>
            <div className="serv-top">
              <h3 className="serv-name">{s.name}</h3>
              {Glyphs[s.g] || Glyphs.social}
            </div>
            {s.desc ? <p className="serv-desc">{s.desc}</p> : null}
          </div>
        )}
      </div>
    </section>);
}

/* ---------- PLANES ---------- */
function VPlanes({ c }) {
  if (!c.planes) return null;
  const p = c.planes;
  const two = p.cards.length === 2;
  return (
    <section className="planes shell" id="planes">
      <div className="sec-head reveal">
        <p className="sec-kicker">Planes</p>
        <h2 className="sec-title">{p.title}</h2>
        {p.subtitle ? <p className="sec-sub">{p.subtitle}</p> : null}
      </div>
      <div className={'planes-grid' + (two ? ' two' : '')}>
        {p.cards.map((card, i) =>
        <div className={'plan-card reveal' + (card.featured ? ' featured' : '')} data-delay={i + 1} key={card.name}>
            {card.label ? <span className="plan-label">{card.label}</span> : null}
            <div className="plan-head">
              <span className="plan-name">{card.name}</span>
              <div className="plan-price"><span className="amount">{card.price}</span>{card.period ? <span className="period">{card.period}</span> : null}</div>
              <p className="plan-tagline">{card.tagline}</p>
            </div>
            <ul className="plan-features">
              {card.features.map((f, j) =>
            <li key={j}>
                  <svg className="tick" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4 10-10" /></svg>
                  <span>{f}</span>
                </li>
            )}
            </ul>
            <a className={'btn plan-cta ' + (card.featured ? 'btn-primary' : 'btn-ghost')} href={CONTACT}>{card.cta} <span className="arrow">→</span></a>
          </div>
        )}
      </div>
      {p.note ? <p className="planes-note reveal">{p.note}</p> : null}
    </section>);
}

/* ---------- FAQ ---------- */
function VFaq({ c }) {
  const [open, setOpen] = useState(0);
  if (!c.faq) return null;
  return (
    <section className="faq shell" id="faq">
      <div className="sec-head reveal">
        <p className="sec-kicker">Preguntas frecuentes</p>
        <h2 className="sec-title">{c.faqTitle || 'Lo que sueles preguntarte'}</h2>
      </div>
      <div className="faq-list reveal">
        {c.faq.map((f, i) =>
        <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              {f.q}
              <svg className="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 5v14M5 12h14" /></svg>
            </button>
            <div className="faq-a"><p>{f.a}</p></div>
          </div>
        )}
      </div>
    </section>);
}

/* ---------- OBJECIONES ---------- */
function VObjeciones({ c }) {
  if (!c.objeciones) return null;
  return (
    <section className="objeciones shell" id="objeciones">
      <div className="sec-head reveal">
        <p className="sec-kicker">Sin rodeos</p>
        <h2 className="sec-title">{c.objecionesTitle || 'Lo que nos dicen, y lo que hacemos'}</h2>
      </div>
      <div className="reveal">
        <div className="obj-head"><span>El problema</span><span>Nuestra solución</span></div>
        <div className="obj-list">
          {c.objeciones.map((o, i) =>
          <div className="obj-row" key={i}>
              <div className="obj-cell problem">{o.problem}</div>
              <div className="obj-cell solution">
                <svg className="tick" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4 10-10" /></svg>
                <span>{o.solution}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- TESTIMONIO ---------- */
function VTesti({ c }) {
  if (!c.testimonial) return null;
  const t = c.testimonial;
  return (
    <section className="vtesti shell">
      <div className="vtesti-inner reveal">
        <span className="mark">“</span>
        <blockquote>{t.q}</blockquote>
        <p className="who"><strong>{t.name}</strong> — {t.role}</p>
      </div>
    </section>);
}

/* ---------- CTA FINAL ---------- */
function VCta({ c }) {
  return (
    <section className="cta-final shell" id="contacto">
      <div className="cta-glow" />
      <h2 className="reveal">{c.ctaTitle || 'Tu próximo cliente está a un clic.'}</h2>
      <div className="hero-cta reveal" data-delay="2">
        <a className="btn btn-primary btn-lg" href={CONTACT}>{c.ctaButton} <span className="arrow">→</span></a>
      </div>
    </section>);
}

/* ---------- FOOTER ---------- */
const VFOOTER = [
{ h: 'Sobre nosotros', links: [['Nuestra historia', HOME + '#filosofia'], ['Cómo trabajamos', HOME + '#filosofia'], ['Testimonios', HOME + '#testimonios'], ['Contacto', CONTACT]] },
{ h: 'Verticales', links: [['Asesorías y Despachos', 'asesoriasydespachos.html'], ['Salud y Bienestar', 'saludybienestar.html'], ['Fontaneros y Electricistas', 'fontanerosyelectricistas.html']] },
{ h: 'Servicios', links: [['SEO Local', HOME + '#servicios'], ['Publicidad de Pago', HOME + '#servicios'], ['Diseño Web', HOME + '#servicios'], ['Reputación Online', HOME + '#servicios'], ['CRM y Automatización', HOME + '#servicios'], ['Redes Sociales', HOME + '#servicios']] }];

function VFooter() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-top">
          <div className="footer-brand">
            <a href={HOME} aria-label="FersaMedia inicio"><VWordmark /></a>
            <p className="footer-tag">Apasionados por el marketing, responsables de tu crecimiento.</p>
            <div className="footer-social">
              <a href="https://www.instagram.com/fersamedia/" target="_blank" rel="noopener" aria-label="Instagram">{Social.ig}</a>
              <a href="https://www.linkedin.com/company/fersamedia/" target="_blank" rel="noopener" aria-label="LinkedIn">{Social.li}</a>
              <a href="https://x.com/fersamedia" target="_blank" rel="noopener" aria-label="X">{Social.x}</a>
            </div>
          </div>
          <div className="footer-cols">
            {VFOOTER.map((col) =>
            <div className="footer-col" key={col.h}>
                <h4>{col.h}</h4>
                <ul>{col.links.map(([l, h]) => <li key={l}><a href={h}>{l}</a></li>)}</ul>
              </div>
            )}
          </div>
        </div>
        <div className="footer-bottom"><p>© FersaMedia 2026</p></div>
      </div>
    </footer>);
}

/* ---------- PAGE ---------- */
function VerticalPage() {
  useReveal();
  const c = window.__vertical || {};
  return (
    <React.Fragment>
      <VNav />
      <main>
        <VHero c={c} />
        <VProp c={c} />
        <VPilares c={c} />
        <VServicios c={c} />
        <VPlanes c={c} />
        <VObjeciones c={c} />
        <VTesti c={c} />
        <VFaq c={c} />
        <VCta c={c} />
      </main>
      <VFooter />
    </React.Fragment>);
}

Object.assign(window, { VerticalPage, VNav, VFooter });