// Direction D v3 — i18n-enabled
// Pulls all content from window.useT() / window.useLangCtx() (see i18n.jsx)

const D = {
  bg:     '#FFFFFF',
  bgHero: '#FFFFFF',
  panel:  '#0E0E0E',
  ink:    '#0E0E0E',
  ink2:   '#383832',
  mute:   '#8D8D85',
  rule:   'rgba(14,14,14,0.12)',
  ruleS:  'rgba(14,14,14,0.06)',
  lime:   '#C8D829',
  limeDk: '#9CAA1A',
};

const dSans = '"Noto Sans JP", system-ui, sans-serif';
const dDisplay = '"Archivo Black", "Noto Sans JP", system-ui, sans-serif';
const dMono = 'IBM Plex Mono, ui-monospace, monospace';

function DirD_Nav() {
  const { lang, setLang, t } = useLangCtx();
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <React.Fragment>
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      padding: '20px var(--nav-px)',
      display: 'flex', alignItems: 'center', gap: 'clamp(12px, 2vw, 32px)',
      fontFamily: dSans, fontSize: 13, fontWeight: 600,
      borderBottom: `1px solid ${D.ruleS}`,
    }}>
      <a href="#top" aria-label="Top" style={{ display: 'inline-block' }}>
        <img src={(window.__resources&&window.__resources.logoAfhDark)||"assets/logo_afh_dark.png"} alt="Ads for Humanity" style={{ height: 36, display: 'block' }} />
      </a>
      <span style={{ flex: 1 }}></span>
      <span className="nav-links" style={{ display: 'inline-flex', gap: 'clamp(12px, 2vw, 32px)' }}>
        {t.navItems.map(l =>
          <a key={l} href={`#${l.toLowerCase()}`} style={{ color: D.ink2, textDecoration: 'none', fontSize: 12, letterSpacing: '0.04em' }}>{l}</a>
        )}
      </span>
      <span style={{ display: 'inline-flex', gap: 0, fontFamily: dMono, fontSize: 11, letterSpacing: '0.1em' }}>
        <button onClick={() => setLang('jp')} style={{
          background: lang==='jp' ? D.ink : 'transparent',
          color: lang==='jp' ? D.bg : D.mute,
          padding: '4px 8px', fontWeight: 700, border: 'none', cursor: 'pointer', fontFamily: dMono, letterSpacing: '0.1em',
        }}>JP</button>
        <button onClick={() => setLang('en')} style={{
          background: lang==='en' ? D.ink : 'transparent',
          color: lang==='en' ? D.bg : D.mute,
          padding: '4px 8px', fontWeight: 700, border: 'none', cursor: 'pointer', fontFamily: dMono, letterSpacing: '0.1em',
        }}>EN</button>
      </span>
      <a href="https://forms.cloud.microsoft/r/kzpVzZHifS" target="_blank" rel="noopener" className="nav-cta" style={{
        background: D.lime, color: D.ink, padding: '12px 22px',
        textDecoration: 'none', fontWeight: 800, fontSize: 13,
        letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>
        {t.navContact} <span style={{ fontFamily: dMono, fontWeight: 700 }}>→</span>
      </a>
      {/* Hamburger — mobile only */}
      <button
        className="nav-hamburger"
        aria-label="Menu"
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen((v) => !v)}
        style={{
          display: 'none',
          background: D.ink, border: 'none', cursor: 'pointer',
          padding: '10px 12px', marginLeft: 4, borderRadius: 4,
        }}>
        <span style={{ display: 'flex', flexDirection: 'column', gap: 5, width: 22 }}>
          <span style={{ height: 2, background: D.bg, transform: menuOpen ? 'translateY(7px) rotate(45deg)' : 'none', transition: 'transform 0.25s' }}></span>
          <span style={{ height: 2, background: D.bg, opacity: menuOpen ? 0 : 1, transition: 'opacity 0.2s' }}></span>
          <span style={{ height: 2, background: D.bg, transform: menuOpen ? 'translateY(-7px) rotate(-45deg)' : 'none', transition: 'transform 0.25s' }}></span>
        </span>
      </button>

    </nav>
    {/* Mobile menu overlay — must be outside <nav> so position:fixed works correctly */}
    {menuOpen && (
      <div className="mobile-menu-overlay" onClick={() => setMenuOpen(false)} style={{
        position: 'fixed', top: 78, left: 0, right: 0, bottom: 0,
        background: 'rgba(255,255,255,0.98)', backdropFilter: 'blur(12px)',
        zIndex: 99, padding: '40px 24px',
        display: 'flex', flexDirection: 'column', gap: 24,
      }}>
        {t.navItems.map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} onClick={() => setMenuOpen(false)} style={{
            color: D.ink, textDecoration: 'none', fontSize: 24, fontWeight: 700, letterSpacing: '0.02em',
          }}>{l}</a>
        ))}
      </div>
    )}
    </React.Fragment>
  );
}

