// 1Radar v3 — Misc screens (Account, Affiliate, Tools, Brand detail)

const AccountV3 = () => (
  <>
    <PageHeader
      icon="user"
      title="Account"
      subtitle="Manage your subscription and team"
    />
    <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', justifyContent: 'center' }} className="scroll">
      <div style={{ width: 760, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Profile */}
        <div className="card" style={{ padding: 24, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div className="avatar online" style={{ width: 64, height: 64, fontSize: 22 }}>A</div>
          <div style={{ flex: 1 }}>
            <div className="font-display" style={{ fontWeight: 600, fontSize: 18 }}>Ange Karthaeuser</div>
            <div style={{ fontSize: 13, color: 'var(--text-faint)' }}>ange@karthaeuser.com</div>
          </div>
          <button className="btn btn-stroke btn-sm">Edit profile</button>
        </div>

        {/* Plan */}
        <div className="card" style={{ padding: 24 }}>
          <div className="h-section font-display" style={{ marginBottom: 16 }}>Subscription</div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12,
          }}>
            {[
              { name: 'Free trial', price: '€0', features: ['1 user', '50 saved ads/mo', 'Basic filters'], cur: true },
              { name: 'Pro',        price: '€49', features: ['3 users', 'Unlimited ads', 'Spend & reach', 'Brand tracking'], cur: false, hot: true },
              { name: 'Team',       price: '€149', features: ['10 users', 'API access', 'SSO', 'Priority support'], cur: false },
            ].map((p, i) => (
              <div key={i} className="card" style={{
                padding: 16,
                border: p.cur ? '1.5px solid var(--accent)' : '1px solid var(--border)',
                background: p.hot ? 'var(--bg-night)' : 'var(--bg-surface)',
                color: p.hot ? '#fff' : 'var(--text)',
                position: 'relative',
              }}>
                {p.hot && <span className="badge badge-blue" style={{ position: 'absolute', top: 12, right: 12 }}>Most popular</span>}
                <div style={{ fontSize: 13, color: p.hot ? 'rgba(255,255,255,0.6)' : 'var(--text-faint)' }}>{p.name}</div>
                <div className="font-display" style={{ fontWeight: 600, fontSize: 28, marginTop: 4 }}>
                  {p.price}<span style={{ fontSize: 13, fontWeight: 400, color: p.hot ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)' }}>/mo</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12, fontSize: 12 }}>
                  {p.features.map((f, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon name="check" size={12} stroke={2.5} style={{ color: p.hot ? '#A6FFC8' : 'var(--good)' }}/>
                      {f}
                    </div>
                  ))}
                </div>
                <button className="btn btn-sm" style={{
                  marginTop: 14, width: '100%',
                  background: p.cur ? 'var(--bg-soft)' : (p.hot ? '#fff' : 'var(--bg-night)'),
                  color: p.cur ? 'var(--text-2)' : (p.hot ? 'var(--text)' : '#fff'),
                  cursor: p.cur ? 'default' : 'pointer',
                }}>{p.cur ? 'Current plan' : 'Upgrade'}</button>
              </div>
            ))}
          </div>
        </div>

        {/* Billing */}
        <div className="card" style={{ padding: 24 }}>
          <div className="h-section font-display" style={{ marginBottom: 16 }}>Billing history</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              { date: 'Apr 12, 2025', desc: 'Free trial activated', amount: '€0.00', status: 'completed' },
            ].map((b, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '12px 0',
                borderTop: i ? '1px solid var(--border-soft)' : 'none',
              }}>
                <div>
                  <div style={{ fontSize: 14, color: 'var(--text)' }}>{b.desc}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{b.date}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>{b.amount}</span>
                  <span className="badge badge-green">Completed</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </>
);

const AffiliateV3 = () => (
  <>
    <PageHeader
      icon="gift"
      title="Affiliate program"
      subtitle="Earn 30% recurring on every sign-up"
      right={<button className="btn btn-night btn-sm"><Icon name="external" size={14}/> Visit dashboard</button>}
    />
    <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', justifyContent: 'center' }} className="scroll">
      <div style={{ width: 760, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{
          background: 'var(--bg-night)', color: '#fff',
          borderRadius: 'var(--r-2xl)', padding: 32,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ maxWidth: 380 }}>
            <span className="badge badge-blue" style={{ background: 'rgba(51,92,255,0.18)', color: '#cdd5ff' }}>Lifetime</span>
            <div className="font-display" style={{ fontSize: 28, fontWeight: 600, marginTop: 8, lineHeight: 1.15 }}>
              Get 30% of our revenue,<br/>for every customer you bring.
            </div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.66)', marginTop: 10, lineHeight: 1.5 }}>
              No cap, no expiry. As long as your referral remains a paying customer, you keep earning.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <button className="btn btn-sm" style={{ background: '#fff', color: 'var(--text)' }}>
                Get my referral link <Icon name="copy" size={14}/>
              </button>
              <button className="btn btn-sm btn-stroke" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.18)' }}>
                Read the docs
              </button>
            </div>
          </div>
          <div style={{ width: 280, height: 200, position: 'relative' }}>
            {[0,1,2].map((i) => (
              <div key={i} style={{
                position: 'absolute',
                right: i * 22, top: i * 18, width: 220, height: 130,
                borderRadius: 18,
                background: ['linear-gradient(135deg,#FFB088,#D34A35)','linear-gradient(135deg,#7B5BFF,#3B2BAE)','linear-gradient(135deg,#10B981,#047857)'][i],
                transform: `rotate(${-8 + i * 5}deg)`,
                boxShadow: '0 14px 32px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.18)',
              }}/>
            ))}
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { k: 'Clicks',       v: '1,284', d: '+12% vs last week', icon: 'cursor' },
            { k: 'Sign-ups',     v: '47',    d: '+3 today',          icon: 'user-add' },
            { k: 'Active payers',v: '12',    d: '€349 MRR',          icon: 'check-circle' },
            { k: 'Lifetime earn',v: '€1,847',d: 'Paid: €1,402',      icon: 'wallet' },
          ].map((s, i) => (
            <div key={i} className="card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 12, color: 'var(--text-faint)' }}>{s.k}</span>
                <Icon name={s.icon} size={14} style={{ color: 'var(--text-faint)' }}/>
              </div>
              <div className="font-display" style={{ fontWeight: 600, fontSize: 24, marginTop: 6 }}>{s.v}</div>
              <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 2 }}>{s.d}</div>
            </div>
          ))}
        </div>

        {/* How it works */}
        <div className="card" style={{ padding: 24 }}>
          <div className="h-section font-display" style={{ marginBottom: 16 }}>How it works</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { n: '01', t: 'Share your link', d: 'Drop it in your newsletter, Slack, X — wherever your audience lives.' },
              { n: '02', t: 'They sign up',    d: 'We track sign-ups via cookie + email match for 90 days.' },
              { n: '03', t: 'You get paid',    d: '30% commission, recurring, paid monthly via Stripe or Wise.' },
            ].map((s) => (
              <div key={s.n}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', fontWeight: 500 }}>{s.n}</div>
                <div className="font-display" style={{ fontWeight: 600, fontSize: 16, marginTop: 4 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.5 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </>
);

const ToolsV3 = ({ onOpenReddit, onNav, onAskAI }) => {
  const [activeCalc, setActiveCalc] = React.useState(null);

  if (activeCalc) {
    return <ToolCalcRouter id={activeCalc} onBack={() => setActiveCalc(null)} onNav={onNav} onAskAI={onAskAI}/>;
  }

  const CALC_SECTION = [
    { id: 'ltv',       name: 'Customer LTV',     desc: 'Lifetime value per customer and max acquisition cost.', icon: 'user',     tag: 'Calc' },
    { id: 'roas',      name: 'ROAS Break-Even',  desc: 'Min ROAS and max CPA from AOV, COGS and fees.',         icon: 'wallet',   tag: 'Calc' },
    { id: 'margin',    name: 'Profit Margin',    desc: 'Gross, operating and net margin — plus MER.',            icon: 'graph',    tag: 'Calc' },
    { id: 'shopify',   name: 'Shopify Plan',     desc: 'Find the cheapest plan for your GMV and gateway.',       icon: 'shop',     tag: 'Calc' },
    { id: 'adbudget',  name: 'Ad Budget',        desc: 'Required spend to hit a revenue target at a given ROAS.', icon: 'trend-up', tag: 'Calc' },
    { id: 'breakeven', name: 'Break-Even Units', desc: 'Monthly units needed to cover all fixed costs.',          icon: 'package',  tag: 'Calc' },
    { id: 'markup',    name: 'Markup / Margin',  desc: 'Convert between markup % and margin % with a reference table.', icon: 'tag', tag: 'Calc' },
  ];

  const GENERATOR_SECTION = [
    { id: 'fbcomment', name: 'FB Comment Generator', desc: 'Design realistic Facebook comment sections for your ad creatives.', icon: 'meta', tag: 'New' },
  ];

  const AI_SECTION = [
    { id: 'extract',   name: 'Ad copy extractor',     desc: 'Pull headlines, primary text & CTAs from any ad URL.', icon: 'magic-wand', tag: 'New' },
    { id: 'rewrite',   name: 'Hook rewriter',         desc: 'Generate 10 variations of a hook in your brand voice.', icon: 'sparkles' },
    { id: 'shotlist',  name: 'UGC shot list',         desc: 'Storyboard a UGC video from a brief.', icon: 'video' },
    { id: 'transcr',   name: 'Video transcriber',     desc: 'Auto-transcribe Meta and TikTok video ads with timestamps.', icon: 'mic', onClick: () => onNav && onNav('transcribe') },
    { id: 'reddit',    name: 'Reddit pain extractor', desc: 'Mine pain points and language from any subreddit.', icon: 'flame', tag: 'New', onClick: () => onOpenReddit && onOpenReddit() },
    { id: 'imagegen',  name: 'AI image generation',   desc: 'Render product shots, hero images, ad creative.', icon: 'image-ai', onClick: () => onNav && onNav('image') },
    { id: 'videogen',  name: 'AI video generation',   desc: 'Generate video ads, product demos and creative content.', icon: 'video', onClick: () => onNav && onNav('video') },
    { id: 'shopdetect',name: 'Shopify app detector',  desc: 'Detect apps, themes and tech behind any Shopify store.', icon: 'shop' },
    { id: 'spy',       name: 'Brand spy',             desc: 'Weekly digest of new ads from any brand.', icon: 'eye', tag: 'Beta' },
    { id: 'export',    name: 'Bulk CSV export',       desc: 'Export ad metadata for analysis in Sheets/Excel.', icon: 'export' },
    { id: 'game',      name: 'Winner or Loser',       desc: 'Train your eye — guess which of two ads scaled.', icon: 'gamepad', tag: 'Game', onClick: () => onNav && onNav('game') },
  ];

  const ToolCard = ({ t, onOpen }) => (
    <div onClick={onOpen || t.onClick} className="card" style={{ padding: 20, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'var(--accent-soft)', color: 'var(--accent)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name={t.icon} size={20}/>
        </div>
        {t.tag && (
          <span className={`badge ${t.tag === 'Calc' ? 'badge-green' : t.tag === 'Beta' ? 'badge-blue' : t.tag === 'Game' ? 'badge-blue' : 'badge-green'}`}>
            {t.tag}
          </span>
        )}
      </div>
      <div className="font-display" style={{ fontWeight: 600, fontSize: 16 }}>{t.name}</div>
      <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5, flex: 1 }}>{t.desc}</div>
      <button className="btn btn-stroke btn-sm" style={{ alignSelf: 'flex-start' }}>Open <Icon name="arrow-right-s" size={12}/></button>
    </div>
  );

  return (
    <>
      <PageHeader
        icon="tools"
        title="Tools"
        subtitle="Calculators and utilities to speed up your ad workflow"
      />
      <div style={{ flex: 1, padding: 24, overflow: 'auto' }} className="scroll">
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24 }}>

          {/* Math calculators */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>
              Math calculators
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {CALC_SECTION.map(t => (
                <ToolCard key={t.id} t={t} onOpen={() => setActiveCalc(t.id)}/>
              ))}
            </div>
          </div>

          {/* Content generators */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>
              Content generators
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {GENERATOR_SECTION.map(t => (
                <ToolCard key={t.id} t={t} onOpen={() => setActiveCalc(t.id)}/>
              ))}
            </div>
          </div>

          {/* AI tools */}
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>
              AI tools
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {AI_SECTION.map(t => (
                <ToolCard key={t.id} t={t}/>
              ))}
            </div>
          </div>

        </div>
      </div>
    </>
  );
};

Object.assign(window, { AccountV3, AffiliateV3, ToolsV3 });