// Joaquin Jeri — Editorial Grid layout
// Off-white bg · serif accents · masonry grid · fullscreen menu with submenus

const { useState, useEffect, useRef } = React;

// Viewport hook — `phone` < 600px, `tablet` < 960px
function useViewport() {
  const get = () => {
    if (typeof window === 'undefined') return { phone: false, tablet: false };
    const w = window.innerWidth;
    return { phone: w < 600, tablet: w < 960 };
  };
  const [vp, setVp] = useState(get);
  useEffect(() => {
    const onResize = () => setVp(get());
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return vp;
}

function V1Site({ tweaks }) {
  const { PROJECTS, RETRATOS, BIO, CLIENTS, BOCA_SVG_URL, HOME_ORDER } = window.JJ_DATA;
  const [page, setPage] = useState('home');  // home | project | portraits | info | contact
  const [activeProject, setActiveProject] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [filter, setFilter] = useState('all');

  const fontStack = tweaks.fontFamily === 'serif'
    ? `"Cormorant Garamond", "Times New Roman", serif`
    : tweaks.fontFamily === 'mono'
    ? `"JetBrains Mono", ui-monospace, monospace`
    : `"Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif`;

  const gap = tweaks.gridSpacing === 'dense' ? 2 : tweaks.gridSpacing === 'airy' ? 24 : 10;

  // When viewing "all", use the curated HOME_ORDER (with portrait tiles mixed in).
  // For category filters, fall back to filtering PROJECTS by cat.
  const filtered = filter === 'all'
    ? (HOME_ORDER || []).map(entry => {
        if (typeof entry === 'object' && entry.retratos) {
          const n = entry.retratos;
          return { id: `__retratos_${n}`, title: 'Portraits', client: 'RETRATOS', cat: 'portraits', cover: `images/retratos/retratos-${n}.jpg`, __nav: 'portraits' };
        }
        return PROJECTS.find(p => p.id === entry);
      }).filter(Boolean)
    : PROJECTS.filter(p => p.cat === filter);

  const goProject = (p) => {
    if (p.__nav) { navigate(p.__nav); return; }
    setActiveProject(p); setPage('project'); window.scrollTo({ top: 0 });
  };
  const navigate = (p, f) => {
    setPage(p);
    setMenuOpen(false);
    if (f !== undefined) setFilter(f);
    window.scrollTo({ top: 0 });
  };

  return (
    <div style={{
      fontFamily: fontStack,
      background: '#f4f1ec',
      color: '#1a1714',
      minHeight: '100%',
      width: '100%',
      position: 'relative',
      overflowX: 'hidden',
    }}>
      <V1Header onMenu={() => setMenuOpen(true)} onLogo={() => navigate('home', 'all')} bocaUrl={BOCA_SVG_URL} />
      {menuOpen && (
        <V1Menu
          onClose={() => setMenuOpen(false)}
          navigate={navigate}
          goProject={(p) => { setMenuOpen(false); goProject(p); }}
          fontStack={fontStack}
          projects={PROJECTS}
        />
      )}

      {page === 'home' && (
        <V1Home
          projects={filtered}
          allProjects={PROJECTS}
          onProject={goProject}
          gap={gap}
          hover={tweaks.hoverStyle}
          filter={filter}
          setFilter={setFilter}
          onPage={navigate}
        />
      )}
      {page === 'project' && activeProject && (
        <V1Project project={activeProject} allProjects={PROJECTS} onProject={goProject} onBack={() => navigate('home', activeProject.cat)} />
      )}
      {page === 'portraits' && <V1Portraits retratos={RETRATOS} gap={gap} />}
      {page === 'info' && <V1Info bio={BIO} clients={CLIENTS} />}
      {page === 'contact' && <V1Contact />}

      <V1Footer onPage={navigate} />
    </div>
  );
}

function V1Header({ onMenu, onLogo, bocaUrl }) {
  const { phone } = useViewport();
  // Header height (used by spacer below): padding × 2 + content (~22px) + 1px border
  const headerHeight = phone ? 51 : 59;
  return (
    <React.Fragment>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: phone ? '14px 18px' : '18px 28px',
        background: 'rgba(244,241,236,0.92)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        borderBottom: '1px solid rgba(26,23,20,0.08)',
      }}>
        <button onClick={onLogo} style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src={bocaUrl} alt="" style={{ height: 22, width: 'auto', objectFit: 'contain', mixBlendMode: 'multiply' }} />
          <span style={{ fontSize: 13, letterSpacing: '0.18em', fontWeight: 300, textTransform: 'uppercase' }}>Joaquín Jerí</span>
        </button>
        <button onClick={onMenu} style={{
          background: 'transparent', border: 0, cursor: 'pointer',
          fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', gap: 10, padding: 6,
        }}>
          <span style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ width: 22, height: 1, background: '#1a1714' }}></span>
            <span style={{ width: 22, height: 1, background: '#1a1714' }}></span>
          </span>
          Menu
        </button>
      </header>
      {/* Spacer to push page content below the fixed header (so it doesn't slide under) */}
      <div aria-hidden="true" style={{ height: headerHeight }} />
    </React.Fragment>
  );
}

