/* global React, Reveal, Icon */
const { useState: useStateSS, useEffect: useEffectSS } = React;

// ============================================================
// SINUX SIGNALS MARKETING SITE
// AI trade-signal tracking for Discord trading communities
// Product by Sinux Consulting · sibling of SinuxMod
// ============================================================

function SinuxSignalsPage() {
  return (
    <div className="page-enter ss-page" data-screen-label="SinuxSignals">
      <SSNav />
      <SSHero />
      <SSSocialProof />
      <SSOutcomes />
      <SSFeatures />
      <SSDemo />
      <SSDashboard />
      <SSHowItWorks />
      <SSPricing />
      <SSFAQ />
      <SSFinalCTA />
      <SSFooter />
    </div>
  );
}

// ============================================================
// NAV
// ============================================================
function SSNav() {
  const [scrolled, setScrolled] = useStateSS(false);
  useEffectSS(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`ss-header ${scrolled ? "scrolled" : ""}`}>
      <div className="ss-nav-inner">
        <a href="/sinux-signals" className="ss-brand">
          <SSLogo size={28} />
          <span className="ss-brand-text">Sinux Signals</span>
        </a>
        <nav className="ss-nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#dashboard">Dashboard</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="https://www.sinuxsignals.com" target="_blank" rel="noreferrer" className="ss-btn ss-btn-primary">Launch Sinux Signals</a>
      </div>
    </header>
  );
}

function SSLogo({ size = 32 }) {
  const id = "ss-" + Math.floor(Math.random() * 1e6);
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#10B981" />
          <stop offset="100%" stopColor="#047857" />
        </linearGradient>
      </defs>
      <rect x="3" y="3" width="34" height="34" rx="9" fill={`url(#${id})`} />
      {/* candlesticks with upward signal */}
      <g>
        <line x1="12" y1="14" x2="12" y2="28" stroke="white" strokeWidth="1.2" opacity="0.95" />
        <rect x="10" y="20" width="4" height="6" rx="0.5" fill="white" opacity="0.95" />
        <line x1="20" y1="11" x2="20" y2="26" stroke="white" strokeWidth="1.2" opacity="0.95" />
        <rect x="18" y="14" width="4" height="8" rx="0.5" fill="white" opacity="0.95" />
        <line x1="28" y1="8" x2="28" y2="22" stroke="white" strokeWidth="1.2" opacity="0.95" />
        <rect x="26" y="10" width="4" height="8" rx="0.5" fill="white" opacity="0.95" />
        <path d="M10 22 L20 16 L28 12" stroke="#fde047" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.9" />
      </g>
    </svg>
  );
}

