/* global React, ReactDOM */

const { useState, useEffect } = React;

/* ------------------------------------------------------------------
   Ignacio Imbarack Garib — Psicólogo Clínico · Psicoanálisis
   Portada tipo "menú-revista" (bento) según referencia de Canva.
   Paleta: crema #F4EFE9 · grafito #2B2825 · terracota #A26B36 · oscuro #222021
   Fuentes: Cormorant Garamond (display) + Jost (sans)
   ------------------------------------------------------------------ */

const WHATSAPP = "https://wa.me/56989888528?text=Hola%20Ignacio%2C%20me%20gustar%C3%ADa%20agendar%20una%20primera%20consulta.";
const INSTAGRAM = "https://instagram.com/ps.ignacioimbarackg";
const EMAIL = "ps.ignacioimbarack@gmail.com";

/* ── Agenda (config en config.js) ──
   Con CAL_LINK vacio: los botones "Agendar" van a WhatsApp.
   Con CAL_LINK seteado: navegan a /agenda (pagina de reserva del embudo). */
const CFG = (typeof window !== "undefined" && window.IGNACIO_CONFIG) || {};
const CAL_LINK = CFG.CAL_LINK || "";
const META_PIXEL_ID = CFG.META_PIXEL_ID || "";

/* Los botones "Agendar" de la landing SIEMPRE llevan a la pagina /agenda.
   (Ahi vive el calendario; si aun no esta configurado, /agenda ofrece WhatsApp.) */
function bookProps() {
  return { href: "/agenda" };
}

/* En la home solo cargamos el pixel (PageView) para retargeting.
   El embed de Cal y el evento Lead viven en /agenda. */
function useBookingIntegrations() {
  useEffect(() => {
    if (META_PIXEL_ID && !window.fbq) {
      /* eslint-disable */
      (function (f, b, e, v, n, t, s) {
        if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); };
        if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = "2.0"; n.queue = [];
        t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s);
      })(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");
      /* eslint-enable */
      window.fbq("init", META_PIXEL_ID);
      window.fbq("track", "PageView");
    }
  }, []);
}

const NAV_LINKS = [
  ["#inicio", "Inicio"],
  ["#sobre-mi", "Sobre mí"],
  ["#psicoanalisis", "El psicoanálisis"],
  ["#atencion-online", "Atención online"],
  ["#contacto", "Contacto"],
];

function scrollTo(e, href) {
  e.preventDefault();
  const el = document.querySelector(href);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  history.replaceState(null, "", href);
}

/* ---------- Iconos ---------- */
function WhatsAppIcon({ size = 18 }) {
  return (
    <svg className="wa" width={size} height={size} viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" focusable="false">
      <path d="M16.003 3.2c-7.06 0-12.79 5.73-12.79 12.79 0 2.256.59 4.46 1.71 6.402L3.2 28.8l6.57-1.72a12.74 12.74 0 006.23 1.62h.005c7.06 0 12.79-5.73 12.79-12.79 0-3.42-1.332-6.634-3.75-9.05a12.7 12.7 0 00-9.043-3.66zm0 23.31h-.004a10.6 10.6 0 01-5.4-1.48l-.387-.23-4.01 1.05 1.07-3.906-.252-.4a10.53 10.53 0 01-1.617-5.63c0-5.86 4.77-10.63 10.63-10.63 2.84 0 5.51 1.108 7.52 3.117a10.56 10.56 0 013.11 7.52c0 5.862-4.77 10.63-10.63 10.63zm5.83-7.96c-.32-.16-1.89-.933-2.183-1.04-.293-.106-.506-.16-.72.16-.213.32-.826 1.04-1.013 1.253-.187.213-.373.24-.693.08-.32-.16-1.35-.498-2.57-1.586-.95-.847-1.59-1.894-1.777-2.214-.187-.32-.02-.493.14-.653.144-.143.32-.373.48-.56.16-.187.213-.32.32-.533.107-.213.053-.4-.027-.56-.08-.16-.72-1.734-.986-2.374-.26-.624-.523-.54-.72-.55l-.613-.01c-.213 0-.56.08-.853.4-.293.32-1.12 1.094-1.12 2.667 0 1.574 1.146 3.094 1.306 3.307.16.213 2.256 3.446 5.466 4.83.764.33 1.36.527 1.824.674.766.244 1.464.21 2.016.127.615-.092 1.89-.773 2.156-1.52.267-.746.267-1.386.187-1.52-.08-.133-.293-.213-.613-.373z"/>
    </svg>
  );
}
function FloatingCTA() {
  return (
    <a className="fab" href={WHATSAPP} target="_blank" rel="noreferrer" aria-label="Contáctame vía WhatsApp">
      <WhatsAppIcon size={26} />
      <span className="fab-label">Contáctame vía WhatsApp</span>
    </a>
  );
}
function IconBooks() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" aria-hidden="true">
      <rect x="3" y="4" width="4" height="16" rx="0.5" /><rect x="8.5" y="4" width="4" height="16" rx="0.5" />
      <path d="M14.5 5.4l3.9-1 3 14.6-3.9 1z" />
    </svg>
  );
}
function IconChair() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" aria-hidden="true">
      <path d="M6 11V6a2 2 0 012-2h4a2 2 0 012 2v5" /><path d="M5 11h13a2 2 0 012 2v3H5z" />
      <path d="M6 16v4M19 16v4" />
    </svg>
  );
}
function IconOpenBook() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.1" aria-hidden="true">
      <path d="M12 6.5C10.5 5.2 8 4.8 5 5.2v12c3-.4 5.5 0 7 1.3 1.5-1.3 4-1.7 7-1.3v-12c-3-.4-5.5 0-7 1.3z" />
      <path d="M12 6.5v12" />
    </svg>
  );
}
function BurgerIcon({ open }) {
  return (
    <svg className={"burger-svg" + (open ? " is-open" : "")} width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
      <line className="b1" x1="2" y1="6" x2="20" y2="6" />
      <line className="b2" x1="2" y1="11" x2="20" y2="11" />
      <line className="b3" x1="2" y1="16" x2="20" y2="16" />
    </svg>
  );
}