// Fullscreen menu — top categories + expandable submenus under Work and Editorial
function V1Menu({ onClose, navigate, goProject, fontStack, projects }) {
  const { phone } = useViewport();
  const [expanded, setExpanded] = useState(null); // 'work' | 'editorial' | null

  const workProjects = projects.filter(p => p.cat === 'work');
  const editorialProjects = projects.filter(p => p.cat === 'editorial');

  const items = [
    { id: 'home',      label: 'Index',     sub: 'All projects',                filter: 'all' },
    { id: 'home',      label: 'Work',      sub: 'Brand campaigns',             filter: 'work',      expandable: 'work',      subList: workProjects },
    { id: 'home',      label: 'Editorial', sub: 'Magazines & stories',         filter: 'editorial', expandable: 'editorial', subList: editorialProjects },
    { id: 'portraits', label: 'Portraits', sub: '20 images' },
    { id: 'home',      label: 'Prints',    sub: 'Limited edition · for sale',  filter: 'prints' },
    { id: 'home',      label: 'Videos',    sub: 'Motion & direction',          filter: 'videos' },
    { id: 'info',      label: 'About',     sub: 'About & clients' },
    { id: 'contact',   label: 'Contact',   sub: 'Get in touch' },
  ];

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: '#1a1714', color: '#f4f1ec',
      display: 'flex', flexDirection: 'column',
      fontFamily: fontStack,
      overflowY: 'auto',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: phone ? '14px 18px' : '18px 28px', borderBottom: '1px solid rgba(244,241,236,0.12)' }}>
        <span style={{ fontSize: 13, letterSpacing: '0.18em', fontWeight: 300, textTransform: 'uppercase', opacity: 0.7 }}>Joaquín Jerí — Index</span>
        <button onClick={onClose} style={{ background: 'transparent', border: 0, color: '#f4f1ec', cursor: 'pointer', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Close ✕</button>
      </div>
      <nav style={{ flex: 1, padding: phone ? '32px 18px' : '48px 28px', display: 'flex', flexDirection: 'column', gap: 4 }}>
        {items.map((it, i) => (
          <div key={i} style={{ borderBottom: '1px solid rgba(244,241,236,0.12)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
              <button onClick={() => navigate(it.id, it.filter)} style={{
                flex: 1,
                background: 'transparent', border: 0, color: '#f4f1ec',
                padding: '14px 0', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit',
              }}>
                <span style={{ fontSize: phone ? 'clamp(36px, 11vw, 64px)' : 'clamp(40px, 7vw, 88px)', fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1 }}>{it.label}</span>
              </button>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5, whiteSpace: 'nowrap' }}>{String(i + 1).padStart(2, '0')}{phone ? '' : ' — ' + it.sub}</span>
                {it.expandable && (
                  <button
                    onClick={() => setExpanded(expanded === it.expandable ? null : it.expandable)}
                    aria-label={`Expand ${it.label}`}
                    style={{
                      background: 'transparent', border: '1px solid rgba(244,241,236,0.4)',
                      color: '#f4f1ec', cursor: 'pointer',
                      width: 28, height: 28, borderRadius: '50%',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, lineHeight: 1, padding: 0,
                    }}>
                    {expanded === it.expandable ? '−' : '+'}
                  </button>
                )}
              </div>
            </div>
            {/* Submenu for Work / Editorial */}
            {it.expandable && expanded === it.expandable && (
              <ul style={{ listStyle: 'none', margin: 0, padding: '4px 0 18px', display: 'grid', gridTemplateColumns: phone ? '1fr' : '1fr 1fr', gap: '4px 32px' }}>
                {it.subList.map(p => (
                  <li key={p.id}>
                    <button
                      onClick={() => goProject(p)}
                      style={{
                        background: 'transparent', border: 0, color: '#f4f1ec',
                        padding: '6px 0', cursor: 'pointer', textAlign: 'left',
                        fontFamily: 'inherit', opacity: 0.7,
                        fontSize: 15, letterSpacing: '-0.005em', width: '100%',
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
                      onMouseLeave={(e) => e.currentTarget.style.opacity = 0.7}
                    >
                      <span style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.6, marginRight: 10 }}>↳</span>
                      {p.title}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        ))}
      </nav>
      <div style={{ padding: phone ? '14px 18px' : '18px 28px', display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.5, gap: 12, flexWrap: 'wrap' }}>
        <span>Lima · Peru</span>
        <span>joaquinjeri@gmail.com</span>
        <span>© 2026</span>
      </div>
    </div>
  );
}

function V1Home({ projects, allProjects, onProject, gap, hover, filter, setFilter, onPage }) {
  const { phone } = useViewport();
  return (
    <main>
      {/* Hero — name set as a giant editorial mark */}
      <section style={{ padding: phone ? '36px 18px 24px' : '80px 28px 40px', borderBottom: '1px solid rgba(26,23,20,0.08)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 480px' }}>
            <p style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, margin: 0 }}>Photographer · Videographer · Lima, PE</p>
            <h1 style={{
              fontSize: 'clamp(56px, 11vw, 180px)',
              fontWeight: 200,
              letterSpacing: '-0.04em',
              lineHeight: 0.92,
              margin: '14px 0 0',
            }}>
              Joaquín<br/><em style={{ fontStyle: 'italic', fontWeight: 200, letterSpacing: '0.01em' }}>Jerí</em>
            </h1>
          </div>
          <p style={{ flex: '0 1 320px', fontSize: 15, lineHeight: 1.5, margin: 0, opacity: 0.75, textWrap: 'pretty' }}>
            Brand campaigns, editorial, portrait and fine-food photography. Selected work from 2020—present.
          </p>
        </div>
      </section>

      {/* Filter bar — scrolls horizontally on phone */}
      <section style={{
        padding: phone ? '16px 18px' : '24px 28px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: '1px solid rgba(26,23,20,0.08)',
        flexWrap: phone ? 'nowrap' : 'wrap',
        gap: 16,
      }}>
        <div style={{
          display: 'flex', gap: phone ? 18 : 24,
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          overflowX: phone ? 'auto' : 'visible',
          WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none',
          flex: phone ? '1 1 auto' : '0 1 auto', minWidth: 0,
        }}>
          {[
            { id: 'all', label: 'All' },
            { id: 'work', label: 'Work' },
            { id: 'editorial', label: 'Editorial' },
            { id: 'portraits', label: 'Portraits', nav: 'portraits' },
            { id: 'prints', label: 'Prints' },
            { id: 'videos', label: 'Videos' },
          ].map(f => (
            <button key={f.id} onClick={() => f.nav ? onPage(f.nav) : setFilter(f.id)} style={{
              background: 'transparent', border: 0, padding: '4px 0', cursor: 'pointer',
              color: filter === f.id ? '#1a1714' : 'rgba(26,23,20,0.45)',
              borderBottom: filter === f.id ? '1px solid #1a1714' : '1px solid transparent',
              letterSpacing: '0.18em', fontFamily: 'inherit',
              flex: '0 0 auto', whiteSpace: 'nowrap',
            }}>{f.label}</button>
          ))}
        </div>
        {!phone && (
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5 }}>
            {projects.length} project{projects.length === 1 ? '' : 's'} · 2020—2026
          </div>
        )}
      </section>

      {/* Grid or empty state */}
      <section style={{ padding: gap === 2 ? '0' : `${gap * 2}px 18px`, background: '#f4f1ec' }}>
        {projects.length > 0 ? (
          <V1AsymGrid projects={projects} onProject={onProject} hover={hover} gap={gap} />
        ) : (
          <V1Empty filter={filter} />
        )}
      </section>
    </main>
  );
}

// Empty state for Prints / Videos (no projects yet)
function V1Empty({ filter }) {
  const copy = filter === 'prints'
    ? { kicker: 'Prints', title: 'Edition coming soon', body: 'A small run of limited-edition silver-gelatin and archival pigment prints is in production. Drop a line to be notified when the edition opens.' }
    : filter === 'videos'
    ? { kicker: 'Videos', title: 'Motion archive coming soon', body: 'Direction and motion work — brand films, behind-the-scenes, and short documentaries — will land here through 2026.' }
    : { kicker: 'Nothing here', title: 'No projects', body: 'Try another category.' };
  return (
    <div style={{
      minHeight: '50vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '80px 0', gap: 16,
      borderTop: '1px solid rgba(26,23,20,0.08)',
      borderBottom: '1px solid rgba(26,23,20,0.08)',
    }}>
      <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5 }}>{copy.kicker} — In progress</div>
      <h3 style={{ fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic', fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 300, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05 }}>{copy.title}</h3>
      <p style={{ maxWidth: 520, margin: 0, fontSize: 15, lineHeight: 1.55, opacity: 0.75, textWrap: 'pretty' }}>{copy.body}</p>
      <a href="mailto:joaquinjeri@gmail.com" style={{
        marginTop: 12, alignSelf: 'flex-start',
        fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: '#1a1714', textDecoration: 'none',
        padding: '12px 18px', border: '1px solid #1a1714',
      }}>Notify me →</a>
    </div>
  );
}

// Masonry grid — distributes items into N columns by cumulative aspect-ratio
// height so columns end at roughly the same line. Order still flows left→right
// top→bottom; only "which column" is chosen by available space.
function V1AsymGrid({ projects, onProject, hover, gap }) {
  const { phone, tablet } = useViewport();
  const desktopCols = gap <= 4 ? 4 : gap >= 20 ? 2 : 3;
  const cols = phone ? 1 : tablet ? 2 : desktopCols;
  const colGap = phone ? Math.max(gap, 8) : gap;

  const [ratios, setRatios] = useState({}); // id -> height/width ratio (after image loads)
  const onImgLoad = (id, e) => {
    const w = e.target.naturalWidth, h = e.target.naturalHeight;
    if (!w || !h) return;
    setRatios(r => r[id] === h / w ? r : { ...r, [id]: h / w });
  };

  // Build columns by always placing the next item in the currently-shortest column.
  // Before an image's ratio is known, assume 1.25 (typical mixed portrait/landscape).
  const columns = Array.from({ length: cols }, () => ({ items: [], total: 0 }));
  projects.forEach((p) => {
    const ratio = ratios[p.id] || 1.25;
    let target = columns[0];
    for (let i = 1; i < cols; i++) if (columns[i].total < target.total) target = columns[i];
    target.items.push(p);
    target.total += ratio;
  });

  return (
    <div style={{ display: 'flex', gap: colGap, alignItems: 'flex-start' }}>
      {columns.map((col, ci) => (
        <div key={ci} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: colGap, minWidth: 0 }}>
          {col.items.map((p) => (
            <V1Card key={p.id} p={p} onClick={() => onProject(p)} hover={hover} onImgLoad={(e) => onImgLoad(p.id, e)} />
          ))}
        </div>
      ))}
    </div>
  );
}

