// landing/HeroMockup.jsx — simplified "Home" screen shown inside the hero phone
const HeroMockup = () => {
  const [pulse, setPulse] = React.useState(0);
  const [lang, setLang] = React.useState(() => {
    try {
      const l = localStorage.getItem('gpsoul_lang');
      if (l === 'en' || l === 'es') return l;
    } catch (e) {}
    return 'en';
  });

  React.useEffect(() => {
    const t = setInterval(() => setPulse(p => p + 1), 2000);
    return () => clearInterval(t);
  }, []);

  // Re-render when the lang dropdown dispatches a change.
  React.useEffect(() => {
    const onLang = e => setLang((e && e.detail && e.detail.lang) || 'en');
    window.addEventListener('gpsoul:lang', onLang);
    return () => window.removeEventListener('gpsoul:lang', onLang);
  }, []);

  // Read translations from i18n.js if loaded; otherwise fall back to EN.
  const dict = (window.LP_COPY && window.LP_COPY[lang] && window.LP_COPY[lang].mockup) || {
    greeting: 'Good morning, Lucía ✦',
    headline_a: 'You are exactly',
    headline_b: 'where you need to be.',
    route_eyebrow: "Today's route",
    route_body: "Trust the signs. You're closer than you think.",
    energy_label: 'Energy',
    energy_value: 'High ⚡',
    nearby_label: 'Nearby',
    nearby_value: '3 signs',
    sp_label: 'Soul Points',
    level: 'Level 7',
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: '#0B0B1F',
      fontFamily: "'Poppins', sans-serif",
      color: '#fff',
      overflow: 'hidden',
    }}>
      {/* stars */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          radial-gradient(1px 1px at 20% 25%, rgba(255,255,255,.6), transparent 50%),
          radial-gradient(1.2px 1.2px at 60% 12%, rgba(183,140,240,.7), transparent 50%),
          radial-gradient(1px 1px at 38% 75%, rgba(255,190,10,.5), transparent 50%),
          radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,.4), transparent 50%),
          radial-gradient(1.3px 1.3px at 10% 82%, rgba(148,89,231,.55), transparent 50%)
        `,
      }}/>
      {/* horizon glow */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 180,
        background: 'radial-gradient(ellipse 60% 100% at 50% 100%, rgba(148,89,231,.35) 0%, transparent 70%)',
      }}/>

      {/* status bar area */}
      <div style={{
        position: 'relative', height: 54,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 30px 0', fontSize: 13, fontWeight: 600, zIndex: 2,
      }}>
        <span>9:41</span>
        <span style={{ fontSize: 10, color: '#fff' }}>●●●●● ◉ ▮▮</span>
      </div>

      {/* header */}
      <div style={{ position: 'relative', padding: '22px 24px 0', zIndex: 2 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.15em', color: '#9459E7', textTransform: 'uppercase' }}>
          {dict.greeting}
        </div>
        <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1.1, marginTop: 6 }}>
          {dict.headline_a}<br/>{dict.headline_b}
        </div>
      </div>

      {/* energy aura (centered) */}
      <div style={{
        position: 'relative', marginTop: 24, height: 180,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        zIndex: 2,
      }}>
        {[0, 1, 2].map(i => (
          <div key={`${pulse}-${i}`} style={{
            position: 'absolute',
            width: 160, height: 160,
            borderRadius: '50%',
            border: `1px solid ${['rgba(148,89,231,.7)','rgba(255,190,10,.5)','rgba(255,153,133,.4)'][i]}`,
            animation: `heroAura 2.1s cubic-bezier(.22,.61,.36,1) infinite ${i * .7}s`,
          }}/>
        ))}
        <div style={{
          width: 58, height: 58, borderRadius: '50%',
          background: 'radial-gradient(circle, #FFBE0A 0%, #9459E7 70%, transparent 100%)',
          boxShadow: '0 0 36px rgba(148,89,231,.9), 0 0 12px rgba(255,190,10,.8)',
          position: 'relative', zIndex: 2,
        }}/>
      </div>

      {/* today's route card */}
      <div style={{ position: 'relative', padding: '8px 20px 0', zIndex: 2 }}>
        <div style={{
          background: '#1A1A2E',
          border: '1px solid rgba(148,89,231,.4)',
          borderRadius: 16,
          padding: 16,
          boxShadow: 'inset 0 0 20px rgba(148,89,231,.1)',
        }}>
          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.15em', color: '#A0AEC0', textTransform: 'uppercase', marginBottom: 6 }}>
            {dict.route_eyebrow}
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.35 }}>
            {dict.route_body}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
            <div style={{ flex: 1, padding: 10, background: '#0B0B1F', borderRadius: 10, border: '1px solid #2A2A4A' }}>
              <div style={{ fontSize: 8, color: '#A0AEC0', fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase' }}>{dict.energy_label}</div>
              <div style={{ fontSize: 14, fontWeight: 800, color: '#FFBE0A', marginTop: 2 }}>{dict.energy_value}</div>
            </div>
            <div style={{ flex: 1, padding: 10, background: '#0B0B1F', borderRadius: 10, border: '1px solid rgba(74,222,128,.35)' }}>
              <div style={{ fontSize: 8, color: '#A0AEC0', fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase' }}>{dict.nearby_label}</div>
              <div style={{ fontSize: 14, fontWeight: 800, color: '#4ADE80', marginTop: 2 }}>{dict.nearby_value}</div>
            </div>
          </div>
        </div>
      </div>

      {/* soul points */}
      <div style={{ position: 'relative', padding: '12px 20px 0', zIndex: 2 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '12px 14px',
          background: 'linear-gradient(96deg, rgba(148,89,231,.15), rgba(255,190,10,.1))',
          border: '1px solid rgba(255,190,10,.3)',
          borderRadius: 14,
        }}>
          <div>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.15em', color: '#A0AEC0', textTransform: 'uppercase' }}>{dict.sp_label}</div>
            <div style={{ fontSize: 20, fontWeight: 800, color: '#FFBE0A', marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>2,465 <span style={{ fontSize: 12 }}>💎</span></div>
          </div>
          <div style={{
            padding: '6px 12px', borderRadius: 999,
            background: 'rgba(148,89,231,.25)',
            border: '1px solid rgba(148,89,231,.5)',
            fontSize: 10, fontWeight: 700, color: '#fff',
          }}>
            {dict.level}
          </div>
        </div>
      </div>

      {/* tab bar */}
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        background: 'rgba(26,26,46,.82)',
        backdropFilter: 'blur(16px)',
        border: '1px solid rgba(42,42,74,.9)',
        borderTop: '1px solid rgba(148,89,231,.3)',
        borderRadius: 28,
        padding: '10px 8px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        zIndex: 3,
      }}>
        {['⌂','🗺','✦','♡','👤'].map((g, i) => (
          <div key={i} style={{
            width: i === 2 ? 48 : 36, height: i === 2 ? 48 : 36,
            borderRadius: '50%',
            background: i === 2
              ? 'radial-gradient(circle, #FFBE0A 0%, #9459E7 80%)'
              : 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: i === 2 ? 20 : 16,
            color: i === 0 ? '#fff' : '#A0AEC0',
            boxShadow: i === 2 ? '0 0 20px rgba(255,190,10,.6), 0 0 8px rgba(148,89,231,.6)' : 'none',
            transform: i === 2 ? 'translateY(-8px)' : 'none',
          }}>{g}</div>
        ))}
      </div>

      <style>{`
        @keyframes heroAura {
          0%   { transform: scale(.5); opacity: 1; }
          100% { transform: scale(1.8); opacity: 0; }
        }
      `}</style>
    </div>
  );
};
window.HeroMockup = HeroMockup;