// ============================================================
// HERO
// ============================================================
function SSHero() {
  return (
    <section className="ss-hero">
      <div className="ss-hero-bg" />
      <div className="ss-container">
        <div className="ss-hero-grid">
          <div className="ss-hero-text">
            <Reveal>
              <span className="ss-pill">
                <span className="ss-pulse" />
                Product by Sinux Consulting
              </span>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="ss-h1">
                Your analysts shouldn't be <span className="ss-h1-accent">tracking trades by hand</span>.
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="ss-lede">
                Your analysts already post entries, adds, trims and exits in Discord. Sinux Signals reads those
                messages, understands them with AI, and turns them into a real-time trading desk your whole
                community can see — no spreadsheets, no rigid posting format.
              </p>
            </Reveal>
            <Reveal delay={320}>
              <div className="ss-cta-row">
                <a href="https://www.sinuxsignals.com" target="_blank" rel="noreferrer" className="ss-btn ss-btn-primary ss-btn-lg">Launch Sinux Signals</a>
                <a href="#demo" className="ss-btn ss-btn-outline ss-btn-lg">See it in action →</a>
              </div>
            </Reveal>
          </div>
          <Reveal delay={300} className="ss-hero-visual">
            <SSDiscordTradeMock />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Discord-style trade-post mockup — staggered CSS animation
function SSDiscordTradeMock() {
  return (
    <div className="ss-discord-card">
      <div className="ss-discord-header">
        <div className="ss-discord-channel">
          <span className="ss-channel-icon">#</span>
          <span>vip-calls</span>
        </div>
        <span className="ss-discord-status ss-discord-status-live">🟢 LIVE</span>
      </div>
      <div className="ss-discord-body">
        <SSDiscordMsg author="Charan" avatar="C" delay={0}
          text={<><strong style={{ color: "#10B981" }}>BUY</strong> AAPL 175C 1/19 @1.20 — breakout setup above 178</>} />
        <SSDiscordParse delay={1.6} />
        <SSDiscordSignal type="opened" delay={3.0} ticker="AAPL" contract="175C 1/19" fill="$1.20" />
        <SSDiscordMsg author="Charan" avatar="C" delay={4.4}
          text={<><strong style={{ color: "#fbbf24" }}>TRIM</strong> 50% @ 1.85 — taking profits, holding rest for a runner</>} />
        <SSDiscordSignal type="trim" delay={5.6} ticker="AAPL" contract="175C 1/19" fill="$1.85" gain="+54%" />
        <div className="ss-discord-close" style={{ animationDelay: "7s" }}>
          📈 Position updated · Avg cost recalculated · Live on dashboard
        </div>
      </div>
    </div>
  );
}

function SSDiscordMsg({ author, avatar, bot, delay, text }) {
  return (
    <div className="ss-discord-msg" style={{ animationDelay: `${delay}s` }}>
      <div className={`ss-discord-avatar ${bot ? "ss-discord-avatar-bot" : ""}`}>{avatar}</div>
      <div className="ss-discord-msg-body">
        <div className="ss-discord-msg-meta">
          <span className={`ss-discord-author ${bot ? "ss-discord-author-bot" : ""}`}>{author}</span>
          {bot && <span className="ss-discord-bot-tag">BOT</span>}
        </div>
        <div className="ss-discord-msg-text">{text}</div>
      </div>
    </div>
  );
}

function SSDiscordParse({ delay }) {
  return (
    <div className="ss-discord-parse" style={{ animationDelay: `${delay}s` }}>
      <span className="ss-parse-dot" /><span className="ss-parse-dot" /><span className="ss-parse-dot" />
      <span style={{ fontSize: 11, color: "#a1a8b4", marginLeft: 8 }}>Sinux Signals is parsing…</span>
    </div>
  );
}

function SSDiscordSignal({ type, delay, ticker, contract, fill, gain }) {
  const label = type === "opened" ? "Position opened" : type === "trim" ? "Position trimmed" : "Position closed";
  const color = type === "opened" ? "#10B981" : type === "trim" ? "#fbbf24" : "#ef4444";
  return (
    <div className="ss-discord-signal" style={{ animationDelay: `${delay}s`, borderColor: `${color}55` }}>
      <div className="ss-signal-row">
        <span className="ss-signal-label" style={{ color }}>{label}</span>
        <span className="ss-signal-ticker">{ticker}</span>
      </div>
      <div className="ss-signal-meta">
        <span>{contract}</span>
        <span>·</span>
        <span>fill {fill}</span>
        {gain && <><span>·</span><strong style={{ color: "#10B981" }}>{gain}</strong></>}
      </div>
    </div>
  );
}

// ============================================================
// SOCIAL PROOF STRIP
// ============================================================
function SSSocialProof() {
  const stats = [
    { v: "3", l: "Active trading communities" },
    { v: "30,000+", l: "Active users" },
    { v: "2,500+", l: "Trades parsed" },
    { v: "Real-time", l: "P&L tracking" },
  ];
  const caps = [
    { i: "⚡", t: "Hands-off capture" },
    { i: "🧠", t: "AI-parsed messages" },
    { i: "📊", t: "Live P&L" },
    { i: "🔐", t: "Discord-OAuth" },
  ];
  return (
    <section className="ss-section ss-proof-strip">
      <div className="ss-container">
        <div className="ss-proof-grid">
          {stats.map((s, i) => (
            <div key={i} className="ss-proof-stat">
              <div className="ss-proof-num">{s.v}</div>
              <div className="ss-proof-label">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="ss-capabilities">
          {caps.map((c, i) => (
            <div key={i} className="ss-cap-badge">
              <span className="ss-cap-icon">{c.i}</span>
              <span className="ss-cap-label">{c.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// OUTCOMES — "What your community gets"
// ============================================================
function SSOutcomes() {
  const items = [
    { i: "📊", t: "Verifiable proof", d: "Every call and outcome captured automatically. Members see the wins and the losses in real time. Trust becomes a built-in feature, not a marketing claim." },
    { i: "⏱️", t: "Analysts off spreadsheets", d: "No manual logging. Analysts post in Discord as normal; the dashboard updates itself with entries, adds, trims, exits, and average cost." },
    { i: "🏆", t: "A premium product", d: "Your Discord stops being a chat. It becomes a professional trading desk that members can browse, audit, and learn from." },
  ];
  return (
    <section className="ss-section">
      <div className="ss-container">
        <Reveal>
          <h2 className="ss-h2">What your <em>community gets.</em></h2>
        </Reveal>
        <div className="ss-grid-3" style={{ marginTop: 56 }}>
          {items.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="ss-card">
                <div style={{ fontSize: 28, marginBottom: 14 }}>{p.i}</div>
                <h3 className="ss-card-title">{p.t}</h3>
                <p className="ss-card-body">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FEATURES
// ============================================================
function SSFeatures() {
  const features = [
    { i: "capture",     t: "Hands-off capture",               d: "Analysts post in Discord exactly as they do now. Entries, adds, trims, and exits are logged automatically — no rigid format, no spreadsheets." },
    { i: "parse",       t: "AI parses real messages",         d: "'@' fills, multi-trade lines, options notation, stated averages, contract inheritance — even forwarded posts and app/embed messages. Built for real-world ambiguity." },
    { i: "pnl",         t: "Live positions, real P&L",        d: "Open positions show entry → now P&L the moment the next candle prints. Closed-trade recaps surface win/loss and percentage gain on the same screen." },
    { i: "attribution", t: "Per-analyst attribution",         d: "Filter every signal, every position, every win or loss by the analyst who called it. Showcase top performers, see what's working." },
    { i: "watchlist",   t: "Watchlists, separate from positions", d: "Analysis and watchlist mentions are captured but kept out of the active book — so 'looking at NVDA' never gets mistaken for a fill." },
    { i: "chart",       t: "Candlestick charts with markers", d: "Every entry and exit plotted directly on the chart, color-coded by contract. See trade context at a glance, no jumping between tools." },
    { i: "multi",       t: "Multi-server, one dashboard",     d: "Run unlimited communities from a single workspace. Isolated data per server, with per-analyst sources tracked individually." },
    { i: "auth",        t: "Discord-OAuth access control",    d: "Grant access by Discord role (VIP → viewer), manage or block users individually. Owner/admin/editor/viewer permissions with full audit log." },
  ];
  return (
    <section id="features" className="ss-section ss-section-alt">
      <div className="ss-container">
        <div className="ss-section-header">
          <Reveal>
            <div className="ss-eyebrow">Features</div>
            <h2 className="ss-h2">Everything you'd build for tracking — <em>built already.</em></h2>
          </Reveal>
        </div>
        <div className="ss-grid-4">
          {features.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className="ss-card ss-feature-card">
                <div className="ss-feature-icon"><SSFeatIcon name={f.i} /></div>
                <h3 className="ss-card-title">{f.t}</h3>
                <p className="ss-card-body">{f.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SSFeatIcon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "capture":     return <svg {...p}><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>;
    case "parse":       return <svg {...p}><path d="M4 6h16M4 12h10M4 18h16"/><circle cx="18" cy="14" r="2.5"/><path d="M20 16l1.5 1.5"/></svg>;
    case "pnl":         return <svg {...p}><path d="M3 3v18h18"/><path d="M7 14l4-4 4 2 5-7"/><path d="M20 5h-3M20 5v3"/></svg>;
    case "attribution": return <svg {...p}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><path d="M16 11l2 2 4-4"/></svg>;
    case "watchlist":   return <svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case "chart":       return <svg {...p}><path d="M3 21V3M21 21H3"/><rect x="6" y="11" width="4" height="6" rx="0.5"/><line x1="8" y1="8" x2="8" y2="11"/><line x1="8" y1="17" x2="8" y2="19"/><rect x="14" y="7" width="4" height="10" rx="0.5"/><line x1="16" y1="4" x2="16" y2="7"/><line x1="16" y1="17" x2="16" y2="20"/></svg>;
    case "multi":       return <svg {...p}><rect x="3" y="4" width="14" height="14" rx="2"/><path d="M7 8v8M11 8v8M15 8v8M21 8v12a2 2 0 01-2 2H8"/></svg>;
    case "auth":        return <svg {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/><circle cx="12" cy="16" r="1.5"/></svg>;
    default: return null;
  }
}

// ============================================================
// DEMO — Discord mock + parsed signal card
// ============================================================
function SSDemo() {
  return (
    <section id="demo" className="ss-section">
      <div className="ss-container">
        <div className="ss-section-header">
          <Reveal>
            <div className="ss-eyebrow">See It Work</div>
            <h2 className="ss-h2">Watch a trade go from <em>Discord to dashboard.</em></h2>
          </Reveal>
        </div>

        <div className="ss-demo-grid">
          <Reveal>
            <SSDiscordTradeMock />
          </Reveal>
          <Reveal delay={120}>
            <div className="ss-parse-card">
              <div className="ss-parse-header">
                <div className="ss-parse-eyebrow">Parsed signal</div>
                <span className="ss-parse-badge">LIVE</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">TICKER</span>
                <span className="ss-parse-value ss-parse-value-strong">AAPL</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">CONTRACT</span>
                <span className="ss-parse-value">175C · 1/19/26</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">ACTION</span>
                <span className="ss-parse-pill ss-parse-pill-buy">OPEN</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">FILL</span>
                <span className="ss-parse-value">$1.20</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">AVERAGE</span>
                <span className="ss-parse-value">$1.20</span>
              </div>
              <div className="ss-parse-row">
                <span className="ss-parse-label">ANALYST</span>
                <span className="ss-parse-value">Charan</span>
              </div>
              <div className="ss-parse-footer">
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#10B981" }} />
                Live on dashboard — open positions updated
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DASHBOARD SHOWCASE — tabbed panels
// ============================================================
function SSDashboard() {
  const [tab, setTab] = useStateSS("positions");
  const tabs = [
    { id: "positions", label: "Positions",   caption: "Live open trades with entry→now P&L. Every fill, add and trim aggregated automatically." },
    { id: "feed",      label: "Signal Feed", caption: "Every parsed call in chronological order — filter by analyst, ticker, or action." },
    { id: "charts",    label: "Charts",      caption: "Candlestick view with your trade markers overlaid. See entry and exit context at a glance." },
    { id: "overview",  label: "Overview",    caption: "Per-analyst performance: win rate, average gain, total trades, signal volume." },
  ];
  const activeTab = tabs.find((t) => t.id === tab);

  return (
    <section id="dashboard" className="ss-section ss-section-alt">
      <div className="ss-container">
        <div className="ss-section-header">
          <Reveal>
            <div className="ss-eyebrow">Dashboard</div>
            <h2 className="ss-h2">One dashboard. <em>Every trade.</em></h2>
          </Reveal>
        </div>

        <div className="ss-tabs">
          {tabs.map((t) => (
            <button key={t.id} className={`ss-tab ${tab === t.id ? "active" : ""}`} onClick={() => setTab(t.id)}>
              {t.label}
            </button>
          ))}
        </div>

        <div className="ss-dash-caption">{activeTab.caption}</div>

        <div className="ss-dash-window">
          <div className="ss-dash-chrome">
            <span className="ss-dash-dot" style={{ background: "#ef4444" }} />
            <span className="ss-dash-dot" style={{ background: "#f59e0b" }} />
            <span className="ss-dash-dot" style={{ background: "#22c55e" }} />
            <span className="ss-dash-url">app.sinuxsignals.com/{tab}</span>
          </div>
          <div className="ss-dash-body">
            {tab === "positions" && <SSPositionsPanel />}
            {tab === "feed" && <SSFeedPanel />}
            {tab === "charts" && <SSChartsPanel />}
            {tab === "overview" && <SSOverviewPanel />}
          </div>
        </div>
      </div>
    </section>
  );
}

function SSPositionsPanel() {
  const positions = [
    { ticker: "AAPL", contract: "175C 1/19",  avg: "1.20",  now: "1.85",  pnl: "+54%", analyst: "Charan" },
    { ticker: "NVDA", contract: "850C 1/26",  avg: "12.40", now: "14.10", pnl: "+14%", analyst: "Instinct" },
    { ticker: "SPY",  contract: "470P 1/12",  avg: "2.05",  now: "1.78",  pnl: "−13%", analyst: "Charan" },
    { ticker: "TSLA", contract: "240C 1/19",  avg: "5.60",  now: "8.20",  pnl: "+46%", analyst: "Instinct" },
    { ticker: "META", contract: "510C 1/26",  avg: "4.30",  now: "5.05",  pnl: "+17%", analyst: "Charan" },
    { ticker: "AMZN", contract: "180C 1/12",  avg: "1.95",  now: "2.40",  pnl: "+23%", analyst: "Dev" },
  ];
  return (
    <div className="ss-positions-panel">
      <div className="ss-pos-toolbar">
        <input className="ss-pos-search" placeholder="Filter by ticker or analyst…" />
        <button className="ss-btn ss-btn-outline ss-btn-sm">+ Manual entry</button>
      </div>
      <table className="ss-pos-table">
        <thead>
          <tr><th>Ticker</th><th>Contract</th><th>Avg</th><th>Now</th><th>P&L</th><th>Analyst</th></tr>
        </thead>
        <tbody>
          {positions.map((p, i) => {
            const positive = !p.pnl.startsWith("−");
            return (
              <tr key={i}>
                <td className="ss-pos-ticker">{p.ticker}</td>
                <td className="ss-pos-contract">{p.contract}</td>
                <td>${p.avg}</td>
                <td>${p.now}</td>
                <td className={positive ? "ss-pos-pnl-up" : "ss-pos-pnl-down"}>{p.pnl}</td>
                <td className="ss-pos-analyst">{p.analyst}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function SSFeedPanel() {
  const events = [
    { t: "11:42", who: "Charan",   action: "OPEN",  ticker: "AAPL", detail: "175C 1/19 @1.20",                color: "#10B981" },
    { t: "11:38", who: "Instinct", action: "ADD",   ticker: "NVDA", detail: "850C 1/26 @12.40 · avg 11.80",   color: "#3D82FF" },
    { t: "11:15", who: "Charan",   action: "TRIM",  ticker: "SPY",  detail: "470P 1/12 50% @1.78",            color: "#fbbf24" },
    { t: "10:54", who: "Instinct", action: "CLOSE", ticker: "TSLA", detail: "240C 1/19 @8.20 · +46%",         color: "#ef4444" },
    { t: "10:31", who: "Charan",   action: "WATCH", ticker: "META", detail: "watching for breakout above 505", color: "#8b5cf6" },
    { t: "10:18", who: "Dev",      action: "OPEN",  ticker: "AMZN", detail: "180C 1/12 @1.95",                color: "#10B981" },
  ];
  return (
    <div className="ss-feed-panel">
      {events.map((e, i) => (
        <div key={i} className="ss-feed-row">
          <span className="ss-feed-time">{e.t}</span>
          <span className="ss-feed-action" style={{ color: e.color, background: `${e.color}1a`, borderColor: `${e.color}55` }}>{e.action}</span>
          <span className="ss-feed-ticker">{e.ticker}</span>
          <span className="ss-feed-detail">{e.detail}</span>
          <span className="ss-feed-who">{e.who}</span>
        </div>
      ))}
    </div>
  );
}

function SSChartsPanel() {
  const candles = [
    { o: 70, c: 75, l: 65, h: 80, up: true },
    { o: 75, c: 72, l: 68, h: 78, up: false },
    { o: 72, c: 76, l: 70, h: 80, up: true },
    { o: 76, c: 78, l: 73, h: 82, up: true },
    { o: 78, c: 80, l: 76, h: 85, up: true },
    { o: 80, c: 78, l: 75, h: 83, up: false },
    { o: 78, c: 82, l: 77, h: 86, up: true },
    { o: 82, c: 85, l: 80, h: 88, up: true },
    { o: 85, c: 88, l: 84, h: 92, up: true },
    { o: 88, c: 87, l: 85, h: 90, up: false },
    { o: 87, c: 92, l: 86, h: 95, up: true },
    { o: 92, c: 95, l: 90, h: 98, up: true },
  ];
  const yScale = (v) => 240 - (v - 60) * 4.5;
  return (
    <div className="ss-charts-panel">
      <div className="ss-charts-header">
        <div>
          <div className="ss-charts-ticker">AAPL</div>
          <div className="ss-charts-meta">175C · 1/19/26 · last 30 days</div>
        </div>
        <div className="ss-charts-pnl">+54%</div>
      </div>
      <svg viewBox="0 0 480 240" className="ss-chart-svg" preserveAspectRatio="none">
        {[0, 60, 120, 180, 240].map((y) => (
          <line key={y} x1="0" y1={y} x2="480" y2={y} stroke="#e2e8f0" strokeWidth="0.5" strokeDasharray="3 4" />
        ))}
        {candles.map((c, i) => {
          const x = i * 38 + 20;
          const color = c.up ? "#10B981" : "#ef4444";
          return (
            <g key={i}>
              <line x1={x} y1={yScale(c.h)} x2={x} y2={yScale(c.l)} stroke={color} strokeWidth="1.2" />
              <rect x={x - 7} y={yScale(Math.max(c.o, c.c))} width="14" height={Math.max(2, Math.abs(yScale(c.c) - yScale(c.o)))} fill={color} />
            </g>
          );
        })}
        <g>
          <circle cx={3 * 38 + 20} cy={yScale(78)} r="6" fill="#10B981" stroke="#fff" strokeWidth="2" />
          <text x={3 * 38 + 20} y={yScale(78) - 12} fill="#10B981" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">OPEN</text>
        </g>
        <g>
          <circle cx={7 * 38 + 20} cy={yScale(85)} r="6" fill="#fbbf24" stroke="#fff" strokeWidth="2" />
          <text x={7 * 38 + 20} y={yScale(85) - 12} fill="#fbbf24" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">TRIM</text>
        </g>
        <g>
          <circle cx={11 * 38 + 20} cy={yScale(95)} r="6" fill="#ef4444" stroke="#fff" strokeWidth="2" />
          <text x={11 * 38 + 20} y={yScale(95) - 12} fill="#ef4444" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">CLOSE</text>
        </g>
      </svg>
      <div className="ss-charts-legend">
        <span><i className="ss-leg" style={{ background: "#10B981" }}/>Open</span>
        <span><i className="ss-leg" style={{ background: "#fbbf24" }}/>Trim / partial</span>
        <span><i className="ss-leg" style={{ background: "#ef4444" }}/>Close</span>
      </div>
    </div>
  );
}

function SSOverviewPanel() {
  const analysts = [
    { name: "Charan",   role: "Lead Analyst", trades: 124, win: "68%", gain: "+18.4%" },
    { name: "Instinct", role: "Options",      trades: 86,  win: "72%", gain: "+24.1%" },
    { name: "Dev",      role: "Swing",        trades: 41,  win: "61%", gain: "+9.8%" },
  ];
  return (
    <div className="ss-overview-panel">
      <div className="ss-overview-analysts">
        {analysts.map((a, i) => (
          <div key={i} className="ss-overview-card">
            <div className="ss-overview-name-row">
              <div className="ss-overview-avatar">{a.name[0]}</div>
              <div>
                <div className="ss-overview-name">{a.name}</div>
                <div className="ss-overview-role">{a.role}</div>
              </div>
            </div>
            <div className="ss-overview-stats-row">
              <div><div className="ss-overview-stat-num">{a.trades}</div><div className="ss-overview-stat-lbl">Trades</div></div>
              <div><div className="ss-overview-stat-num" style={{ color: "#10B981" }}>{a.win}</div><div className="ss-overview-stat-lbl">Win rate</div></div>
              <div><div className="ss-overview-stat-num" style={{ color: "#10B981" }}>{a.gain}</div><div className="ss-overview-stat-lbl">Avg gain</div></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// HOW IT WORKS — 3 steps from brief
// ============================================================
function SSHowItWorks() {
  const steps = [
    { n: "01", t: "Connect", d: "Add the Sinux Signals bot to your Discord server and pick which channels to watch — per analyst, per server." },
    { n: "02", t: "Parse",   d: "AI extracts every trade: ticker, option contract, action (open / add / trim / close), fill prices and average — even from forwarded posts and app embeds. Watchlists and analysis are captured separately from positions." },
    { n: "03", t: "Track",   d: "A live dashboard shows open positions with entry→now P&L, a signal feed, per-analyst sources, candlestick charts with trade markers, watchlists, and closed-trade recaps with win/loss and percentage gain." },
  ];
  return (
    <section id="how" className="ss-section">
      <div className="ss-container">
        <div className="ss-section-header">
          <Reveal>
            <div className="ss-eyebrow">How It Works</div>
            <h2 className="ss-h2">From Discord post to dashboard in <em>seconds.</em></h2>
          </Reveal>
        </div>
        <div className="ss-steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="ss-step">
                <div className="ss-step-num">{s.n}</div>
                <div className="ss-step-body">
                  <h3 className="ss-step-title">{s.t}</h3>
                  <p className="ss-step-desc">{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING — contact-form CTA block
// ============================================================
function SSPricing() {
  return (
    <section id="pricing" className="ss-section ss-section-alt">
      <div className="ss-container">
        <div className="ss-section-header" style={{ textAlign: "center", marginInline: "auto" }}>
          <Reveal>
            <div className="ss-eyebrow">Pricing</div>
            <h2 className="ss-h2">Pricing tailored to your <em>community.</em></h2>
          </Reveal>
        </div>

        <div className="ss-pricing-card">
          <div className="ss-pricing-display">
            <div className="ss-pricing-amount">Let's talk</div>
            <div className="ss-pricing-sub">
              Pricing scales with your community size and how many analysts you run. Contact Sinux Consulting
              and we'll scope it with you.
            </div>
            <div className="ss-cta-row" style={{ justifyContent: "center", marginTop: 28 }}>
              <a href="/contact" className="ss-btn ss-btn-primary ss-btn-lg">Get a quote →</a>
              <a href="https://www.sinuxsignals.com" target="_blank" rel="noreferrer" className="ss-btn ss-btn-outline ss-btn-lg">Launch Sinux Signals</a>
            </div>
          </div>

          <div className="ss-pricing-anchor">
            <strong>Manual P&L tracking eats analyst time.</strong>
            <span>Sinux Signals automates it end-to-end — for a fraction of one analyst's hourly rate.</span>
          </div>

          <div className="ss-pricing-note">
            Custom-scoped per community. No self-serve sign-up — we onboard every client personally.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function SSFAQ() {
  const [open, setOpen] = useStateSS(0);
  const faqs = [
    { q: "Does it work with any Discord server?", a: "Yes. Sinux Signals connects to any server via Discord OAuth. You pick which channels the bot watches — one analyst per channel, or many channels per analyst." },
    { q: "Do analysts need to change how they post?", a: "No. Post entries, adds, trims, and exits in your normal format. The AI is built for real-world messages — '@' fills, multi-trade lines, options notation, contract inheritance — plus forwarded posts and app embeds." },
    { q: "What if the AI parses a trade wrong?", a: "Every parsed signal is editable in the dashboard. Override the ticker, action, fills, or remove the entry entirely. The parser improves over time from corrections in your workspace." },
    { q: "Are watchlists kept separate from open positions?", a: "Yes. The AI distinguishes between active trade calls and watchlist/analysis mentions, and routes them to separate dashboard tabs — so 'looking at NVDA' never gets mistaken for a fill." },
    { q: "Does it support options contracts?", a: "Yes. The parser understands options notation, strike, expiry, contract inheritance across adds and trims, and stated averages from analyst posts." },
    { q: "Who can see the dashboard?", a: "You decide. Grant access by Discord role (VIP → viewer, mods → editor) using OAuth, or manage and block individual users. Owner / admin / editor / viewer permissions are supported with a full audit log." },
    { q: "Is my server's data private?", a: "Yes. Every workspace is fully isolated. Server-side access control, RLS-hardened database, no secrets in the browser. Your trade history is yours alone." },
    { q: "How long does setup take?", a: "Same day. Add the bot to your server, choose the channels, set the analyst sources — your live dashboard starts generating within minutes." },
  ];

  return (
    <section id="faq" className="ss-section">
      <div className="ss-container">
        <div className="ss-faq-grid">
          <div>
            <div className="ss-eyebrow">FAQ</div>
            <h2 className="ss-h2">Common <em>questions.</em></h2>
            <p className="ss-lede" style={{ marginTop: 20 }}>
              Still wondering? <a href="/contact" style={{ color: "#10B981" }}>Talk to us</a>.
            </p>
          </div>
          <div>
            {faqs.map((f, i) => (
              <Reveal key={i} delay={i * 30}>
                <div className={`ss-faq-item ${open === i ? "open" : ""}`}>
                  <button className="ss-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="ss-faq-plus">+</span>
                  </button>
                  <div className="ss-faq-a"><div className="ss-faq-a-inner">{f.a}</div></div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function SSFinalCTA() {
  return (
    <section className="ss-section ss-final-cta">
      <div className="ss-container">
        <Reveal>
          <div className="ss-final-card">
            <h2 className="ss-h2" style={{ color: "white", maxWidth: "22ch", marginInline: "auto", textAlign: "center" }}>
              Stop tracking trades by hand. <em>Start tracking them automatically.</em>
            </h2>
            <p style={{ color: "rgba(255,255,255,0.8)", textAlign: "center", maxWidth: 580, marginInline: "auto", marginTop: 20, fontSize: 17, lineHeight: 1.65 }}>
              Sinux Signals is reading your Discord and updating your dashboard 24/7.
            </p>
            <div className="ss-cta-row" style={{ justifyContent: "center", marginTop: 32 }}>
              <a href="https://www.sinuxsignals.com" target="_blank" rel="noreferrer" className="ss-btn ss-btn-light ss-btn-lg">Launch Sinux Signals</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function SSFooter() {
  return (
    <footer className="ss-footer">
      <div className="ss-container">
        <div className="ss-footer-grid">
          <div>
            <a href="/sinux-signals" className="ss-brand">
              <SSLogo size={26} />
              <span className="ss-brand-text">Sinux Signals</span>
            </a>
            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, lineHeight: 1.65, marginTop: 14, maxWidth: 280 }}>
              AI trade-signal tracking for Discord trading communities. Built by Sinux Consulting.
            </p>
          </div>
          <div>
            <div className="ss-footer-h">Product</div>
            <div className="ss-footer-links">
              <a href="#how">How it works</a>
              <a href="#features">Features</a>
              <a href="#dashboard">Dashboard</a>
              <a href="https://www.sinuxsignals.com" target="_blank" rel="noreferrer">Launch app</a>
            </div>
          </div>
          <div>
            <div className="ss-footer-h">Support</div>
            <div className="ss-footer-links">
              <a href="/contact">Contact</a>
              <a href="mailto:info@sinuxconsulting.com">Email</a>
            </div>
          </div>
          <div>
            <div className="ss-footer-h">Company</div>
            <div className="ss-footer-links">
              <a href="/consulting">Sinux Consulting</a>
              <a href="/">Sinux Group</a>
              <a href="/terms">Terms</a>
              <a href="/privacy">Privacy</a>
            </div>
          </div>
        </div>
        <div className="ss-footer-bottom">
          <span>© 2026 Sinux Consulting · A product by Sinux Consulting</span>
          <span>Registered in Malaysia · SSM: 202503207573</span>
        </div>
      </div>
    </footer>
  );
}

window.SinuxSignalsPage = SinuxSignalsPage;