// 1Radar v3 — Home dashboard (replicates the EUSpy /Home Figma frame)

const HomeV3 = ({ onNav }) => {
  return (
    <>
      <PageHeader
        icon="home"
        title="Home"
        subtitle="Your hub"
        right={
          <>
            <button className="btn btn-stroke btn-sm">
              <Icon name="play-line" size={14}/> Watch tutorial
            </button>
            <button className="btn btn-night btn-sm">
              <Icon name="plus" size={14}/> New search
            </button>
          </>
        }
      />

      <div style={{ flex: 1, padding: '24px', display: 'flex', justifyContent: 'center', overflow: 'auto' }} className="scroll">
        <div style={{ width: 760, maxWidth: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* Welcome / upgrade strip */}
          <div className="card" style={{
            height: 64, padding: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div className="avatar avatar-sm online" style={{ width: 40, height: 40, fontSize: 14 }}>A</div>
              <div>
                <div style={{ fontWeight: 500, fontSize: 15, color: 'var(--text)' }}>Hi Ange, welcome to 1Radar</div>
                <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginTop: 2 }}>
                  <span className="badge badge-blue">FREE TRIAL</span>
                  <span style={{ fontSize: 12, color: 'var(--text-faint)' }}>14 days left</span>
                </div>
              </div>
            </div>
            <button className="btn btn-night btn-sm" style={{ height: 28 }}>
              <Icon name="sparkles" size={14}/> Upgrade now
            </button>
          </div>

          {/* Get started checklist */}
          <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="h-section font-display">Get Started Tasks</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 280 }}>
                <div className="progress" style={{ flex: 1 }}><span style={{ width: '20%' }}/></div>
                <span style={{ fontSize: 13, color: 'var(--text-faint)', fontVariantNumeric: 'tabular-nums' }}>20%</span>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { done: true,  label: 'Create your account' },
                { done: false, label: 'Connect your first ad library', desc: 'Plug Meta Ad Library or upload competitor URLs' },
                { done: false, label: 'Save your first ad' },
                { done: false, label: 'Invite a teammate' },
                { done: false, label: 'Install the Chrome extension' },
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div className={`chk ${t.done ? 'on' : ''}`}>{t.done && <Icon name="check" size={12} stroke={2.5}/>}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{
                      fontWeight: 500, fontSize: 14,
                      color: t.done ? 'var(--text-faint)' : 'var(--text)',
                      textDecoration: t.done ? 'line-through' : 'none',
                    }}>{t.label}</div>
                    {t.desc && <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2 }}>{t.desc}</div>}
                  </div>
                  {!t.done && i === 1 && (
                    <button className="btn btn-stroke btn-xs">Start <Icon name="arrow-right-s" size={12}/></button>
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Chrome extension dashed card */}
          <div className="card-dashed card" style={{
            padding: 12,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: 'var(--bg-soft)', display: 'grid', placeItems: 'center',
                  color: 'var(--text-muted)',
                }}>
                  <Icon name="chrome" size={20}/>
                </div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>Download Free Chrome Extension</div>
              </div>
              <button className="btn btn-stroke btn-sm">
                <Icon name="external" size={14}/> Add to Chrome
              </button>
            </div>
            <div style={{ paddingLeft: 42, fontSize: 12, color: 'var(--text-faint)', maxWidth: 460 }}>
              Boost your Meta's Ads Library with 1Radar : Reach, Estimated Spend, Bulk Reveal, Sort Ads, and more…
            </div>
          </div>

          {/* Affiliate dark card */}
          <div style={{
            background: 'var(--bg-night)', color: '#fff',
            borderRadius: 'var(--r-2xl)', padding: 28,
            position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', gap: 16, minHeight: 220,
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 380, position: 'relative', zIndex: 2 }}>
              <span className="badge badge-blue" style={{ background: 'rgba(51,92,255,0.18)', color: '#cdd5ff', alignSelf: 'flex-start' }}>Partner program</span>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, lineHeight: '28px', marginTop: 6 }}>
                Get 30% of our revenue<br/>for lifetime
              </div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.66)', maxWidth: 360, lineHeight: '20px' }}>
                Join our program and receive a 30% commission on all recurring payments made by customers you bring in.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, position: 'relative', zIndex: 2 }}>
              <button className="btn btn-sm" style={{ background: '#fff', color: 'var(--text)', height: 32 }}>
                Join partner program <Icon name="external" size={14}/>
              </button>
              <button className="btn btn-sm" style={{ color: '#fff', height: 32 }} onClick={() => onNav('affiliate')}>
                See how it works
              </button>
            </div>
            {/* Decorative stacked cards */}
            <div style={{ position: 'absolute', right: -30, top: 24, width: 240, height: 220, opacity: 0.9 }}>
              {[0,1,2].map((i) => (
                <div key={i} style={{
                  position: 'absolute',
                  right: i * 22, top: i * 14, width: 200, height: 130,
                  borderRadius: 16,
                  background: ['linear-gradient(135deg,#FFB088,#D34A35)', 'linear-gradient(135deg,#7B5BFF,#3B2BAE)', 'linear-gradient(135deg,#10B981,#047857)'][i],
                  transform: `rotate(${-8 + i * 6}deg)`,
                  boxShadow: '0 12px 30px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.15)',
                }}/>
              ))}
            </div>
          </div>

          {/* Latest saved ads */}
          <div className="card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '4px 0 12px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="bookmark" size={20} style={{ color: 'var(--text)' }}/>
                <span className="h-card">Latest saved Ads</span>
              </div>
              <button className="btn btn-ghost btn-xs" onClick={() => onNav('saved')}>See all <Icon name="arrow-right-s" size={12}/></button>
            </div>
            <div style={{ height: 1, background: 'var(--border)' }}/>
            <div style={{
              padding: '32px 16px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 46, height: 46, borderRadius: 999,
                display: 'grid', placeItems: 'center',
                background: 'var(--bg-soft)', color: 'var(--text-faint)',
              }}>
                <Icon name="bookmark" size={22}/>
              </div>
              <div style={{ fontSize: 14, color: 'var(--text-faint)' }}>No Ad saved yet.</div>
              <button className="btn btn-night btn-xs" style={{ height: 28 }} onClick={() => onNav('explore')}>
                Browse Ads
              </button>
            </div>
          </div>

          {/* Three quick stats */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {[
              { label: 'Brands tracked', value: '0', delta: '+0', icon: 'building' },
              { label: 'Ads saved',      value: '0', delta: '+0', icon: 'bookmark' },
              { label: 'Searches',       value: '0', delta: '+0', icon: 'search' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 12, color: 'var(--text-faint)' }}>{s.label}</span>
                  <Icon name={s.icon} size={16} style={{ color: 'var(--text-faint)' }}/>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, lineHeight: 1, color: 'var(--text)' }}>{s.value}</div>
                <div style={{ fontSize: 11, color: 'var(--text-faint)' }}>{s.delta} this week</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { HomeV3 });