/* Nexus Signals — tail sections: Telegram, Pricing, FAQ, CTA */
const NST = window.NexusSignalsDesignSystem_a2976e;

function TelegramSection() {
  const { Button } = NST;
  const { IconTelegram, IconDiscord, IconArrowRight } = window;
  const [chan, setChan] = React.useState('discord'); // Discord-first
  const isD = chan === 'discord';
  const bullets = [
    ['Real-time whale alerts', 'The instant a tracked wallet opens a position — market, side, entry odds, size.'],
    ['Ranked daily digest', 'One 13:00 UTC post: the top signals logged in the last 24h, before any outcome.'],
    ['Result follow-ups', 'When a logged signal resolves, the win or loss posts to the same thread.'],
    ['Read-only by design', 'Alerts and research only. It never holds keys or executes a trade for you.'],
  ];
  const chanTabs = (
    <div role="tablist" aria-label="Channel" style={{ display: 'inline-flex', gap: '6px', padding: '5px', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)' }}>
      {[['discord', 'Discord', <IconDiscord size={15} />], ['telegram', 'Telegram', <IconTelegram size={15} />]].map((o) => (
        <button key={o[0]} role="tab" aria-selected={chan === o[0]} onClick={() => setChan(o[0])}
          style={{ display: 'inline-flex', alignItems: 'center', gap: '7px', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '13px', padding: '8px 16px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', border: 'none', transition: 'all 140ms', background: chan === o[0] ? (o[0] === 'discord' ? '#5865F2' : 'var(--ns-trust)') : 'transparent', color: chan === o[0] ? '#fff' : 'var(--text-muted)' }}>
          {o[2]}{o[1]}
        </button>
      ))}
    </div>
  );
  return (
    <section id="telegram" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <div className="telegram-grid">
          <div className="chan-toggle-mobile">{chanTabs}</div>
          <div data-anim="reveal">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: 'var(--ns-soft)', fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              {isD ? <IconDiscord size={16} /> : <IconTelegram size={16} />} {isD ? 'Discord community' : 'Telegram channel'}
            </div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h2)', letterSpacing: '-0.025em', lineHeight: 1.08, color: 'var(--text-primary)', margin: '16px 0 0' }}>
              The whales hit your feed first.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', margin: '16px 0 0', maxWidth: '46ch' }}>
              Every tracked-wallet move and ranked signal, posted to {isD ? 'the server' : 'the channel'} the moment it lands — logged before the outcome, then tracked to a public result.
            </p>

            {/* channel toggle (desktop, in-column) */}
            <div className="chan-toggle-desktop" style={{ marginTop: '24px' }}>{chanTabs}</div>

            <ul style={{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '18px' }}>
              {bullets.map((b) => (
                <li key={b[0]} style={{ display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
                  <span style={{ flex: 'none', marginTop: '3px', width: '8px', height: '8px', borderRadius: '50%', background: 'var(--ns-soft)', boxShadow: '0 0 0 4px var(--ns-soft-12)' }}></span>
                  <span>
                    <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '15px', color: 'var(--text-primary)' }}>{b[0]}</span>
                    <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.55, color: 'var(--text-muted)', marginTop: '3px' }}>{b[1]}</span>
                  </span>
                </li>
              ))}
            </ul>
            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '30px' }}>
              <Button variant="primary" iconLeft={isD ? <IconDiscord size={18} /> : <IconTelegram size={18} />} style={isD ? { background: '#5865F2', boxShadow: '0 0 28px rgba(88,101,242,0.4)' } : {}}>{isD ? 'Join the Discord' : 'Join the channel'}</Button>
              <Button variant="ghost" iconRight={<IconArrowRight size={16} />}>How tracking works</Button>
            </div>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.04em', marginTop: '20px' }}>
              Research and education only. Alerts are informational — not financial advice.
            </p>
          </div>

          {/* channel mock */}
          <div data-anim="reveal" className="phone-wrap">
            {isD ? <DiscordMock /> : <TelegramMock />}
            <div className="phone-glow" aria-hidden="true"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DiscordMock() {
  return (
    <div className="dcapp">
      <div className="dc-header">
        <svg className="dc-hash" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 9h16M4 15h16M10 3 8 21M16 3l-2 18"/></svg>
        <span className="dc-chname">whale-signals</span>
        <span className="dc-topic">tracked-wallet alerts</span>
        <span className="dc-members"><span className="dc-online"></span>3,212</span>
      </div>
      <div className="dc-chat">
        {/* message 1 */}
        <div className="dc-msg">
          <img className="dc-avatar" src="assets/logo-clean-64.png" alt="" width="40" height="40" />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="dc-meta"><span className="dc-author">Nexus Signals</span><span className="dc-bot">APP</span><span className="dc-time">Today at 14:32</span></div>
            <div className="dc-embed dc-embed-blue">
              <div className="dc-embed-head">🛰 NEW WHALE MOVE</div>
              <div className="dc-fields">
                <div className="dc-f"><span className="dc-fk">Market</span><span className="dc-fv">Fed cuts rates in July?</span></div>
                <div className="dc-f"><span className="dc-fk">Venue</span><span className="dc-fv">Polymarket</span></div>
                <div className="dc-f2"><span><span className="dc-fk">Position</span><span className="dc-fv"><b style={{ color: '#9bbcff' }}>YES</b> · 11¢</span></span><span><span className="dc-fk">Size</span><span className="dc-fv">$42,000</span></span></div>
                <div className="dc-f"><span className="dc-fk">Wallet</span><a className="dc-link" href="https://polymarket.com/profile/0x7a3f1c2b9d4e5f6a8b0c1d2e3f4a5b6c7d8e9c92" target="_blank" rel="noopener noreferrer">0x7a3f…c92d ↗</a></div>
              </div>
              <div className="dc-embed-foot">logged before resolution · not financial advice</div>
            </div>
            <div className="dc-reacts"><span className="dc-react">👀 42</span><span className="dc-react">🔥 28</span></div>
          </div>
        </div>
        {/* message 2 — result */}
        <div className="dc-msg">
          <img className="dc-avatar" src="assets/logo-clean-64.png" alt="" width="40" height="40" />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="dc-meta"><span className="dc-author">Nexus Signals</span><span className="dc-bot">APP</span><span className="dc-time">Today at 09:05</span></div>
            <div className="dc-embed dc-embed-win">
              <div className="dc-embed-head" style={{ color: 'var(--ns-mint)' }}>✅ VERIFIED WIN</div>
              <div className="dc-fields">
                <div className="dc-f"><span className="dc-fk">Market</span><span className="dc-fv">Fed cuts rates in July?</span></div>
                <div className="dc-f"><span className="dc-fk">Paper PnL</span><span className="dc-fv"><b style={{ color: 'var(--ns-mint)' }}>+$12.4k</b></span></div>
              </div>
              <div className="dc-embed-foot">both wins and losses are shown</div>
            </div>
            <div className="dc-reacts"><span className="dc-react">✅ 61</span><span className="dc-react">🫡 17</span></div>
          </div>
        </div>
      </div>
      <div className="dc-inputbar"><span className="dc-plus">+</span><span className="dc-placeholder">Message #whale-signals</span></div>
    </div>
  );
}