function V1Card({ p, onClick, hover, onImgLoad }) {
  const [h, setH] = useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        position: 'relative', background: '#e8e3dc', border: 0, padding: 0,
        cursor: 'pointer', overflow: 'hidden', width: '100%',
        textAlign: 'left', fontFamily: 'inherit', display: 'block',
      }}>
      <img src={p.cover} alt={p.title} loading="lazy" onLoad={onImgLoad} style={{
        width: '100%', height: 'auto', display: 'block',
        transition: 'transform .8s cubic-bezier(.2,.7,.3,1), filter .4s',
        transform: hover === 'zoom' && h ? 'scale(1.04)' : 'scale(1)',
        filter: hover === 'desaturate' && !h ? 'grayscale(1)' : 'none',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: hover === 'reveal'
          ? `linear-gradient(180deg, transparent 60%, rgba(26,23,20,0.78) 100%)`
          : 'transparent',
        opacity: hover === 'reveal' ? (h ? 1 : 0) : 0,
        transition: 'opacity .35s', pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', left: 14, right: 14, bottom: 14,
        color: hover === 'reveal' ? '#f4f1ec' : '#1a1714',
        opacity: hover === 'reveal' ? (h ? 1 : 0) : 1,
        transform: hover === 'reveal' ? (h ? 'translateY(0)' : 'translateY(8px)') : 'none',
        transition: 'opacity .35s, transform .35s',
      }}>
        <div style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.7 }}>
          {p.client}{p.year ? ' — ' + p.year : ''}
        </div>
        <div style={{ fontSize: 16, fontWeight: 400, marginTop: 2, letterSpacing: '-0.01em' }}>{p.title}</div>
      </div>
    </button>
  );
}