/* ---------- Barra de navegación ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`nav${scrolled ? " scrolled" : ""}${menuOpen ? " menu-open" : ""}`}>
      <div className="nav-inner">
        <a href="#inicio" className="nav-mark" onClick={(e) => { scrollTo(e, "#inicio"); setMenuOpen(false); }}>
          <span className="nav-name">Ignacio Imbarack Garib</span>
          <span className="nav-sub">Psicólogo Clínico&nbsp;·&nbsp;Psicoanálisis</span>
        </a>
        <button className="nav-burger" aria-label="Menú" aria-expanded={menuOpen} onClick={() => setMenuOpen((o) => !o)}>
          <BurgerIcon open={menuOpen} />
        </button>
        <nav className="nav-links">
          {NAV_LINKS.map(([href, label]) => (
            <a key={href} href={href} onClick={(e) => { scrollTo(e, href); setMenuOpen(false); }}>{label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

/* ---------- Bloque numerado (celda del bento) ---------- */
function NumBlock({ n, title, children, to, cta = "Leer más", icon }) {
  return (
    <div className="cell block">
      <div className="block-num">{n}<span className="rule" /></div>
      {icon && <div className="block-icon">{icon}</div>}
      <h3 className="block-title">{title}</h3>
      <div className="block-body">{children}</div>
      {to && <a className="more" href={to} onClick={(e) => scrollTo(e, to)}>{cta} <span className="arrow">→</span></a>}
    </div>
  );
}

/* ---------- Iconos de features del hero ---------- */
function IconAdult() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
      <circle cx="12" cy="8" r="3.4" /><path d="M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6" />
    </svg>
  );
}
function IconMonitor() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
      <rect x="3" y="4.5" width="18" height="12" rx="1.5" /><path d="M9 20h6M12 16.5V20" />
    </svg>
  );
}
function IconDoc() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
      <path d="M7 3h7l4 4v14H7z" /><path d="M14 3v4h4M9.5 12h5M9.5 15.5h5" />
    </svg>
  );
}
function HeroFeature({ icon, children }) {
  return (
    <div className="hf"><span className="hf-ic">{icon}</span><span className="hf-tx">{children}</span></div>
  );
}