function TelegramMock() {
  return (
    <div className="tgapp">
      <div className="tg-header">
        <svg className="tg-back" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M15 18l-6-6 6-6"/></svg>
        <img src="assets/logo-clean-64.png" width="38" height="38" alt="" style={{ borderRadius: '50%', flex: 'none' }} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="tg-title">
            Nexus Signals
            <svg className="tg-verified" width="15" height="15" viewBox="0 0 24 24" fill="#3390ec"><path d="M12 2l2.4 1.8 3 .1 1 2.8 2.4 1.8-.9 2.9.9 2.9-2.4 1.8-1 2.8-3 .1L12 22l-2.4-1.8-3-.1-1-2.8L3.2 15.5l.9-2.9-.9-2.9 2.4-1.8 1-2.8 3-.1z"/><path d="M9 12l2 2 4-4" stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div className="tg-sub">12 480 subscribers</div>
        </div>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.7 }}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ opacity: 0.7 }}><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
      </div>
      <div className="tg-chat">
        <div className="tg-day"><span>June 18</span></div>
        <div className="tg-msg">
          <div className="tg-msg-name">Nexus Signals</div>
          <div className="tg-msg-head tg-blue">🛰 NEW WHALE MOVE</div>
          <div className="tg-row"><span className="tg-k">Market</span><span className="tg-vv">Fed cuts rates in July?</span></div>
          <div className="tg-row"><span className="tg-k">Venue</span><span className="tg-vv">Polymarket</span></div>
          <div className="tg-row"><span className="tg-k">Position</span><span className="tg-vv"><b style={{ color: '#6ab3f3' }}>YES</b> · 11¢</span></div>
          <div className="tg-row"><span className="tg-k">Wallet</span><a className="tg-link" href="https://polymarket.com/profile/0x7a3f1c2b9d4e5f6a8b0c1d2e3f4a5b6c7d8e9c92" target="_blank" rel="noopener noreferrer">0x7a3f…c92d ↗</a></div>
          <div className="tg-row"><span className="tg-k">Size</span><span className="tg-vv">$42,000</span></div>
          <div className="tg-foot">logged before resolution · not financial advice</div>
          <div className="tg-time">8.2K <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> 14:32</div>
        </div>
        <div className="tg-msg">
          <div className="tg-msg-name">Nexus Signals</div>
          <div className="tg-msg-head tg-win">✅ VERIFIED WIN</div>
          <div className="tg-row"><span className="tg-k">Market</span><span className="tg-vv">Fed cuts rates in July?</span></div>
          <div className="tg-row"><span className="tg-k">Paper PnL</span><span className="tg-vv"><b style={{ color: 'var(--ns-mint)' }}>+$12.4k</b></span></div>
          <div className="tg-foot">both wins and losses are shown</div>
          <div className="tg-time">9.7K <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> 09:05</div>
        </div>
        <div className="tg-typingbubble"><span className="tg-typing"></span><span className="tg-typing"></span><span className="tg-typing"></span></div>
      </div>
      <div className="tg-joinbar">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M9.5 13.5 7 11l-1.5 1.5L9.5 16.5 18 8l-1.5-1.5z"/></svg>
        Joined · notifications on
      </div>
    </div>
  );
}

