// variation-b.jsx
// Variation B — Product-forward
// Hero showcases an iPhone mockup. Bento-style Works layout mixes cards
// of different proportions. Accent: vivid blue + subtle dotted backdrop.

const B_LIGHT = {
  bg: '#F5F7FB', fg: '#0B1540', sub: '#5B6687', line: 'rgba(11,21,64,0.1)',
  card: '#FFFFFF', blue: '#2F5DFF', blueSoft: '#E6ECFF', navy: '#0B1540',
};
const B_DARK = {
  bg: '#070B1F', fg: '#F3F5FA', sub: '#9AA3C0', line: 'rgba(255,255,255,0.09)',
  card: 'rgba(255,255,255,0.04)', blue: '#5E86FF', blueSoft: 'rgba(47,93,255,0.18)', navy: '#050818',
};

function VarB({ lang = 'ja', dark = false }) {
  const t = copy[lang];
  const th = dark ? B_DARK : B_LIGHT;
  return (
    <div style={{ background: th.bg, color: th.fg, fontFamily: '"Inter","Noto Sans JP",system-ui,sans-serif', minHeight: '100%', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .vb-dots{background-image:radial-gradient(${th.line} 1px,transparent 1px);background-size:22px 22px}
        @media (max-width: 860px){
          .vb-nav{padding:14px 20px !important}
          .vb-nav-links{gap:18px !important; font-size:12px !important}
          .vb-hero{padding:48px 20px 64px !important}
          .vb-hero-grid{grid-template-columns:1fr !important; gap:48px !important}
          .vb-hero h1{font-size:44px !important; letter-spacing:-1.2px !important}
          .vb-hero p.vb-sub{font-size:16px !important}
          .vb-stats{grid-template-columns:1fr !important; gap:14px !important; max-width:none !important}
          .vb-section{padding:64px 20px !important}
          .vb-section-grid{grid-template-columns:1fr !important; gap:24px !important}
          .vb-section h2{font-size:28px !important; letter-spacing:-.6px !important}
          .vb-works{padding:64px 20px 80px !important}
          .vb-works-grid{grid-template-columns:1fr !important}
          .vb-footer{padding:40px 20px 28px !important}
          .vb-phone-wrap{transform:scale(.82); transform-origin:top center}
        }
      `}</style>

      {/* NAV */}
      <nav className="vb-nav" style={{ position: 'sticky', top: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 48px', borderBottom: `1px solid ${th.line}`, backdropFilter: 'blur(18px)', background: dark ? 'rgba(7,11,31,0.7)' : 'rgba(245,247,251,0.7)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/brand_icon.png" alt="ZAWA SYSTEM" width="28" height="28" style={{ display: 'block', borderRadius: 6, background: dark ? '#F5F7FB' : 'transparent' }} />
          <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: 0.4 }}>ZAWA<span style={{ color: th.blue }}> </span>SYSTEM</span>
        </div>
        <div className="vb-nav-links" style={{ display: 'flex', gap: 32, fontSize: 13, color: th.sub, fontWeight: 500 }}>
          <a href="#about" style={{ color: 'inherit', textDecoration: 'none' }}>About</a>
          <a href="#works" style={{ color: 'inherit', textDecoration: 'none' }}>Works</a>
          <a href="#contact" style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
        </div>
      </nav>

      {/* HERO */}
      <section className="vb-dots vb-hero" style={{ padding: '80px 48px 100px', position: 'relative' }}>
        <div className="vb-hero-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 6, background: th.blueSoft, color: th.blue, fontSize: 12, fontWeight: 600, letterSpacing: 0.3 }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: th.blue }} /> INDEPENDENT · iOS & ANDROID
            </div>
            <h1 style={{ fontSize: 76, fontWeight: 700, letterSpacing: -2.4, lineHeight: 1.02, margin: '24px 0 0' }}>
              {lang === 'ja' ? <><span>つくる。</span>磨く。<span style={{ color: th.blue }}>届ける。</span></> : <>Build.<br/>Polish.<span style={{ color: th.blue }}> Ship.</span></>}
            </h1>
            <p className="vb-sub" style={{ fontSize: 18, color: th.sub, margin: '28px 0 0', lineHeight: 1.75, maxWidth: 520 }}>{t.heroSub}</p>
            <div style={{ display: 'flex', gap: 10, marginTop: 36, flexWrap: 'wrap' }}>
              <a href="#works" style={{ padding: '13px 22px', borderRadius: 10, background: th.blue, color: '#fff', fontSize: 14, fontWeight: 600, textDecoration: 'none' }}>{t.ctaPrimary} →</a>
              <a href="#about" style={{ padding: '13px 22px', borderRadius: 10, background: 'transparent', color: th.fg, fontSize: 14, fontWeight: 600, textDecoration: 'none', border: `1px solid ${th.line}` }}>{t.ctaSecondary}</a>
            </div>
            <div className="vb-stats" style={{ marginTop: 40, paddingTop: 28, borderTop: `1px solid ${th.line}`, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, maxWidth: 540 }}>
              {[[t.stat1Num, t.stat1Label],[t.stat2Num, t.stat2Label],[t.stat3Num, t.stat3Label]].map(([n,l])=> (
                <div key={l}><div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.3 }}>{n}</div><div style={{ fontSize: 12, color: th.sub, marginTop: 4 }}>{l}</div></div>
              ))}
            </div>
          </div>
          <div className="vb-phone-wrap"><PhoneMockup th={th} /></div>
        </div>
      </section>

      {/* ABOUT STRIP */}
      <section id="about" className="vb-section" style={{ padding: '100px 48px', borderTop: `1px solid ${th.line}`, background: dark ? '#0A1028' : '#FFFFFF' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <KickerB num="01" label={t.aboutKicker} th={th} />
          <div className="vb-section-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start', marginTop: 40 }}>
            <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: -1, margin: 0, lineHeight: 1.15 }}>{t.aboutTitle}</h2>
            <div>
              <p style={{ fontSize: 16, color: th.sub, margin: 0, lineHeight: 1.8 }}>{t.aboutBody1}</p>
              <p style={{ fontSize: 16, color: th.sub, margin: '20px 0 0', lineHeight: 1.8 }}>{t.aboutBody2}</p>
            </div>
          </div>
        </div>
      </section>

      {/* WORKS — bento */}
      <section id="works" className="vb-works" style={{ padding: '100px 48px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <KickerB num="02" label={t.worksKicker} th={th} />
          <div style={{ marginTop: 32, marginBottom: 48 }}>
            <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: -1, margin: 0 }}>{t.worksTitle}</h2>
          </div>
          <div className="vb-works-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {apps.map(app => <WorkCardB key={app.id} app={app} lang={lang} th={th} />)}
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" className="vb-section" style={{ padding: '100px 48px', borderTop: `1px solid ${th.line}`, background: dark ? '#0A1028' : '#FFFFFF' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto' }}>
          <KickerB num="03" label={t.contactKicker} th={th} />
          <div className="vb-section-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start', marginTop: 40 }}>
            <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: -1, margin: 0, lineHeight: 1.15 }}>{t.contactTitle}</h2>
            <div>
              <p style={{ fontSize: 16, color: th.sub, margin: '0 0 28px', lineHeight: 1.8 }}>{t.contactSub}</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 10 }}>
                <LinkRow
                  th={th}
                  href={links.x}
                  label="X (Twitter)"
                  handle="@zawasystem"
                  icon={<svg width="16" height="16" viewBox="0 0 14 14" fill="currentColor"><path d="M10.5 0h2L8 5.5 13 14H8.6L5.1 8.9 1.2 14H-.8l4.8-6L-.6 0h4.5l3.2 4.6L10.5 0zm-.6 13h1l-6-8.5H3.3L9.9 13z"/></svg>}
                />

              </div>

            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="vb-footer" style={{ padding: '64px 48px 36px', borderTop: `1px solid ${th.line}`, background: dark ? '#030615' : '#0B1540', color: '#fff' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="assets/brand_icon.png" alt="ZAWA SYSTEM" width="24" height="24" style={{ display: 'block', borderRadius: 5, background: '#F5F7FB' }} />
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 0.4 }}>ZAWA SYSTEM</span>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>© 2025 ZAWA SYSTEM · Made in Tokyo</div>
        </div>
      </footer>
    </div>
  );
}

function LinkRow({ th, href, label, handle, icon }) {
  return (
    <a href={href} target="_blank" rel="noreferrer" style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px', borderRadius: 12,
      border: `1px solid ${th.line}`, background: 'transparent', color: 'inherit', textDecoration: 'none',
      transition: 'all .15s', fontSize: 14,
    }}
    onMouseEnter={(e)=>{e.currentTarget.style.borderColor=th.blue; e.currentTarget.style.background=th.blueSoft}}
    onMouseLeave={(e)=>{e.currentTarget.style.borderColor=th.line; e.currentTarget.style.background='transparent'}}
    >
      <span style={{ width: 32, height: 32, borderRadius: 8, background: th.blueSoft, color: th.blue, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{icon}</span>
      <span style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontSize: 14, fontWeight: 600 }}>{label}</span>
        <span style={{ fontSize: 12, color: th.sub, marginTop: 2 }}>{handle}</span>
      </span>
      <span style={{ marginLeft: 'auto', color: th.sub, fontSize: 16 }}>↗</span>
    </a>
  );
}

function KickerB({ num, label, th }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 12, fontWeight: 600, color: th.blue, letterSpacing: 1.5, textTransform: 'uppercase', padding: '6px 12px', borderRadius: 6, background: th.blueSoft }}>
      <span style={{ fontFamily: 'ui-monospace,monospace', opacity: 0.7 }}>{num}</span>
      <span style={{ width: 1, height: 12, background: th.blue, opacity: 0.3 }} />
      {label}
    </div>
  );
}

function PhoneMockup({ th }) {
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
      <div style={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(47,93,255,0.28), transparent 70%)', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', filter: 'blur(30px)' }} />
      <div style={{ position: 'relative', width: 280, height: 580, borderRadius: 44, background: '#0B1540', padding: 8, boxShadow: '0 30px 80px rgba(11,21,64,0.28), inset 0 0 0 1px rgba(255,255,255,0.06)' }}>
        <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 90, height: 22, borderRadius: 12, background: '#000', zIndex: 2 }} />
        <div style={{ width: '100%', height: '100%', borderRadius: 36, background: 'linear-gradient(180deg,#2F5DFF 0%,#0B1540 100%)', position: 'relative', overflow: 'hidden', color: '#fff' }}>
          <div style={{ padding: '44px 18px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.8 }}>9:41</div>
            <div style={{ display: 'flex', gap: 3 }}>{[1,2,3].map(i=><div key={i} style={{ width: 3, height: 8+i*2, background: '#fff', borderRadius: 1 }} />)}</div>
          </div>
          <div style={{ padding: '0 18px' }}>
            <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: 1 }}>YOMIAI</div>
            <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4, letterSpacing: -0.5 }}>For you</div>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { tag: 'AI PICK', title: '日本語RSSの10年と、AIが変える読書体験', src: 'note.com · 4分' },
                { tag: 'TECH', title: 'Flutter 3.x のパフォーマンス最適化', src: 'dev.to · 8分' },
                { tag: 'DESIGN', title: 'iOS 26 の新しいマテリアル', src: 'dribbble · 3分' },
                { tag: 'AI PICK', title: 'Riverpod + Firebase の非同期パターン', src: 'medium · 6分' },
              ].map((f,i)=>(
                <div key={i} style={{ padding: 12, borderRadius: 12, background: 'rgba(255,255,255,0.12)', backdropFilter: 'blur(8px)' }}>
                  <div style={{ fontSize: 8, fontWeight: 700, color: '#CFE2FF', letterSpacing: 1 }}>{f.tag}</div>
                  <div style={{ fontSize: 12, fontWeight: 600, marginTop: 4, lineHeight: 1.35 }}>{f.title}</div>
                  <div style={{ fontSize: 9, opacity: 0.7, marginTop: 4 }}>{f.src}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '10px 18px 24px', display: 'flex', justifyContent: 'space-around', background: 'rgba(0,0,0,0.2)', backdropFilter: 'blur(10px)', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
            {['⌂','⊚','☆','⚙'].map((g,i)=><div key={i} style={{ fontSize: 16, opacity: i===0?1:0.6 }}>{g}</div>)}
          </div>
        </div>
      </div>
    </div>
  );
}

function WorkCardB({ app, lang, th }) {
  const t = app[lang];
  return (
    <article style={{ borderRadius: 20, background: th.card, border: `1px solid ${th.line}`, padding: 26, display: 'flex', flexDirection: 'column', gap: 16, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: app.iconBg, opacity: 0.15, filter: 'blur(20px)' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative' }}>
        <img src={`assets/${app.id}_icon.png`} alt="" width="56" height="56" style={{ borderRadius: 13, display: 'block', boxShadow: '0 8px 20px rgba(0,0,0,0.18)' }} />
        <div>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.3 }}>{app.name}</div>
          <div style={{ fontSize: 12, color: th.sub, marginTop: 2 }}>{t.tagline}</div>
        </div>
      </div>
      <p style={{ fontSize: 13, color: th.sub, margin: 0, lineHeight: 1.7, minHeight: 88 }}>{t.desc}</p>
      <div style={{ padding: '12px 14px', borderRadius: 10, background: th.blueSoft, border: `1px solid ${th.line}` }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: th.blue, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 4 }}>
          {lang === 'ja' ? '技術ハイライト' : 'Tech highlight'}
        </div>
        <p style={{ fontSize: 12, color: th.fg, margin: 0, lineHeight: 1.6 }}>{t.techHighlight}</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
        {t.features.slice(0, 4).map((f,i)=>(
          <div key={i} style={{ fontSize: 11, color: th.sub, display: 'flex', gap: 6, alignItems: 'flex-start' }}>
            <span style={{ width: 4, height: 4, borderRadius: 2, background: th.blue, marginTop: 6, flexShrink: 0 }} /><span>{f}</span>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {app.stack.slice(0,3).map(s=><span key={s} style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, background: th.blueSoft, color: th.blue, fontWeight: 500 }}>{s}</span>)}
        <span style={{ fontSize: 10, padding: '3px 8px', borderRadius: 4, border: `1px solid ${th.line}`, color: th.sub }}>+{app.stack.length-3}</span>
      </div>
      <div style={{ display: 'flex', gap: 6, paddingTop: 12, borderTop: `1px solid ${th.line}`, marginTop: 'auto' }}>
        <a href={app.appStore} target="_blank" rel="noreferrer" style={{ flex: 1, padding: '9px', borderRadius: 8, background: th.fg, color: th.bg, border: 'none', fontSize: 11, fontWeight: 600, cursor: 'pointer', textAlign: 'center', textDecoration: 'none' }}>App Store</a>
        <a href={app.googlePlay} target="_blank" rel="noreferrer" style={{ flex: 1, padding: '9px', borderRadius: 8, background: 'transparent', color: th.fg, border: `1px solid ${th.line}`, fontSize: 11, fontWeight: 600, cursor: 'pointer', textAlign: 'center', textDecoration: 'none' }}>Google Play</a>
      </div>
    </article>
  );
}

window.VarB = VarB;