// Página de Servicios — panel dinámico

const ServiciosPage = () => {
  const [activeId, setActiveId] = React.useState(() => {
    const hash = window.location.hash.replace('#', '');
    return hash && SERVICES.find(s => s.id === hash) ? hash : SERVICES[0].id;
  });

  const active = SERVICES.find(s => s.id === activeId) || SERVICES[0];

  const select = (id) => {
    setActiveId(id);
    window.history.replaceState(null, '', `#${id}`);

    // Centrar el tab activo dentro del slider
    const tabs = document.querySelector('.svc-mobile-tabs');
    if (tabs) {
      const activeTab = tabs.querySelector(`[data-id="${id}"]`);
      if (activeTab) {
        const tabLeft = activeTab.offsetLeft;
        const tabWidth = activeTab.offsetWidth;
        const containerWidth = tabs.offsetWidth;
        tabs.scrollTo({ left: tabLeft - (containerWidth - tabWidth) / 2, behavior: 'smooth' });
      }
    }

    // Scroll de página hasta el selector
    const tabsVisible = tabs && getComputedStyle(tabs).display !== 'none';
    const target = tabsVisible ? tabs : document.getElementById('svc-panel');
    if (target) {
      const nav = document.querySelector('nav.top');
      const navBottom = nav ? nav.getBoundingClientRect().bottom : 100;
      const top = target.getBoundingClientRect().top + window.scrollY - navBottom - 16;
      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
    }
  };

  return (
    <div className="wrap">
      <Navbar activePage="servicios" />

      <div className="svc-page-hero container">
        <span className="eyebrow reveal" data-delay="0">Agencia El Bocha — Catálogo completo</span>
        <h1 className="reveal" data-delay="0.1">Nuestros <span className="serif">Servicios</span></h1>
        <p className="reveal" data-delay="0.2">
          Cinco pilares estratégicos para posicionar tu marca, ampliar tu alcance y convertir tu inversión en resultados.
        </p>
      </div>

      {/* Selector responsive — visible en ≤1024px */}
      <div className="svc-mobile-tabs container">
        {SERVICES.map(s => (
          <button
            key={s.id}
            data-id={s.id}
            className={`svc-mobile-tab ${activeId === s.id ? 'active' : ''}`}
            onClick={() => select(s.id)}
          >
            <span className="svc-sidebar-num">{s.num}</span>
            {s.title} {s.titleItalic}
          </button>
        ))}
      </div>

      <div className="svc-page-layout container">

        {/* ── SIDEBAR ── */}
        <aside className="svc-sidebar">
          <span className="svc-sidebar-label">Selecciona un servicio</span>
          {SERVICES.map(s => (
            <button
              key={s.id}
              className={`svc-sidebar-link ${activeId === s.id ? 'active' : ''}`}
              onClick={() => select(s.id)}
            >
              <span className="svc-sidebar-num">{s.num}</span>
              <span className="svc-sidebar-name">{s.title} {s.titleItalic}</span>
              {activeId === s.id && <span className="svc-sidebar-arrow"><Icon name="arrow-right" size={13}/></span>}
            </button>
          ))}
        </aside>

        {/* ── PANEL DINÁMICO ── */}
        <main className="svc-panel" id="svc-panel" key={activeId}>

          {/* Cabecera */}
          <div className="svc-panel-header">
            <span className="svc-detail-tag">{active.num} — {active.tag}</span>
            <div className="svc-panel-title-row">
              <h2 className="svc-panel-title">{active.title} {active.titleItalic}</h2>
              <div className="svc-detail-icon"><Icon name={active.icon} size={22}/></div>
            </div>
            <p className="svc-detail-lead">{active.description}</p>
          </div>

          {/* Imagen con tarjetas encima */}
          <div className="svc-img-cards-wrap">
            <div className="svc-detail-img-wrap">
              <img src={active.image} alt={active.title} className="svc-detail-img"/>
              <div className="svc-detail-img-overlay"/>
            </div>
            <div className="svc-cards-over-img">
              <div className="svc-detail-cards-label">Qué incluye</div>
              <div className="svc-detail-cards">
                {active.services.map((srv, j) => (
                  <div key={j} className="svc-detail-card">
                    <div className="svc-detail-card-top">
                      <Icon name={srv.icon} size={17} stroke={1.4}/>
                      <span className="svc-detail-card-num">0{j + 1}</span>
                    </div>
                    <div className="svc-detail-card-name">{srv.name}</div>
                    <div className="svc-detail-card-desc">{srv.desc}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Tabla de planes Liga */}
          {activeId === 'va-por-ti-liga' && (
            <div className="liga-pricing">
              <div className="svc-detail-cards-label" style={{marginTop:48, marginBottom:8}}>Paquetes de Publicidad</div>
              <p className="liga-pricing-desc">2 publicaciones mensuales · Tres formatos de presencia adaptados a tu empresa</p>
              <div className="liga-plans">
                {[
                  { name:'Paquete Inicial',   tag:'1/4 de Página',    size:'10.5 × 10.5 cm', price:'$450', highlight:false },
                  { name:'Paquete Destacado', tag:'1/2 Página',       size:'10.5 × 21 cm',   price:'$550', highlight:true  },
                  { name:'Paquete Premium',   tag:'1 Página Completa',size:'21 × 21 cm',      price:'$750', highlight:false },
                ].map((plan, i) => (
                  <div key={i} className={`liga-plan ${plan.highlight ? 'liga-plan--highlight' : ''}`}>
                    {plan.highlight && <div className="liga-plan-badge">Más popular</div>}
                    <div className="liga-plan-name">{plan.name}</div>
                    <div className="liga-plan-tag">{plan.tag}</div>
                    <div className="liga-plan-size">{plan.size}</div>
                    <div className="liga-plan-price">{plan.price} <span>+ IVA / mes</span></div>
                    <a href={`https://wa.me/593991810190?text=${encodeURIComponent('Hola, me interesa contratar el ' + plan.name + ' (' + plan.tag + ') de la revista Va por ti, Liga con Agencia El Bocha.')}`} target="_blank" rel="noopener" className={`btn ${plan.highlight ? 'btn-red' : ''}`}>
                      Comprar ahora <Icon name="arrow-right" size={14}/>
                    </a>
                  </div>
                ))}
              </div>

              <div className="liga-activation">
                <div className="liga-activation-header">
                  <div>
                    <div className="liga-activation-title">Activaciones de Marca</div>
                    <div className="liga-activation-sub">Estadio Rodrigo Paz Delgado</div>
                  </div>
                  <div className="liga-activation-price">$600 <span>+ IVA</span></div>
                </div>
                <div className="liga-activation-body">
                  <div className="liga-activation-col">
                    <div className="liga-activation-item"><Icon name="pin" size={14}/> Accesos a localidades Tribuna Oriental y Occidental (Norte y Sur)</div>
                    <div className="liga-activation-item"><Icon name="clock" size={14}/> 3 horas de exposición — desde 2h antes del partido hasta el medio tiempo</div>
                    <div className="liga-activation-item"><Icon name="star" size={14}/> Espacio para stand pequeño de exhibición</div>
                    <div className="liga-activation-item"><Icon name="user" size={14}/> Presencia de 1 o 2 impulsadoras identificadas con tu marca</div>
                  </div>
                </div>
                <div className="liga-activation-req">
                  <Icon name="zap" size={13}/>
                  Requiere tener activo uno de los paquetes de publicidad anteriores
                </div>
              </div>
            </div>
          )}

          {/* Desglose detallado */}
          {active.details && Object.keys(active.details).length > 0 && (
            <>
              <div className="svc-detail-cards-label" style={{marginTop:48}}>Desglose detallado</div>
              <div className="svc-breakdown">
                {Object.entries(active.details).map(([key, val], k) => (
                  <div key={k} className="svc-breakdown-item">
                    <div className="svc-breakdown-num">{String(k + 1).padStart(2, '0')}</div>
                    <div className="svc-breakdown-body">
                      <h4>{key}</h4>
                      <p>{val}</p>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}

          {/* CTA */}
          <div className="svc-detail-cta">
            <a
              href={`https://wa.me/593991810190?text=${encodeURIComponent('Hola, quiero cotizar el servicio de ' + active.title + ' ' + active.titleItalic + ' con Agencia El Bocha.')}`}
              target="_blank" rel="noopener"
              className="btn btn-red"
            >
              <span className="dot"></span>
              Cotizar por WhatsApp
              <img src={THEME_URI + '/src/images/Logo_Whatsapp_CTA.png'} alt="WhatsApp" style={{height: '15px', width: 'auto'}}/>
            </a>
            <a href="/" className="btn">Volver al inicio</a>
          </div>

          {/* Navegación entre servicios */}
          <div className="svc-panel-nav">
            {SERVICES.findIndex(s => s.id === activeId) > 0 && (
              <button
                className="btn svc-panel-prev"
                onClick={() => select(SERVICES[SERVICES.findIndex(s => s.id === activeId) - 1].id)}
              >
                <Icon name="arrow-left" size={14}/> Anterior
              </button>
            )}
            {SERVICES.findIndex(s => s.id === activeId) < SERVICES.length - 1 && (
              <button
                className="btn svc-panel-next"
                onClick={() => select(SERVICES[SERVICES.findIndex(s => s.id === activeId) + 1].id)}
              >
                Siguiente <Icon name="arrow-right" size={14}/>
              </button>
            )}
          </div>

        </main>
      </div>

      <Footer />
      <WaFloat/>
    </div>
  );
};

const AppServicios = () => {
  useReveal();
  return <ServiciosPage />;
};

ReactDOM.createRoot(document.getElementById('root')).render(<AppServicios/>);