// LandingA.jsx — Direction A: "Editorial Portrait"
// Matches reference: split layout with portrait/showreel slot on the right,
// vertical side rail, large "Hello" display type, stats row, scroll cue.
const { useState: useStateLanding } = React;
const useIsMobileLanding = window.useIsMobile;

function AllWorkLink({ onClick }) {
  const [hover, setHover] = useStateLanding(false);
  const blue = '#0052ff';
  return (
    <a onClick={onClick}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    style={{
      fontSize: 13, fontWeight: 500,
      color: hover ? '#fff' : blue,
      background: hover ? blue : 'transparent',
      border: '1px solid ' + blue,
      borderRadius: 999,
      padding: '8px 16px',
      cursor: 'pointer',
      textTransform: 'lowercase', whiteSpace: 'nowrap',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      transition: 'background 180ms ease, color 180ms ease'
    }}>
      all work <span className="ak-arrow-target">→</span>
    </a>);

}

function LandingA({ onNavigate, onOpenReel, accent }) {
  return (
    <div style={{ background: 'var(--ak-bg)', color: 'var(--ak-fg)' }}>
      <HeroA onNavigate={onNavigate} onOpenReel={onOpenReel} accent={accent} />
      <IntroA />
      <ServicesA accent={accent} />
      <FeaturedWorkA onNavigate={onNavigate} />
      <ClientsA />
    </div>);

}

function HeroA({ onNavigate, onOpenReel, accent }) {
  const isMobile = useIsMobileLanding();
  // Frosted glass surface used behind every text island so copy reads cleanly
  // over the full-bleed video.
  const glass = {
    background: 'rgba(10,11,13,0.42)',
    backdropFilter: 'blur(18px) saturate(140%)',
    WebkitBackdropFilter: 'blur(18px) saturate(140%)',
    border: '1px solid rgba(255,255,255,0.14)',
    borderRadius: 16,
    boxShadow: '0 20px 60px rgba(0,0,0,0.35)'
  };

  return (
    <section style={{
      position: 'relative',
      height: '100dvh',
      background: '#000',
      overflow: 'hidden',
      color: '#fff',
      containerType: 'size'
    }}>
      {/* full-bleed background video */}
      <ShowreelSurface onOpenReel={onOpenReel} accent={accent} />

      {/* darkening scrim so glass panels have something to stand on */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.10) 65%, rgba(0,0,0,0.55) 100%)'
      }} />

      {/* left vertical rail — desktop only; on mobile the rail wastes valuable width */}
      {!isMobile && (
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0,
        width: 52,
        background: 'rgba(10,11,13,0.42)',
        backdropFilter: 'blur(18px) saturate(140%)',
        WebkitBackdropFilter: 'blur(18px) saturate(140%)',
        borderRight: '1px solid rgba(255,255,255,0.14)',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center',
        padding: '32px 0',
        zIndex: 3
      }}>
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%) rotate(180deg)',
          writingMode: 'vertical-rl',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: '0.24em',
          textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.92)',
          whiteSpace: 'nowrap'
        }}>
          new media · creative direction
        </div>
        <div style={{
          position: 'absolute', bottom: 32, left: '50%',
          transform: 'translateX(-50%) rotate(180deg)',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: '0.16em',
          color: 'rgba(255,255,255,0.92)',
          writingMode: 'vertical-rl'
        }}>
          {SITE.yearNow}
        </div>
      </div>
      )}

      {/* main hero copy — bottom-left frosted island */}
      <div style={{
        ...glass,
        position: 'absolute',
        left: isMobile ? 16 : 84,
        right: isMobile ? 16 : 'auto',
        bottom: isMobile ? 100 : 32,
        padding: isMobile ? '14px 16px 14px' : '28px 32px 26px',
        maxWidth: isMobile ? 'none' : 600,
        zIndex: 3
      }}>
        <h1 style={{
          fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
          fontSize: isMobile ? 32 : 'clamp(56px, 7.2vw, 108px)',
          lineHeight: 0.94,
          letterSpacing: '-0.04em',
          fontWeight: 400,
          margin: 0,
          color: '#fff'
        }}>
          Hello
          <span style={{ color: accent }}>.</span>
        </h1>
        <p style={{
          fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
          lineHeight: isMobile ? 1.4 : 1.5,
          color: 'rgba(255,255,255,0.85)',
          margin: isMobile ? '8px 0 0' : '14px 0 0',
          maxWidth: 480, fontSize: isMobile ? 12 : '15px'
        }}>— i’m Pasakorn Nontananandh, aka akaliko, a new media art & design director base in New York. My work spans immersive theater, led architecture, concert visuals, screen content, and brand activations — wherever a surface can become a story.

        </p>
        <div style={{ display: 'flex', gap: isMobile ? 8 : 12, marginTop: isMobile ? 12 : 22, flexWrap: 'wrap' }}>
          <button className="ak-btn ak-btn--lower"
          onClick={() => onNavigate('work')}
          style={{
            background: '#fff', borderColor: '#fff', color: '#0a0b0d',
            ...(isMobile ? { padding: '8px 14px', fontSize: 12 } : {})
          }}>
            see selected work <span className="ak-arrow-target">→</span>
          </button>
          <button className="ak-btn ak-btn--outline ak-btn--lower"
          onClick={onOpenReel}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: '#fff', borderColor: 'rgba(255,255,255,0.6)',
            background: 'rgba(255,255,255,0.08)',
            ...(isMobile ? { padding: '8px 14px', fontSize: 12 } : {})
          }}>
            <span className="ak-icon" style={{ fontSize: isMobile ? 14 : 16 }}>play_arrow</span>
            play reel
          </button>
        </div>
      </div>

      {/* bottom-right currently / scroll cue — frosted island */}
      <div style={{
        ...glass,
        position: 'absolute',
        right: isMobile ? 16 : 24,
        left: isMobile ? 16 : 'auto',
        bottom: isMobile ? 24 : 24,
        padding: isMobile ? '10px 14px' : '14px 18px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: isMobile ? 'space-between' : 'flex-start',
        gap: isMobile ? 16 : 28,
        zIndex: 3,
        color: '#fff'
      }}>
        <div>
          <div style={{
            fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.6)',
            marginBottom: 4,
            fontFamily: "'JetBrains Mono', monospace"
          }}>
            currently
          </div>
          <div style={{
            fontSize: 14, fontWeight: 500,
            fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif"
          }}>
            {SITE.bookingStatus}
          </div>
        </div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: '0.14em',
          color: 'rgba(255,255,255,0.85)',
          textTransform: 'lowercase',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          paddingLeft: 28,
          borderLeft: '1px solid rgba(255,255,255,0.18)'
        }}>
          scroll
          <span style={{ display: 'inline-block', animation: 'akBob 1.6s cubic-bezier(0.2,0.6,0.2,1) infinite' }}>↓</span>
        </div>
      </div>
    </section>);

}

