/* global React */
const { useState, useEffect } = React;

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [logoBounce, setLogoBounce] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    // initial bounce on mount
    setLogoBounce(true);
    const t = setTimeout(() => setLogoBounce(false), 1100);
    return () => { window.removeEventListener('scroll', onScroll); clearTimeout(t); };
  }, []);
  const navItems = ['Inicio', 'Nosotros', 'Servicios', 'Contacto'];
  return (
    <header className={`alg-header ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="alg-container alg-header-inner">
        <a
          className={`alg-brand ${logoBounce ? 'is-bouncing' : ''}`}
          href="#"
          onMouseEnter={() => { setLogoBounce(false); requestAnimationFrame(() => setLogoBounce(true)); setTimeout(() => setLogoBounce(false), 900); }}
        >
          <img src="../../assets/logo-nuevo.png" alt="Algarrobal Consultores" />
        </a>
        <nav className="alg-nav">
          {navItems.map(item => (
            <a key={item} href={`#${item.toLowerCase()}`}>{item}</a>
          ))}
        </nav>
        <a className="alg-btn alg-btn-primary alg-btn-sm alg-btn-bouncy" href="#contacto">
          Solicitar asesoría
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="alg-hero" id="inicio">
      <img className="alg-hero-bg" src="../../assets/hero-landscape.svg" alt="" />
      <div className="alg-hero-protect" />
      <div className="alg-leaves" aria-hidden="true">
        {Array.from({length:15}).map((_,i) => <i key={i}/>)}
      </div>
      <div className="alg-container alg-hero-inner" style={{display:'flex', flexDirection:'column'}}>
        <p className="alg-eyebrow">Consultoría · Chile</p>
        <h1 className="alg-hero-title">
          Consultoría estratégica<br/>con raíces <em>locales</em>.
        </h1>
        <p className="alg-hero-lede">
          Fortalecemos el capital humano y la eficiencia organizacional en instituciones
          públicas y privadas. Gestión, ciencias sociales, capacitación y desarrollo territorial
          con metodologías probadas y resultados medibles.
        </p>
        <div className="alg-hero-actions">
          <a className="alg-btn alg-btn-primary" href="#contacto">
            Solicitar asesoría
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <a className="alg-btn alg-btn-secondary" href="#servicios">Conocer servicios</a>
        </div>
        <TrustTicker />
      </div>
    </section>
  );
}

const SERVICES = [
  {
    title: 'Gestión de Proyectos',
    desc: 'Formulación, monitoreo y evaluación de proyectos públicos y privados. Planes estratégicos con seguimiento de resultados efectivos y medibles.',
    detail: [
      'Diseño e implementación de planes estratégicos para empresas e instituciones públicas y privadas',
      'Asesoría en formulación y monitoreo de proyectos, incluidos licitaciones en Mercado Público',
      'Estrategias de seguimiento y evaluación para garantizar resultados efectivos',
      'Metodologías participativas y herramientas de formulación y evaluación de proyectos',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h18v12a2 2 0 01-2 2H5a2 2 0 01-2-2V7zM8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M3 12h18"/></svg>
    ),
  },
  {
    title: 'Capacitación',
    desc: 'Programas en liderazgo transformacional, comunicación efectiva, resolución de conflictos y trabajo en equipo para organizaciones y comunidades.',
    detail: [
      'Liderazgo transformacional, negociación y resolución de conflictos',
      'Comunicación efectiva, manejo de emociones y trabajo en equipo',
      'Ejecutado en Municipalidad de Coquimbo, Corp. Municipal de Pudahuel y Subsecretaría SUBDERE',
      '+350 personas capacitadas con 95% de satisfacción en evaluaciones',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
    ),
  },
  {
    title: 'Herramientas Tecnológicas',
    desc: 'Excel avanzado, Power BI, IA aplicada a procesos organizacionales y herramientas digitales para análisis de datos y gestión.',
    detail: [
      'Excel avanzado: análisis de datos, macros y automatización de procesos',
      'Power BI: paneles interactivos y análisis predictivo para la toma de decisiones',
      'IA aplicada a la optimización de procesos organizacionales',
      'PowerPoint y Word orientados a comunicaciones institucionales efectivas',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M7 8l3 3-3 3M13 14h4"/></svg>
    ),
  },
  {
    title: 'Estudios e Investigación',
    desc: 'Diagnósticos institucionales, estudios de mercado sectorial, percepción comunitaria e investigación aplicada con metodologías participativas.',
    detail: [
      'Diagnósticos sociales y análisis participativos para mejorar la cohesión institucional',
      'Estudio de percepción comunitaria ENAMI en Atacama, Antofagasta y Coquimbo',
      'Análisis de mercado sectorial y encuestas de opinión pública',
      'Estudios de impacto social y sostenibilidad para proyectos empresariales y comunitarios',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18M7 14l4-4 4 4 5-7"/></svg>
    ),
  },
  {
    title: 'Salud y Seguridad',
    desc: 'Primeros auxilios, RCP, uso de DEA, prevención de riesgos y programas de salud comunitaria, escolar y laboral.',
    detail: [
      'Formación en primeros auxilios, RCP y uso de desfibriladores automáticos (DEA)',
      'Psicología de emergencia: manejo emocional en situaciones de crisis',
      'Salud comunitaria, escolar y laboral con enfoque en ergonomía y manejo del estrés',
      'Curso de Psicología de Emergencia: 90% de certificación práctica en 40 participantes',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2-6 4 12 2-6h6"/></svg>
    ),
  },
  {
    title: 'Participación Ciudadana',
    desc: 'Vinculación territorial, facilitación de talleres participativos, estrategias de inclusión y acompañamiento a comunidades y organizaciones sociales.',
    detail: [
      'Conversatorios temáticos con +100 participantes por evento (Guanaqueros, oct. 2024)',
      'Talleres en gestión organizacional, manejo de conflictos y planificación estratégica',
      'Estrategias de inclusión y planes de acción comunitaria con enfoque sostenible',
      'Proyectos ejecutados con ENAMI, Fundación Paz Ciudadana y Corp. Municipal de Pudahuel',
    ],
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11 20A7 7 0 014 13V6h7a7 7 0 010 14zM4 6c5 5 9 9 11 14"/></svg>
    ),
  },
];

