// MEGALIS — About + clients marquee

const aboutStyles = `
  .about {
    padding: clamp(40px, 6vw, 80px) var(--pad);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
    border-bottom: 1px solid var(--line);
  }
  .about-aside {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .about-aside .badge {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    border: 1px solid var(--line);
    padding: 6px 10px;
  }
  .about-aside h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(56px, 9vw, 140px);
    letter-spacing: -0.04em;
    line-height: 0.85;
    margin: 0;
  }
  body[data-lang="ja"] .about-aside h2 {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: clamp(40px, 7vw, 100px);
    letter-spacing: -0.02em;
    line-height: 0.95;
  }
  .about-aside .kana {
    font-family: var(--font-jp);
    color: var(--fg-3);
    font-size: 13px;
    letter-spacing: 0.2em;
  }
  .about-body p {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.6vw, 28px);
    line-height: 1.35;
    color: var(--fg);
    margin: 0 0 1em;
    text-wrap: pretty;
    letter-spacing: -0.01em;
  }
  body[data-lang="ja"] .about-body p {
    font-family: var(--font-jp);
    line-height: 1.7;
    font-size: clamp(15px, 1.2vw, 19px);
    letter-spacing: 0;
  }
  .about-body p .accent { color: var(--accent); }
  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .about-stats .stat {
    padding: 24px 16px;
    border-right: 1px solid var(--line);
  }
  .about-stats .stat:last-child { border-right: 0; }
  .about-stats .num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4vw, 64px);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .about-stats .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 8px;
  }

  /* Clients */
  .clients {
    border-bottom: 1px solid var(--line);
    padding: 32px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 32px;
  }
  .clients-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding-left: var(--pad);
    white-space: nowrap;
  }
  .clients .marquee-track {
    gap: 56px;
    padding-right: 56px;
    align-items: center;
  }
  .clients-marquee {
    position: relative;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
  }
  .clients-marquee[data-dragging="true"] { cursor: grabbing; }
  .clients-tracks {
    display: inline-flex;
    will-change: transform;
  }
  .clients-tracks .marquee-track {
    animation: none;
  }
  .clients-marquee::after,
  .clients-marquee::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 1;
  }
  .clients-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), color-mix(in oklab, var(--bg) 0%, transparent));
  }
  .clients-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), color-mix(in oklab, var(--bg) 0%, transparent));
  }
  .clients .client {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 32px);
    letter-spacing: -0.02em;
    color: var(--fg);
    opacity: 0.92;
    transition: opacity 0.3s var(--easing), color 0.3s var(--easing);
  }
  .clients .client:hover { color: var(--accent); opacity: 1; }
  .clients .client .logo {
    width: clamp(44px, 4vw, 60px);
    height: clamp(44px, 4vw, 60px);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 0.08em;
    color: var(--fg-2);
    background: var(--bg-2);
    flex-shrink: 0;
    transition: border-color 0.3s var(--easing), color 0.3s var(--easing);
  }
  .clients .client:hover .logo { border-color: var(--accent); color: var(--accent); }
  .clients .client .dot {
    color: var(--fg-3);
    margin-left: 18px;
    font-weight: 400;
  }

  @media (max-width: 900px) {
    .about { grid-template-columns: 1fr; }
    .about-aside { position: relative; top: 0; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .about-stats .stat:nth-child(2) { border-right: 0; }
    .about-stats .stat:nth-child(1), .about-stats .stat:nth-child(2) {
      border-bottom: 1px solid var(--line);
    }
    .clients { grid-template-columns: 1fr; gap: 12px; }
  }
`;

const CLIENTS = [
  { name: "HBO" },
  { name: "Netflix" },
  { name: "Amazon MGM Studios" },
  { name: "TBS" },
  { name: "NHK" },
  { name: "Tonko House" },
  { name: "The Seven" },
  { name: "Blur" },
  { name: "Robot Communications" },
  { name: "Marza Animation Planet" },
  { name: "LG Electronics" },
];

