// Shared helpers for the three landing-page variants.
// PhoneFrame: a clean device shell wrapping the actual app screenshot.
// AppBadges: Google Play + App Store CTAs styled to fit the surrounding palette.
// useLang: tiny localStorage-backed JP/EN state.

const { useState, useEffect } = React;

function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem('mm_lang') || 'ja');
  useEffect(() => { localStorage.setItem('mm_lang', lang); }, [lang]);
  return [lang, setLang];
}

function LangToggle({ lang, setLang, accent = '#2F8F5E', bg = 'rgba(0,0,0,0.04)' }) {
  const btn = (active) => ({
    border: 'none',
    background: active ? accent : 'transparent',
    color: active ? '#fff' : 'currentColor',
    padding: '6px 14px',
    borderRadius: 999,
    fontSize: 13,
    fontWeight: 600,
    letterSpacing: '0.04em',
    cursor: 'pointer',
    transition: 'all .18s ease',
    fontFamily: 'inherit',
  });
  return (
    <div style={{
      display: 'inline-flex',
      background: bg,
      borderRadius: 999,
      padding: 3,
      gap: 2,
    }}>
      <button style={btn(lang === 'ja')} onClick={() => setLang('ja')}>日本語</button>
      <button style={btn(lang === 'en')} onClick={() => setLang('en')}>EN</button>
    </div>
  );
}

// Phone shell — keeps the screenshot at its native aspect ratio inside a soft frame.
function PhoneFrame({ src, width = 280, frameColor = '#1a1a1a', shadow, style }) {
  const h = Math.round(width * (1520 / 720)); // screenshot is 720×1520
  return (
    <div style={{
      width,
      height: h,
      background: frameColor,
      borderRadius: width * 0.13,
      padding: width * 0.025,
      boxShadow: shadow || '0 30px 60px -20px rgba(20,40,30,.25), 0 12px 30px -8px rgba(20,40,30,.18)',
      position: 'relative',
      ...style,
    }}>
      <div style={{
        width: '100%',
        height: '100%',
        borderRadius: width * 0.105,
        overflow: 'hidden',
        background: '#fff',
        position: 'relative',
      }}>
        <img
          src={src}
          alt=""
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            objectPosition: 'top',
            display: 'block',
          }}
        />
      </div>
      {/* speaker pill */}
      <div style={{
        position: 'absolute',
        top: width * 0.05,
        left: '50%',
        transform: 'translateX(-50%)',
        width: width * 0.22,
        height: width * 0.022,
        background: '#000',
        borderRadius: 999,
        opacity: 0.5,
      }} />
    </div>
  );
}

// Google Play badge — Apple App Store omitted (no iOS release yet).
// Uses the official Google Play badge image when available (per language).
function AppBadges({ lang, dark = false, size = 'md' }) {
  const isJa = lang === 'ja';
  const height = size === 'lg' ? 56 : 50;
  const badgeSrc = isJa
    ? 'assets/google-play-badge-ja.png'
    : 'assets/google-play-badge-en.png';

  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <a
        href="https://play.google.com/store/apps/details?id=com.keice.mima"
        target="_blank"
        rel="noopener noreferrer"
        style={{
          display: 'inline-block',
          textDecoration: 'none',
          transition: 'transform .15s ease',
        }}
        onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'none'}
      >
        <img
          src={badgeSrc}
          alt={isJa ? 'Google Play で手に入れよう' : 'Get it on Google Play'}
          style={{ height, width: 'auto', display: 'block' }}
          onError={(e) => {
            // Fallback to JA badge if EN file is missing
            if (!isJa && e.currentTarget.src.indexOf('google-play-badge-ja') === -1) {
              e.currentTarget.src = 'assets/google-play-badge-ja.png';
            }
          }}
        />
      </a>
    </div>
  );
}

Object.assign(window, { useLang, LangToggle, PhoneFrame, AppBadges });