function ServiceCard({ s, i }) {
  const [flipped, setFlipped] = useState(false);
  const toggle = () => setFlipped(f => !f);
  return (
    <article
      className={`alg-service-card ${flipped ? 'is-flipped' : ''}`}
      tabIndex="0"
      style={{ '--i': i }}
      onClick={toggle}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}
    >
      <div className="alg-svc-inner">
        <div className="alg-svc-front">
          <div className="alg-service-ico">{s.icon}</div>
          <h3 className="alg-service-title">{s.title}</h3>
          <p className="alg-service-desc">{s.desc}</p>
          <span className="alg-service-arrow">
            Ver más
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
        </div>
        <div className="alg-svc-back">
          <h3 className="alg-svc-back-title">{s.title}</h3>
          <ul className="alg-svc-back-list">
            {s.detail.map((item, j) => <li key={j}>{item}</li>)}
          </ul>
          <a className="alg-btn alg-btn-sm alg-svc-back-btn" href="#contacto" onClick={e => e.stopPropagation()}>
            Solicitar asesoría
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="13" height="13"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </article>
  );
}

function ServicesGrid() {
  const ref = React.useRef(null);
  const [active, setActive] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setActive(true); io.disconnect(); } }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <section className="alg-section alg-services-section" id="servicios" ref={ref}>
      <div className="alg-container">
        <div className="alg-section-head">
          <p className="alg-eyebrow">Servicios</p>
          <h2 className="alg-section-title">
            Seis áreas, <em>una sola mirada</em>.
          </h2>
          <p className="alg-section-lede">
            Equipos especializados en gestión, ciencias sociales, tecnología, salud y territorio.
            Respondemos a la complejidad de cada proyecto con el mix de disciplinas que realmente requiere.
          </p>
        </div>
        <div className={`alg-services-grid ${active ? 'is-active' : ''}`}>
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.title} s={s} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function AlgarroboTree() {
  const ref = React.useRef(null);
  const [active, setActive] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setActive(true); io.disconnect(); } }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Araucaria araucana — based on real photo reference.
  // Distinctive shape: tall straight pale-gray trunk with hexagonal-plate bark,
  // long horizontal/upward branches with foliage ONLY at the tip (not along the branch),
  // creating a "candelabra" or umbrella silhouette where the canopy is sparse and elevated.
  // viewBox 0 0 720 560; horizon at y=400; trunk at x=480 (off-center, like reference)

  // Each branch: armature line + dense pom-pom of needle spikes at tip
  const branches = [
    // [startY, endX, endY, length, tuftR, delay]
    { y0: 240, x1: 380, y1: 220, w: 1.6, tr: 22, d: 1700 },  // upper-left, almost horizontal
    { y0: 250, x1: 580, y1: 230, w: 1.6, tr: 22, d: 1750 },  // upper-right
    { y0: 215, x1: 430, y1: 195, w: 1.4, tr: 18, d: 1800 },  // top-left, near apex
    { y0: 215, x1: 530, y1: 200, w: 1.4, tr: 18, d: 1850 },  // top-right
    { y0: 195, x1: 460, y1: 175, w: 1.2, tr: 14, d: 1900 },  // very top-left
    { y0: 195, x1: 500, y1: 178, w: 1.2, tr: 14, d: 1950 },  // very top-right
    { y0: 270, x1: 350, y1: 260, w: 1.8, tr: 26, d: 2000 },  // mid-left, longer
    { y0: 280, x1: 605, y1: 270, w: 1.8, tr: 26, d: 2050 },  // mid-right, longer
  ];

  // Pom-pom of needle spikes radiating from a center point
  const tuft = (cx, cy, radius, key) => {
    const spikes = [];
    const count = 18;
    for (let i = 0; i < count; i++) {
      const ang = (i / count) * Math.PI * 2 + (i * 0.3);
      const len = radius * (0.7 + (i % 3) * 0.1);
      const x2 = cx + Math.cos(ang) * len;
      const y2 = cy + Math.sin(ang) * len;
      spikes.push(<line key={`${key}-${i}`} x1={cx} y1={cy} x2={x2} y2={y2} className="alg-arc-needle"/>);
    }
    return spikes;
  };

  return (
    <div ref={ref} className={`alg-tree-wrap ${active ? 'is-active' : ''}`} aria-hidden="true">
      <svg viewBox="0 0 720 560" className="alg-tree" preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="alg-sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#F4E8D5"/>
            <stop offset="40%" stopColor="#EDE0CB"/>
            <stop offset="100%" stopColor="#E5D7BE"/>
          </linearGradient>
          <linearGradient id="alg-volcano" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#FFFFFF"/>
            <stop offset="25%" stopColor="#D9C9A8"/>
            <stop offset="60%" stopColor="#8E7E60"/>
            <stop offset="100%" stopColor="#594E3A"/>
          </linearGradient>
          <linearGradient id="alg-mtn-mid" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.95"/>
            <stop offset="50%" stopColor="#B8A98C" stopOpacity="0.8"/>
            <stop offset="100%" stopColor="#7E724F" stopOpacity="0.6"/>
          </linearGradient>
          <linearGradient id="alg-arc-trunk" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#6B6354"/>
            <stop offset="35%" stopColor="#9E978A"/>
            <stop offset="70%" stopColor="#8B8475"/>
            <stop offset="100%" stopColor="#5C5447"/>
          </linearGradient>
          <linearGradient id="alg-clouds" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.4"/>
          </linearGradient>
        </defs>

        {/* sky backdrop */}
        <rect x="0" y="0" width="720" height="400" fill="url(#alg-sky)" className="alg-sky-bg"/>

        {/* distant volcanic peak — Llaima/Lanín silhouette, snow-capped */}
        <g className="alg-mtn-far">
          <path d="M280 380 L 360 280 L 400 200 L 430 170 L 460 200 L 500 280 L 580 380 Z"
                fill="url(#alg-volcano)"/>
          {/* Snow streaks running down from peak */}
          <g opacity="0.85">
            <path d="M430 170 L 425 220 L 420 250" stroke="#FFFFFF" strokeWidth="3" fill="none" strokeLinecap="round"/>
            <path d="M438 175 L 440 215 L 442 245" stroke="#FFFFFF" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
            <path d="M425 175 L 415 210 L 408 235" stroke="#FFFFFF" strokeWidth="2" fill="none" strokeLinecap="round"/>
            <path d="M445 180 L 452 225 L 458 260" stroke="#FFFFFF" strokeWidth="2" fill="none" strokeLinecap="round"/>
          </g>
          {/* Crater rim highlight */}
          <path d="M420 175 Q 430 168 444 174" stroke="#FFFFFF" strokeWidth="3" fill="none" strokeLinecap="round" opacity="0.9"/>
        </g>

        {/* mid-distance ridges */}
        <g className="alg-mtn-mid">
          <path d="M0 400 L 80 340 L 170 380 L 240 350 L 280 380 L 580 380 L 620 360 L 690 385 L 720 370 L 720 400 Z"
                fill="url(#alg-mtn-mid)"/>
        </g>

        {/* sea of clouds — band of horizontal soft shapes below the volcano */}
        <g className="alg-clouds" opacity="0.75">
          <ellipse cx="200" cy="395" rx="120" ry="14" fill="url(#alg-clouds)"/>
          <ellipse cx="380" cy="400" rx="160" ry="16" fill="url(#alg-clouds)"/>
          <ellipse cx="560" cy="395" rx="130" ry="14" fill="url(#alg-clouds)"/>
          <ellipse cx="100" cy="405" rx="80" ry="10" fill="url(#alg-clouds)"/>
          <ellipse cx="650" cy="405" rx="90" ry="10" fill="url(#alg-clouds)"/>
        </g>

        {/* hillside foreground — warm rust tones from photo */}
        <g className="alg-hillside">
          <path d="M0 560 L 0 440 Q 200 410 360 430 Q 520 445 720 420 L 720 560 Z" fill="#B85C2E" opacity="0.85"/>
          <path d="M0 560 L 0 470 Q 220 445 380 460 Q 540 470 720 455 L 720 560 Z" fill="#7A3A1E" opacity="0.7"/>
          {/* Texture dots — small shrubs */}
          <g fill="#5C2914" opacity="0.5">
            {Array.from({length: 60}).map((_, i) => {
              const x = (i * 47 + 23) % 720;
              const y = 460 + ((i * 13) % 80);
              return <circle key={i} cx={x} cy={y} r={2 + (i % 3)}/>;
            })}
          </g>
        </g>

        {/* Distant smaller araucarias on the hillside (silhouettes) */}
        <g className="alg-arc-distant" opacity="0.55">
          {[60, 130, 195, 260, 545, 610, 675].map((x, i) => (
            <g key={i} transform={`translate(${x},${430 + (i % 3) * 4})`}>
              <line x1="0" y1="0" x2="0" y2="-30" stroke="#3A2A1A" strokeWidth="1.5"/>
              <circle cx="0" cy="-32" r="6" fill="#3A2A1A"/>
            </g>
          ))}
        </g>

        {/* MAIN ARAUCARIA — foreground hero */}
        {/* Trunk: tall, straight, slightly off-vertical, pale gray */}
        <path
          d="M474 470
             Q 472 400 476 330
             Q 478 260 480 200
             Q 482 160 483 130
             L 488 130
             Q 489 160 490 200
             Q 492 260 494 330
             Q 496 400 494 470 Z"
          fill="url(#alg-arc-trunk)"
          className="alg-arc-trunk-shape"
        />

        {/* Hexagonal bark plate detail — characteristic of Araucaria */}
        <g className="alg-arc-bark">
          {Array.from({length: 18}).map((_, i) => {
            const y = 145 + i * 18;
            const offset = (i % 2) * 5;
            return (
              <g key={i}>
                <path
                  d={`M${477 + offset} ${y} L ${481 + offset} ${y - 4} L ${485 + offset} ${y} L ${485 + offset} ${y + 6} L ${481 + offset} ${y + 10} L ${477 + offset} ${y + 6} Z`}
                  fill="none" stroke="#3A3024" strokeWidth="0.6" opacity="0.5"
                />
              </g>
            );
          })}
          {/* horizontal segment lines */}
          {Array.from({length: 12}).map((_, i) => (
            <line key={`h${i}`} x1="474" y1={150 + i * 28} x2="494" y2={150 + i * 28}
                  stroke="#2A2018" strokeWidth="0.7" opacity="0.6"/>
          ))}
        </g>

        {/* Branches: armature + tip-only foliage tuft */}
        <g className="alg-arc-canopy">
          {branches.map((b, i) => (
            <g key={i} className="alg-arc-branch" style={{ '--d': `${b.d}ms` }}>
              <path
                d={`M484 ${b.y0} Q ${(484 + b.x1) / 2} ${b.y0 - 8} ${b.x1} ${b.y1}`}
                stroke="#3A2A1A" strokeWidth={b.w} fill="none" strokeLinecap="round"
                className="alg-arc-arm"
              />
              <g className="alg-arc-tuft">
                {/* Dark base disk for the foliage pom */}
                <circle cx={b.x1} cy={b.y1} r={b.tr * 0.7} fill="#1F2818" opacity="0.6"/>
                {tuft(b.x1, b.y1, b.tr, `t${i}`)}
              </g>
            </g>
          ))}

          {/* Crown — flat-topped tuft at apex */}
          <g className="alg-arc-branch" style={{ '--d': '2150ms' }}>
            <circle cx="484" cy="125" r="20" fill="#1F2818" opacity="0.6"/>
            {tuft(484, 125, 24, 'crown')}
          </g>
        </g>
      </svg>
    </div>
  );
}