function Stat({ n, label, light }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{
        fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
        fontSize: 40, lineHeight: 1.0, letterSpacing: '-0.03em',
        fontWeight: 400,
        color: light ? '#fff' : 'var(--ak-fg)'
      }}>
        {n}
      </div>
      <div style={{
        fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
        fontSize: 11,
        color: light ? 'rgba(255,255,255,0.7)' : 'var(--ak-fg-2)',
        textTransform: 'lowercase', letterSpacing: '0.02em'
      }}>
        {label}
      </div>
    </div>);

}

function ShowreelSurface({ onOpenReel, accent }) {
  // Background reel: autoplay, muted, looped, no controls. Click opens the
  // full-sound modal. Iframe is cover-fit using container-query units so it
  // fills hero top-to-bottom AND edge-to-edge.
  // Uses youtube-nocookie + a transparent shield over the iframe to suppress
  // ALL YouTube UI: title bar, share button, watch-on-youtube button, the
  // pre-autoplay big-play overlay. Pointer events on the shield bubble to
  // the parent click handler so clicking still opens the modal.
  const videoId = 'OpSnYqQXM2M';
  const si = 'YiUEkOtuk5T089sP';
  const src = `https://www.youtube-nocookie.com/embed/${videoId}` +
  `?si=${si}` +
  `&autoplay=1&mute=1&loop=1&playlist=${videoId}` +
  `&controls=0&modestbranding=1&rel=0&playsinline=1` +
  `&showinfo=0&iv_load_policy=3&disablekb=1&fs=0` +
  `&cc_load_policy=0&color=white`;
  return (
    <div onClick={onOpenReel}
    style={{
      position: 'absolute', inset: 0,
      background: '#000',
      overflow: 'hidden',
      cursor: 'pointer'
    }}>
      <iframe
        src={src}
        title="reel"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        style={{
          position: 'absolute', top: '50%', left: '50%',
          width: '100%', height: '100%',
          minWidth: '177.78cqh',
          minHeight: '56.25cqw',
          transform: 'translate(-50%, -50%) scale(1.18)',
          transformOrigin: 'center center',
          border: 0,
          pointerEvents: 'none'
        }} />
      {/* Full-surface shield — blocks ALL iframe interaction, eats hover so
            YouTube's title chrome / share / watch-on-yt buttons never reveal.
            Click bubbles to parent (opens modal). */}
      <div style={{
        position: 'absolute', inset: 0,
        zIndex: 2
      }} />
    </div>);

}