function About() {
  const t = window.useI18n('about');
  return (
    <>
      <style>{aboutStyles}</style>
      <section className="about" id="about" data-screen-label="About">
        <aside className="about-aside">
          <span className="badge">{t.num}</span>
          <h2>
            {t.title.map((part, i) => (
              <React.Fragment key={i}>
                {part}{i < t.title.length - 1 ? <br/> : null}
              </React.Fragment>
            ))}
          </h2>
          <span className="kana">{t.kana}</span>
        </aside>
        <div className="about-body">
          <p>
            <strong>MEGALIS</strong>{t.p1pre.startsWith(' ') || t.p1pre.startsWith('は') ? '' : ' '}{t.p1pre}
            <span className="accent">{t.p1accent}</span>{t.p1post}
          </p>
          <p style={{color:"var(--fg-2)"}}>{t.p2}</p>
          <p style={{color:"var(--fg-2)"}}>
            {t.p3pre}<strong style={{color:"var(--fg)"}}>MEGALIS</strong>{t.p3post}
          </p>

          <div className="about-stats">
            <div className="stat">
              <div className="num">2017</div>
              <div className="lbl">{t.stats.founded}</div>
            </div>
            <div className="stat">
              <div className="num">2</div>
              <div className="lbl">{t.stats.studios}</div>
            </div>
          </div>
        </div>
      </section>

      <section className="clients" aria-label="Selected clients">
        <span className="clients-label">{t.clientsLabel}</span>
        <ClientsMarquee />
      </section>
    </>
  );
}

function Track() {
  return (
    <div className="marquee-track">
      {CLIENTS.map((c, i) => (
        <span key={i} className="client">
          <span className="name">{c.name}</span>
          <span className="dot">/</span>
        </span>
      ))}
    </div>
  );
}

function ClientsMarquee() {
  const wrapRef = React.useRef(null);
  const tracksRef = React.useRef(null);
  const stateRef = React.useRef({
    offset: 0,
    hover: false,
    dragging: false,
    lastX: 0,
    lastTime: 0,
    halfWidth: 0,
  });
  const [dragging, setDragging] = React.useState(false);

  React.useEffect(() => {
    const SPEED = 36; // px / sec
    let rafId;
    const tick = (now) => {
      const s = stateRef.current;
      if (!s.lastTime) s.lastTime = now;
      const dt = Math.min(0.05, (now - s.lastTime) / 1000);
      s.lastTime = now;

      const tracks = tracksRef.current;
      if (tracks) {
        if (!s.halfWidth) s.halfWidth = tracks.scrollWidth / 2;
        if (!s.hover && !s.dragging) {
          s.offset += SPEED * dt;
        }
        // wrap modulo halfWidth (we render the row twice for a seamless loop)
        if (s.halfWidth > 0) {
          while (s.offset >= s.halfWidth) s.offset -= s.halfWidth;
          while (s.offset < 0) s.offset += s.halfWidth;
        }
        tracks.style.transform = `translateX(${-s.offset}px)`;
      }
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);

    // Re-measure on resize
    const onResize = () => { stateRef.current.halfWidth = 0; };
    window.addEventListener('resize', onResize);

    return () => {
      cancelAnimationFrame(rafId);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  const onPointerDown = (e) => {
    stateRef.current.dragging = true;
    stateRef.current.lastX = e.clientX;
    try { wrapRef.current.setPointerCapture(e.pointerId); } catch (err) {}
    setDragging(true);
  };
  const onPointerMove = (e) => {
    const s = stateRef.current;
    if (!s.dragging) return;
    const dx = e.clientX - s.lastX;
    s.lastX = e.clientX;
    s.offset -= dx;
  };
  const onPointerUp = (e) => {
    stateRef.current.dragging = false;
    try { wrapRef.current.releasePointerCapture(e.pointerId); } catch (err) {}
    setDragging(false);
  };
  const onMouseEnter = () => { stateRef.current.hover = true; };
  const onMouseLeave = () => { stateRef.current.hover = false; };
  const onWheel = (e) => {
    // Horizontal wheel / shift+wheel translates to scrubbing
    const dx = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : (e.shiftKey ? e.deltaY : 0);
    if (dx) {
      e.preventDefault();
      stateRef.current.offset += dx;
    }
  };

  return (
    <div
      ref={wrapRef}
      className="clients-marquee"
      data-dragging={dragging}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerCancel={onPointerUp}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onWheel={onWheel}>
      <div ref={tracksRef} className="clients-tracks">
        <Track />
        <Track />
      </div>
    </div>
  );
}

Object.assign(window, { About });