const TICKER_ITEMS = [
  { type: 'stat',     num: '+7',   label: 'años de trayectoria' },
  { type: 'logo',     src: '../../assets/logo-chilecompra-original.png', label: 'Mercado Público' },
  { type: 'stat',     num: '+350', label: 'personas capacitadas' },
  { type: 'location', src: '../../assets/Provincia_de_Copiapó.svg', label: 'Copiapó' },
  { type: 'location', src: '../../assets/Provincias_de_la_Región_Metropolitana.svg', label: 'Santiago RM' },
  { type: 'location', label: 'Antofagasta' },
  { type: 'location', label: 'Coquimbo' },
];

function TrustTicker() {
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS]; // duplicate for seamless loop
  return (
    <div className="alg-ticker-wrap">
      <div className="alg-ticker">
        {items.map((item, i) => (
          <div key={i} className="alg-ticker-item">
            {item.type === 'stat' && (
              <>
                <span className="alg-ticker-num">{item.num}</span>
                <span className="alg-ticker-label">{item.label}</span>
              </>
            )}
            {item.type === 'logo' && (
              <img src={item.src} alt={item.label} className="alg-ticker-logo" />
            )}
            {item.type === 'location' && (
              <>
                {item.src
                  ? <img src={item.src} alt={item.label} className="alg-ticker-map" />
                  : <svg className="alg-ticker-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                }
                <span className="alg-ticker-label">{item.label}</span>
              </>
            )}
            <span className="alg-ticker-sep" aria-hidden="true">·</span>
          </div>
        ))}
      </div>
    </div>
  );
}

