// ============================================================
// TSP Website — Sections part 1: Hero, QuoteBand, Services
// (Header lives in Chrome.jsx for the multipage build)
// ============================================================

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="reveal in">
          <span className="eyebrow">Consultoría en asuntos públicos</span>
          <h1>Leemos el entorno y lo encauzamos hacia <span className="amber">resultados positivos</span>.</h1>
          <p className="lead">No como una reacción frente al riesgo, sino como una capacidad estratégica para construir viabilidad, confianza y valor público.</p>
          <div className="hero-actions">
            <Button variant="primary" icon="arrowRight" href="contacto.html">Agendar diagnóstico</Button>
            <Button variant="secondary" href="servicios.html">Ver servicios</Button>
          </div>
          <div className="hero-stats">
            <div className="stat"><div className="num">10<span>+</span></div><div className="lbl">años como firma consolidada</div></div>
            <div className="stat"><div className="num">20<span>+</span></div><div className="lbl">años de experiencia del equipo</div></div>
            <div className="stat"><div className="num">6</div><div className="lbl">sectores regulados atendidos</div></div>
          </div>
        </div>
        <div className="hero-aside reveal in">
          <div className="hero-card">
            <span className="eyebrow" style={{ color: 'var(--tsp-amber-bright)' }}>El Modelo TSP</span>
            <p className="serif" style={{ marginTop: '14px' }}>"El entorno siempre cambia. Pero es posible leerlo, anticiparlo, gestionarlo y encauzarlo."</p>
            <Soundwave amber />
            <div className="src">Leer · Anticipar · Vincular · Incidir · Transformar</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function QuoteBand() {
  return (
    <section className="section quoteband">
      <div className="wrap">
        <p className="q">"No solo damos seguimiento al entorno: lo interpretamos, lo ordenamos y lo convertimos en <span className="amber">rutas concretas de acción</span>."</p>
        <p className="attrib">Esa es nuestra forma de entender los asuntos públicos: una capacidad estratégica para construir viabilidad, confianza y valor público.</p>
      </div>
    </section>
  );
}

const SERVICES = [
  { cls: '', icon: 'intel', title: 'Inteligencia y Análisis', items: ['Inteligencia legislativa y regulatoria.', 'Análisis de política pública.', 'Mapeo estratégico de actores.'] },
  { cls: 's2', icon: 'strategy', title: 'Estrategia e Incidencia', items: ['Elaboración de iniciativas y propuestas normativas.', 'Soporte en negociaciones complejas.', 'Comunicación estratégica (vía alianzas).'] },
  { cls: 's3', icon: 'environs', title: 'Gestión de Entornos', items: ['Vinculación institucional.', 'Atención a entornos comunitarios.', 'Gestión de crisis y contención de daños.'] },
];

function Services() {
  return (
    <section className="section" id="servicios" style={{ background: 'var(--tsp-white)' }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Ecosistema de servicios</span>
          <h2>Tres frentes para ordenar la complejidad.</h2>
          <p className="lead">Acompañamiento directo, senior y estratégico, con rutas de acción adaptadas a cada sector, coyuntura y objetivo.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <div key={i} className={'svc-card reveal ' + s.cls}>
              <div className="svc-icon"><Icon name={s.icon} size={26} /></div>
              <h3>{s.title}</h3>
              <ul className="svc-list">{s.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, QuoteBand, Services });