function DirD_Hero() {
  const { lang, t } = useLangCtx();
  const h1Var = lang === 'en' ? 'var(--hero-h1-en)' : 'var(--hero-h1)';
  const h1Letter = lang === 'en' ? '-0.03em' : '-0.04em';
  return (
    <section className="hero-grid" style={{
      background: D.bgHero,
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1fr) var(--hero-lime-w)',
      minHeight: 'calc(100vh - 78px)',
      overflow: 'hidden',
    }}>
      {/* Left track — text column. minWidth:0 lets the 1fr track actually shrink
          (and the headline wrap) instead of being forced to its content width.
          The asymmetric left padding recreates the old centered-1440 frame edge. */}
      <div className="hero-text" style={{
        minWidth: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        paddingLeft: 'max(var(--hero-pad-x), calc((100vw - 1440px) / 2 + var(--hero-pad-x)))',
        paddingRight: 'var(--hero-pad-x)',
      }}>
        {/* The Big Headline */}
        <h1 style={{
          fontFamily: dSans, fontWeight: 900,
          fontSize: h1Var, lineHeight: 1.22, letterSpacing: h1Letter,
          color: D.ink, margin: '0 0 24px',
          maxWidth: 720,
        }}>
          <span data-reveal="line" style={{ display: 'block', transitionDelay: '0.05s' }}>{t.heroLine1}</span>
          <span data-reveal="line" style={{ display: 'block', transitionDelay: '0.25s' }}>
            <span style={{
              display: 'inline-block',
              background: D.panel, color: D.lime,
              padding: '0 0.18em',
              marginRight: '0.06em',
            }}>{t.heroLine2Pill}</span>
            {t.heroLine2Rest}
          </span>
          <span data-reveal="line" style={{ display: 'block', color: D.ink, transitionDelay: '0.45s' }}>{t.heroLine3}</span>
        </h1>

        {/* Sub copy */}
        <div className="hero-sub" style={{ marginTop: 20, maxWidth: 720 }}>
          <p style={{
            fontFamily: dSans, fontSize: 16, lineHeight: 1.85, color: D.ink, margin: 0, fontWeight: 500,
          }}>
            {t.heroSubA}<br/>
            <span style={{ fontWeight: 800 }}>{t.heroSubB}</span>
          </p>
        </div>
      </div>

      {/* Right track — lime stage. Fixed width (var(--hero-lime-w)), so the figure
          is free to overflow LEFT past the green (fingers spill over the text and
          blend via multiply) WITHOUT affecting the 1fr text track's width/wrapping.
          right-aligned (justify-content:flex-end) and anchored to the viewport edge. */}
      <div className="hero-stage" style={{
        background: D.lime,
        position: 'relative', overflow: 'visible',
        display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
      }}>
        <img className="hero-figure" src={(window.__resources&&window.__resources.heroImage)||"assets/hero_image.png"} alt="" data-reveal="image" style={{
          height: 'min(calc(100vh - 78px), 880px)', width: 'auto',
          maxWidth: 'none',           // defeats global img{max-width:100%} so the figure stays height-driven
          objectFit: 'contain',
          mixBlendMode: 'multiply',
          pointerEvents: 'none',
          // As the viewport narrows below 1440, drift the figure rightward (off the
          // right edge, gets clipped) so it peels away from the text — continuous &
          // gradual, no breakpoint step. 0 at ≥1440, capped at -320px (~1024). Uses
          // margin (not transform) so [data-reveal="image"]'s slide/scale survives.
          marginRight: 'clamp(-320px, calc((100vw - 1440px) * 0.85), 0px)',
        }} />
      </div>
    </section>
  );
}