const PROYECTOS = [
  {
    titulo: 'Conversatorio "Fortaleciendo Competencias y Liderazgo"',
    cliente: 'Guanaqueros · Región de Coquimbo',
    año: '2024',
    desc: 'Tres conversatorios para fortalecer competencias en gestión organizacional, manejo de conflictos y planificación estratégica en organizaciones comunitarias.',
    metrica: '+100',
    metricaLabel: 'personas por evento',
    foto: '../../assets/gente-1.png',
  },
  {
    titulo: 'Escuela de Formación de Dirigentes Sociales',
    cliente: 'Corporación Municipal de Pudahuel',
    año: '2024',
    desc: 'Capacitación en planificación estratégica, gestión colaborativa y evaluación de impacto social para líderes comunitarios.',
    metrica: '95%',
    metricaLabel: 'satisfacción de participantes',
    foto: '../../assets/gente-2.png',
  },
  {
    titulo: 'Estudio de Percepción Comunitaria ENAMI',
    cliente: 'ENAMI · Atacama, Antofagasta y Coquimbo',
    año: '2023',
    desc: 'Diagnóstico territorial y análisis de percepción comunitaria en zonas de influencia minera. Elaboración de propuesta de Plan de Desarrollo Comunitario.',
    metrica: '3',
    metricaLabel: 'regiones abarcadas',
    foto: '../../assets/gente-3.png',
  },
  {
    titulo: 'Curso Psicología de Emergencia, RCP y DEA',
    cliente: 'Municipalidad de Coquimbo',
    año: '2023',
    desc: 'Formación integral en manejo emocional en crisis, reanimación cardiopulmonar y uso de desfibriladores automáticos externos.',
    metrica: '90%',
    metricaLabel: 'tasa de certificación',
    foto: '../../assets/gente-4.png',
  },
];

