// HomePage.jsx — Anika Williams Design — Home
// Structure mirrors reference: full-bleed dark hero, large headline BL, horizontal strip, metadata captions

function HomePage({ onNavigate }) {
  const [stripIndex, setStripIndex] = React.useState(2);
  const [heroIdx, setHeroIdx] = React.useState(0);
  const heroImages = [
  'assets/carousel-1.jpg',
  'assets/carousel-2.jpg',
  'assets/carousel-3.jpg',
  'assets/carousel-4.png',
  'assets/carousel-5.jpg',
  'assets/carousel-6.jpg'];


  React.useEffect(() => {
    // Each cycle: slide 1.5s, pause 3s when fully in frame
    const cycle = setInterval(() => {
      setHeroIdx((i) => (i + 1) % heroImages.length);
    }, 4500);
    return () => clearInterval(cycle);
  }, []);

  const projects = [
  { label: 'Identity Systems', year: '2024', cat: 'Branding' },
  { label: 'Editorial Design', year: '2024', cat: 'Print' },
  { label: 'Spatial Concepts', year: '2025', cat: 'Environmental' },
  { label: 'Digital Products', year: '2025', cat: 'UX/UI' },
  { label: 'Motion & Film', year: '2026', cat: 'Moving Image' },
  { label: 'Luxury Packaging', year: '2026', cat: 'Packaging' },
  { label: 'Type Specimens', year: '2025', cat: 'Typography' }];


  // Monochrome placeholder gradients for strip thumbnails
  const thumbGrads = [
  'linear-gradient(135deg, #111 0%, #2a2a2a 100%)',
  'linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%)',
  'linear-gradient(135deg, #222 0%, #181818 100%)',
  'linear-gradient(135deg, #0a0a0a 0%, #2e2e2e 100%)',
  'linear-gradient(135deg, #191919 0%, #111 100%)',
  'linear-gradient(135deg, #262626 0%, #0d0d0d 100%)',
  'linear-gradient(135deg, #141414 0%, #252525 100%)'];


  return (
    <div style={{ background: '#86979E', minHeight: '100vh' }}>

      {/* ── HERO ── */}
      <section style={{
        position: 'relative', width: '100%', height: '100vh',
        background: '#86979E', overflow: 'hidden',
        display: 'flex', flexDirection: 'column'
      }}>
        {/* Full-bleed background figure — large silhouette placeholder */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(160deg, #080808 0%, #141414 35%, #0a0a0a 65%, #000 100%)'
        }} />
        {/* Hero background image — fixed cover */}
        <img src="assets/hero-porsche.jpeg"
        alt="Anika Williams Design studio — hero photograph for the Anika Williams design portfolio homepage" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', opacity: 1
        }} />

        {/* Vignette overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 90% 80% at 50% 40%, transparent 0%, rgba(0,0,0,0.5) 90%)'
        }} />
        {/* Bottom fade */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 320,
          background: 'linear-gradient(to top, #000 0%, transparent 100%)',
          zIndex: 2
        }} />

        {/* Top metadata bar — mirrors reference layout */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '100px 56px 0',
          pointerEvents: 'none'
        }}>
          <div style={metaCap}>Design Studio</div>
          <div style={metaCap}>San Francisco // Los Angeles</div>
        </div>

        {/* Handwritten Anika Williams — below carousel, right side */}
        {/* Horizontal thumbnail strip — positioned above the Porsche, below the trailer door */}
        <div style={{
          position: 'absolute', top: '22%', left: 0, right: 0,
          zIndex: 20, height: 140, overflow: 'hidden'
        }}>
          <style>{`
            @keyframes awStripScroll {
              0%, 100% { transform: translateX(var(--strip-x, 0)); }
            }
            .aw-strip-track {
              display: flex; height: 100%;
              width: max-content;
              transform: translateX(var(--strip-x, 0));
              transition: transform 1500ms cubic-bezier(0.65, 0, 0.35, 1);
            }
          `}</style>
          {/* Strip hairline top */}
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: '#262626', zIndex: 2 }} />
          <div className="aw-strip-track" style={{ '--strip-x': `${-heroIdx * 280}px` }}>
            {[...projects, ...projects].map((p, i) =>
            <div key={i} style={{ width: 280, height: '100%', flexShrink: 0, opacity: i % projects.length === heroIdx ? 1 : 0.75, transition: 'opacity 1500ms ease-in-out' }}>
              <StripThumb
                project={p}
                grad={thumbGrads[i % thumbGrads.length]}
                active={false}
                onClick={() => setStripIndex(i % projects.length)}
                onNavigate={onNavigate}
                imgSeed={i % projects.length} />
            </div>
            )}
          </div>
        </div>
      </section>

      {/* ── DISCIPLINE ROWS ── */}
      <section style={{ padding: '120px 56px', borderTop: '1px solid #262626', background: "rgb(134, 151, 158)" }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 48
          }}>01 — Disciplines</div>
          {[
          { n: 'Brand Identity', d: 'Visual systems, wordmarks, and total brand architecture.' },
          { n: 'Editorial & Print', d: 'Books, catalogues, and high-production printed matter.' },
          { n: 'Environmental Design', d: 'Spatial graphics, wayfinding, and experiential installations.' },
          { n: 'Digital Products', d: 'Interfaces, prototypes, and interactive brand experiences.' }].
          map((item, i) =>
          <DisciplineRow key={item.n} item={item} index={i} onNavigate={onNavigate} />
          )}
        </div>
      </section>

      {/* ── SELECTED WORK PREVIEW ── */}
      <section style={{ padding: '0 56px 120px', background: "rgb(134, 151, 158)" }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
            <div>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
                color: '#444', marginBottom: 12
              }}>02 — Selected Work</div>
              <h2 style={{
                fontFamily: "'sedgwick-ave-display', sans-serif",
                fontSize: 40, fontWeight: 400, letterSpacing: '3px',
                textTransform: 'uppercase', color: '#F2EADB', lineHeight: 1.1
              }}>Recent Projects</h2>
            </div>
            <NavBtn label="View Portfolio →" onClick={() => onNavigate('Portfolio')} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 1, background: '#262626' }}>
            <FeaturedCard title="Monochrome Identity System" sub="Brand Identity — 2025" large />
            <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 1, background: '#262626' }}>
              <FeaturedCard title="Toile Editorial Spread" sub="Print — 2025" />
              <FeaturedCard title="Spatial Brand Install" sub="Environmental — 2026" />
            </div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <AWFooter onNavigate={onNavigate} />
    </div>);

}