function IntroA() {
  const isMobile = useIsMobileLanding();
  return (
    <section style={{
      background: 'var(--ak-bg)',
      borderTop: '1px solid var(--ak-line)',
      borderBottom: '1px solid var(--ak-line)',
      padding: isMobile ? '64px 20px' : '120px 32px'
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', paddingLeft: isMobile ? 0 : 52 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '180px 1fr',
          gap: isMobile ? 16 : 64
        }}>
          <Reveal>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'var(--ak-fg-2)',
              paddingTop: 12
            }}>
              01 — intro
            </div>
          </Reveal>
          <Reveal delay={120} y={32}>
            <p style={{
              fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
              lineHeight: isMobile ? 1.4 : 1.18,
              letterSpacing: '-0.015em',
              fontWeight: 400,
              color: 'var(--ak-fg)',
              margin: 0,
              textWrap: 'balance', fontSize: isMobile ? 16 : '30px'
            }}>
              {ABOUT_BIO_1}
            </p>
          </Reveal>
        </div>
      </div>
    </section>);

}

function ServicesA({ accent }) {
  const isMobile = useIsMobileLanding();
  return (
    <section style={{ background: 'var(--ak-bg-3)', color: 'var(--ak-fg-on3)', padding: isMobile ? '56px 20px' : '72px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', paddingLeft: isMobile ? 0 : 52 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '160px 1fr', gap: isMobile ? 12 : 48, alignItems: 'baseline', marginBottom: isMobile ? 24 : 36 }}>
          <Reveal>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ak-fg-2-on3)' }}>
              02 — what i take on
            </div>
          </Reveal>
          <Reveal delay={120} y={20}>
            <h2 style={{
              fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
              fontSize: 'clamp(24px, 2.4vw, 32px)',
              lineHeight: 1.1,
              letterSpacing: '-0.02em',
              fontWeight: 400,
              margin: 0,
              maxWidth: 720,
              textWrap: 'balance'
            }}>
              work for stages, screens,{' '}
              <span style={{ color: 'var(--ak-fg-2-on3)' }}>and the spaces between.</span>
            </h2>
          </Reveal>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(6, 1fr)',
          gap: 1,
          background: 'var(--ak-line-on3)',
          border: '1px solid var(--ak-line-on3)',
          borderRadius: 12,
          overflow: 'hidden'
        }}>
          {PROJECT_TYPES.map((t, i) =>
          <Reveal key={t.id} delay={i * 60} y={20} style={{
            background: 'var(--ak-bg-3)',
            padding: isMobile ? '14px 14px' : '20px 18px',
            display: 'flex', flexDirection: 'column', gap: isMobile ? 6 : 8,
            minHeight: isMobile ? 'auto' : 150
          }}>
              <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '0.14em',
              color: 'var(--ak-fg-2-on3)'
            }}>
                <span>0{i + 1}</span>
                <span style={{
                fontSize: 9, fontWeight: 700, letterSpacing: '0.16em',
                color: accent
              }}>
                  {t.tag}
                </span>
              </div>
              <div style={{
              fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
              fontSize: 16, lineHeight: 1.2,
              letterSpacing: '-0.01em', fontWeight: 500,
              color: 'var(--ak-fg-on3)',
              marginTop: 4
            }}>
                {t.name}
              </div>
              <div style={{
              fontSize: 11, lineHeight: 1.45,
              color: 'var(--ak-fg-2-on3)',
              marginTop: 'auto'
            }}>
                {t.blurb}
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function ClientsA() {
  // Marquee: render names + bullets as siblings of one inline-flex container,
  // so a single CSS gap controls every spacing — name<->bullet and bullet<->name
  // look identical, including across the 3-rep seam.
  // Track is 3 identical reps so translateX(-33.333%) loops seamlessly.
  // animation-direction: reverse flips the motion left -> right.
  const reps = [0, 1, 2];
  return (
    <section style={{
      background: 'var(--ak-bg-2)',
      padding: '32px 0',
      borderTop: '1px solid var(--ak-line)',
      borderBottom: '1px solid var(--ak-line)',
      overflow: 'hidden'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48, paddingLeft: 32, marginBottom: 18 }}>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
          textTransform: 'uppercase', color: 'var(--ak-fg-2)'
        }}>
          04 — clients
        </div>
      </div>
      <div style={{
        position: 'relative',
        width: '100%',
        overflow: 'hidden',
        maskImage: 'linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)'
      }}>
        <div style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '2rem',
          whiteSpace: 'nowrap',
          animation: 'akMarquee 78s linear infinite reverse',
          fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
          fontSize: 22,
          letterSpacing: '-0.01em',
          color: 'var(--ak-fg)'
        }}>
          {reps.flatMap((rep) =>
            CLIENTS.flatMap((c, i) => [
              <span key={'n-' + rep + '-' + i} aria-hidden={rep > 0 ? 'true' : undefined}>{c}</span>,
              <span key={'b-' + rep + '-' + i} aria-hidden="true" style={{ color: 'var(--ak-fg-2)' }}>•</span>,
            ])
          )}
        </div>
      </div>
    </section>);

}

