/* global React, PAOLA_DATA, Reveal, Hero, Marquee, Lightbox */
// Pages: Home, Portfolio, About, Contact

const { useState, useEffect, useRef, useMemo } = React;

/* =========================================================
   HOME
   ========================================================= */
function HomePage({ go, heroCopy, categories = PAOLA_DATA.categories }) {
  return (
    <div className="page-home">
      <Hero go={go} heroCopy={heroCopy} />

      {/* ABOUT TEASER */}
      <section className="section about-teaser">
        <div className="img-col">
          <span className="frame-num">FRAME · 002</span>
          <img src={PAOLA_DATA.about.portrait} alt="Paola García" />
        </div>
        <div className="copy">
          <Reveal>
            <div className="eyebrow">Sobre mí</div>
            <h2>Soy <em>Paola.</em></h2>
          </Reveal>
          <Reveal delay={1}>
            <p>Llevo más de diez años traduciendo en luz los momentos que las familias no quieren olvidar. Sesiones materno-infantiles, recién nacidos, bautizos, primeras comuniones. Cada encuadre es una promesa.</p>
            <p>Trabajo desde nuestro estudio in‑house en Sabaneta, junto a mi familia. Lo nuestro no es un servicio: es una experiencia íntima donde la cámara llega después de la conversación, el café y la complicidad.</p>
            <div className="signature">— con cariño, Paola.</div>
          </Reveal>
        </div>
      </section>

      <Marquee items={[
        'Colecciona momentos de amor',
        'Maternidad',
        'Recién nacidos',
        'Infantil',
        'Familiar',
        'Eventos',
        'Medellín · Sabaneta',
      ]} />

      {/* PORTFOLIO CATEGORIES */}
      <section className="section cats">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow">Portafolio</div>
            <h2>Conoce mis<br/><em>líneas de servicio</em>.</h2>
          </Reveal>
          <Reveal delay={1}>
            <p className="desc">Cada categoría es una colección viva. Galerías inmersivas, con la luz y la temperatura de cada etapa. Elige por dónde quieres empezar.</p>
          </Reveal>
        </div>
        <div>
          {[
            { idx:'01', name:'Maternidad', desc:'La espera más hermosa de tu vida, convertida en un momento de amor al que podrás volver siempre.' },
            { idx:'02', name:'Recién nacidos', desc:'Sus primeros días, sus detalles más pequeños y el amor más inmenso capturados con delicadeza.' },
            { idx:'03', name:'Infantil', desc:'Una etapa que cambia demasiado rápido y merece ser guardada en recuerdos llenos de vida y ternura.' },
            { idx:'04', name:'Familiar', desc:'Abrazos, miradas y conexiones reales que cuentan la historia de lo que son juntos.' },
            { idx:'05', name:'Eventos especiales', desc:'Celebraciones que pasan en un instante, pero se convierten en recuerdos para toda la vida.' },
          ].map((c) => (
            <Reveal key={c.idx}>
              <div className="cat-row" onClick={()=>go('portfolio')}>
                <div className="idx">{c.idx}</div>
                <div className="name">{c.name}</div>
                <div className="desc">{c.desc}</div>
                <div className="more">Ver colección →</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* EXPERIENCE */}
      <section className="section experience">
        <div className="section-head">
          <Reveal>
            <div className="eyebrow" style={{color:'var(--c-golden)'}}>Todo lo que pasa antes de</div>
            <h2>Una <em>experiencia</em><br/>in situ.</h2>
          </Reveal>
          <Reveal delay={1}>
            <p className="desc">Conceptualización, maquillaje, peinado, escenografía, dirección de arte — una sesión con nosotras dura horas. Porque queremos que cuando levantes el álbum, vuelvas a vivir toda la experiencia.</p>
          </Reveal>
        </div>
        <div className="exp-grid">
          {PAOLA_DATA.experience.map((x) => (
            <Reveal key={x.num} className={`exp-card ${x.cls}`}>
              <div className="ph" style={{ backgroundImage: `url(${x.img})` }}></div>
              <div className="meta">
                <div className="num">N° {x.num}</div>
                <div className="ttl" dangerouslySetInnerHTML={{
                  __html: x.ttl.replace(x.em, `<em>${x.em}</em>`)
                }} />
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="cta-final" style={{ backgroundImage: `url(${PAOLA_DATA.about.landscape})` }}>
        <div className="inner">
          <Reveal>
            <h2>Te espero en mi studio para que juntos<br/><em>coleccionemos</em> momentos de amor.</h2>
            <button className="btn btn-light" style={{marginTop:'64px'}} onClick={()=>go('contact')}>
              <span className="arr"></span>Agenda tu sesión
            </button>
          </Reveal>
        </div>
      </section>

    </div>
  );
}

/* =========================================================
   PORTFOLIO
   ========================================================= */
function PortfolioPage({ initialCat = 'all', gallery = PAOLA_DATA.gallery, categories = PAOLA_DATA.categories }) {
  const [cat, setCat] = useState(initialCat);
  const [lb, setLb] = useState(null);
  const masonryRef = useRef(null);
  useEffect(() => { setCat(initialCat); }, [initialCat]);

  // Marca como cargadas las imágenes ya en caché (no disparan onLoad)
  useEffect(() => {
    if (!masonryRef.current) return;
    masonryRef.current.querySelectorAll('img').forEach(img => {
      if (img.complete && img.naturalWidth > 0) {
        const tile = img.closest('.tile');
        if (tile) tile.classList.add('img-ok');
      }
    });
  });

  const filtered = useMemo(() =>
    cat === 'all' ? gallery : gallery.filter(g => g.cat === cat),
    [cat, gallery]
  );

  const cats = useMemo(() => {
    const map = {};
    categories.forEach(c => map[c.id] = c.name);
    return map;
  }, [categories]);

  const activeCat = useMemo(() =>
    categories.find(c => c.id === cat),
    [cat, categories]
  );

  return (
    <div className="page-portfolio">
      <section className="pf-hero">
        <Reveal>
          <div className="eyebrow">Portafolio · 2026</div>
          <h1>Una <em>colección</em><br/>de momentos de amor.</h1>
        </Reveal>
        <Reveal delay={1}>
          <p className="lead">Conoce un poco de mi portafolio: resultados de sesiones mágicas que cuentan una historia y conectan a nivel emocional.</p>
        </Reveal>
      </section>

      <div className="pf-filters">
        <button className={cat==='all'?'active':''} onClick={()=>setCat('all')}>Todas</button>
        {categories.map(c => (
          <button key={c.id} className={cat===c.id?'active':''} onClick={()=>setCat(c.id)}>{c.name}</button>
        ))}
      </div>

      <div className="masonry" ref={masonryRef}>
        {filtered.map((g, i) => (
          <div key={g.src+i} className="tile" onClick={()=>setLb(i)}>
            <img
              src={g.src}
              alt={g.alt || ''}
              title={g.title || undefined}
              loading="lazy"
              onLoad={(e) => {
                const tile = e.currentTarget.closest('.tile');
                if (tile) tile.classList.add('img-ok');
              }}
              onError={(e) => {
                const tile = e.currentTarget.closest('.tile');
                if (tile) tile.style.display = 'none';
              }}
            />
            <div className="label">{g.label} · {cats[g.cat] || ''}</div>
          </div>
        ))}
      </div>

      {/* PACKAGES — siempre visibles, todos los paquetes sin depender de fotos */}
      <section className="packages-wrap" id="packages-wrap">
        <div className="pkg-intro">
          <Reveal>
            <div className="eyebrow" style={{color:'var(--c-golden)'}}>Inversión</div>
            <h2>Elige tu <em>paquete</em><br/>perfecto.</h2>
          </Reveal>
          <Reveal delay={1}>
            <p>Cada paquete incluye fotos impresas en papel fotográfico 20×25 cm y archivos digitales en alta resolución. Separación de cita con el 50%.</p>
          </Reveal>
        </div>
        <PkgNav />
        {PAOLA_DATA.categories.filter(c => c.packages?.length).map(c => (
          <PackagesSection key={c.id} cat={c} compact />
        ))}
      </section>

      {lb !== null && (
        <Lightbox
          items={filtered}
          index={lb}
          onClose={()=>setLb(null)}
          onPrev={()=>setLb((lb - 1 + filtered.length) % filtered.length)}
          onNext={()=>setLb((lb + 1) % filtered.length)}
        />
      )}
    </div>
  );
}

function PkgNav() {
  const cats = PAOLA_DATA.categories.filter(c => c.packages?.length);
  const [active, setActive] = React.useState(null);
  const navRef = React.useRef(null);

  React.useEffect(() => {
    const observers = [];
    cats.forEach(c => {
      const el = document.getElementById(`paquetes-${c.id}`);
      if (!el) return;
      const obs = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setActive(c.id);
            const btn = navRef.current?.querySelector(`[data-id="${c.id}"]`);
            btn?.scrollIntoView({ block: 'nearest', inline: 'center' });
          }
        },
        { rootMargin: '-30% 0px -60% 0px' }
      );
      obs.observe(el);
      observers.push(obs);
    });
    return () => observers.forEach(o => o.disconnect());
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(`paquetes-${id}`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <nav className="pkg-nav" ref={navRef}>
      <div className="pkg-nav-inner">
        {cats.map(c => (
          <button
            key={c.id}
            data-id={c.id}
            className={'pkg-nav-btn' + (active === c.id ? ' active' : '')}
            onClick={() => scrollTo(c.id)}
          >
            <span className="pkg-nav-idx">{c.idx}</span>
            {c.name}
          </button>
        ))}
      </div>
    </nav>
  );
}

function PackagesSection({ cat, compact = false }) {
  return (
    <section className={`packages ${compact?'compact':''}`} id={`paquetes-${cat.id}`}>
      <div className="packages-head">
        <Reveal>
          <div className="eyebrow">Inversión · {cat.name}</div>
          <h2>Paquetes <em>{cat.name.toLowerCase()}</em></h2>
        </Reveal>
        <Reveal delay={1}>
          <p className="desc">{cat.desc}</p>
          {cat.note && <p className="pkg-note">{cat.note}</p>}
        </Reveal>
      </div>

      {cat.packages.map((group, gi) => (
        <div className="pkg-group" key={gi}>
          <Reveal>
            <h3 className="pkg-group-title">
              <span className="dot">·</span>
              {group.group}
            </h3>
          </Reveal>
          <div className="pkg-grid">
            {group.tiers.map((t, ti) => (
              <Reveal key={ti} delay={Math.min(ti+1, 3)} className={`pkg-card tier-${t.tier.toLowerCase().replace(/\s+/g,'-').replace(/[óú]/g,'o')}`}>
                <div className="pkg-tier">{t.tier}</div>
                <div className="pkg-desc">{t.desc}</div>
                <div className="pkg-price">
                  <span className="amt">{PAOLA_DATA.fmt(t.price)}</span>
                  <span className="cur">COP</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      ))}

      <div className="packages-cta">
        <a className="btn" href="#contact" onClick={(e)=>{e.preventDefault(); window.location.hash='contact'; window.scrollTo({top:0});}}>
          <span className="arr"></span>Reserva tu {cat.name.toLowerCase()}
        </a>
      </div>
    </section>
  );
}

/* =========================================================
   ABOUT
   ========================================================= */
function AboutPage({ go }) {
  return (
    <div className="about-page">
      <section className="about-hero">
        <Reveal>
          <div className="eyebrow">Sobre mí</div>
          <h1>Soy <em>Paola García</em>,<br/>storyteller visual.</h1>
        </Reveal>
        <Reveal delay={1}>
          <p className="intro">"Estoy convencida de que a través de la fotografía podemos inmortalizar recuerdos. Hace más de 18 años decidí dedicar mi vida a esto desde mi propia experiencia de ser mamá."</p>
        </Reveal>
      </section>

      <div className="about-portrait">
        <img src={PAOLA_DATA.about.landscape} alt="Paola en el studio" />
      </div>

      <section className="about-body">
        <Reveal>
          <h2>Antes de ser fotógrafa,<br/>soy <em>mamá</em>.</h2>
        </Reveal>
        <Reveal delay={1} className="col">
          <p>Tengo dos hijos: Tatiana, quien me motivó a estudiar la carrera de fotografía, e Isaac, quien me encaminó en mi especialidad. Y fue mi maternidad la que me enseñó que el tiempo sí pasa demasiado rápido.</p>
          <p>Empecé tomando fotos de mi propia historia: de una espera que quería recordar, de momentos cotidianos que parecían simples — y entendí que la fotografía tiene un poder inmenso. Congelar en el tiempo los instantes llenos de amor es crear para siempre una forma de volver a ellos.</p>
          <p>Con el tiempo, esa necesidad de coleccionar el amor se convirtió en mi profesión, en mi pasión y también en un lugar: mi studio, creado desde el amor, la calma y la sensibilidad de quien también reconoce la importancia de coleccionar el amor en fotografías.</p>
          <p>Hoy acompaño a otras mamás y familias a conservar lo que un día van a extrañar: su primera pancita, los primeros días de vida de sus hijos, las risas, los abrazos, las etapas que pasan en silencio mientras crecen frente a nosotros.</p>
          <p>Creo en las fotografías que se sienten años después. En los recuerdos que se heredan. Y en coleccionar momentos de amor como la manera más bonita de permanecer.</p>
        </Reveal>
      </section>

      <section className="about-values">
        <div className="grid">
          {[
            { num: '01', ttl: 'Confiable', desc: 'Más de 18 años de respaldo profesional. Sé exactamente cómo cargar a tu bebé, calmarlo en mitad de la sesión y devolvértelo dormido.' },
            { num: '02', ttl: 'Sensible',  desc: 'Cada familia tiene su tono. Mi trabajo empieza escuchando — la sesión es la consecuencia, no el inicio.' },
            { num: '03', ttl: 'Poética',   desc: 'Las fotos cuentan historias. Te entrego un álbum, pero también un relato escrito sobre lo que vivimos ese día.' },
          ].map((v, i) => (
            <Reveal key={v.num} delay={i+1} className="v">
              <div className="num">{v.num}</div>
              <h3>{v.ttl}</h3>
              <p>{v.desc}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="about-timeline">
        <Reveal><h2>Una <em>línea de tiempo</em> hecha de personas.</h2></Reveal>
        {PAOLA_DATA.timeline.map(t => (
          <Reveal key={t.year} className="tl-row">
            <div className="year">{t.year}</div>
            <div className="ttl">{t.ttl}</div>
            <div className="desc">{t.desc}</div>
          </Reveal>
        ))}
      </section>

      <section className="cta-final" style={{ backgroundImage: `url(${PAOLA_DATA.hero.alt})`, height: '70vh', minHeight: 500 }}>
        <div className="inner">
          <Reveal>
            <h2>¿Listo para empezar<br/>a <em>coleccionar</em> momentos de amor?</h2>
            <button className="btn btn-light" onClick={()=>go('contact')}>
              <span className="arr"></span>Hablemos
            </button>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

/* =========================================================
   CONTACT
   ========================================================= */
function ContactPage({ categories }) {
  const c = PAOLA_DATA.contact;
  // Solo categorías con paquetes definidos
  const cats = PAOLA_DATA.categories.filter(function(cat) { return cat.packages && cat.packages.length > 0; });
  const tipos = cats.map(function(cat) { return cat.name; });
  const firstTipo = tipos.length > 0 ? tipos[0] : 'Maternidad';
  const [form, setForm] = useState({ name: '', email: '', phone: '', tipo: firstTipo, mensaje: '' });
  const [errors, setErrors] = useState({});
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [serverErr, setServerErr] = useState('');

  const update = (k) => (e) => setForm(Object.assign({}, form, { [k]: e.target.value }));

  function validate() {
    const errs = {};
    if (!form.name || form.name.trim().length < 2) errs.name = 'Escribe tu nombre completo';
    if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Email no válido';
    if (!form.phone || !/^\+?[\d\s\-()\\.]{7,20}$/.test(form.phone.trim())) errs.phone = 'Celular no válido';
    if (!form.tipo) errs.tipo = 'Elige el tipo de sesión';
    if (form.mensaje.length > 3000) errs.mensaje = 'Máximo 3000 caracteres';
    return errs;
  }

  function handleSubmit(e) {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    setSending(true);
    setServerErr('');
    const body = new FormData();
    body.append('name', form.name.trim());
    body.append('email', form.email.trim());
    body.append('phone', form.phone.trim());
    body.append('tipo', form.tipo);
    body.append('mensaje', form.mensaje.trim());
    fetch('/api/contact.php', { method: 'POST', body: body })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        setSending(false);
        if (data.ok) {
          setSent(true);
        } else {
          setServerErr(data.error || 'Error al enviar. Intenta de nuevo.');
        }
      })
      .catch(function() {
        setSending(false);
        setServerErr('Error de conexión. Intenta de nuevo.');
      });
  }

  const f = (err) => 'field' + (err ? ' field-err' : '');

  return (
    <div className="contact-page">
      <div className="contact-left">
        <Reveal>
          <div className="eyebrow">Contacto</div>
          <h1>Antes de la sesión,<br/><em>la intención.</em></h1>
        </Reveal>
        <Reveal delay={1}>
          <p className="lead">Cuéntame qué etapa estás viviendo y diseñaremos una experiencia pensada para ti, con asesoría, conceptualización y cada detalle cuidado con sensibilidad. Respondo personalmente en menos de 1 hora.</p>
        </Reveal>
        <div className="contact-info">
          <div>
            <div className="lbl">Studio</div>
            <div className="val">{c.studio}</div>
          </div>
          <div>
            <div className="lbl">Horario</div>
            <div className="val">{c.horario}</div>
          </div>
          <div>
            <div className="lbl">Correo</div>
            <a className="val" href={`mailto:${c.email}`}>{c.email}</a>
          </div>
          <div>
            <div className="lbl">WhatsApp</div>
            <a className="val" href={`https://wa.me/57${c.whatsapp}`} target="_blank" rel="noreferrer">{c.whatsappPretty}</a>
          </div>
          <div className="contact-info-wide">
            <div className="lbl">Instagram</div>
            <a className="val" href={c.instagramUrl} target="_blank" rel="noreferrer">@{c.instagram} ↗</a>
          </div>
        </div>
      </div>

      <div className="contact-right">
        <div className="bg-img" style={{ backgroundImage: `url(${c.image || PAOLA_DATA.hero.main})` }}></div>
        {sent ? (
          <div className="contact-sent">
            Gracias por escribir. <br/>
            Te respondo a {form.email} en menos de 1 hora. Mientras tanto, prepara un café — vale la pena.
            <div className="small">— Paola</div>
          </div>
        ) : (
          <form onSubmit={handleSubmit} noValidate>
            {serverErr && <div className="contact-server-err">{serverErr}</div>}
            <div className={f(errors.name)}>
              <label>Tu nombre</label>
              <input type="text" value={form.name} onChange={update('name')} placeholder="María Restrepo" />
              {errors.name && <div className="field-msg">{errors.name}</div>}
            </div>
            <div className={f(errors.email)}>
              <label>Email</label>
              <input type="email" value={form.email} onChange={update('email')} placeholder="maria@email.com" />
              {errors.email && <div className="field-msg">{errors.email}</div>}
            </div>
            <div className={f(errors.phone)}>
              <label>Celular</label>
              <input type="tel" value={form.phone} onChange={update('phone')} placeholder="+57 300 000 0000" />
              {errors.phone && <div className="field-msg">{errors.phone}</div>}
            </div>
            <div className={f(errors.tipo)}>
              <label>Tipo de sesión</label>
              <select value={form.tipo} onChange={update('tipo')}>
                {tipos.map(function(t) { return <option key={t} value={t}>{t}</option>; })}
              </select>
              {errors.tipo && <div className="field-msg">{errors.tipo}</div>}
            </div>
            <div className={f(errors.mensaje)}>
              <label>Cuéntame</label>
              <textarea value={form.mensaje} onChange={update('mensaje')} placeholder="Estoy en mi semana 32 y queremos algo íntimo…" />
              {errors.mensaje && <div className="field-msg">{errors.mensaje}</div>}
            </div>
            <button type="submit" disabled={sending} className="btn btn-light submit">
              <span className="arr"></span>{sending ? 'Enviando…' : 'Enviar mensaje'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, PortfolioPage, AboutPage, ContactPage });