// Page components — Home, Work, Project, About, Press, Contact
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ---------- HOME ----------
function HomePage({ lang, navigate, tweaks }) {
  const [heroIdx, setHeroIdx] = useStateP(0);
  const heroImages = PROJECTS.filter(p => p.featured);
  useEffectP(() => {
    const iv = setInterval(() => setHeroIdx(i => (i + 1) % heroImages.length), 5000);
    return () => clearInterval(iv);
  }, [heroImages.length]);
  const hero = heroImages[heroIdx];

  // Parallax scroll
  const [scrollY, setScrollY] = useStateP(0);
  useEffectP(() => {
    const onS = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  const featured = PROJECTS.filter(p => p.featured);

  // For the marquee scales
  const scales = ['Paisaje','Edificio','Interior','Objeto','Landscape','Building','Interior','Object'];

  return (
    <div className="page-home">
      {/* ============== IMMERSIVE HERO ============== */}
      <section className="hero-v2">
        <div className="hero-v2-bg">
          {heroImages.map((p, i) => (
            <div key={p.id} className={'hero-v2-img ' + (i === heroIdx ? 'on' : '')}
                 style={{ backgroundImage: `url(${p.cover})`, transform: `scale(${1.06 - (i===heroIdx ? scrollY*0.0001 : 0)}) translateY(${i===heroIdx ? scrollY*0.25 : 0}px)` }} />
          ))}
          <div className="hero-v2-scrim" />
          <div className="hero-v2-vignette" />
        </div>

        <div className="hero-v2-top">
          <div className="mono tiny hero-v2-top-r">
            <span>EST. 2017</span>
            <span className="sep">·</span>
            <span>{new Date().getFullYear()}</span>
          </div>
        </div>

        <div className="hero-v2-title-wrap">
          <h1 className="hero-v2-title serif">
            <span className="line l1">{lang==='es'?'Diseño':'Design'}</span>
            <span className="line l2"><em>&amp;</em></span>
            <span className="line l3">{lang==='es'?'Arquitectura.':'Architecture.'}</span>
          </h1>
        </div>

        <div className="hero-v2-footer">
          <div className="hero-v2-caption">
            <div className="mono tiny muted">{String(heroIdx+1).padStart(2,'0')} / {String(heroImages.length).padStart(2,'0')}</div>
            <div className="hero-v2-caption-title serif">{hero.title}</div>
            <div className="mono tiny muted">{hero.location}</div>
          </div>
          <div className="hero-v2-pager">
            {heroImages.map((p, i) => (
              <button key={p.id} className={'hero-v2-dot ' + (i===heroIdx?'on':'')} onClick={()=>setHeroIdx(i)} aria-label={p.title}>
                <span className="bar" />
              </button>
            ))}
          </div>
          <div className="hero-v2-scroll">
            <span className="mono tiny">{t(COPY.hero.scroll, lang)}</span>
            <span className="scroll-line" />
          </div>
        </div>
      </section>

      {/* ============== MARQUEE OF SCALES ============== */}
      <section className="marquee">
        <div className="marquee-track">
          {[...scales, ...scales, ...scales].map((s, i) => (
            <span key={i} className="marquee-item serif">
              {s}<span className="marquee-sep">◆</span>
            </span>
          ))}
        </div>
      </section>

      {/* ============== STATEMENT + FIGURES ============== */}
      <section className="statement">
        <div className="container">
          <div className="statement-grid statement-grid-solo">
            <Reveal className="statement-left">
              <div className="mono tiny muted">01 · {lang==='es'?'El estudio':'The studio'}</div>
              <h2 className="statement-heading serif">
                {lang==='es'
                  ? (<>Un estudio de arquitectura<br/>en el Caribe colombiano.</>)
                  : (<>An architecture studio<br/>on the Colombian Caribbean.</>)}
              </h2>
              <p className="statement-body">
                {lang==='es'
                  ? 'Trabajamos en cuatro escalas —paisaje, edificio, interior y objeto— y entendemos el detalle como el lugar donde se define el proyecto.'
                  : 'We work across four scales — landscape, building, interior, and object — and understand the detail as the place where a project is decided.'}
              </p>
            </Reveal>
            <div className="statement-right">
              {[
                { v: '50+', l: lang==='es'?'Proyectos entregados':'Delivered projects' },
                { v: '180k', u: 'm²', l: lang==='es'?'Área construida':'Built area' },
                { v: '08', l: lang==='es'?'Años de práctica':'Years of practice' },
                { v: '04', l: lang==='es'?'Escalas de trabajo':'Scales of practice' },
              ].map((f, i) => (
                <Reveal key={i} delay={i*80} className="fig">
                  <div className="fig-val serif">{f.v}{f.u && <span className="fig-unit">{f.u}</span>}</div>
                  <div className="mono tiny muted">{f.l}</div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============== SCALES — BOLD HORIZONTAL ============== */}
      <section className="scales-v2">
        <div className="container">
          <Reveal>
            <div className="scales-v2-head">
              <div className="mono tiny muted">02 · {t(COPY.sections.scales, lang)}</div>
              <h2 className="serif scales-v2-title">
                {lang==='es' ? (<>Del <em>objeto</em> al <em>paisaje.</em></>) : (<>From the <em>object</em> to the <em>landscape.</em></>)}
              </h2>
              <p className="scales-v2-sub">{t(COPY.sections.scalesBody, lang)}</p>
            </div>
          </Reveal>
        </div>
        <div className="scales-v2-rows">
          {['paisaje','edificio','interior','objeto'].map((k, i) => {
            const firstInCat = PROJECTS.find(p => p.category === k);
            const count = PROJECTS.filter(p => p.category === k).length;
            return (
              <a key={k} href="#" className="scale-row"
                 onClick={(e) => { e.preventDefault(); navigate({ page: 'work', filter: k }); }}>
                <div className="scale-row-img" style={{ backgroundImage: `url(${firstInCat.cover})` }} />
                <div className="scale-row-inner container">
                  <div className="scale-row-num mono tiny">0{i+1} / 04</div>
                  <div className="scale-row-title serif">{t(COPY.scales[k].title, lang)}</div>
                  <div className="scale-row-desc">{t(COPY.scales[k].body, lang)}</div>
                  <div className="scale-row-meta mono tiny">
                    <span>{count.toString().padStart(2,'0')} {lang==='es'?'proyectos':'projects'}</span>
                    <span className="scale-row-arrow">→</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </section>

      {/* SELECTED WORK — editorial grid */}
      <section className="section selected-section">
        <div className="container">
          <Reveal>
            <div className="section-header">
              <div className="mono tiny muted">003 · {t(COPY.sections.selected, lang)}</div>
              <h2 className="serif section-title">{t(COPY.sections.selected, lang)}.</h2>
            </div>
          </Reveal>

          <div className="selected-grid">
            {featured.map((p, i) => {
              // varying layouts for editorial rhythm
              const layouts = ['large', 'portrait', 'landscape', 'portrait', 'landscape', 'large'];
              const layout = layouts[i % layouts.length];
              return (
                <Reveal key={p.id} delay={(i % 2) * 80} className={'selected-item layout-' + layout}>
                  <a href="#" className="selected-link" onClick={(e) => { e.preventDefault(); navigate({ page: 'project', id: p.id }); }}>
                    <div className="selected-img-wrap">
                      <div className="selected-img" style={{ backgroundImage: `url(${p.cover})` }} />
                      <div className="selected-overlay">
                        <span className="mono tiny">{t(COPY.sections.viewProject, lang)} →</span>
                      </div>
                    </div>
                    <div className="selected-caption">
                      <div className="selected-cap-left">
                        <div className="mono tiny muted">0{String(i+1)} · {t(COPY.categories[p.category], lang).toUpperCase()}</div>
                        <div className="serif selected-title">{p.title}</div>
                      </div>
                      <div className="selected-cap-right mono tiny muted">
                        {p.location}
                      </div>
                    </div>
                  </a>
                </Reveal>
              );
            })}
          </div>

          <Reveal className="view-all-wrap">
            <button className="btn-line" onClick={() => navigate({ page: 'work' })}>
              <span className="mono">{t(COPY.sections.viewAll, lang)}</span>
              <span className="arrow">→</span>
            </button>
          </Reveal>
        </div>
      </section>

      {/* FULL-BLEED BANNER */}
      <section className="banner">
        <div className="banner-img" style={{ backgroundImage: `url(${PROJECTS.find(p => p.id === 'ecoparque').cover})` }} />
        <img src="https://cdn.prod.website-files.com/640376c0a141a9d836dab029/6404eb06f5eb58cf9065eac5_LOGO%20DEB%20BLANCO-p-500.png" alt="" className="banner-icon" aria-hidden="true" />
        <div className="banner-overlay">
          <Reveal>
            <div className="mono tiny">{lang === 'es' ? 'Desde 2017' : 'Since 2017'}</div>
            <div className="serif banner-text">
              {lang === 'es'
                ? 'Construimos en el trópico. Con la precisión del detalle y la paciencia del territorio.'
                : 'We build in the tropics. With the precision of the detail and the patience of the territory.'}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

// ---------- WORK INDEX ----------
function WorkPage({ lang, navigate, initialFilter }) {
  const [filter, setFilter] = useStateP(initialFilter || 'all');
  useEffectP(() => { if (initialFilter) setFilter(initialFilter); }, [initialFilter]);

  const items = useMemoP(() => filter === 'all' ? PROJECTS : PROJECTS.filter(p => p.category === filter), [filter]);
  const cats = ['all','paisaje','edificio','interior','objeto'];

  return (
    <div className="page-work">
      <section className="page-header">
        <div className="container">
          <Reveal>
            <div className="mono tiny muted">{t(COPY.sections.allWork, lang)} · {PROJECTS.length}</div>
            <h1 className="serif page-title">{t(COPY.sections.allWork, lang)}.</h1>
          </Reveal>
          <div className="filter-bar">
            {cats.map(c => (
              <button key={c} className={'filter-btn ' + (filter === c ? 'on' : '')} onClick={() => setFilter(c)}>
                <span>{t(COPY.categories[c], lang)}</span>
                <span className="mono tiny">
                  {c === 'all' ? PROJECTS.length : PROJECTS.filter(p => p.category === c).length}
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section work-grid-section">
        <div className="container">
          <div className="work-grid">
            {items.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 60}>
                <a href="#" className="work-item" onClick={(e) => { e.preventDefault(); navigate({ page: 'project', id: p.id }); }}>
                  <div className="work-img" style={{ backgroundImage: `url(${p.cover})` }}>
                    <div className="work-img-hover">
                      <span className="mono tiny">{t(COPY.sections.viewProject, lang)} →</span>
                    </div>
                  </div>
                  <div className="work-meta">
                    <div>
                      <div className="mono tiny muted">{t(COPY.categories[p.category], lang).toUpperCase()}</div>
                      <div className="serif work-title">{p.title}</div>
                    </div>
                    <div className="mono tiny muted">{p.location}</div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- PROJECT CASE STUDY ----------
function ProjectPage({ lang, navigate, id }) {
  const project = PROJECTS.find(p => p.id === id) || PROJECTS[0];
  const next = PROJECTS[(PROJECTS.indexOf(project) + 1) % PROJECTS.length];
  const related = PROJECTS.filter(p => p.category === project.category && p.id !== project.id).slice(0, 3);

  return (
    <div className="page-project">
      <section className="project-hero">
        {project.hero_video ? (
          <video className="project-hero-video" src={project.hero_video} poster={project.cover} autoPlay muted loop playsInline />
        ) : (
          <div className="project-hero-img" style={{ backgroundImage: `url(${project.cover})` }} />
        )}
        <div className="project-hero-overlay" />
      </section>

      <section className="section project-intro">
        <div className="container">
          <Reveal>
            <div className="project-back">
              <a href="#" onClick={(e)=>{e.preventDefault(); navigate({page:'work'});}} className="mono tiny">
                ← {t(COPY.project.back, lang)}
              </a>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div className="mono tiny muted">{t(COPY.categories[project.category], lang).toUpperCase()}</div>
            <h1 className="serif project-title">{project.title}</h1>
          </Reveal>

          <div className="project-meta-grid">
            {[
              { label: t(COPY.project.location, lang), value: project.location },
              ...(project.area ? [{ label: t(COPY.project.area, lang), value: project.area }] : []),
              { label: t(COPY.project.status, lang), value: project.status },
              ...(project.client ? [{ label: t(COPY.project.client, lang), value: project.client }] : []),
              ...(project.collaborator ? [{ label: lang==='es'?'En colaboración con':'In collaboration with', value: project.collaborator }] : []),
              { label: t(COPY.project.category, lang), value: t(COPY.categories[project.category], lang) },
            ].filter(m => m.value).map((m, i) => (
              <Reveal key={m.label} delay={i * 50} className="project-meta">
                <div className="mono tiny muted">{m.label}</div>
                <div className="project-meta-val">{m.value}</div>
              </Reveal>
            ))}
          </div>

          <Reveal>
            <div className="project-summary-grid">
              <div className="mono tiny muted">{lang==='es'?'Sinopsis':'Synopsis'}</div>
              <p className="serif project-summary">
                {lang === 'es' ? project.summary_es : project.summary_en}
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* images */}
      <section className="project-gallery">
        <div className="container-wide">
          {project.images.map((src, i) => (
            <Reveal key={i} className={'project-gallery-item ' + (i % 2 === 0 ? 'full' : 'inset')}>
              <img src={src} alt={project.title + ' ' + (i+1)} />
              <div className="mono tiny muted project-gallery-cap">
                Fig. {String(i+1).padStart(2,'0')} · {project.title}
              </div>
            </Reveal>
          ))}
          {/* additional image from same project or cover variants */}
          <Reveal className="project-gallery-item full">
            <img src={project.cover} alt="" />
            <div className="mono tiny muted project-gallery-cap">
              Fig. {String(project.images.length + 1).padStart(2,'0')} · {project.title}
            </div>
          </Reveal>
        </div>
      </section>

      {/* tags & body */}
      <section className="section project-body-section">
        <div className="container">
          <div className="project-body-grid">
            <div>
              <div className="mono tiny muted">{lang==='es'?'Temas':'Topics'}</div>
              <div className="project-tags">
                {project.tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
              </div>
            </div>
            <div>
              <div className="mono tiny muted">{lang==='es'?'Texto del proyecto':'Project text'}</div>
              <p className="project-body">
                {lang === 'es' ? project.summary_es : project.summary_en}
              </p>
              <p className="project-body">
                {lang === 'es'
                  ? 'El proyecto parte de una lectura detallada del lugar: su clima, su topografía, los ritmos de sus habitantes. Cada decisión busca reforzar esos patrones existentes y traducirlos en una arquitectura contemporánea, precisa y habitable.'
                  : 'The project begins with a detailed reading of the place: its climate, topography, and the rhythms of its inhabitants. Every decision aims to reinforce those existing patterns and translate them into a contemporary, precise, and inhabitable architecture.'}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* related */}
      {related.length > 0 && (
        <section className="section related-section">
          <div className="container">
            <Reveal>
              <div className="section-header">
                <div className="mono tiny muted">{lang==='es'?'También en':'Also in'} {t(COPY.categories[project.category], lang)}</div>
                <h2 className="serif section-title">{lang==='es'?'Proyectos relacionados':'Related projects'}.</h2>
              </div>
            </Reveal>
            <div className="related-grid">
              {related.map((p, i) => (
                <Reveal key={p.id} delay={i * 60}>
                  <a href="#" className="related-item" onClick={(e)=>{e.preventDefault(); navigate({page:'project', id: p.id});}}>
                    <div className="related-img" style={{ backgroundImage: `url(${p.cover})` }} />
                    <div className="related-meta">
                      <div className="mono tiny muted">{p.location}</div>
                      <div className="serif related-title">{p.title}</div>
                    </div>
                  </a>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* next */}
      <section className="next-project" onClick={() => navigate({page:'project', id: next.id})}>
        <div className="next-img" style={{ backgroundImage: `url(${next.cover})` }} />
        <div className="next-content">
          <div className="mono tiny">{t(COPY.project.next, lang)} →</div>
          <div className="serif next-title">{next.title}</div>
          <div className="mono tiny muted">{next.location}</div>
        </div>
      </section>
    </div>
  );
}

// ---------- ABOUT ----------
function AboutPage({ lang }) {
  return (
    <div className="page-about">
      <section className="section about-hero-section">
        <div className="container">
          <Reveal>
            <div className="mono tiny muted">{t(COPY.sections.about, lang)}</div>
            <h1 className="serif page-title about-title">
              {t(COPY.about.title, lang).split('\n').map((l,i)=><span key={i}>{l}<br/></span>)}
            </h1>
          </Reveal>
        </div>
      </section>

      <section className="section about-body-section">
        <div className="container">
          <div className="about-grid">
            <Reveal>
              <div className="mono tiny muted">001 · {lang==='es'?'Filosofía':'Philosophy'}</div>
              <p className="about-lead serif">{t(COPY.about.body1, lang)}</p>
            </Reveal>
            <Reveal delay={100}>
              <p className="about-body">{t(COPY.about.body2, lang)}</p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="about-image-section">
        <Reveal>
          <img src={OTHER_CDN + '6449b9587f881be45669c0f9_Portada2.jpg'} alt="" className="about-image" />
        </Reveal>
      </section>

      <section className="section stats-section">
        <div className="container">
          <div className="stats-grid">
            {[
              { v: '2017', l: t(COPY.about.founded, lang) },
              { v: '50+', l: t(COPY.about.projects_count, lang) },
              { v: '180k m²', l: t(COPY.about.built_area, lang) },
              { v: '15', l: lang==='es'?'Personas en el estudio':'People at the studio' },
            ].map((s,i) => (
              <Reveal key={i} delay={i*80} className="stat">
                <div className="serif stat-val">{s.v}</div>
                <div className="mono tiny muted">{s.l}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section team-section">
        <div className="container">
          <Reveal>
            <div className="section-header">
              <div className="mono tiny muted">002 · {t(COPY.sections.team, lang)}</div>
              <h2 className="serif section-title">{t(COPY.sections.team, lang)}.</h2>
            </div>
          </Reveal>

          <div className="directors-grid">
            {TEAM.directors.map((d, i) => (
              <Reveal key={d.name} delay={i*100}>
                <div className="director">
                  <div className="director-img-wrap">
                    <img src={d.photo} alt={d.name} />
                  </div>
                  <div className="director-info">
                    <div className="mono tiny muted">{lang==='es'?d.role_es:d.role_en}</div>
                    <h3 className="serif director-name">{d.name}</h3>
                    <p className="director-bio">{lang==='es'?d.bio_es:d.bio_en}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>

        </div>
      </section>
    </div>
  );
}

// ---------- PRESS ----------
function PressPage({ lang, navigate }) {
  const featured = PUBLICATIONS[0];
  const rest = PUBLICATIONS.slice(1);
  return (
    <div className="page-press">
      <section className="page-header">
        <div className="container">
          <Reveal>
            <div className="mono tiny muted">{t(COPY.sections.press, lang)} · {PUBLICATIONS.length}</div>
            <h1 className="serif page-title">{t(COPY.sections.press, lang)}.</h1>
          </Reveal>
        </div>
      </section>

      {featured && (
        <section className="press-featured-section">
          <div className="container">
            <Reveal>
              <a href="#" className="press-featured"
                 onClick={(e)=>{e.preventDefault(); navigate({page:'press-detail', slug: featured.slug});}}>
                <div className="press-featured-img" style={{ backgroundImage: `url(${featured.cover})` }} />
                <div className="press-featured-body">
                  <div className="mono tiny muted">{featured.outlet} · {featured.date || featured.year}</div>
                  <h2 className="serif press-featured-title">{lang==='es'?featured.title_es:featured.title_en}</h2>
                  {(featured.subtitle_es || featured.subtitle_en) && (
                    <p className="press-featured-sub">{lang==='es'?featured.subtitle_es:featured.subtitle_en}</p>
                  )}
                  <span className="mono tiny press-featured-cta">{lang==='es'?'Leer más':'Read more'} →</span>
                </div>
              </a>
            </Reveal>
          </div>
        </section>
      )}

      <section className="section press-grid-section">
        <div className="container">
          <Reveal>
            <div className="section-header">
              <div className="mono tiny muted">{lang==='es'?'Todas las publicaciones':'All features'}</div>
            </div>
          </Reveal>
          <div className="press-grid">
            {rest.map((p, i) => (
              <Reveal key={p.slug} delay={(i%3)*60}>
                <a href="#" className="press-card"
                   onClick={(e)=>{e.preventDefault(); navigate({page:'press-detail', slug: p.slug});}}>
                  <div className="press-card-img" style={{ backgroundImage: `url(${p.cover})` }} />
                  <div className="press-card-body">
                    <div className="mono tiny muted">{p.outlet} · {p.date || p.year}</div>
                    <div className="serif press-card-title">{lang==='es'?p.title_es:p.title_en}</div>
                    <div className="mono tiny muted">{p.type}</div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {AWARDS.length > 0 && (
        <section className="section awards-section">
          <div className="container">
            <Reveal>
              <div className="section-header">
                <div className="mono tiny muted">{t(COPY.sections.awards, lang)}</div>
                <h2 className="serif section-title">{t(COPY.sections.awards, lang)}.</h2>
              </div>
            </Reveal>
            <div className="awards-grid">
              {AWARDS.map((a, i) => {
                const body = (
                  <div className="award-card">
                    {a.image && (
                      <div className="award-card-img" style={{ backgroundImage: `url(${a.image})` }} />
                    )}
                    <div className="award-card-body">
                      <div className="mono tiny muted">{a.year}</div>
                      <h3 className="serif award-card-title">{a.title}</h3>
                      {a.project && <div className="mono tiny award-card-project">· {a.project}</div>}
                      <div className="mono tiny muted award-card-org">{a.org}</div>
                    </div>
                  </div>
                );
                return (
                  <Reveal key={i} delay={i*60}>
                    {a.url ? <a href={a.url} target="_blank" rel="noreferrer" className="award-link">{body}</a> : body}
                  </Reveal>
                );
              })}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

// ---------- PRESS DETAIL ----------
function PressDetailPage({ lang, navigate, slug }) {
  const pub = PUBLICATIONS.find(p => p.slug === slug) || PUBLICATIONS[0];
  const idx = PUBLICATIONS.indexOf(pub);
  const next = PUBLICATIONS[(idx + 1) % PUBLICATIONS.length];
  const project = pub.project_id ? PROJECTS.find(p => p.id === pub.project_id) : null;
  const body = lang === 'es' ? pub.body_es : pub.body_en;
  const title = lang === 'es' ? pub.title_es : pub.title_en;
  const subtitle = lang === 'es' ? pub.subtitle_es : pub.subtitle_en;
  const readOnSource = lang === 'es' ? 'Leer en ' : 'Read on ';

  return (
    <div className="page-press-detail">
      <section className="press-detail-hero">
        <div className="press-detail-hero-img" style={{ backgroundImage: `url(${pub.cover})` }} />
        <div className="press-detail-hero-overlay" />
      </section>

      <section className="section press-detail-intro">
        <div className="container">
          <Reveal>
            <div className="project-back">
              <a href="#" onClick={(e)=>{e.preventDefault(); navigate({page:'press'});}} className="mono tiny">
                ← {lang==='es'?'Volver a prensa':'Back to press'}
              </a>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div className="mono tiny muted">{pub.outlet} · {pub.date || pub.year} · {pub.type}</div>
            <h1 className="serif press-detail-title">{title}</h1>
            {subtitle && <p className="press-detail-sub serif">{subtitle}</p>}
          </Reveal>

          <div className="press-detail-body-grid">
            <Reveal className="press-detail-meta">
              <div>
                <div className="mono tiny muted">{lang==='es'?'Medio':'Outlet'}</div>
                <div className="press-meta-val">{pub.outlet}</div>
              </div>
              <div>
                <div className="mono tiny muted">{lang==='es'?'Fecha':'Date'}</div>
                <div className="press-meta-val">{pub.date || pub.year}</div>
              </div>
              <div>
                <div className="mono tiny muted">{lang==='es'?'Sección':'Section'}</div>
                <div className="press-meta-val">{pub.type}</div>
              </div>
              {pub.credits && (
                <div>
                  <div className="mono tiny muted">{lang==='es'?'Créditos':'Credits'}</div>
                  <div className="press-meta-val">{pub.credits}</div>
                </div>
              )}
              {project && (
                <div>
                  <div className="mono tiny muted">{lang==='es'?'Proyecto':'Project'}</div>
                  <a className="press-meta-val press-meta-link" href="#"
                     onClick={(e)=>{e.preventDefault(); navigate({page:'project', id: project.id});}}>
                    {project.title} →
                  </a>
                </div>
              )}
            </Reveal>

            <Reveal delay={80} className="press-detail-body">
              {body.map((para, i) => (
                <p key={i} className="press-detail-para">{para}</p>
              ))}
              <a href={pub.url} target="_blank" rel="noreferrer" className="btn-line press-detail-cta">
                <span className="mono">{readOnSource}{pub.outlet}</span>
                <span className="arrow">↗</span>
              </a>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="press-detail-gallery">
        <div className="container-wide">
          {pub.images && pub.images.map((src, i) => (
            <Reveal key={i} className={'press-gallery-item ' + (i % 2 === 0 ? 'full' : 'inset')}>
              <img src={src} alt={title + ' — ' + (i+1)} />
            </Reveal>
          ))}
        </div>
      </section>

      <section className="next-project" onClick={() => navigate({page:'press-detail', slug: next.slug})}>
        <div className="next-img" style={{ backgroundImage: `url(${next.cover})` }} />
        <div className="next-content">
          <div className="mono tiny">{lang==='es'?'Siguiente publicación':'Next feature'} →</div>
          <div className="serif next-title">{lang==='es'?next.title_es:next.title_en}</div>
          <div className="mono tiny muted">{next.outlet} · {next.date || next.year}</div>
        </div>
      </section>
    </div>
  );
}

// ---------- CONTACT ----------
function ContactPage({ lang }) {
  const [form, setForm] = useStateP({ name: '', email: '', type: 'arquitectura', message: '' });
  const [sent, setSent] = useStateP(false);

  return (
    <div className="page-contact">
      <section className="section contact-section">
        <div className="container">
          <div className="contact-grid">
            <Reveal className="contact-left">
              <div className="mono tiny muted">{t(COPY.sections.contact, lang)}</div>
              <h1 className="serif page-title contact-title">{t(COPY.contact.title, lang)}</h1>
              <p className="contact-sub">{t(COPY.contact.sub, lang)}</p>

              <div className="contact-details">
                <div>
                  <div className="mono tiny muted">{t(COPY.contact.email, lang)}</div>
                  <a href="mailto:hr@debconsulting.co" className="contact-email serif">hr@debconsulting.co</a>
                </div>
                <div>
                  <div className="mono tiny muted">{t(COPY.contact.social, lang)}</div>
                  <div className="contact-social">
                    <a href="https://co.linkedin.com/company/deb-consultingcol" target="_blank" rel="noreferrer">LinkedIn ↗</a>
                    <a href="https://instagram.com/deb_consulting" target="_blank" rel="noreferrer">Instagram ↗</a>
                  </div>
                </div>
              </div>
            </Reveal>

            <Reveal className="contact-right" delay={100}>
              {sent ? (
                <div className="form-sent">
                  <div className="mono tiny muted">✓ {lang==='es'?'Enviado':'Sent'}</div>
                  <p className="serif">{t(COPY.contact.form.sent, lang)}</p>
                </div>
              ) : (
                <form className="contact-form" onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
                  <label>
                    <span className="mono tiny muted">{t(COPY.contact.form.name, lang)}</span>
                    <input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required />
                  </label>
                  <label>
                    <span className="mono tiny muted">{t(COPY.contact.form.email, lang)}</span>
                    <input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required />
                  </label>
                  <label>
                    <span className="mono tiny muted">{t(COPY.contact.form.type, lang)}</span>
                    <select value={form.type} onChange={e=>setForm({...form, type:e.target.value})}>
                      <option value="paisaje">{t(COPY.categories.paisaje, lang)}</option>
                      <option value="edificio">{t(COPY.categories.edificio, lang)}</option>
                      <option value="interior">{t(COPY.categories.interior, lang)}</option>
                      <option value="objeto">{t(COPY.categories.objeto, lang)}</option>
                    </select>
                  </label>
                  <label>
                    <span className="mono tiny muted">{t(COPY.contact.form.message, lang)}</span>
                    <textarea value={form.message} onChange={e=>setForm({...form, message:e.target.value})} rows={5} required />
                  </label>
                  <button type="submit" className="btn-line">
                    <span className="mono">{t(COPY.contact.form.send, lang)}</span>
                    <span className="arrow">→</span>
                  </button>
                </form>
              )}
            </Reveal>
          </div>
        </div>
      </section>

      <section className="map-section">
        <div className="map-placeholder">
          <div className="map-grid" />
          <div className="map-pin">
            <div className="map-pin-dot" />
            <div className="map-pin-label mono tiny">DEB · Barranquilla</div>
          </div>
          <div className="map-coords mono tiny muted">11°00′N · 74°48′W</div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, WorkPage, ProjectPage, AboutPage, PressPage, PressDetailPage, ContactPage });