const CLIENTES = [
  'Municipalidad de Coquimbo',
  'Corp. Municipal de Pudahuel',
  'Subsecretaría Desarrollo Regional',
  'ENAMI',
];

function ProyectosCarrusel() {
  const [idx, setIdx] = useState(0);
  const [animKey, setAnimKey] = useState(0);
  const total = PROYECTOS.length;

  const goTo = (i) => {
    setIdx(((i % total) + total) % total);
    setAnimKey(k => k + 1);
  };

  useEffect(() => {
    const t = setInterval(() => {
      setIdx(i => (i + 1) % total);
      setAnimKey(k => k + 1);
    }, 7000);
    return () => clearInterval(t);
  }, []);

  const p = PROYECTOS[idx];

  return (
    <section className="alg-carrusel-section" id="proyectos">
      <div className="alg-container">
        <div className="alg-carrusel-head">
          <div>
            <p className="alg-eyebrow alg-eyebrow-light">Proyectos</p>
            <h2 className="alg-section-title" style={{color:'var(--pergamino-100)', marginBottom:0}}>
              Trabajo con impacto <em style={{color:'var(--algarrobo-200)'}}>real</em>.
            </h2>
          </div>
        </div>

        <div className="alg-carrusel-slide" key={animKey}>
          <div className="alg-carrusel-text">
            <div className="alg-carrusel-meta">
              <span className="alg-proyecto-cliente">{p.cliente}</span>
              <span className="alg-proyecto-año">{p.año}</span>
            </div>
            <h3 className="alg-carrusel-titulo">{p.titulo}</h3>
            <p className="alg-carrusel-desc">{p.desc}</p>
            <div className="alg-proyecto-metrica">
              <span className="alg-proyecto-num">{p.metrica}</span>
              <span className="alg-proyecto-num-label">{p.metricaLabel}</span>
            </div>
          </div>
          <div className="alg-carrusel-foto">
            <img src={p.foto} alt={p.titulo} />
          </div>
        </div>

        <div className="alg-carrusel-controls">
          <button className="alg-carrusel-btn" onClick={() => goTo(idx - 1)} aria-label="Anterior">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <div className="alg-carrusel-dots">
            {PROYECTOS.map((_, i) => (
              <button key={i} className={`alg-carrusel-dot ${i === idx ? 'is-active' : ''}`} onClick={() => goTo(i)} aria-label={`Proyecto ${i+1}`} />
            ))}
          </div>
          <button className="alg-carrusel-btn" onClick={() => goTo(idx + 1)} aria-label="Siguiente">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><path d="M9 18l6-6-6-6"/></svg>
          </button>
        </div>

        <div className="alg-clientes-bar">
          <p className="alg-clientes-label">Han trabajado con nosotros</p>
          <div className="alg-clientes-list">
            {CLIENTES.map((c, i) => (
              <React.Fragment key={c}>
                <span>{c}</span>
                {i < CLIENTES.length - 1 && <span className="alg-trust-dot" />}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BotanicalLeaf() {
  const ref = React.useRef(null);
  const [active, setActive] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setActive(true); io.disconnect(); }
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Asymmetric leaf: apex top-left (sharp), base bottom-right (broad & round)
  // Inspired by CSS leaf border-radius:5% 40% 70% + skew(20deg)
  // Left side = tighter curve | Right side = more convex, wider
  // Midrib runs diagonally: apex(148,16) → base(124,382)

  const leftVeins = [
    'M144,82  C136,82 124,83 108,84',
    'M142,128 C126,126 106,124 82,123',
    'M140,174 C118,171 90,168 62,167',
    'M138,220 C114,217 84,215 56,215',
    'M136,266 C114,263 88,261 64,261',
    'M134,308 C118,306 100,304 84,303',
    'M132,344 C126,342 116,341 106,340',
  ];
  const rightVeins = [
    'M144,82  C152,82 164,83 178,84',
    'M142,128 C158,126 178,124 198,123',
    'M140,174 C160,171 186,168 208,167',
    'M138,220 C160,217 188,215 216,215',
    'M136,266 C156,263 180,261 210,261',
    'M134,308 C148,306 166,304 196,303',
    'M132,344 C138,342 148,341 162,340',
  ];

  return (
    <div ref={ref} className={`alg-leaf-wrap ${active ? 'is-active' : ''}`} aria-hidden="true">
      <svg viewBox="0 0 268 406" className="alg-leaf-svg" fill="none">
        {/* Subtle fill */}
        <path className="alg-leaf-fill"
          d="M148,16 C122,42 84,98 62,156 C40,212 38,264 50,308 C62,350 88,378 118,388 C126,390 132,390 138,388 C164,382 196,362 216,330 C238,296 246,256 240,214 C234,172 216,130 194,94 C174,60 160,34 148,16 Z"/>
        {/* Left side — from apex going down (tight curve) */}
        <path className="alg-leaf-stroke alg-leaf-left"
          d="M148,16 C122,42 84,98 62,156 C40,212 38,264 50,308 C62,350 88,378 118,388"/>
        {/* Right side — from base back to apex (broad, convex) */}
        <path className="alg-leaf-stroke alg-leaf-right"
          d="M118,388 C132,392 144,390 156,384 C184,370 210,344 226,310 C244,272 248,230 240,188 C232,148 212,108 188,76 C172,54 158,32 148,16"/>
        {/* Petiole */}
        <path className="alg-leaf-stroke alg-leaf-petiole"
          d="M118,388 C120,396 122,402 124,412"/>
        {/* Midrib — diagonal, follows the leaf's lean */}
        <path className="alg-leaf-stroke alg-leaf-midrib"
          d="M124,412 C130,320 138,220 148,16"/>
        {/* Left veins */}
        {leftVeins.map((d, i) => (
          <path key={`lv${i}`} className="alg-leaf-vein" style={{'--vi': i}} d={d} />
        ))}
        {/* Right veins */}
        {rightVeins.map((d, i) => (
          <path key={`rv${i}`} className="alg-leaf-vein" style={{'--vi': i + 0.4}} d={d} />
        ))}
      </svg>
    </div>
  );
}

function Differentiator() {
  return (
    <section className="alg-section alg-section-about" id="nosotros">
      <div className="alg-container alg-diff-grid">
        <div className="alg-diff-intro">
          <p className="alg-eyebrow">¿Quiénes somos?</p>
          <h2 className="alg-section-title">Nosotros</h2>
          <p className="alg-section-lede" style={{maxWidth: '54ch'}}>
            Algarrobal Consultores Limitada es una empresa especializada en consultoría
            de gestión y ciencias sociales, enfocada en el desarrollo territorial,
            la investigación aplicada y la capacitación. Nuestro objetivo es fortalecer
            el capital humano y mejorar la eficiencia organizacional en instituciones
            públicas y privadas.
          </p>
          <p className="alg-section-lede" style={{maxWidth: '54ch', marginTop: '16px'}}>
            Ofrecemos soluciones estratégicas basadas en datos, con resultados efectivos
            y medibles. Somos una empresa inscrita en Mercado Público, con presencia
            en Copiapó y Santiago, y trayectoria en proyectos de impacto territorial
            a lo largo de Chile.
          </p>
          <button type="button" className="alg-diff-cta" onClick={() => window.dispatchEvent(new CustomEvent('alg-open-team'))}>
            Conocer al equipo
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
        <BotanicalLeaf />
      </div>
    </section>
  );
}

const TEAM = [
  {
    id: 'carlos',
    name: 'Carlos Ardiles Morales',
    role: 'Gerente General · Gestión de Proyectos',
    initials: 'CA',
    photo: '../../assets/carlos.png',
    short: 'Ingeniero Civil Industrial · MBA en Gestión de Negocios (U. Central).',
    formation: 'Ing. Civil Industrial (U. de Atacama) · MBA Gestión de Negocios (U. Central)',
    bio: 'Más de 7 años liderando proyectos estratégicos en educación superior e instituciones públicas y privadas. Ha gestionado presupuestos superiores a USD 20 millones e implementado sistemas ERP en entornos de alta complejidad organizacional.',
    detail: 'Coordinador General Académico en proyectos estratégicos de la Universidad de Atacama. Jefe de Proyectos en el Instituto de Ingeniería Biológica y Médica de la Pontificia Universidad Católica de Chile. Asesor en fomento e innovación en la Universidad de Atacama y GEDES. Experto en IA aplicada a procesos organizacionales.',
    tags: ['Planificación estratégica', 'Gestión de proyectos', 'Control de gestión', 'IA aplicada', 'Sistemas ERP', 'Innovación'],
    trajectory: 'U. de Atacama · PUC · U. Central',
  },
  {
    id: 'camila',
    name: 'Camila Sakamoto Bravo',
    role: 'Gerenta de Consultorías · Desarrollo Humano',
    initials: 'CS',
    photo: '../../assets/camila.png',
    short: 'Socióloga (U. de Chile) · Mg. Desarrollo Humano (FLACSO Argentina).',
    formation: 'Socióloga (U. de Chile) · Magíster en Desarrollo Humano (FLACSO Argentina)',
    bio: 'Especialista en aseguramiento de la calidad, participación ciudadana y equidad de género. Amplia experiencia en procesos de autoevaluación institucional, acreditación y metodologías participativas en contextos comunitarios y educativos.',
    detail: 'Gestora de Aseguramiento de la Calidad en la Universidad de Atacama, apoyando procesos de acreditación y mejora continua. Coordinadora de participación comunitaria en proyectos de ENAMI y Fundación Paz Ciudadana. Capacitadora en género, liderazgo y resolución de conflictos en comunidades y organizaciones sociales.',
    tags: ['Investigación cualitativa', 'Participación ciudadana', 'Aseguramiento de calidad', 'Equidad de género', 'Facilitación', 'Acreditación'],
    trajectory: 'U. de Chile · U. de Atacama · ENAMI · Paz Ciudadana',
  },
];

function TeamModal() {
  const [open, setOpen] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const onOpen = () => { setMounted(true); requestAnimationFrame(() => setOpen(true)); };
    window.addEventListener('alg-open-team', onOpen);
    return () => window.removeEventListener('alg-open-team', onOpen);
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  const close = () => {
    setOpen(false);
    setTimeout(() => setMounted(false), 350);
  };

  if (!mounted) return null;

  return (
    <div className={`alg-modal ${open ? 'is-open' : ''}`} onClick={close}>
      <div className="alg-modal-backdrop" />
      <div className="alg-modal-content" onClick={(e) => e.stopPropagation()}>
        <header className="alg-modal-head">
          <div>
            <p className="alg-eyebrow" style={{ color: 'var(--algarrobo-600)' }}>Equipo</p>
            <h2 className="alg-modal-title">Quiénes están detrás</h2>
          </div>
          <button className="alg-modal-close" onClick={close} aria-label="Cerrar">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="22" height="22"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </header>
        <div className="alg-flip-grid">
          {TEAM.map((p, i) => (
            <FlipCard key={p.id} person={p} delay={i * 90} />
          ))}
        </div>
      </div>
    </div>
  );
}

function FlipCard({ person, delay }) {
  const p = person;
  const [flipped, setFlipped] = useState(false);
  const toggleFlip = () => {
    if (window.matchMedia('(max-width: 767px)').matches) setFlipped(f => !f);
  };
  return (
    <article className={`alg-flip ${flipped ? 'is-flipped' : ''}`} style={{ '--enter-delay': `${delay}ms` }} onClick={toggleFlip}>
      <div className="alg-flip-inner">
        {/* Front */}
        <div className="alg-flip-face alg-flip-front">
          <div className="alg-flip-photo alg-flip-photo-front" aria-hidden="true">
            {p.photo
              ? <img src={p.photo} alt={p.name} className="alg-flip-photo-img" onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }} />
              : null}
            <span className="alg-flip-initials" style={p.photo ? {display:'none'} : {}}>{p.initials}</span>
          </div>
          <div className="alg-flip-front-body">
            <p className="alg-flip-role">{p.role}</p>
            <h3 className="alg-flip-name">{p.name}</h3>
            <p className="alg-flip-short">{p.short}</p>
          </div>
          <span className="alg-flip-hint">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="14" height="14"><path d="M3 12a9 9 0 1018 0 9 9 0 00-18 0zM12 8v8M8 12h8"/></svg>
            Pasa el cursor
          </span>
        </div>
        {/* Back */}
        <div className="alg-flip-face alg-flip-back">
          <div className="alg-flip-back-scroll">
            <div className="alg-flip-back-head">
              <div className="alg-flip-photo alg-flip-photo-sm" aria-hidden="true">
                {p.photo
                  ? <img src={p.photo} alt={p.name} className="alg-flip-photo-img" onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }} />
                  : null}
                <span className="alg-flip-initials" style={p.photo ? {display:'none'} : {}}>{p.initials}</span>
              </div>
              <div>
                <h3 className="alg-flip-name">{p.name}</h3>
                <p className="alg-flip-formation">{p.formation}</p>
              </div>
            </div>
            <p className="alg-flip-bio">{p.bio}</p>
            <p className="alg-flip-detail">{p.detail}</p>
            <div className="alg-flip-tags">
              {p.tags.map(t => <span key={t} className="alg-flip-tag">{t}</span>)}
            </div>
            <p className="alg-flip-trajectory"><span>Trayectoria</span> {p.trajectory}</p>
          </div>
        </div>
      </div>
    </article>
  );
}