function DirD_SectionMark({ en }) {
  return (
    <div data-reveal="wipe" style={{
      fontFamily: dDisplay, fontSize: 'var(--wordmark)', lineHeight: 0.85, color: D.ink,
      letterSpacing: '-0.05em', marginTop: 'calc(var(--wordmark) / -8.5)',
    }}>
      {en}<span style={{ color: D.lime }}>.</span>
    </div>
  );
}

function DirD_About() {
  const { lang, t } = useLangCtx();
  return (
    <section id="about" data-screen-label="02 About" style={{ background: D.bg, padding: 'var(--section-py) var(--section-px)', position: 'relative' }}>
      <DirD_SectionMark en={t.aboutWord} />
      <h2 style={{
        fontFamily: dSans, fontWeight: 900, fontSize: 'var(--h2)', lineHeight: 1.22,
        letterSpacing: '-0.03em', color: D.ink, margin: '24px 0 64px', maxWidth: 1100,
      }}>
        {t.aboutH2.map((line, i) => (
          <React.Fragment key={i}>{line}{i < t.aboutH2.length - 1 ? <br/> : null}</React.Fragment>
        ))}
      </h2>

      {/* Statement body — single column, plain. Line breaks match original. */}
      <div className="about-body" style={{
        maxWidth: 820, paddingTop: 0, paddingBottom: 96,
        fontFamily: dSans, color: D.ink2,
      }}>
        <p style={{ margin: '0 0 1.6em', fontSize: 17, lineHeight: 2.1, fontWeight: 500 }}>
          {t.aboutP1[0]}<br/>
          {t.aboutP1[1]}<br/>
          {t.aboutP1[2]}<span style={{ color: D.ink, fontWeight: 500 }}>{t.aboutP1Stat}</span>{t.aboutP1[3]}<br/>
          {t.aboutP1[4]}
        </p>
        <p style={{ margin: '0 0 1.6em', fontSize: 17, lineHeight: 2.1, fontWeight: 500 }}>
          {t.aboutP2.map((line, i) => (
            <React.Fragment key={i}>{line}{i < t.aboutP2.length - 1 ? <br/> : null}</React.Fragment>
          ))}
        </p>
        <p style={{ margin: '0 0 1.6em', fontSize: 17, lineHeight: 2.1, fontWeight: 500 }}>
          {t.aboutP3.map((line, i) => (
            <React.Fragment key={i}>{line}{i < t.aboutP3.length - 1 ? <br/> : null}</React.Fragment>
          ))}
        </p>
        <p style={{ margin: 0, fontSize: 17, lineHeight: 2.1, fontWeight: 500 }}>
          {t.aboutP4.map((line, i) => (
            <React.Fragment key={i}>{line}{i < t.aboutP4.length - 1 ? <br/> : null}</React.Fragment>
          ))}
        </p>
      </div>

      {/* What is World ID block */}
      <div className="world-id-block" style={{
        marginBottom: 96,
        display: 'grid', gridTemplateColumns: 'minmax(0, 220px) 1fr', gap: 'clamp(20px, 4vw, 40px)', alignItems: 'start',
        borderLeft: `4px solid ${D.lime}`, paddingLeft: 'clamp(16px, 2vw, 28px)',
      }}>
        <div>
          <div style={{ fontFamily: dMono, fontSize: 11, letterSpacing: '0.2em', color: D.limeDk, fontWeight: 700, marginBottom: 12, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
            {t.whatIsWorldIDKickerA}
          </div>
          <div style={{ fontFamily: dDisplay, fontSize: 44, lineHeight: 0.9, color: D.ink, letterSpacing: '-0.02em' }}>World ID</div>
        </div>
        <p style={{ fontFamily: dSans, fontSize: 15, lineHeight: 2.1, color: D.ink2, margin: 0 }}>
          {t.worldIDBody}<span style={{ background: D.lime, padding: '0 6px', fontWeight: 800, color: D.ink }}>{t.worldIDBodyStat}</span>{t.worldIDBodyTail}
        </p>
      </div>

      {/* Black band — media coverage */}
      <div className="media-band" style={{ background: D.panel, color: D.bg, padding: '56px var(--black-band-px)' }}>
        <div style={{ fontFamily: dMono, fontSize: 12, letterSpacing: '0.22em', color: D.lime, textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>
          {t.mediaCoverageKicker}
        </div>
        <div style={{ fontFamily: dSans, fontSize: 13, color: 'rgba(255,255,255,0.55)', marginBottom: 32, fontWeight: 500 }}>
          {t.mediaCoverageSub}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'var(--grid-4)', gap: 32, alignItems: 'start' }}>
          {[
            { pub: t.media2Pub, date: t.media2Date, sub: t.media2Sub, big: true },
            { pub: t.media1Pub, date: t.media1Date, sub: t.media1Sub, big: true },
            { pub: t.media3Pub, date: t.media3Date, sub: t.media3Sub, big: true },
            { pub: t.media4Pub, date: t.media4Date, sub: t.media4Sub, big: false },
          ].map((m, i) => (
            <div key={i} style={{ borderTop: `1px solid rgba(255,255,255,0.18)`, paddingTop: 20 }}>
              <div style={{ fontFamily: dMono, fontSize: 11, color: D.lime, letterSpacing: '0.18em', marginBottom: 12 }}>{m.date}</div>
              <div style={{ fontFamily: dSans, fontWeight: 900, fontSize: m.big ? 32 : 28, lineHeight: 1.15, letterSpacing: '-0.02em' }}>{m.pub}</div>
              <div style={{ fontFamily: dSans, fontSize: m.big ? 14 : 13, color: 'rgba(255,255,255,0.7)', marginTop: 10, lineHeight: 1.7 }}>{m.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DirD_Business() {
  const t = useT();
  const tones = ['dark', 'lime', 'light'];
  const ns = ['a', 'b', 'c'];
  return (
    <section id="business" data-screen-label="03 Business" style={{ background: D.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.businessWord} />
      <p style={{
        fontFamily: dSans, fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.7,
        letterSpacing: '0.01em', color: D.ink, margin: '24px 0 16px', maxWidth: 1180,
      }}>
        {t.businessLead1}<br/>{t.businessLead2}
      </p>
      <p style={{
        fontFamily: dSans, fontSize: 'clamp(15px, 1.5vw, 19px)', lineHeight: 1.8, color: D.ink2,
        margin: '0 0 64px', maxWidth: 1000, fontWeight: 500,
      }}>
        {t.businessLead3}
      </p>

      <div className="business-grid" style={{ display: 'grid', gridTemplateColumns: 'var(--grid-3)', gap: 16 }}>
        {t.biz.map((s, i) => {
          const tone = tones[i];
          const n = ns[i];
          const palette =
            tone === 'dark'  ? { bg: D.panel, fg: D.bg,  acc: D.lime,  sub: 'rgba(255,255,255,0.65)' } :
            tone === 'lime'  ? { bg: D.lime,  fg: D.ink, acc: D.bg,    sub: D.ink2 } :
                               { bg: D.bg,    fg: D.ink, acc: D.lime,  sub: D.ink2, border: `1px solid ${D.ink}` };
          return (
            <div key={n} className="business-card" style={{
              background: palette.bg, color: palette.fg, padding: 32,
              border: palette.border || 'none', minHeight: 440,
              display: 'flex', flexDirection: 'column', position: 'relative',
            }}>
              <span className="business-index" style={{
                fontFamily: dDisplay, fontSize: 120, lineHeight: 0.85, letterSpacing: '-0.05em',
                color: palette.fg, marginBottom: 32,
              }}>{n}<span style={{ color: palette.acc }}>.</span></span>
              <h3 className="business-title" style={{ fontFamily: dSans, fontWeight: 900, fontSize: 26, lineHeight: 1.35, margin: '0 0 24px', letterSpacing: '-0.01em' }}>
                {s.jp}
              </h3>
              <p className="business-desc" style={{ fontFamily: dSans, fontSize: 14, lineHeight: 2, color: palette.sub, margin: 0, fontWeight: s.desc === 'Coming Soon' ? 700 : undefined }}>{s.desc}</p>
            </div>
          );
        })}
      </div>

      {/* Tech partners */}
      <div className="tech-partners" style={{
        marginTop: 72, padding: '40px clamp(20px, 3vw, 36px)', background: '#E5E4E0',
        display: 'flex', alignItems: 'center', gap: 'clamp(24px, 4vw, 48px)', flexWrap: 'wrap',
      }}>
        <div style={{
          fontFamily: dMono, fontSize: 13, color: D.ink, letterSpacing: '0.22em',
          fontWeight: 700, textTransform: 'uppercase', whiteSpace: 'nowrap',
          paddingRight: 36, lineHeight: 1.4,
        }}>
          {t.techPartners}
        </div>
        <div className="tech-logos" style={{ display: 'flex', alignItems: 'center', gap: 'clamp(24px, 4vw, 56px)', flex: 1, justifyContent: 'space-around', flexWrap: 'wrap' }}>
          <div className="tech-logo-box" style={{ width: 180, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={(window.__resources&&window.__resources.logoLg)||"assets/logo_lg.png"}     alt="LG Electronics"     style={{ maxHeight: 40, maxWidth: '100%', width: 'auto', objectFit: 'contain' }} />
          </div>
          <div className="tech-logo-box" style={{ width: 180, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={(window.__resources&&window.__resources.logoBbb)||"assets/logo_BBB%26Co.png"}     alt="BBB &Company"     style={{ maxHeight: 40, maxWidth: '100%', width: 'auto', objectFit: 'contain' }} />
          </div>
          <div className="tech-logo-box" style={{ width: 180, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={(window.__resources&&window.__resources.logoNproduction)||"assets/logo_nproduction.png"}     alt="N Production"     style={{ maxHeight: 40, maxWidth: '100%', width: 'auto', objectFit: 'contain' }} />
          </div>
          <div className="tech-logo-box" style={{ width: 180, height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={(window.__resources&&window.__resources.logoHakuhodoDyOne)||"assets/logo_HakuhodoDYONE.png"}     alt="Hakuhodo DY ONE"     style={{ maxHeight: 40, maxWidth: '100%', width: 'auto', objectFit: 'contain' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function DirectionD() {
  return (
    <div style={{ background: D.bg, color: D.ink, width: '100%', minHeight: '100%' }}>
      <DirD_Nav />
      <DirD_Hero />
      <DirD_About />
      <DirD_Business />
    </div>
  );
}

window.DirectionD = DirectionD;
Object.assign(window, {
  DirD_Nav, DirD_Hero, DirD_About, DirD_Business, DirD_SectionMark,
  DirD_Palette: D, DirD_Fonts: { dSans, dDisplay, dMono },
});