// Project detail page — renders the actual full image set vertically
function V1Project({ project, allProjects, onProject, onBack }) {
  const { phone } = useViewport();
  // Navigate within the same category (Work next/prev stays in Work, etc.)
  const sameCat = allProjects.filter(p => p.cat === project.cat);
  const idx = sameCat.findIndex(p => p.id === project.id);
  const next = sameCat[(idx + 1) % sameCat.length];
  const prev = sameCat[(idx - 1 + sameCat.length) % sameCat.length];
  const globalIdx = allProjects.findIndex(p => p.id === project.id);

  return (
    <main>
      <div style={{
        padding: phone ? '16px 18px' : '24px 28px',
        display: 'flex', justifyContent: 'space-between',
        fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 0, cursor: 'pointer', padding: 0, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'inherit' }}>← Back</button>
        <span style={{ opacity: 0.5 }}>{String(globalIdx + 1).padStart(2, '0')} / {String(allProjects.length).padStart(2, '0')}</span>
      </div>

      <section style={{ padding: phone ? '12px 18px 40px' : '20px 28px 60px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap', marginBottom: 32 }}>
          <div>
            <p style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, margin: 0 }}>
              {project.client}{project.year ? ' · ' + project.year : ''} · {project.cat === 'work' ? 'Work' : 'Editorial'}
            </p>
            <h1 style={{ fontSize: 'clamp(40px, 8vw, 120px)', fontWeight: 200, letterSpacing: '-0.03em', lineHeight: 0.95, margin: '8px 0 0' }}>{project.title}</h1>
          </div>
          <p style={{ flex: '0 1 360px', fontSize: 14, lineHeight: 1.6, opacity: 0.8, margin: 0, textWrap: 'pretty' }}>
            {project.images.length} image{project.images.length === 1 ? '' : 's'}
          </p>
        </div>

        {/* Full image set, vertical stack, full-width */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: phone ? 6 : 10 }}>
          {project.images.map((src, i) => (
            <img
              key={src}
              src={src}
              alt={`${project.title} — ${i + 1}`}
              loading={i === 0 ? 'eager' : 'lazy'}
              style={{ width: '100%', height: 'auto', display: 'block', background: '#e8e3dc' }}
            />
          ))}
        </div>
      </section>

      <section style={{
        borderTop: '1px solid rgba(26,23,20,0.08)',
        padding: phone ? '28px 18px' : '40px 28px',
        display: 'flex',
        flexDirection: phone ? 'column' : 'row',
        justifyContent: 'space-between',
        gap: phone ? 20 : 0,
      }}>
        <button onClick={() => onProject(prev)} style={{ background: 'transparent', border: 0, cursor: 'pointer', textAlign: 'left', padding: 0, fontFamily: 'inherit' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.5 }}>← Previous</div>
          <div style={{ fontSize: phone ? 22 : 28, fontWeight: 200, letterSpacing: '-0.02em', marginTop: 6 }}>{prev.title}</div>
        </button>
        <button onClick={() => onProject(next)} style={{ background: 'transparent', border: 0, cursor: 'pointer', textAlign: phone ? 'left' : 'right', padding: 0, fontFamily: 'inherit' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.5 }}>Next →</div>
          <div style={{ fontSize: phone ? 22 : 28, fontWeight: 200, letterSpacing: '-0.02em', marginTop: 6 }}>{next.title}</div>
        </button>
      </section>
    </main>
  );
}

