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

/* ---------- Icons ---------- */
const CircleArrow = () =>
<span className="arrow"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg></span>;

const Blob = ({ size = 12, className = "" }) =>
<svg className={className} width={size} height={size * (445 / 478)} viewBox="0 0 478 445" aria-hidden="true">
    <path d="M477.685 291.018C477.685 332.042 383.076 362.382 367.185 397.018C326.6 485.478 318.403 423.8 218.686 423.8C145.643 423.8 121.093 466.511 75.1853 414.222C33.8806 367.177 42.1852 360.071 42.1852 291.018C42.1852 261.737 1.68512 217.3 1.68512 191.8C-10.3149 138.3 44.0276 69.5175 93.1852 85.5176C160.218 63.0175 125.846 43.3984 201.685 3.80037C245.347 -18.9968 292.685 67.8003 342.685 77.8004C378.141 98.7068 463.185 59.8003 438.685 174.3C430.185 250.3 477.685 238.679 477.685 291.018Z" fill="currentColor" />
  </svg>;


/* ---------- Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  const close = () => setOpen(false);
  return (
    <>
      <nav className={"nav " + (scrolled ? "scrolled" : "") + (open ? " nav--open" : "")}>
        <a href="#top" className="nav__brand" onClick={close}>
          <span className="blob-mark"><Blob size={14} /></span>
          <span>Celia Barriendo</span>
        </a>
        <div className="nav__links">
          <a href="#para-quien">Para quién</a>
          <a href="#servicios">Servicios</a>
          <a href="#metodologia">Metodología</a>
          <a href="#sobre">Sobre mí</a>
          <a href="#contacto">Contacto</a>
        </div>
        <a href="#contacto" className="nav__cta">Primera llamada →</a>
        <button className="nav__burger" aria-label={open ? 'Cerrar menú' : 'Abrir menú'} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
          <span className={"burger " + (open ? 'burger--x' : '')}><i /><i /></span>
        </button>
      </nav>
      <div className={"mobile-menu " + (open ? 'mobile-menu--open' : '')} aria-hidden={!open}>
        <div className="mobile-menu__inner">
          <a href="#para-quien" onClick={close}><span className="mm-n">01</span>Para quién<span className="mm-a">→</span></a>
          <a href="#servicios" onClick={close}><span className="mm-n">02</span>Servicios<span className="mm-a">→</span></a>
          <a href="#metodologia" onClick={close}><span className="mm-n">03</span>Metodología<span className="mm-a">→</span></a>
          <a href="#sobre" onClick={close}><span className="mm-n">04</span>Sobre mí<span className="mm-a">→</span></a>
          <a href="#contacto" onClick={close}><span className="mm-n">05</span>Contacto<span className="mm-a">→</span></a>
          <a href="#contacto" className="mobile-menu__cta" onClick={close}>Pedir primera llamada gratuita →</a>
          <div className="mobile-menu__meta">
            <div>celiabarriendoanson@gmail.com</div>
            <div>Zaragoza · Aragón</div>
          </div>
        </div>
      </div>
    </>);

}

/* ---------- Hero (sin descripción bajo la foto) ---------- */
function Hero() {
  return (
    <section className="hero hero--compact" id="top">
      <div className="wrap hero__wrap">
        <div className="hero__eyebrow mono reveal in">
          <span className="line" />
          <span>Celia Barriendo · Consultoría de bienestar organizacional</span>
        </div>

        <div className="hero__grid">
          <div className="hero__col">
            <h1 className="hero__title hero__title--small reveal in">
              Acompaño a pequeñas y medianas empresas a <span className="accent">desarrollar herramientas y entornos</span> en los que sentirse grandes.
            </h1>
            <div className="hero__cta-row reveal in" data-delay="3">
              <a href="#contacto" className="btn btn--primary">
                Primera llamada gratuita <CircleArrow />
              </a>
              <a href="#servicios" className="btn btn--ghost">
                Ver servicios <CircleArrow />
              </a>
            </div>
          </div>

          <div className="hero__photo-wrap hero__photo-wrap--clean reveal in" data-delay="2">
            <img src="images/celia_hero.webp" alt="Celia Barriendo" />
            <div className="hero__namecard">
              <strong>Celia Barriendo</strong>
              <span>Psicóloga organizacional</span>
            </div>
          </div>
        </div>

        <div className="hero__marquee" aria-hidden="true">
          <div className="track">
            <span>
              Fortalezas personales<i className="blob-inline"><Blob size={10} /></i>
              Liderazgo positivo<i className="blob-inline"><Blob size={10} /></i>
              Evidencia científica<i className="blob-inline"><Blob size={10} /></i>
              Medición pre y post<i className="blob-inline"><Blob size={10} /></i>
              Motivación<i className="blob-inline"><Blob size={10} /></i>
              Clima laboral<i className="blob-inline"><Blob size={10} /></i>
              Propósito<i className="blob-inline"><Blob size={10} /></i>
            </span>
            <span>
              Fortalezas personales<i className="blob-inline"><Blob size={10} /></i>
              Liderazgo positivo<i className="blob-inline"><Blob size={10} /></i>
              Evidencia científica<i className="blob-inline"><Blob size={10} /></i>
              Medición pre y post<i className="blob-inline"><Blob size={10} /></i>
              Motivación<i className="blob-inline"><Blob size={10} /></i>
              Clima laboral<i className="blob-inline"><Blob size={10} /></i>
              Propósito<i className="blob-inline"><Blob size={10} /></i>
            </span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Para quién (fusionado: 5 ítems con blob) ---------- */
function ForWho() {
  const items = [
  'Atravesando un proceso de cambio o crecimiento.',
  'Rotación alta o conflictos que se repiten.',
  'Comunicación que no fluye entre personas o áreas.',
  'Equipos que no rinden a su nivel.',
  'Cambio de etapa sin un equipo preparado.'];

  return (
    <section className="section section--tight for-who" id="para-quien">
      <div className="wrap">
        <div className="section-head reveal">
          <div><div className="mono section-num">— 01 / Para quién</div></div>
          <h2>PYMEs en un <em>momento de cambio</em>, estancamiento o crecimiento.</h2>
        </div>

        <ul className="fw-merged reveal">
          {items.map((t, i) =>
          <li key={i}>
              <span className="fw-merged__n mono">0{i + 1}</span>
              <span className="fw-merged__blob"><Blob size={12} /></span>
              <span className="fw-merged__t">{t}</span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

/* ---------- Servicios (grid de tarjetas compactas) ---------- */
function Services() {
  const [tier, setTier] = useState(0);
  const tiers = [
  { name: 'Individual', meta: 'Para líderes y miembros del equipo', num: '— 01' },
  { name: 'Grupal', meta: 'Para los equipos al completo', num: '— 02' },
  { name: 'Completo', meta: 'Trabajo grupal e individual integrado', num: '— 03' }];

  const catalogue = [
  { num: '01', name: 'Intervenciones positivas', desc: 'Liderazgo, equipos resilientes, individuos felices.' },
  { num: '02', name: 'Talleres prácticos', desc: 'Fortalezas, liderazgo, propósito y sentido.' },
  { num: '03', name: 'Ponencias teóricas', desc: 'Mirada positiva al trabajo. Liderazgo en crisis.' },
  { num: '04', name: 'Diagnóstico aislado', desc: 'Evaluación sin programa posterior.' },
  { num: '05', name: 'Seguimiento', desc: 'Acompañamiento continuado tras la intervención.' }];

  return (
    <section className="section section--tight services" id="servicios">
      <div className="wrap">
        <div className="section-head reveal">
          <div><div className="mono section-num">— 02 / Servicios</div></div>
          <h2>Intervenciones para fortalecer <em>equipos, líderes y organizaciones</em>.</h2>
        </div>

        <div className="reveal">
          <div className="services__tiers">
            {tiers.map((t, i) =>
            <div key={i} className="tier tier--no-price" data-active={tier === i} onClick={() => setTier(i)}>
                <div className="tier__num">{t.num}</div>
                <div className="tier__name">{t.name}</div>
                <div className="tier__meta">{t.meta}</div>
              </div>
            )}
          </div>
        </div>

        <div className="catalogue-grid reveal">
          {catalogue.map((s) =>
          <a key={s.num} href="#contacto" className="cat-card">
              <div className="cat-card__num mono">— {s.num}</div>
              <div className="cat-card__name">{s.name}</div>
              <div className="cat-card__desc">{s.desc}</div>
              <div className="cat-card__arrow">→</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Metodología (Cómo pienso · Cómo trabajo) ---------- */
function Methodology() {
  const principles = [
  { t: 'Evidencia científica', d: 'Herramientas validadas, no intuiciones.' },
  { t: 'Mirada positiva', d: 'Desde las fortalezas, no desde el déficit.' },
  { t: 'Modelo IGLO', d: 'Individuo · Grupo · Líder · Organización.' },
  { t: 'Medición pre & post', d: 'Todo programa se mide antes y después.' },
  { t: 'Acompañamiento', d: 'Continuado, no intervención puntual.' }];

  const steps = [
  { t: 'Diagnóstico', d: 'Escuchar la organización tal como es.' },
  { t: 'Diseño', d: 'Construir el programa contigo.' },
  { t: 'Comunicación', d: 'Preparar al equipo antes de empezar.' },
  { t: 'Intervención', d: 'Sesiones presenciales y online.' },
  { t: 'Medida post', d: 'Comparar y documentar resultados.' },
  { t: 'Seguimiento', d: 'Sostener el cambio a medio plazo.' }];

  return (
    <section className="section section--tight method" id="metodologia">
      <div className="wrap">
        <div className="section-head reveal">
          <div><div className="mono section-num">— 03 / Metodología</div></div>
          <h2>Un marco <em>científico</em>, aplicado con <em>mirada humana</em>.</h2>
        </div>

        <div className="method-split reveal">
          <div className="method-col">
            <div className="method-col__label mono">— Cómo pienso</div>
            <div className="method-col__title">Cinco principios.</div>
            <ol className="method-list">
              {principles.map((p, i) =>
              <li key={i}>
                  <span className="ml-n">0{i + 1}</span>
                  <div>
                    <div className="ml-t">{p.t}</div>
                    <div className="ml-d">{p.d}</div>
                  </div>
                </li>
              )}
            </ol>
          </div>

          <div className="method-col method-col--alt">
            <div className="method-col__label mono">— Cómo trabajo</div>
            <div className="method-col__title">Seis pasos.</div>
            <ol className="method-list method-list--alt">
              {steps.map((s, i) =>
              <li key={i}>
                  <span className="ml-n">0{i + 1}</span>
                  <div>
                    <div className="ml-t">{s.t}</div>
                    <div className="ml-d">{s.d}</div>
                  </div>
                </li>
              )}
            </ol>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Sobre mí (bio 3 líneas + tabla compacta) ---------- */
function About() {
  return (
    <section className="section section--tight about about--compact" id="sobre">
      <div className="wrap">
        <div className="section-head reveal">
          <div><div className="mono section-num">— 04 / Sobre mí</div></div>
          <h2>Soy <em>Celia Barriendo</em>, psicóloga de organizaciones.</h2>
        </div>

        <div className="about__compact reveal">
          <div className="about__media-compact">
            <img src="images/celia_1.webp" alt="Celia Barriendo" />
          </div>

          <div>
            <p className="about__lead about__lead--short">
              Trabajo el bienestar laboral porque un tejido empresarial saludable genera <em>una sociedad con más oportunidades</em>. Eficiencia y bienestar son interdependientes.
            </p>

            <table className="bio-table">
              <tbody>
                <tr><th>Formación</th><td>Psicología (Social) · Máster RRHH · Máster Psicología Positiva Aplicada.</td></tr>
                <tr><th>Trayectoria</th><td>+ 4 años solucionando problemas en el ámbito de la gestión del talento.</td></tr>
                <tr><th>Hoy</th><td>Consultora de bienestar laboral en pequeña y mediana empresa.</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Contacto (prominente, email + CTA) ---------- */
function Contact() {
  return (
    <section className="section contact contact--bold" id="contacto">
      <div className="wrap">
        <div className="contact-bold__grid reveal">
          <div className="contact-bold__lead">
            <div className="mono section-num contact-bold__num">— 06 / Contacto</div>
            <h2 className="contact-bold__title">
              Cuéntame qué está pasando. <em>La primera llamada es gratis.</em>
            </h2>
            <p className="contact-bold__sub">
              Una conversación de 30 minutos para entender tu contexto y ver si tiene sentido trabajar juntas. Sin compromiso.
            </p>
          </div>

          <div className="contact-bold__card">
            <div className="contact-bold__card-row">
              <span className="mono contact-bold__label">— Email</span>
              <a
                className="contact-bold__email"
                href="mailto:celiabarriendoanson@gmail.com?subject=Primera%20llamada%20gratuita" style={{ fontFamily: "Figtree" }}>
                
                celiabarriendoanson<span className="at">@</span>gmail.com
              </a>
            </div>
            <div className="contact-bold__card-row">
              <span className="mono contact-bold__label">— LinkedIn</span>
              <a className="contact-bold__link contact-bold__link--icon" href="https://www.linkedin.com/in/celia-barriendo-b259101a9/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.37V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.21 0 22.23 0z" />
                </svg>
                <span style={{ fontFamily: "Figtree", lineHeight: "1" }}>Conectar en LinkedIn</span>
              </a>
            </div>
            <a
              href="mailto:celiabarriendoanson@gmail.com?subject=Primera%20llamada%20gratuita"
              className="btn btn--paper contact-bold__cta">
              
              Escribir ahora <CircleArrow />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">Celia Barriendo<em>.</em></div>
            <div className="foot-tag">Consultoría de bienestar organizacional para pequeña y mediana empresa.</div>
          </div>
          <div className="foot-col">
            <h5>— Navegar</h5>
            <a href="#para-quien">Para quién</a>
            <a href="#servicios">Servicios</a>
            <a href="#metodologia">Metodología</a>
            <a href="#sobre">Sobre mí</a>
          </div>
          <div className="foot-col">
            <h5>— Contacto</h5>
            <a href="mailto:celiabarriendoanson@gmail.com">celiabarriendoanson@gmail.com</a>
            <a href="https://www.linkedin.com/in/celia-barriendo-b259101a9/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
            <a href="#">Aviso legal</a>
            <a href="#">Política de privacidad</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Celia Barriendo</span>
          <span>Zaragoza · Aragón</span>
        </div>
      </div>
    </footer>);

}

/* ---------- Tweaks ---------- */
function Tweaks({ palette, setPalette }) {
  const [on, setOn] = useState(false);
  useEffect(() => {
    const listener = (e) => {
      if (e.data?.type === '__activate_edit_mode') setOn(true);
      if (e.data?.type === '__deactivate_edit_mode') setOn(false);
    };
    window.addEventListener('message', listener);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', listener);
  }, []);
  const palettes = [
  { k: 'olive', olive: 'oklch(0.58 0.08 112)', oliveDeep: 'oklch(0.42 0.07 112)', sage: 'oklch(0.86 0.035 112)', sw: '#7e8859' },
  { k: 'dust', olive: 'oklch(0.54 0.055 240)', oliveDeep: 'oklch(0.4 0.055 240)', sage: 'oklch(0.86 0.03 240)', sw: '#6d7a9b' },
  { k: 'terracotta', olive: 'oklch(0.6 0.095 45)', oliveDeep: 'oklch(0.45 0.095 45)', sage: 'oklch(0.87 0.035 45)', sw: '#b97a5a' },
  { k: 'ink', olive: 'oklch(0.3 0.02 80)', oliveDeep: 'oklch(0.2 0.02 80)', sage: 'oklch(0.82 0.01 80)', sw: '#2b2a26' }];

  const applyPalette = (p) => {
    setPalette(p.k);
    document.documentElement.style.setProperty('--olive', p.olive);
    document.documentElement.style.setProperty('--olive-deep', p.oliveDeep);
    document.documentElement.style.setProperty('--sage', p.sage);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { palette: p.k } }, '*');
  };
  useEffect(() => {
    const p = palettes.find((p) => p.k === palette);
    if (p) applyPalette(p);
  }, []);
  return (
    <div className={"tweaks " + (on ? 'on' : '')}>
      <h6>— Tweaks</h6>
      <div className="row">
        <label className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>Palette</label>
        <div className="swatches">
          {palettes.map((p) =>
          <button key={p.k} className={"sw " + (palette === p.k ? 'active' : '')} style={{ background: p.sw }} onClick={() => applyPalette(p)} title={p.k} />
          )}
        </div>
      </div>
    </div>);

}

/* ---------- App ---------- */
function App() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {en.target.classList.add('in');io.unobserve(en.target);}
      });
    }, { rootMargin: '-40px 0px', threshold: 0.05 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
  return (
    <>
      <Nav />
      <Hero />
      <ForWho />
      <Services />
      <Methodology />
      <About />
      <Contact />
      <a
        href="#contacto"
        className="floating-chat"
        aria-label="Ir a contacto">
        
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span className="floating-chat__label">Hablamos</span>
      </a>
      <Footer />
    </>);

}

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