// Hero + horizontal rail of projects + one deep-detail spread.
const { useState, useEffect, useRef } = React;

function Hero({ lang }) {
  const t = CONTENT.tagline[lang];
  const m = CONTENT.heroMeta[lang];
  return (
    <section id="top" className="hero">
      <div className="hero-plate reveal d2">
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2000&q=90&auto=format&fit=crop" alt="" />
        <div className="cap">Plate 01 · Karuizawa · 2024</div>
      </div>

      <div className="inner">
        <div className="title">
          <div className="type-micro reveal">K / A — EST. 2012</div>
          <div style={{height: 28}} />
          {lang === 'ja' ? (
            <div className="type-display-jp reveal d1" style={{whiteSpace: 'pre-line'}}>{t}</div>
          ) : (
            <div className="type-display reveal d1" style={{whiteSpace: 'pre-line'}}>{t}</div>
          )}
        </div>
        <div className="right">
          <div className="ja-line reveal d3" style={{whiteSpace: 'pre-line'}}>
            {CONTENT.manifesto[lang]}
          </div>
          <div className="reveal d4" style={{
            fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.22em',
            color: 'var(--mute)', textTransform: 'uppercase', lineHeight: 2.2,
          }}>
            <div>— {lang === 'ja' ? '隈研吾建築都市設計事務所 出身' : 'From the office of Kengo Kuma'}</div>
            <div>— {lang === 'ja' ? '年間受託8件限定' : 'Capped at 8 commissions per year'}</div>
            <div>— {lang === 'ja' ? '国内外 42プロジェクト' : '42 works, Japan & abroad'}</div>
          </div>
        </div>
      </div>

      <div className="hero-footer">
        <div>
          <div className="type-micro">Studio</div>
          <div style={{fontSize: 14, marginTop: 6, fontWeight: 300}}>{m.a}</div>
        </div>
        <div>
          <div className="type-micro">Since</div>
          <div style={{fontSize: 14, marginTop: 6, fontWeight: 300}}>{m.b}</div>
        </div>
        <div>
          <div className="type-micro">Cadence</div>
          <div style={{fontSize: 14, marginTop: 6, fontWeight: 300}}>{m.c}</div>
        </div>
        <a href="#projects" className="scroll-ind" data-cursor data-cursor-label="View">
          <span>{lang === 'ja' ? 'スクロール' : 'Scroll'}</span>
          <span className="bar"></span>
        </a>
      </div>
    </section>
  );
}