// Portraits gallery — flat masonry of 20 portrait images, no project grouping
function V1Portraits({ retratos, gap }) {
  const { phone, tablet } = useViewport();
  const cols = phone ? 1 : tablet ? 2 : 3;
  return (
    <main>
      <section style={{ padding: phone ? '36px 18px 24px' : '80px 28px 40px', borderBottom: '1px solid rgba(26,23,20,0.08)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ flex: '1 1 480px' }}>
            <p style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, margin: 0 }}>Portraits</p>
            <h1 style={{
              fontSize: 'clamp(48px, 9vw, 140px)',
              fontWeight: 200, letterSpacing: '-0.04em', lineHeight: 0.92, margin: '14px 0 0',
            }}>
              <em style={{ fontStyle: 'italic', fontWeight: 300 }}>Portraits</em>
            </h1>
          </div>
          <p style={{ flex: '0 1 320px', fontSize: 15, lineHeight: 1.5, margin: 0, opacity: 0.75, textWrap: 'pretty' }}>
            A continuing series of {retratos.count} portraits.
          </p>
        </div>
      </section>
      <section style={{ padding: `${Math.max(gap * 2, 16)}px 18px` }}>
        <div style={{ columnCount: cols, columnGap: phone ? Math.max(gap, 8) : gap }}>
          {retratos.images.map((src, i) => (
            <div key={src} style={{ breakInside: 'avoid', marginBottom: phone ? Math.max(gap, 8) : gap, display: 'block' }}>
              <img
                src={src}
                alt={`Portrait ${i + 1}`}
                loading={i < 4 ? 'eager' : 'lazy'}
                style={{ width: '100%', height: 'auto', display: 'block', background: '#e8e3dc' }}
              />
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function V1Info({ bio, clients }) {
  const { phone } = useViewport();
  return (
    <main style={{ padding: phone ? '40px 18px' : '80px 28px', maxWidth: 1100 }}>
      <p style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, margin: 0 }}>About</p>
      <h2 style={{ fontSize: 'clamp(28px, 5vw, 72px)', fontWeight: 200, letterSpacing: '-0.02em', lineHeight: 1.15, margin: phone ? '12px 0 28px' : '14px 0 40px', maxWidth: 880, textWrap: 'pretty' }}>
        {bio}
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: phone ? '1fr' : '180px 1fr', gap: phone ? 8 : 32, fontSize: 14, lineHeight: 1.6, borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>
        <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5 }}>Based</div>
        <div>Lima, Peru. Available worldwide.</div>
        <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5, borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>Selected clients</div>
        <div style={{ borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24, display: 'flex', flexWrap: 'wrap', gap: '6px 18px' }}>
          {clients.map(c => <span key={c}>{c}</span>)}
        </div>
        <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5, borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>Services</div>
        <div style={{ borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>Brand campaigns · Editorial photography · Portraiture · Direction · Post-production</div>
        <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5, borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>Contact</div>
        <div style={{ borderTop: '1px solid rgba(26,23,20,0.12)', paddingTop: 24 }}>
          <a href="mailto:joaquinjeri@gmail.com" style={{ color: 'inherit' }}>joaquinjeri@gmail.com</a><br/>
          @joaquinjerikukulis on Instagram
        </div>
      </div>
    </main>
  );
}

function V1Contact() {
  return (
    <main style={{ padding: '80px 28px', minHeight: '60vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <p style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6, margin: 0 }}>Get in touch</p>
      <a href="mailto:joaquinjeri@gmail.com" style={{
        fontSize: 'clamp(18px, 4.5vw, 64px)', fontWeight: 200, letterSpacing: '-0.03em',
        margin: '14px 0', color: '#1a1714', textDecoration: 'none', lineHeight: 1,
        whiteSpace: 'nowrap', display: 'block', overflowWrap: 'normal', wordBreak: 'keep-all',
      }}>joaquinjeri<em style={{ fontStyle: 'italic' }}>@gmail.com</em></a>
      <div style={{ marginTop: 32, display: 'flex', gap: 32, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.7, flexWrap: 'wrap' }}>
        <span>Lima · Peru</span>
        <span>Available worldwide</span>
        <span>@joaquinjerikukulis</span>
      </div>
    </main>
  );
}

function V1Footer({ onPage }) {
  const { phone } = useViewport();
  return (
    <footer style={{ borderTop: '1px solid rgba(26,23,20,0.12)', padding: phone ? '20px 18px' : '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.6 }}>
      <span>© 2026 Joaquín Jerí</span>
      <div style={{ display: 'flex', gap: 18 }}>
        <button onClick={() => onPage('info')} style={{ background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer', font: 'inherit', letterSpacing: '0.18em' }}>About</button>
        <button onClick={() => onPage('contact')} style={{ background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer', font: 'inherit', letterSpacing: '0.18em' }}>Contact</button>
      </div>
    </footer>
  );
}

window.V1Site = V1Site;