function MidCTA() {
  const { GlassPanel, Button } = NST;
  const { IconArrowRight, IconTelegram } = window;
  return (
    <section style={{ paddingTop: '8px', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <GlassPanel padding="clamp(24px,4vw,40px)" glow data-anim="reveal" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px', flexWrap: 'wrap' }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.4rem,2.4vw,1.9rem)', letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>See the next whale move before the crowd.</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: '15px', color: 'var(--text-secondary)', marginTop: '6px' }}>Free to watch the board. Upgrade for the live feed + Telegram alerts.</div>
          </div>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight={<IconArrowRight size={18} />} onClick={() => window.goWhop()}>Get access</Button>
            <Button variant="secondary" size="lg" iconLeft={<IconTelegram size={18} />} onClick={() => window.open(window.TELEGRAM_URL, '_blank', 'noopener')}>Join channel</Button>
          </div>
        </GlassPanel>
      </div>
    </section>
  );
}

function Pricing() {
  const { GlassPanel, Button, Badge } = NST;
  const { IconCheck } = window;
  const tiers = [
    { name: 'Watch', price: '0', period: 'free', tagline: 'See the proof before you commit.', features: ['Public live top-10 board', 'Delayed signal feed', '30-day paper record (read-only)', 'Community read access'], cta: 'Start watching', variant: 'secondary', featured: false, action: 'board' },
    { name: 'Track', price: '25', period: '/ mo', tagline: 'The full live board and ranked signals.', features: ['Real-time signal feed', 'Full tracked-wallet list', 'Ranked signals + risk notes', 'Telegram alerts', 'Weekly research recap'], cta: 'Get access', variant: 'primary', featured: true, action: 'whop' },
    { name: 'Edge', price: '50', period: '/ mo', tagline: 'For power users and teams. API + dashboard.', features: ['Everything in Track', 'Pro API key: machine-readable signals', 'Your own analytics dashboard', 'Wallet-level move alerts', 'Custom watchlists + priority support'], cta: 'Coming soon', variant: 'secondary', featured: false, comingSoon: true },
  ];
  return (
    <section id="pricing" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <window.SectionHead align="center" eyebrow="Pricing" title="Start free. Upgrade for the live edge." sub="Cancel anytime. Research and education only — not a managed account, not financial advice." />
        <div className="pricing-grid" data-anim="stagger" style={{ marginTop: '46px' }}>
          {tiers.map((t) => (
            <GlassPanel key={t.name} padding="30px" glow={t.featured} style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: '20px', position: 'relative', border: t.featured ? '1px solid var(--ns-trust)' : '1px solid var(--border-default)', transform: t.featured ? 'translateY(-6px)' : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '18px', color: 'var(--text-primary)' }}>{t.name}</span>
                {t.featured && <Badge status="accent">Most popular</Badge>}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '20px', color: 'var(--text-muted)' }}>$</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '44px', letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>{t.price}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '14px', color: 'var(--text-muted)', marginLeft: '4px' }}>{t.period}</span>
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-secondary)', margin: 0, minHeight: '40px' }}>{t.tagline}</p>
              <Button variant={t.variant} fullWidth onClick={() => { if (t.comingSoon) { window.goHash('#get-access'); } else if (t.action === 'whop') { window.goWhop(); } else { window.goHash('#live-board'); } }}>{t.cta}</Button>
              <div style={{ height: '1px', background: 'var(--border-subtle)' }}></div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '12px' }}>
                {t.features.map((f, i) => (
                  <li key={i} style={{ display: 'flex', gap: '10px', alignItems: 'flex-start', fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-secondary)' }}>
                    <span style={{ color: 'var(--ns-soft)', marginTop: '1px', flex: 'none' }}><IconCheck size={16} /></span>{f}
                  </li>
                ))}
              </ul>
            </GlassPanel>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, open, onToggle }) {
  const { IconChevronDown } = window;
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '22px 4px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '17px', color: 'var(--text-primary)' }}>{q}</span>
        <span style={{ color: 'var(--ns-soft)', transition: 'transform 240ms', transform: open ? 'rotate(180deg)' : 'none', flex: 'none' }}><IconChevronDown size={20} /></span>
      </button>
      <div style={{ overflow: 'hidden', maxHeight: open ? '340px' : '0', transition: 'max-height 320ms var(--ease-out)' }}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.65, color: 'var(--text-muted)', margin: 0, padding: '0 4px 24px', maxWidth: '72ch' }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Is this financial advice?', a: 'No. Nexus Signals is a research and education community. We publish ranked signals and tracked paper results for study — we do not manage money, execute trades, or tell you what to buy. Research and education only, not financial advice.' },
    { q: 'How are results verified?', a: 'Every signal is logged before the outcome is known, with the market, side, entry odds, and tracked wallet on the record. We then track each to a public paper result and report the 30-day win rate — including the losses.' },
    { q: 'Do you show losing signals too?', a: 'Yes. Wins and losses are both shown, and losses are presented neutrally — not hidden, not alarmed. A win rate only means something if the misses sit on the board next to the hits.' },
    { q: 'What does the Telegram tracking actually do?', a: 'It delivers tracked-wallet move alerts and the ranked signal digest to Telegram in real time. It is read-only and informational by design — it surfaces research and never auto-executes trades on your behalf.' },
    { q: 'Is any of this automated or copy-traded for me?', a: 'No. Everything is benchmarked as paper results before any automation is ever considered. There is no managed account and nothing trades on your behalf.' },
  ];
  return (
    <section id="faq" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container" style={{ maxWidth: '860px' }}>
        <window.SectionHead align="center" eyebrow="FAQ" title="The questions you're right to ask" />
        <div data-anim="reveal" style={{ marginTop: '36px' }}>
          {items.map((it, i) => <FAQItem key={i} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const { GlassPanel, Button, Input } = NST;
  const { IconArrowRight } = window;
  return (
    <section id="get-access" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <GlassPanel padding="clamp(38px,6vw,76px)" glow data-anim="reveal" style={{ textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <div className="cta-glow" aria-hidden="true"></div>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: 'var(--ns-soft)', fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Get access</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-h1)', letterSpacing: '-0.025em', lineHeight: 1.06, color: 'var(--text-primary)', margin: '16px auto 0', maxWidth: '18ch' }}>See the receipts. Then decide.</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', color: 'var(--text-secondary)', margin: '16px auto 0', maxWidth: '48ch' }}>We track 17 whale wallets and log every signal before the outcome, wins and losses in the open. The record is early, 11 resolved signals so far. Watch it get built in public.</p>
            <form className="cta-form" onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: '10px', justifyContent: 'center', alignItems: 'stretch', margin: '32px auto 0', maxWidth: '480px' }}>
              <Input type="email" placeholder="you@example.com" containerStyle={{ flex: 1 }} aria-label="Email address" />
              <Button variant="primary" size="lg" type="submit" iconRight={<IconArrowRight size={18} />} style={{ height: '48px' }}>Get access</Button>
            </form>
            <p style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.04em', marginTop: '20px' }}>Research and education only. Not financial advice.</p>
          </div>
        </GlassPanel>
      </div>
    </section>
  );
}

Object.assign(window, { TelegramSection, MidCTA, Pricing, FAQ, CTA });