function ContactForm() {
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    const fd = new FormData(e.target);
    const data = {
      name:    fd.get('name'),
      company: fd.get('company'),
      email:   fd.get('email'),
      service: fd.get('service'),
      message: fd.get('message'),
    };
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setError('Hubo un error al enviar. Por favor intenta de nuevo.');
      }
    } catch {
      setError('No se pudo conectar con el servidor. Intenta más tarde.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="alg-section" id="contacto">
      <div className="alg-container alg-contact-grid">
        <div>
          <p className="alg-eyebrow">Conversemos</p>
          <h2 className="alg-section-title">
            Cuéntanos sobre <em>tu proyecto</em>.
          </h2>
          <p className="alg-section-lede" style={{maxWidth: '42ch'}}>
            Te respondemos en menos de 48 horas hábiles con una propuesta inicial sin compromiso.
          </p>
          <ul className="alg-contact-list">
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M4 6h16v12H4zM4 6l8 7 8-7"/></svg>
              <a href="mailto:contacto@algarrobalconsultores.cl">contacto@algarrobalconsultores.cl</a>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
              <a href="tel:+56945770176">+56 9 4577 0176</a>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
              <a href="https://wa.link/shaleq">WhatsApp directo</a>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
              <span>El Inca 383, Copiapó · Av. Quilín 123, Santiago</span>
            </li>
          </ul>
        </div>
        <form className="alg-form" onSubmit={handleSubmit}>
          {sent ? (
            <div className="alg-form-thanks">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="32" height="32"><path d="M20 6L9 17l-5-5"/></svg>
              <h3>Mensaje enviado.</h3>
              <p>Nos pondremos en contacto pronto.</p>
            </div>
          ) : (
            <>
              <div className="alg-field-row">
                <div className="alg-field"><label>Nombre</label><input name="name" required placeholder="Tu nombre" /></div>
                <div className="alg-field"><label>Empresa</label><input name="company" placeholder="Tu organización" /></div>
              </div>
              <div className="alg-field"><label>Email</label><input name="email" type="email" required placeholder="tu@correo.cl" /></div>
              <div className="alg-field">
                <label>Servicio de interés</label>
                <select name="service">
                  <option>Gestión de proyectos</option>
                  <option>Capacitación</option>
                  <option>Herramientas Tecnológicas</option>
                  <option>Estudios e Investigación</option>
                  <option>Salud y Seguridad</option>
                  <option>Participación Ciudadana</option>
                </select>
              </div>
              <div className="alg-field"><label>Mensaje</label><textarea name="message" rows="4" placeholder="Cuéntanos brevemente sobre tu proyecto"></textarea></div>
              {error && <p style={{color:'var(--danger)', fontSize:'14px', margin:0}}>{error}</p>}
              <button type="submit" className="alg-btn alg-btn-primary alg-btn-block" disabled={loading}>
                {loading ? 'Enviando…' : 'Enviar consulta'}
                {!loading && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="16" height="16"><path d="M5 12h14M13 6l6 6-6 6"/></svg>}
              </button>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="alg-footer">
      <div className="alg-container alg-footer-grid">
        <div>
          <img className="alg-footer-logo" src="../../assets/logo-nuevo.png" alt="Algarrobal Consultores" />
          <p className="alg-footer-tag">
            Consultoría en gestión, ciencias sociales y desarrollo territorial. Copiapó y Santiago.
          </p>
          <img src="../../assets/logo-chilecompra-original.png" alt="Mercado Público" className="alg-footer-mp-logo" />
        </div>
        <div className="alg-footer-col">
          <p className="alg-footer-head">Servicios</p>
          <a href="#">Gestión de proyectos</a>
          <a href="#">Ingeniería</a>
          <a href="#">Medio ambiente</a>
          <a href="#">Ciencias sociales</a>
        </div>
        <div className="alg-footer-col">
          <p className="alg-footer-head">Empresa</p>
          <a href="#nosotros">Nosotros</a>
          <a href="#equipo">Equipo</a>
          <a href="#">Casos</a>
          <a href="#">Contacto</a>
        </div>
        <div className="alg-footer-col">
          <p className="alg-footer-head">Contacto</p>
          <a href="mailto:algarrobalconsultores@gmail.com">algarrobalconsultores@gmail.com</a>
          <a href="tel:+56945770176">+56 9 4577 0176</a>
          <a href="https://wa.link/shaleq">WhatsApp</a>
        </div>
      </div>
      <div className="alg-container alg-footer-bottom">
        <span>© 2026 Algarrobal Consultores Limitada · RUT 77.764.059-3</span>
        <span className="alg-footer-marks">Inscritos en Mercado Público · ChileProveedores</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, TrustTicker, StatsBand, ServicesGrid, ProyectosCarrusel, Differentiator, TeamModal, ContactForm, Footer });