// ── Sub-components ──

const metaCap = {
  fontFamily: "'JetBrains Mono', monospace",
  fontSize: 10, letterSpacing: '2.5px', textTransform: 'uppercase',
  color: '#555'
};

function StripThumb({ project, grad, active, onClick, onNavigate, imgSeed }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        flex: '1 1 auto',
        width: '100%',
        height: '100%', position: 'relative', cursor: 'pointer',
        background: grad, borderRight: '1px solid #262626',
        transition: 'opacity 200ms',
        overflow: 'hidden', borderStyle: "none"
      }}>
      <img src={[
      "assets/carousel-1.jpg",
      "assets/carousel-2.jpg",
      "assets/carousel-3.jpg",
      "assets/carousel-4.png",
      "assets/carousel-5.jpg",
      "assets/carousel-6.jpg",
      "assets/strip-typography.jpeg"][imgSeed] || "assets/strip-typography.jpeg"}
      alt={`${project.label} — ${project.cat} project by Anika Williams, ${project.year}`}
      loading="lazy" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', opacity: 0.95
      }} />
      {/* Overlay on active */}
      {active &&
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(255,255,255,0.03)'
      }} />
      }
      {/* Top hairline accent on active */}
      {active &&
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: '#F2EADB'
      }} />
      }
      <div style={{
        position: 'absolute', bottom: 12, left: 14, right: 8
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
          color: active ? '#888' : '#444', transition: 'color 200ms'
        }}>{project.cat}</div>
        {active &&
        <div style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 14, letterSpacing: '1.5px', textTransform: 'uppercase',
          color: '#F2EADB', marginTop: 2
        }}>{project.label}</div>
        }
      </div>
    </div>);

}