/* ---------- Portada: hero ---------- */
function Home() {
  return (
    <section className="home" id="inicio">
      <div className="hero2">
        <div className="hero2-body">
          <div className="block-num">01<span className="rule" /></div>
          <h1 className="hero2-title">
            Un espacio para <span className="accent">comprender</span> aquello que produce malestar hoy.
          </h1>
          <p className="hero2-sub">
            Atención clínica online para adultos desde una perspectiva <i>psicoanalítica</i>.
          </p>
          <a className="btn solid" {...bookProps()}>
            Agendar primera consulta <span className="arrow">→</span>
          </a>
          <div className="hero2-feats">
            <HeroFeature icon={<IconAdult />}>Para adultos<br />(+18 años)</HeroFeature>
            <HeroFeature icon={<IconMonitor />}>Modalidad online<br />en todo Chile</HeroFeature>
            <HeroFeature icon={<IconDoc />}>Boleta para<br />reembolso Isapre</HeroFeature>
          </div>
        </div>
        <div className="hero2-media">
          <img src="/assets/ig-retrato.jpg" alt="Ignacio Imbarack, psicólogo clínico" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Sobre mí (detalle) ---------- */
function About() {
  return (
    <section className="section paper" id="sobre-mi">
      <div className="container about-wrap">
        <div className="about-body">
          <div className="eyebrow">02 · Sobre mí</div>
          <h2>Ignacio Imbarack Garib.</h2>
          <p className="about-meta">Atención online · Chile</p>
          <p>
            Soy psicólogo clínico y trabajo con adultos que atraviesan momentos de malestar
            o confusión, ofreciendo un espacio en el que puedan comprender lo que les ocurre
            y encontrar una nueva forma de vivirlo.
          </p>
          <p>
            A lo largo de mi recorrido me he desempeñado en el ámbito privado, en fundaciones
            y en el sistema público del país, acompañando a personas con historias y motivos
            de consulta muy diversos.
          </p>
          <p>
            Mi práctica clínica se sostiene en la constante formación teórica y en la supervisión
            de mi labor profesional. No trabajo desde pautas prefabricadas ni respuestas genéricas;
            considero que cada historia es única y merece ser escuchada de una manera singular.
          </p>
          <p className="about-invite">Si sientes que es un buen momento para comenzar, te invito a que conversemos.</p>

          <ul className="creds">
            <li><img className="cred-logo" src="/assets/escudo-uc.png" alt="Pontificia Universidad Católica de Chile" /><span>Psicólogo · <strong>Pontificia Universidad Católica de Chile</strong></span></li>
            <li><img className="cred-logo" src="/assets/escudo-uchile.png" alt="Universidad de Chile" /><span>Diplomado en Clínica Psicoanalítica con Adultos · <strong>Universidad de Chile</strong></span></li>
            <li><img className="cred-logo" src="/assets/escudo-uc.png" alt="Pontificia Universidad Católica de Chile" /><span>Diplomado en Psicoanálisis y Salud Mental · <strong>Pontificia Universidad Católica de Chile</strong> <span className="muted">(en curso)</span></span></li>
          </ul>

          <a className="btn dark" {...bookProps()}>
            Agendar primera consulta <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- El psicoanálisis (detalle) ---------- */
function Psychoanalysis() {
  const items = [
    {
      n: "01",
      t: "El malestar y la repetición",
      p: "Existen momentos de nuestra vida en los que aparece una tristeza difícil de explicar, una ansiedad persistente, preocupaciones constantes o una sensación de profunda desconexión. Otras veces surge también una pregunta por aquello que se repite en nuestras vidas: una forma de sentir, pensar o relacionarnos con los demás que vuelve una y otra vez, incluso cuando intentamos cambiar activamente."
    },
    {
      n: "02",
      t: "Lo desconocido en nosotros",
      p: "El psicoanálisis sostiene que no siempre comprendemos el origen de aquello que nos ocurre, pues existen aspectos de nuestra historia, de nuestros deseos y de nuestras experiencias que permanecen fuera de nuestra consciencia e influyen en nuestra manera de sentir, pensar y relacionarnos. Por eso, el trabajo analítico se orienta hacia aquello de nosotros mismos que desconocemos y que se manifiesta en nuestras palabras, elecciones, vínculos y repeticiones."
    },
    {
      n: "03",
      t: "La posibilidad de cambiar",
      p: "Un análisis no busca eliminar rápidamente lo que duele, sino comprender aquello que sostiene el malestar y la forma particular en que cada persona lo experimenta. Cada historia de vida es única; por eso, el trabajo analítico no intenta ofrecer soluciones generales, sino desarrollar un proceso propio con cada consultante que permita abrir nuevas posibilidades en la relación consigo mismo y con su propia historia."
    },
  ];
  return (
    <section className="section sand" id="psicoanalisis">
      <div className="container">
        <div className="head">
          <div className="eyebrow">El psicoanálisis</div>
          <h2>¿Qué puede ofrecer el psicoanálisis?</h2>
          <p className="lede">
            El psicoanálisis es una teoría y un método de trabajo clínico que permite abordar el
            malestar en nuestra vida a través de la palabra y la escucha. Cada proceso se construye
            de manera singular, respetando la historia, las experiencias y las propias preguntas de
            cada persona.
          </p>
        </div>
        <div className="psico-grid">
          {items.map((it) => (
            <div className="psico-item" key={it.n}>
              <div className="block-num">{it.n}<span className="rule" /></div>
              <h3>{it.t}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- La consulta (detalle) ---------- */
function Consulta() {
  return (
    <section className="section paper" id="atencion-online">
      <div className="container">
        <div className="head">
          <div className="eyebrow">Atención online</div>
          <h2>¿Qué esperar de la consulta?</h2>
        </div>
        <div className="consulta-grid">
          <div className="consulta-item">
            <h3>Cuándo consultar</h3>
            <p>
              Muchas veces consultamos movilizados por aspectos de nuestra vida que nos producen
              sufrimiento o insatisfacción. Sin embargo, no es necesario estar atravesando una
              crisis para consultar; algunas personas acuden cuando tienen una pregunta sobre sí
              mismas o porque desean comprender mejor algún aspecto de sus vidas.
            </p>
          </div>
          <div className="consulta-item">
            <h3>Modalidad de atención</h3>
            <p>
              La atención se realiza de manera online mediante videollamada y está dirigida a
              personas adultas, desde los 18 años. Habitualmente las sesiones tienen una frecuencia
              semanal y una duración aproximada de 50 minutos. No obstante, la frecuencia del proceso
              se conversa y acuerda en conjunto, considerando las características y necesidades de
              cada persona.
            </p>
          </div>
          <div className="consulta-item">
            <h3>Aspectos prácticos</h3>
            <p>
              Al finalizar cada sesión se emite una boleta de honorarios, la cual puede presentarse
              en Isapres o seguros complementarios para solicitar el reembolso correspondiente.
            </p>
          </div>
        </div>
        <div className="consulta-cta">
          <a className="btn dark" {...bookProps()}>
            Agendar primera consulta <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contacto ---------- */
function Contact() {
  return (
    <section className="section dark" id="contacto">
      <div className="container contact-grid">
        <div>
          <div className="eyebrow">05 · Contacto</div>
          <h2>Agenda tu primera consulta.</h2>
          <a className="btn light" href={WHATSAPP} target="_blank" rel="noreferrer">
            <WhatsAppIcon /> Contáctame vía WhatsApp <span className="arrow">→</span>
          </a>
        </div>
        <ul className="contact-list">
          <li><span className="k">WhatsApp</span><a href={WHATSAPP} target="_blank" rel="noreferrer">+56 9 8988 8528</a></li>
          <li><span className="k">Email</span><a href={`mailto:${EMAIL}`}>{EMAIL}</a></li>
          <li><span className="k">Instagram</span><a href={INSTAGRAM} target="_blank" rel="noreferrer">@ps.ignacioimbarackg</a></li>
          <li><span className="k">Atención</span><span>Online · Adultos desde los 18 años</span></li>
        </ul>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div>
          <div className="footer-name">Ignacio Imbarack Garib</div>
          <div className="footer-sub">Psicólogo Clínico&nbsp;·&nbsp;Psicoanálisis</div>
        </div>
        <div className="footer-links">
          <a href={INSTAGRAM} target="_blank" rel="noreferrer">Instagram</a>
          <a href={`mailto:${EMAIL}`}>Email</a>
          <a href={WHATSAPP} target="_blank" rel="noreferrer">WhatsApp</a>
        </div>
      </div>
      <div className="container footer-bottom">
        © {new Date().getFullYear()} Ignacio Imbarack Garib · Todos los derechos reservados.
      </div>
    </footer>
  );
}

function App() {
  useBookingIntegrations();
  return (
    <>
      <Nav />
      <Home />
      <About />
      <Psychoanalysis />
      <Consulta />
      <Contact />
      <Footer />
      <FloatingCTA />
    </>
  );
}

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