// ============================================================
// TSP Website — Sections part 3: Ethics, Team, Contact, Footer
// ============================================================
const PILLARS = [
  { t: 'Legalidad y Transparencia', d: 'Actuación dentro del marco legal, con relaciones claras y verificables sin opacidad.' },
  { t: 'Rigor Técnico', d: 'Recomendaciones basadas en información verificable y viabilidad técnica, no en diagnósticos alarmistas.' },
  { t: 'Respeto Comunitario', d: 'Escucha activa para prevenir conflictos y generar beneficios compartidos en los territorios.' },
  { t: 'Confidencialidad e Integridad', d: 'Protección absoluta de la información estratégica y estricta prevención de conflictos de interés.' },
];

function Ethics() {
  return (
    <section className="section" id="principios" style={{ background: 'var(--tsp-50)' }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Marco ético y principios de actuación</span>
          <h2>La incidencia es aportar mejor información, no presión.</h2>
        </div>
        <div className="ethics-banner reveal">Construcción de Valor Público y Legitimidad</div>
        <div className="ethics-grid">
          {PILLARS.map((p, i) => (
            <div key={i} className="pillar reveal">
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
        <p className="ethics-foot reveal">"La incidencia pública no es presión indebida; es aportar mejor información para mejores decisiones."</p>
      </div>
    </section>
  );
}

const TEAM = [
  { n: 'Gonzalo Olivares', role: 'Consultor Senior', d: 'Vinculación institucional, análisis político y gestión de actores clave.', lead: true },
  { n: 'Abraham Zamora', role: 'Especialista', d: 'Inteligencia legislativa, estrategia pública e incidencia institucional.', lead: true },
  { n: 'Marisol Romero', role: 'Análisis', d: 'Seguimiento de procesos y análisis de contexto.' },
  { n: 'Luis González', role: 'Investigación', d: 'Investigación estratégica y regulación.' },
  { n: 'Pamela García', role: 'Coordinación', d: 'Monitoreo ágil y coordinación operativa.' },
];

function initials(name) { return name.split(' ').map(w => w[0]).slice(0, 2).join(''); }

function Team() {
  return (
    <section className="section team" id="equipo">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Capital humano</span>
          <h2>Atención directa de consultores senior.</h2>
          <p className="lead">Enfoque boutique real: trato directo y constante, sin intermediarios. Parte de Grupo Psiquepol.</p>
        </div>
        <div className="team-grid">
          {TEAM.map((m, i) => (
            <div key={i} className={'member reveal' + (m.lead ? ' lead-m' : '')}>
              <div className="avatar">{initials(m.n)}</div>
              <h4>{m.n}</h4>
              <div className="role">{m.role}</div>
              <p>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ nombre: '', org: '', sector: 'Salud', mensaje: '' });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section cta" id="contacto">
      <div className="wrap cta-grid">
        <div className="reveal in">
          <span className="eyebrow" style={{ color: 'var(--tsp-amber-bright)' }}>Hablemos</span>
          <h2>Convirtamos su entorno en una ventaja estratégica.</h2>
          <p className="lead">Agende un diagnóstico inicial. Identificamos riesgos, actores y ventanas de oportunidad antes de definir cualquier ruta de acción.</p>
          <ul className="cta-points">
            <li><Icon name="check" size={20} /> Diagnóstico inicial sin compromiso</li>
            <li><Icon name="check" size={20} /> Atención senior, directa y confidencial</li>
            <li><Icon name="check" size={20} /> Respuesta en menos de 48 horas</li>
          </ul>
        </div>
        <div className="form reveal in">
          {!sent ? (
            <form onSubmit={submit}>
              <h3>Agendar diagnóstico</h3>
              <p className="sub">Cuéntenos brevemente el entorno que necesita leer.</p>
              <div className="field"><label>Nombre</label><input required value={form.nombre} onChange={set('nombre')} placeholder="Su nombre" /></div>
              <div className="field"><label>Organización</label><input required value={form.org} onChange={set('org')} placeholder="Empresa o institución" /></div>
              <div className="field"><label>Sector</label>
                <select value={form.sector} onChange={set('sector')}>
                  {['Salud', 'Agroalimentario', 'Transporte', 'Energía', 'Laboral y Sindical', 'Otro sector regulado'].map(s => <option key={s}>{s}</option>)}
                </select>
              </div>
              <div className="field"><label>Mensaje</label><textarea value={form.mensaje} onChange={set('mensaje')} placeholder="¿Qué reto regulatorio, político o territorial enfrenta?"></textarea></div>
              <Button variant="accent" icon="arrowRight">Enviar solicitud</Button>
            </form>
          ) : (
            <div className="form-success">
              <div className="check"><Icon name="check" size={30} /></div>
              <h3>Solicitud recibida</h3>
              <p>Gracias, {form.nombre || 'le'} contactaremos en menos de 48 horas para coordinar el diagnóstico inicial.</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ethics, Team, Contact });