function ProjectsRail({ lang, onSelect }) {
  const railRef = useRef(null);
  const [pct, setPct] = useState(0);
  const [idx, setIdx] = useState(0);

  // drag-to-scroll
  useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    let down = false, startX = 0, startScroll = 0;
    const md = (e) => {
      down = true;
      startX = (e.touches ? e.touches[0].clientX : e.clientX);
      startScroll = el.scrollLeft;
      el.classList.add('grabbing');
    };
    const mm = (e) => {
      if (!down) return;
      const x = (e.touches ? e.touches[0].clientX : e.clientX);
      el.scrollLeft = startScroll - (x - startX);
    };
    const mu = () => { down = false; el.classList.remove('grabbing'); };
    el.addEventListener('mousedown', md);
    window.addEventListener('mousemove', mm);
    window.addEventListener('mouseup', mu);
    return () => {
      el.removeEventListener('mousedown', md);
      window.removeEventListener('mousemove', mm);
      window.removeEventListener('mouseup', mu);
    };
  }, []);

  useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    const onScroll = () => {
      const max = el.scrollWidth - el.clientWidth;
      const p = max > 0 ? el.scrollLeft / max : 0;
      setPct(p * 100);
      // rough card index
      const cardWidth = el.querySelector('.rail-card')?.offsetWidth || 1;
      setIdx(Math.min(CONTENT.projects.length - 1, Math.round(el.scrollLeft / (cardWidth + 48))));
    };
    onScroll();
    el.addEventListener('scroll', onScroll, { passive: true });
    // wheel -> horizontal
    const onWheel = (e) => {
      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        el.scrollLeft += e.deltaY;
        e.preventDefault();
      }
    };
    el.addEventListener('wheel', onWheel, { passive: false });
    return () => {
      el.removeEventListener('scroll', onScroll);
      el.removeEventListener('wheel', onWheel);
    };
  }, []);

  const h = CONTENT.projectsHeading[lang];

  return (
    <section id="projects" data-screen-label="Projects">
      <SectionHead num={h.num} label={h.label} meta={h.sub} />
      <div className="rail-wrap">
        <div className="rail" ref={railRef}>
          {CONTENT.projects.map((p, i) => (
            <a key={p.id}
               className="rail-card reveal"
               href="#detail"
               onClick={(e) => { e.preventDefault(); onSelect?.(p.id); document.getElementById('detail')?.scrollIntoView({behavior:'smooth', block:'start'}); }}
               data-cursor data-cursor-label={lang === 'ja' ? '開く' : 'Open'}>
              <div className="frame">
                <span className="no">— {p.no}</span>
                <img src={p.image} alt="" loading="lazy" />
              </div>
              <div className="meta-row">
                <span>{p.location[lang]}</span>
                <span>{p.year}  ·  {p.type[lang]}</span>
              </div>
              <div className="title">
                {p.title.en}
                <span className="jp">{p.title.ja}</span>
              </div>
              <div className={`sub ${lang === 'ja' ? 'jp' : ''}`}>{p.subtitle[lang]}</div>
            </a>
          ))}
          {/* trailing white space */}
          <div style={{flex: '0 0 1px'}} />
        </div>

        <div className="rail-progress">
          <div className="count">
            {String(idx + 1).padStart(2, '0')} / {String(CONTENT.projects.length).padStart(2, '0')}
          </div>
          <div className="track"><div className="fill" style={{width: `${pct}%`}} /></div>
          <div className="hint">
            <span>{lang === 'ja' ? '横スクロール／ドラッグ' : 'Scroll / Drag'}</span>
            <span style={{letterSpacing: '0.4em'}}>→</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectDetail({ lang, projectId }) {
  const p = CONTENT.projects.find(x => x.id === projectId) || CONTENT.projects[0];
  const d = CONTENT.detail;
  return (
    <section id="detail" data-screen-label="Project Detail">
      <div className="edge" style={{paddingTop: '14vh', paddingBottom: 40}}>
        <div className="reveal" style={{display:'flex', justifyContent:'space-between', gap:24, flexWrap:'wrap'}}>
          <div style={{display:'flex', gap:32, flexWrap:'wrap'}}>
            <span className="type-micro">— {p.no}</span>
            <span className="type-micro">{p.year}</span>
            <span className="type-micro">{p.location[lang]}</span>
            <span className="type-micro">{p.type[lang]}</span>
          </div>
          <span className="type-micro"><span className="dot" style={{marginRight:10, transform:'translateY(-1px)'}}></span>{p.status[lang]}</span>
        </div>
      </div>

      <div className="edge">
        <div className="detail-hero reveal">
          <img src={p.wideImage} alt="" />
        </div>
      </div>

      <div className="detail">
        <div className="main-col">
          <h1 className="title-line reveal">
            {p.title.en}
            <span className="jp">{p.title.ja} — {p.subtitle.ja}</span>
          </h1>
          <div className={`lead reveal d1 ${lang === 'en' ? 'en' : ''}`}>
            {p.subtitle[lang]}
          </div>

          <div className="caption-block">
            <div className={`cap reveal ${lang === 'ja' ? 'jp' : ''}`}>
              <small>— 001 · Site</small>
              {d.captionA[lang]}
            </div>
            <div className={`cap reveal d1 ${lang === 'ja' ? 'jp' : ''}`}>
              <small>— 002 · Roof</small>
              {d.captionB[lang]}
            </div>
          </div>

          <div className="plate-pair">
            <div className="plate reveal">
              <img src="https://images.unsplash.com/photo-1600566753086-00f18fe6ba23?w=1600&q=90&auto=format&fit=crop" alt="" />
            </div>
            <div className="plate tall reveal d1">
              <img src="https://images.unsplash.com/photo-1600573472550-8090b5e0745e?w=1600&q=90&auto=format&fit=crop" alt="" />
            </div>
          </div>

          <div className={`cap reveal ${lang === 'ja' ? 'jp' : ''}`} style={{maxWidth: 640, marginBottom: 40}}>
            <small>— 003 · Floor</small>
            {d.captionC[lang]}
          </div>
        </div>

        <div className="meta-col">
          <div style={{marginBottom: 32, color: 'var(--ink)'}}>
            <div className="type-micro" style={{marginBottom: 14}}>Specification</div>
            <div className="spec-table">
              {d.specs.map((r, i) => (
                <div className="row" key={i}>
                  <div className="k">{r.k[lang]}</div>
                  <div>{typeof r.v === 'string' ? r.v : r.v[lang]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="edge">
        <div className="full-plate reveal">
          <img src="https://images.unsplash.com/photo-1600607688969-a5bfcd646154?w=2800&q=90&auto=format&fit=crop" alt="" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, ProjectsRail, ProjectDetail });