// Hero V1 — ACSL-inspired refresh with blurred aerial cityscape background.
// • Full-bleed photo background (blurred for plausible deniability)
// • Light off-white overlay so headline stays readable
// • Left vertical SCROLL rail
// • Headline left, abstract AI-agent network visual right
// • Bottom NEWS press-release list
const HeroV1 = () =>
<section className="ej-root hero-fullbleed" style={{ width: '100vw', minHeight: 1080, background: 'var(--off-white)', position: 'relative', overflow: 'hidden' }}>
    {/* Full-bleed blurred photo */}
    <div aria-hidden style={{
    position: 'absolute', inset: 0,
    backgroundImage: 'url(assets/hero-bg.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center 40%',
    opacity: 1,
    pointerEvents: 'none'
  }} />
    {/* Soft tint overlay — light wash so the photo fills the whole hero */}
    <div aria-hidden style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(180deg, rgba(252,251,247,0.30) 0%, rgba(252,251,247,0.12) 45%, rgba(252,251,247,0.30) 100%)',
    pointerEvents: 'none'
  }} />
    {/* Left edge fade — keeps the giant headline readable */}
    <div aria-hidden style={{
    position: 'absolute', inset: 0,
    background:
    'linear-gradient(95deg, rgba(252,251,247,0.62) 0%, rgba(252,251,247,0.28) 34%, rgba(252,251,247,0) 62%)',
    pointerEvents: 'none'
  }} />
    {/* sky bloom on top of overlay */}
    <div aria-hidden style={{
    position: 'absolute', inset: 0,
    background:
    'radial-gradient(ellipse 60% 55% at 95% -10%, rgba(186, 230, 253, 0.55), transparent 65%),' +
    ' radial-gradient(ellipse 40% 45% at 5% 110%, rgba(125, 211, 252, 0.18), transparent 65%)',
    pointerEvents: 'none'
  }} />
    {/* faint grid */}
    <div aria-hidden style={{
    position: 'absolute', inset: 0,
    backgroundImage: 'linear-gradient(rgba(11,62,111,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,62,111,0.045) 1px, transparent 1px)',
    backgroundSize: '96px 96px',
    maskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 90%)',
    WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, black 30%, transparent 90%)',
    pointerEvents: 'none'
  }} />

    {/* Full-width header band */}
    <nav className="ej-nav">
      <a href="#" className="ej-nav-logo" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
        <img src="assets/exer-logo.png" alt="Exer Japan" style={{ height: 72, width: 'auto', display: 'block', transform: 'translateY(6px)' }} />
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 48, marginLeft: 'auto' }}>
        <div className="ej-nav-links">
          <a href="pages/approach.html">Approach</a><a href="pages/company.html">Company</a><a href="pages/contact.html">Contact</a>
        </div>
        <a className="ej-nav-cta" href="pages/contact.html" style={{ textDecoration: 'none' }}>無料相談</a>
      </div>
    </nav>

    {/* Inner content kept at 1440px max-width so text alignment doesn't shift */}
    <div style={{
    position: 'relative', maxWidth: 1440, width: '100%',
    margin: '0 auto', minHeight: 1080
  }}>

    {/* LEFT vertical SCROLL rail (ACSL-signature) */}
    <div aria-hidden style={{
      position: 'absolute', left: 28, top: 220, bottom: 320,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
      pointerEvents: 'none', zIndex: 3
    }}>
      <span className="ej-mono" style={{
        writingMode: 'vertical-rl', transform: 'rotate(180deg)',
        fontSize: 12, letterSpacing: '0.35em', color: 'var(--ink-60)'
      }}>
        SCROLL
      </span>
      <span style={{ flex: 1, width: 1, background: 'linear-gradient(to bottom, var(--rule), transparent)' }}></span>
      <span style={{
        width: 6, height: 6, borderRadius: '50%', background: 'var(--navy)',
        animation: 'ej-scroll-pulse 2.4s ease-in-out infinite'
      }}></span>
    </div>

    <style>{`
      @keyframes ej-scroll-pulse {
        0%, 100% { transform: translateY(0); opacity: 1; }
        50%      { transform: translateY(14px); opacity: 0.3; }
      }
    `}</style>

    {/* meta strip */}
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 64px', marginTop: 8 }}>
      <div className="ej-mono" style={{ fontSize: 13, color: 'var(--ink-60)' }}>
        <span style={{ color: 'var(--teal)' }}>●</span>　ESTABLISHED 2025 / TOKYO, JP
      </div>
      <div className="ej-mono" style={{ fontSize: 13, color: 'var(--ink-60)' }}>
        01 / 11　—　HERO
      </div>
    </div>

    {/* Headline area — single column, centered weight */}
    <div style={{
      padding: '80px 96px 0', position: 'relative'
    }}>
      <div style={{ maxWidth: 1180 }}>
        <h1 className="ej-en" style={{
          fontSize: 168, fontWeight: 400, lineHeight: 0.92,
          color: 'var(--navy)', letterSpacing: '-0.045em', margin: 0
        }}>
          BUILD YOUR<br />
          OWN AI<br />
          WORKFORCE
        </h1>

        {/* ACSL-style eyebrow line under hero */}
        <div className="ej-mono" style={{
          marginTop: 40, fontSize: 13, letterSpacing: '0.22em', color: 'var(--navy)'
        }}>
          AI WORKFORCE FOR JAPANESE SMES　／　OUR MISSION
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 64, gap: 48 }}>
          <div className="ej-jp" style={{ maxWidth: 600, fontSize: 19, lineHeight: 1.95, color: 'var(--ink)' }}>
            生成AIの基盤構築から最適化ソリューションの開発まで、<br />
            生成AIで <span className="ej-mark-yellow" style={{ fontWeight: 600, color: 'var(--navy)' }}>業務効率化をまるごと支援</span>します。<br />
            <span style={{ color: 'var(--ink)' }}>個社最適なAIを、貴社の業務の中に。</span>
          </div>

          <button style={{
            background: 'var(--navy)', color: 'white', border: 'none',
            padding: '18px 30px', borderRadius: 999, fontSize: 14, fontWeight: 500,
            fontFamily: 'var(--font-ui)', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 12, flexShrink: 0
          }}>
            無料診断を依頼する
            <span style={{
              width: 28, height: 28, borderRadius: '50%', background: 'white',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--navy)', fontSize: 14
            }}>→</span>
          </button>
        </div>
      </div>
    </div>

    {/* Bottom NEWS strip — ACSL-style press release list */}
    <div style={{ marginTop: 96, padding: '0 64px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '180px 1fr 140px',
        gap: 48, alignItems: 'start'
      }}>
        <div>
          <div className="ej-mono" style={{ fontSize: 13, color: 'var(--navy)', letterSpacing: '0.22em' }}>
            ／ NEWS
          </div>
          <div className="ej-jp" style={{ fontSize: 11, color: 'var(--ink-60)', marginTop: 8 }}>
            最新のお知らせ
          </div>
        </div>

        <div>
          {[
          { d: '2026.05.14', tag: 'プレスリリース', t: '生成AIを活用した業務効率化サービスをリニューアル' },
          { d: '2026.04.22', tag: '導入事例', t: '建設業A社、公共工事データの自動取得で営業業務を大幅に効率化' },
          { d: '2026.03.10', tag: 'お知らせ', t: '業務効率化Boot Camp　第3期の受付を開始しました' }].
          map((n, i) =>
          <a
            key={i}
            href="#"
            style={{
              display: 'grid', gridTemplateColumns: '110px 110px 1fr 24px',
              gap: 16, alignItems: 'center',
              padding: '16px 0',
              borderTop: i === 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: '1px solid var(--rule)',
              textDecoration: 'none', color: 'inherit'
            }}>
          
              <span className="ej-mono" style={{ fontSize: 13, color: 'var(--ink)', letterSpacing: '0.08em' }}>
                {n.d}
              </span>
              <span className="ej-jp" style={{ fontSize: 10, color: 'var(--navy)', background: 'var(--sky-soft)', padding: '4px 10px', display: 'inline-block', justifySelf: 'start', letterSpacing: '0.06em' }}>
                {n.tag}
              </span>
              <span className="ej-jp" style={{ fontSize: 14, color: 'var(--ink)' }}>
                {n.t}
              </span>
              <span style={{ color: 'var(--ink-40)', fontSize: 14 }}>→</span>
            </a>
          )}
        </div>

        <div style={{ textAlign: 'right' }}>
          <a href="#" className="ej-mono" style={{
            fontSize: 13, color: 'var(--navy)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10,
            letterSpacing: '0.22em'
          }}>
            VIEW ALL
            <span style={{
              width: 28, height: 28, borderRadius: '50%', border: '1px solid var(--rule)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11
            }}>→</span>
          </a>
        </div>
      </div>
    </div>
    </div>
  </section>;


window.HeroV1 = HeroV1;