// ============================================================
// TSP Website — Sections part 2: Method, Value, Sectors
// ============================================================
const STEPS = [
  { n: 1, t: 'Leer', d: 'Analizar el contexto político, regulatorio, social y reputacional.' },
  { n: 2, t: 'Anticipar', d: 'Identificar riesgos, alertas tempranas y ventanas de oportunidad.' },
  { n: 3, t: 'Vincular', d: 'Diseñar rutas de acercamiento con autoridades, comunidades y aliados.' },
  { n: 4, t: 'Incidir', d: 'Construir argumentos y estrategias basadas en evidencia técnica.' },
  { n: 5, t: 'Transformar', d: 'Ejecutar la estrategia para generar condiciones favorables.' },
];

function Method() {
  return (
    <section className="section method" id="modelo">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Metodología de intervención</span>
          <h2>El Modelo TSP.</h2>
          <p className="lead">Diseñado para transformar información dispersa en decisiones estratégicas.</p>
        </div>
        <div className="flow">
          {STEPS.map(s => (
            <div key={s.n} className="flow-step reveal">
              <div className="n">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <p className="method-note reveal">"Lo interpretamos, lo ordenamos y lo convertimos en rutas concretas de acción."</p>
      </div>
    </section>
  );
}

const VALUES = [
  { icon: 'alert', strong: 'Anticipar riesgos', rest: ' legislativos, regulatorios y sociales.' },
  { icon: 'users', strong: 'Entender a los actores', rest: ' relevantes y sus incentivos.' },
  { icon: 'message', strong: 'Construir narrativas', rest: ' y posicionamientos sólidos.' },
  { icon: 'route', strong: 'Diseñar estrategias', rest: ' de incidencia legítimas.' },
  { icon: 'handshake', strong: 'Abrir espacios de diálogo', rest: ' institucional y comunitario.' },
  { icon: 'shield', strong: 'Gestionar coyunturas', rest: ' de crisis o alta sensibilidad.' },
];

function Value() {
  return (
    <section className="section value">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Nuestra propuesta de valor</span>
          <h2>Decisiones estratégicas, no reacciones.</h2>
        </div>
        <div className="value-grid">
          {VALUES.map((v, i) => (
            <div key={i} className="value-item reveal">
              <div className="vk"><Icon name={v.icon} size={21} /></div>
              <p><strong>{v.strong}</strong>{v.rest}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const SECTORS = [
  { icon: 'health', t: 'Salud', d: 'Regulación sanitaria, acceso y política pública.' },
  { icon: 'wheat', t: 'Agroalimentario', d: 'Cadenas productivas, inocuidad y comercio.' },
  { icon: 'truck', t: 'Transporte', d: 'Infraestructura, permisos y gestión territorial.' },
  { icon: 'energy', t: 'Energía', d: 'Transición energética, regulación y entorno comunitario.' },
  { icon: 'handshake', t: 'Laboral y Sindical', d: 'Riesgos laborales y negociaciones colectivas.' },
  { icon: 'scale', t: 'Sectores Regulados', d: 'Acompañamiento a industrias de alta complejidad.' },
];

function Sectors() {
  return (
    <section className="section" id="sectores" style={{ background: 'var(--tsp-white)' }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Sectores de experiencia</span>
          <h2>Donde leer el entorno público es crítico para operar.</h2>
        </div>
        <div className="sectors-grid">
          {SECTORS.map((s, i) => (
            <div key={i} className="sector reveal">
              <Icon name={s.icon} size={40} />
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <p className="sectors-foot reveal">Experiencia probada en sectores donde la lectura del entorno público es fundamental para la operación.</p>
      </div>
    </section>
  );
}

Object.assign(window, { Method, Value, Sectors });