function FeaturedWorkA({ onNavigate }) {
  const featured = PROJECTS.slice(0, 3);
  const isMobile = useIsMobileLanding();
  return (
    <section style={{ background: 'var(--ak-bg)', padding: isMobile ? '56px 20px 80px' : '96px 32px 120px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', paddingLeft: isMobile ? 0 : 52 }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 12 : 64, alignItems: 'baseline', marginBottom: isMobile ? 28 : 48 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ak-fg-2)' }}>
            03 — selected work
          </div>
          <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'baseline', gap: isMobile ? 14 : 24 }}>
            <h3 style={{
              fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
              fontSize: 'clamp(32px, 4vw, 52px)',
              lineHeight: 1.05,
              letterSpacing: '-0.02em',
              fontWeight: 400,
              margin: 0
            }}>
              recent &amp; representative.
            </h3>
            <AllWorkLink onClick={() => onNavigate('work')} />
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 32 : 24
        }}>
          {featured.map((p, fi) =>
          <Reveal key={p.id} as="article" delay={fi * 100} y={32}
          className="ak-feature-card"
          onClick={() => onNavigate(
            p.id === '23-springs'                  ? 'case-23-springs' :
            p.id === '299-park'                    ? 'case-299-park'   :
            p.id === 'cadillac-us-open-2025'        ? 'case-cadillac'   :
            p.id === 'batting-lab'                 ? 'case-batting-lab' :
            p.id === 'jackson-wang-magical-portal' ? 'case-jackson-wang' :
            'work'
          )}
          style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
              aspectRatio: '4/5',
              borderRadius: 16,
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid var(--ak-line)'
            }}>
                <div className="ak-card-media" style={{
                position: 'absolute', inset: 0,
                background: p.image
                  ? `#000 ${p.imagePosition || 'center'}/${p.imageSize || 'cover'} no-repeat url("${p.image}")`
                  : p.media
              }} />
                {p.__placeholder &&
              <div style={{
                position: 'absolute', top: 16, left: 16,
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10, letterSpacing: '0.14em',
                color: 'rgba(255,255,255,0.6)',
                textTransform: 'uppercase'
              }}>
                    [ placeholder ]
                  </div>
              }
                <div style={{
                position: 'absolute', bottom: 16, left: 16,
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10, letterSpacing: '0.14em',
                color: 'rgba(255,255,255,0.7)',
                textTransform: 'uppercase'
              }}>
                  {p.year}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--ak-fg-2)', marginBottom: 8 }}>
                  {p.tags.slice(0, 3).join(' / ')}
                </div>
                <div style={{
                fontFamily: "'PP Neue Montreal', 'Geist', system-ui, sans-serif",
                fontSize: 24, lineHeight: 1.1,
                letterSpacing: '-0.01em', fontWeight: 400,
                color: 'var(--ak-fg)',
                marginBottom: 4
              }}>
                  {p.title}
                </div>
                <div style={{ fontSize: 13, color: 'var(--ak-fg-2)' }}>
                  {p.client} · {p.year}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

window.LandingA = LandingA;