function DisciplineRow({ item, index, onNavigate }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      onClick={() => onNavigate('Portfolio')}
      style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '28px 0', borderBottom: '1px solid #262626',
        cursor: 'pointer', transition: 'background 200ms',
        gap: 40
      }}>
      
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, flex: '0 0 auto' }}>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10, letterSpacing: '2px', color: '#444',
          width: 28
        }}>0{index + 1}</span>
        <span style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 32, fontWeight: 400, letterSpacing: '2px',
          textTransform: 'uppercase', color: hov ? '#F2EADB' : '#e6e6e6',
          transition: 'color 200ms'
        }}>{item.n}</span>
      </div>
      <span style={{
        fontFamily: "'EB Garamond', serif",
        fontSize: 15, color: '#666', flex: 1, textAlign: 'right',
        maxWidth: 380
      }}>{item.d}</span>
      <span style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase',
        color: hov ? '#c3d9f3' : '#444',
        transition: 'color 200ms', flex: '0 0 auto'
      }}>→</span>
    </div>);

}

function FeaturedCard({ title, sub, large }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: '#0d0d0d', cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
        minHeight: large ? 440 : 215,
        border: `1px solid ${hov ? '#3a3a3a' : 'transparent'}`,
        transition: 'border-color 200ms',
        position: 'relative', overflow: 'hidden'
      }}>
      
      {/* Photo placeholder */}
      <div style={{
        flex: 1,
        background: 'linear-gradient(135deg, #111 0%, #1c1c1c 60%, #141414 100%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#222'
        }}>Photography</span>
      </div>
      <div style={{ padding: '16px 20px 20px' }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#555', marginBottom: 6
        }}>{sub}</div>
        <div style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: large ? 24 : 18, fontWeight: 400, letterSpacing: '1.5px',
          textTransform: 'uppercase', color: '#F2EADB'
        }}>{title}</div>
      </div>
    </div>);

}

function NavBtn({ label, onClick }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    style={{
      background: hov ? '#F2EADB' : 'transparent',
      color: hov ? '#000' : '#F2EADB',
      border: '1px solid #F2EADB', borderRadius: 9999,
      padding: '11px 28px', minHeight: 44,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase',
      cursor: 'pointer', transition: 'background 200ms, color 200ms'
    }}>
      {label}</button>);

}

function AWFooter({ onNavigate }) {
  const links = ['Portfolio', 'Gallery', 'Shop', 'About'];
  return (
    <footer style={{
      borderTop: '1px solid #262626',
      padding: '64px 56px 40px', background: "rgb(242, 234, 219)"
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 64 }}>
          <div>
            <div style={{
              fontFamily: "'sedgwick-ave-display', sans-serif",
              fontSize: 14, letterSpacing: '8px', textTransform: 'uppercase',
              color: '#F2EADB', marginBottom: 8
            }}>Anika Williams Design</div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#444'
            }}>San Francisco // Los Angeles — Est. 2019</div>
          </div>
          <div style={{ display: 'flex', gap: 32 }}>
            {links.map((l) =>
            <button key={l} onClick={() => onNavigate(l)} style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#666', background: 'none', border: 'none',
              cursor: 'pointer', transition: 'color 200ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#F2EADB'}
            onMouseLeave={(e) => e.currentTarget.style.color = '#666'}>
              {l}</button>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase', color: '#333'
          }}>© 2026 Anika Williams Design — All Rights Reserved</div>
          <div style={{ display: 'flex', gap: 24 }}>
            {['Instagram', 'LinkedIn', 'Behance'].map((s) =>
            <button key={s} style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#444', background: 'none', border: 'none', cursor: 'pointer',
              transition: 'color 200ms'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#c3d9f3'}
            onMouseLeave={(e) => e.currentTarget.style.color = '#444'}>
              {s}</button>
            )}
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { HomePage, AWFooter, NavBtn });