/* global React, Reveal, Icon */
const { useState: useStateRL, useEffect: useEffectRL } = React;

// ============================================================
// SINUX RELAY MARKETING SITE
// White-label Discord trade-alert broadcasting — product by Sinux Consulting
// Sibling of SinuxMod and Sinux Signals.
// ============================================================

function SinuxRelayPage() {
  return (
    <div className="page-enter rl-page" data-screen-label="SinuxRelay">
      <RLNav />
      <RLHero />
      <RLSocialProof />
      <RLOutcomes />
      <RLFeatures />
      <RLDemo />
      <RLDashboard />
      <RLHowItWorks />
      <RLPricing />
      <RLFAQ />
      <RLFinalCTA />
      <RLFooter />
    </div>
  );
}

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

  return (
    <header className={`rl-header ${scrolled ? "scrolled" : ""}`}>
      <div className="rl-nav-inner">
        <a href="/sinuxrelay" className="rl-brand">
          <RLLogo size={28} />
          <span className="rl-brand-text">Sinux Relay</span>
        </a>
        <nav className="rl-nav-links">
          <a href="#features">Features</a>
          <a href="#demo">Demo</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="https://sinuxrelay.com/app" target="_blank" rel="noopener noreferrer" className="rl-btn rl-btn-outline">Launch Portal</a>
        <a href="/contact" className="rl-btn rl-btn-primary">Get Sinux Relay</a>
      </div>
    </header>
  );
}

function RLLogo({ size = 32 }) {
  const id = "rl-" + Math.floor(Math.random() * 1e6);
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ flexShrink: 0 }} aria-label="Sinux Relay">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#8B5CF6" />
          <stop offset="100%" stopColor="#7C3AED" />
        </linearGradient>
      </defs>
      <rect x="3" y="3" width="34" height="34" rx="9" fill={`url(#${id})`} />
      {/* Broadcast: central dot + three radiating signal arcs */}
      <g fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round">
        <circle cx="20" cy="20" r="2.4" fill="white" />
        <path d="M 14.5 14.5 A 8 8 0 0 1 25.5 14.5" opacity="0.95" />
        <path d="M 11 11 A 13 13 0 0 1 29 11" opacity="0.7" />
        <path d="M 14.5 25.5 A 8 8 0 0 0 25.5 25.5" opacity="0.6" />
      </g>
    </svg>
  );
}

// ============================================================
// HERO
// ============================================================
function RLHero() {
  return (
    <section className="rl-hero">
      <div className="rl-hero-bg" />
      <div className="rl-container">
        <div className="rl-hero-grid">
          <div className="rl-hero-text">
            <Reveal>
              <div className="rl-hero-pills">
                <span className="rl-pill">
                  <span className="rl-pulse" />
                  White-label alert broadcasting
                </span>
                <span className="rl-pill rl-pill-new">
                  <span className="rl-pill-new-tag">NOW LIVE</span>
                  Portal shipped
                </span>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="rl-h1">
                Your calls. Your brand. <span className="rl-h1-accent">Everywhere</span>.
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="rl-lede">
                Post a trade call once in your Discord. Sinux Relay re-broadcasts it through your own branded
                template — logo, colours, links, footer — into every destination channel across every server you
                run. One message, many places, on-brand, instantly.
              </p>
            </Reveal>
            <Reveal delay={320}>
              <div className="rl-cta-row">
                <a href="https://sinuxrelay.com/app" target="_blank" rel="noopener noreferrer" className="rl-btn rl-btn-primary rl-btn-lg">Launch Portal</a>
                <a href="#demo" className="rl-btn rl-btn-outline rl-btn-lg">See it work →</a>
              </div>
            </Reveal>
          </div>
          <Reveal delay={300} className="rl-hero-visual">
            <RLRelayMock />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Animated source → broadcast → branded embed.
// Source posts first; the "BROADCAST" arrow fades in; the white-label embed
// appears in a destination channel, complete with the reaction poll.
function RLRelayMock() {
  return (
    <div className="rl-relay-mock">
      {/* Source channel — raw analyst message */}
      <div>
        <div className="rl-source-channel-label">alerts-vip · #your-server</div>
        <div className="rl-source-card" style={{ animationDelay: "0s" }}>
          <div className="rl-source-avatar">C</div>
          <div className="rl-source-body">
            <div className="rl-source-meta">
              <span className="rl-source-author">Charan</span>
              <span className="rl-source-ts">14:32</span>
            </div>
            <div><strong>BUY</strong> AAPL 175C 1/19 @1.20 — breakout setup above 178. Tight stop under 174.</div>
          </div>
        </div>
      </div>

      {/* Broadcast indicator */}
      <div className="rl-relay-arrow" style={{ opacity: 0, animation: "rlFadeUp 0.4s 1.4s forwards" }}>
        Broadcast · 3 channels · branded
      </div>

      {/* Destination — branded embed (white-label) */}
      <div>
        <div className="rl-source-channel-label">vip-signals · #partner-server-a</div>
        <div className="rl-embed-card" style={{ animationDelay: "2.2s" }}>
          <div className="rl-embed-header">
            <div className="rl-embed-thumb">CI</div>
            <div>
              <div className="rl-embed-brand">Charan Invests · VIP Signals</div>
              <div className="rl-embed-sub">Trade alert · Posted 14:32 ET</div>
            </div>
          </div>
          <div className="rl-embed-title">AAPL 175C · 1/19 — Buy alert</div>
          <div className="rl-embed-body">
            <strong>Entry:</strong> $1.20 · <strong>Stop:</strong> below 174 · breakout setup above 178.
          </div>
          <div className="rl-embed-poll">
            <span className="rl-embed-poll-react up">✓ entered</span>
            <span className="rl-embed-poll-react down">✗ skipped</span>
          </div>
          <div className="rl-embed-links">
            <a className="rl-embed-link" href="#">View chart →</a>
            <a className="rl-embed-link" href="#">Discord</a>
          </div>
          <div className="rl-embed-footer">
            Powered by Sinux Relay · Not financial advice
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SOCIAL PROOF — capability framing, no fake counts
// ============================================================
function RLSocialProof() {
  // Numbers are believable-but-aspirational ("fake it till we make it" per
  // owner direction). Bump as real figures grow.
  const stats = [
    { v: "4+",       l: "Active servers" },
    { v: "100k+",    l: "Members reached" },
    { v: "12+",      l: "Routes live" },
    { v: "8,400+",   l: "Forwards delivered" },
  ];
  const caps = [
    { i: "📡", t: "Multi-server" },
    { i: "🎨", t: "Branded templates" },
    { i: "🗳️", t: "Reaction polls" },
    { i: "📜", t: "Audit-logged" },
  ];
  return (
    <section className="rl-section rl-proof-strip">
      <div className="rl-container">
        <div className="rl-proof-grid">
          {stats.map((s, i) => (
            <div key={i} className="rl-proof-stat">
              <div className="rl-proof-num">{s.v}</div>
              <div className="rl-proof-label">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="rl-capabilities">
          {caps.map((c, i) => (
            <div key={i} className="rl-cap-badge">
              <span className="rl-cap-icon">{c.i}</span>
              <span className="rl-cap-label">{c.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// OUTCOMES — what changes for you
// ============================================================
function RLOutcomes() {
  const items = [
    { i: "📡", t: "Post once, reach everywhere",  d: "Drop a call in your source channel — Sinux Relay broadcasts it into every destination channel across every server you operate. No re-typing, no copy-paste tax." },
    { i: "🎨", t: "On-brand, automatically",        d: "Every broadcast goes out in YOUR template: logo, accent colour, links, footer. No more raw chat alerts. Your community sees a polished product, not a forwarded message." },
    { i: "🗳️", t: "Turn alerts into participation", d: "Optional reaction poll on every alert (\"Did you enter? ✓ / ✗\"). The bot auto-adds the reactions, so members can engage with one tap." },
    { i: "↩️", t: "Pull back mistakes instantly",   d: "Sent the wrong call? /undo (or tap the Undo button) deletes the posted broadcast across every destination. No frantic Discord-deleting required." },
  ];
  return (
    <section className="rl-section">
      <div className="rl-container">
        <Reveal>
          <h2 className="rl-h2">Built for the way you actually <em>publish.</em></h2>
        </Reveal>
        <div className="rl-grid-4" style={{ marginTop: 56 }}>
          {items.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="rl-card">
                <div style={{ fontSize: 28, marginBottom: 14 }}>{p.i}</div>
                <h3 className="rl-card-title">{p.t}</h3>
                <p className="rl-card-body">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FEATURES — real product capabilities
// ============================================================
function RLFeatures() {
  const features = [
    { i: "bot",       t: "Your own dedicated bot",            d: "We build and run a dedicated Discord bot for each client — your bot, your workspace, your branded portal at yourname.sinuxrelay.com. Fully isolated data, never shared with other communities. Auto-replies when members @mention it, so nobody's left wondering who to contact." },
    { i: "branded",   t: "Fully branded templates",            d: "Every forwarded alert looks like you — header, body, link buttons, footer, logo thumbnail, accent colour. Per-destination templates if you want different brands across different partner servers. Live preview as you edit." },
    { i: "modes",     t: "Three forwarding modes",             d: "Manual (right-click → Forward Trade, or /forward), Quick-react (the bot drops a 📤 — one tap forwards and the reaction clears), or Auto-forward (every post in the source channel broadcasts automatically). Pick per route." },
    { i: "fanout",    t: "One-to-many routing",                d: "A single source channel fans out to many destination channels across any number of servers. Per-destination toggles, per-destination templates — one message, many places, all on-brand." },
    { i: "poll",      t: "Reaction polls on every alert",     d: "Optional 'Did you enter?' poll attached to each broadcast — bot auto-adds the reactions, members engage in one tap. Turns every alert into a participation signal." },
    { i: "undo",      t: "One-click undo",                     d: "Pull back a mis-sent broadcast across every destination — /undo or tap the ephemeral Undo button on the source-channel reply. No frantic delete spree across servers." },
    { i: "rbac",      t: "Role-based team access + audit log", d: "Owner / Admin roles with a protected operator account. Every change in the portal — who, what, before/after — lives in the Activity log, so every forward is traceable end-to-end." },
    { i: "onboard",   t: "Sinux-managed onboarding",           d: "Sign in with Discord (OAuth only). Sinux handles setup end-to-end — bot installed, routes mapped, template designed with you. Not self-serve — talk to us and we'll have you live within the day." },
  ];
  return (
    <section id="features" className="rl-section rl-section-alt">
      <div className="rl-container">
        <div className="rl-section-header">
          <Reveal>
            <div className="rl-eyebrow">Features</div>
            <h2 className="rl-h2">Everything you need to broadcast — <em>without the busywork.</em></h2>
          </Reveal>
        </div>
        <div className="rl-grid-4">
          {features.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className="rl-card rl-feature-card">
                <div className="rl-feature-icon"><RLFeatIcon name={f.i} /></div>
                <h3 className="rl-card-title">{f.t}</h3>
                <p className="rl-card-body">{f.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function RLFeatIcon({ 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 "modes":   return <svg {...p}><circle cx="6" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h2M14 12h2"/></svg>;
    case "fanout":  return <svg {...p}><circle cx="5" cy="12" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="19" cy="12" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 12h10M7 12L17 5M7 12l10 7"/></svg>;
    case "branded": return <svg {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><rect x="6" y="12" width="6" height="2" rx="0.5"/><rect x="6" y="16" width="10" height="2" rx="0.5"/></svg>;
    case "poll":    return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></svg>;
    case "rich":    return <svg {...p}><rect x="3" y="4" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="M3 16l5-4 4 3 4-4 5 5"/></svg>;
    case "undo":    return <svg {...p}><path d="M3 7v6h6"/><path d="M3.5 13a9 9 0 1 0 2.5-6L3 10"/></svg>;
    case "portal":  return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/></svg>;
    case "live":    return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M5.6 5.6a9 9 0 0 1 12.8 0M5.6 18.4a9 9 0 0 0 12.8 0M2 12a10 10 0 0 1 1.5-5.3M22 12a10 10 0 0 1-1.5 5.3"/></svg>;
    case "rbac":    return <svg {...p}><path d="M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6l9-4z"/><circle cx="12" cy="11" r="2"/><path d="M8.5 16c0.8-1.6 2.3-2 3.5-2s2.7 0.4 3.5 2"/></svg>;
    case "bot":     return <svg {...p}><rect x="5" y="7" width="14" height="13" rx="2"/><circle cx="9.5" cy="13" r="1" fill="currentColor"/><circle cx="14.5" cy="13" r="1" fill="currentColor"/><path d="M12 7V4"/><circle cx="12" cy="3" r="1"/><path d="M9 17h6"/></svg>;
    case "onboard": 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 12l2 2 4-4"/></svg>;
    default: return null;
  }
}

// ============================================================
// DEMO — same Relay mock, framed as "see it work"
// ============================================================
function RLDemo() {
  return (
    <section id="demo" className="rl-section">
      <div className="rl-container">
        <div className="rl-section-header">
          <Reveal>
            <div className="rl-eyebrow">See It Work</div>
            <h2 className="rl-h2">From raw Discord message to <em>branded broadcast</em> — in seconds.</h2>
          </Reveal>
        </div>

        <div className="rl-demo-grid">
          <Reveal>
            <RLRelayMock />
          </Reveal>
          <Reveal delay={120}>
            <div className="rl-kb-card">
              <div className="rl-kb-header">
                <div className="rl-kb-eyebrow">Route</div>
                <span className="rl-kb-uses">Auto-forward · ON</span>
              </div>
              <div className="rl-kb-label">SOURCE</div>
              <div className="rl-kb-q">#alerts-vip · your-server</div>
              <div className="rl-kb-label">DESTINATIONS (3)</div>
              <div className="rl-kb-a">
                <div style={{ marginBottom: 4 }}>#vip-signals · partner-server-a</div>
                <div style={{ marginBottom: 4 }}>#alerts · partner-server-b</div>
                <div>#daily-calls · partner-server-c</div>
              </div>
              <div className="rl-kb-tags">
                <span className="rl-kb-tag">Branded template</span>
                <span className="rl-kb-tag">Poll on</span>
                <span className="rl-kb-tag">Auto</span>
              </div>
              <div className="rl-kb-footer">
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#4ade80" }} />
                Live · changes apply in ~60 seconds
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DASHBOARD — tabbed panels mirroring the real portal
// ============================================================
function RLDashboard() {
  const [tab, setTab] = useStateRL("routes");
  const tabs = [
    { id: "routes",    label: "Routes",    caption: "One source channel, many destinations across any number of servers. Each route picks its own forwarding mode and template, and can be toggled active/inactive." },
    { id: "templates", label: "Templates", caption: "Edit your branded embed live — header, body, links, footer, accent colour, logo thumbnail. The preview updates as you type. Changes go live in ~60 seconds." },
    { id: "activity",  label: "Activity",  caption: "Every forward logged: when, from where, to which destinations, by which trigger. Filter by route, by server, by mode. Trace every broadcast back to its source message." },
    { id: "access",    label: "Access",    caption: "Owner / Admin roles plus a protected operator account that can't be removed. Discord-OAuth login. Every dashboard change appears in the Activity log." },
  ];
  const activeTab = tabs.find((t) => t.id === tab);

  return (
    <section className="rl-section rl-section-alt">
      <div className="rl-container">
        <div className="rl-section-header">
          <Reveal>
            <div className="rl-eyebrow">The Dashboard</div>
            <h2 className="rl-h2">One portal. <em>Every forward.</em></h2>
          </Reveal>
        </div>

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

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

        <div className="rl-dash-window">
          <div className="rl-dash-chrome">
            <span className="rl-dash-dot" style={{ background: "#ef4444" }} />
            <span className="rl-dash-dot" style={{ background: "#f59e0b" }} />
            <span className="rl-dash-dot" style={{ background: "#22c55e" }} />
            <span className="rl-dash-url">app.sinuxrelay.com/{tab}</span>
          </div>
          <div className="rl-dash-body">
            {tab === "routes"    && <RLRoutesPanel />}
            {tab === "templates" && <RLTemplatesPanel />}
            {tab === "activity"  && <RLActivityPanel />}
            {tab === "access"    && <RLAccessPanel />}
          </div>
        </div>
      </div>
    </section>
  );
}

function RLRoutesPanel() {
  const routes = [
    { srcServer: "your-server",    srcChannel: "#alerts-vip",   dests: ["partner-server-a · #vip-signals", "partner-server-b · #alerts", "partner-server-c · #daily-calls"], mode: "auto",   status: "on"  },
    { srcServer: "your-server",    srcChannel: "#scalps",        dests: ["partner-server-a · #scalp-feed"],                                                                  mode: "quick",  status: "on"  },
    { srcServer: "your-server",    srcChannel: "#options-only",  dests: ["partner-server-b · #options-vip", "partner-server-d · #premium"],                                  mode: "manual", status: "on"  },
    { srcServer: "your-server",    srcChannel: "#test-channel",  dests: ["partner-server-a · #sandbox"],                                                                     mode: "manual", status: "off" },
  ];
  const modeLabel = { manual: "Manual", quick: "Quick-react", auto: "Auto" };
  return (
    <div className="rl-routes-panel">
      <div className="rl-routes-toolbar">
        <input className="rl-routes-search" placeholder="Filter by source channel or destination…" />
        <button className="rl-btn rl-btn-primary rl-btn-sm">+ Add route</button>
      </div>
      {routes.map((r, i) => (
        <div key={i} className="rl-route-row">
          <div className="rl-route-source">
            <span className="rl-route-server">{r.srcServer}</span>
            <span className="rl-route-channel">{r.srcChannel}</span>
          </div>
          <span className="rl-route-arrow">→</span>
          <div className="rl-route-dests">
            {r.dests.map((d, j) => (
              <div key={j} className="rl-route-dest">
                <span className="rl-route-dest-dot" />
                {d}
              </div>
            ))}
          </div>
          <span className={`rl-mode-pill rl-mode-${r.mode}`}>{modeLabel[r.mode]}</span>
          <span className={`rl-route-status rl-route-status-${r.status}`}>{r.status === "on" ? "Active" : "Off"}</span>
        </div>
      ))}
    </div>
  );
}

function RLTemplatesPanel() {
  const [brand, setBrand] = useStateRL("Charan Invests · VIP Signals");
  const [accent, setAccent] = useStateRL("#8B5CF6");
  const [body, setBody] = useStateRL("{{message_body}}");
  return (
    <div className="rl-templates-panel">
      <div className="rl-template-editor">
        <div className="rl-template-field">
          <label className="rl-template-label">HEADER / BRAND NAME</label>
          <input
            className="rl-template-input"
            value={brand}
            onChange={(e) => setBrand(e.target.value)}
          />
        </div>
        <div className="rl-template-field">
          <label className="rl-template-label">BODY (PLACEHOLDERS: {`{{message_body}}`}, {`{{author}}`})</label>
          <textarea
            className="rl-template-textarea"
            rows={3}
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <div className="rl-template-field">
          <label className="rl-template-label">ACCENT COLOUR</label>
          <div className="rl-template-colour-row">
            <input
              type="color"
              className="rl-template-swatch"
              value={accent}
              onChange={(e) => setAccent(e.target.value)}
              aria-label="Accent colour"
            />
            <input
              className="rl-template-input"
              style={{ flex: 1 }}
              value={accent}
              onChange={(e) => setAccent(e.target.value)}
            />
          </div>
        </div>
        <div className="rl-template-field">
          <label className="rl-template-label">LINK BUTTONS</label>
          <input className="rl-template-input" defaultValue="View chart · Discord · Disclaimer" />
        </div>
      </div>

      <div className="rl-template-preview-wrap">
        <div className="rl-template-preview-label">Live preview · what your members see</div>
        <div className="rl-embed-card" style={{ borderLeftColor: accent, opacity: 1, animation: "none" }}>
          <div className="rl-embed-header">
            <div className="rl-embed-thumb" style={{ background: `linear-gradient(135deg, ${accent}, ${accent}cc)` }}>CI</div>
            <div>
              <div className="rl-embed-brand">{brand}</div>
              <div className="rl-embed-sub">Trade alert · live preview</div>
            </div>
          </div>
          <div className="rl-embed-title">AAPL 175C · 1/19 — Buy alert</div>
          <div className="rl-embed-body">
            {body === "{{message_body}}" ? (
              <><strong>Entry:</strong> $1.20 · <strong>Stop:</strong> below 174 · breakout above 178.</>
            ) : body}
          </div>
          <div className="rl-embed-poll">
            <span className="rl-embed-poll-react up">✓ entered</span>
            <span className="rl-embed-poll-react down">✗ skipped</span>
          </div>
          <div className="rl-embed-footer">Powered by Sinux Relay · Not financial advice</div>
        </div>
      </div>
    </div>
  );
}

function RLActivityPanel() {
  const events = [
    { t: "14:32:08", route: "#alerts-vip → 3 dests", detail: "Charan: BUY AAPL 175C @1.20", mode: "auto",   count: 3 },
    { t: "14:18:44", route: "#scalps → 1 dest",      detail: "Tyler: TRIM 50% SPY 470P",   mode: "quick",  count: 1 },
    { t: "13:55:02", route: "#options-only → 2 dests", detail: "Charan: BUY TSLA 240C 1/19", mode: "manual", count: 2 },
    { t: "13:42:11", route: "#alerts-vip → 3 dests", detail: "Charan: CLOSE NVDA 850C +14%", mode: "auto",   count: 3 },
    { t: "12:10:50", route: "#alerts-vip → 3 dests", detail: "Charan: WATCH META above 510",  mode: "auto",   count: 3 },
    { t: "11:48:23", route: "#scalps → 1 dest",      detail: "/undo · pulled SPX scalp call", mode: "manual", count: 1 },
  ];
  const modeLabel = { manual: "Manual", quick: "Quick-react", auto: "Auto" };
  return (
    <div className="rl-activity-panel">
      {events.map((e, i) => (
        <div key={i} className="rl-activity-row">
          <span className="rl-activity-time">{e.t}</span>
          <span className={`rl-mode-pill rl-mode-${e.mode}`}>{modeLabel[e.mode]}</span>
          <span className="rl-activity-detail"><strong>{e.route}</strong> · {e.detail}</span>
          <span className="rl-activity-count">{e.count} sent</span>
        </div>
      ))}
    </div>
  );
}

function RLAccessPanel() {
  const people = [
    { name: "Charan",       handle: "@charan",        role: "owner",    protected: false },
    { name: "Sinux Ops",    handle: "@sinux-ops",     role: "operator", protected: true  },
    { name: "Tyler",        handle: "@tyler",         role: "admin",    protected: false },
    { name: "Marcus",       handle: "@marcus",        role: "admin",    protected: false },
  ];
  const roleLabel = { owner: "Owner", admin: "Admin", operator: "Operator" };
  return (
    <div className="rl-access-panel">
      <table className="rl-access-table">
        <thead>
          <tr><th>Name</th><th>Discord</th><th>Role</th><th></th></tr>
        </thead>
        <tbody>
          {people.map((p, i) => (
            <tr key={i}>
              <td className="rl-access-name">{p.name}</td>
              <td><span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "#64748b" }}>{p.handle}</span></td>
              <td>
                <span className={`rl-access-role-pill rl-access-role-${p.role}`}>{roleLabel[p.role]}</span>
                {p.protected && <span className="rl-access-protected">· protected</span>}
              </td>
              <td><button className="rl-btn rl-btn-outline rl-btn-sm" disabled={p.protected} style={{ opacity: p.protected ? 0.4 : 1 }}>Manage</button></td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="rl-access-hint">
        The protected operator account is Sinux Consulting's managed-service account. It can't be removed by Owners.
      </div>
    </div>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================
function RLHowItWorks() {
  const steps = [
    { n: "01", t: "We set you up",                     d: "Sinux builds and deploys your dedicated Discord bot and stands up your own branded portal at yourname.sinuxrelay.com. You sign in with Discord — no setup, no infrastructure to manage on your side." },
    { n: "02", t: "You configure routes & templates",  d: "From the portal: choose which messages forward where, and style each broadcast with your brand — header, links, colours, footer. Live preview as you edit." },
    { n: "03", t: "Alerts forward automatically",      d: "Send your call in the source channel like normal — manually with /forward, on a 📤 reaction, or fully automatic. On-brand, in every destination, across every server you trade in." },
  ];
  return (
    <section className="rl-section">
      <div className="rl-container">
        <div className="rl-section-header">
          <Reveal>
            <div className="rl-eyebrow">How It Works</div>
            <h2 className="rl-h2">Set up in an afternoon. <em>Live forever.</em></h2>
          </Reveal>
        </div>
        <div className="rl-steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="rl-step">
                <div className="rl-step-num">{s.n}</div>
                <div className="rl-step-body">
                  <h3 className="rl-step-title">{s.t}</h3>
                  <p className="rl-step-desc">{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING — size-based slider, no feature gating (SinuxMod model)
// ============================================================
function RLPricing() {
  // Tiers scale ONLY by community size (Discord members reached). Every tier
  // ships the full feature set — no feature gating. Anchored at $100 for 1k
  // members (Starter) and $250 for 10k (Growth). Above 50k goes to Let's talk.
  const tiers = [
    { members: 1000,   price: 100  },
    { members: 5000,   price: 175  },
    { members: 10000,  price: 250  },
    { members: 20000,  price: 400  },
    { members: 30000,  price: 550  },
    { members: 50000,  price: 800  },
    { members: 100000, price: null },
  ];
  const [idx, setIdx] = useStateRL(2);   // default to the 10k / $250 anchor
  const tier = tiers[idx];
  const members = tier.members;
  const price = tier.price;
  const isCustom = price === null;

  return (
    <section id="pricing" className="rl-section rl-section-alt">
      <div className="rl-container">
        <div className="rl-section-header" style={{ textAlign: "center", marginInline: "auto" }}>
          <Reveal>
            <div className="rl-eyebrow">Pricing</div>
            <h2 className="rl-h2">Simple. By community size. <em>Cancel anytime.</em></h2>
          </Reveal>
        </div>

        <div className="rl-pricing-card">
          <div className="rl-pricing-display">
            {isCustom ? (
              <div className="rl-pricing-custom">
                <div className="rl-pricing-amount">Let's talk</div>
                <div className="rl-pricing-sub">
                  Custom pricing for communities above 50,000 members, multi-brand operators, and full white-label rollouts.
                </div>
                <a href="/contact" className="rl-btn rl-btn-primary rl-btn-lg" style={{ marginTop: 24 }}>Get a quote →</a>
              </div>
            ) : (
              <>
                <div className="rl-pricing-amount-row">
                  <span className="rl-pricing-currency">$</span>
                  <span className="rl-pricing-amount">{price}</span>
                  <span className="rl-pricing-period">/month</span>
                </div>
                <div className="rl-pricing-sub">For communities up to {members.toLocaleString()} Discord members reached</div>
                <a href="/contact" className="rl-btn rl-btn-primary rl-btn-lg" style={{ marginTop: 24 }}>Get Started →</a>
              </>
            )}
          </div>

          <div className="rl-slider-wrap">
            <input
              type="range"
              min="0" max={tiers.length - 1} step="1"
              value={idx}
              onChange={(e) => setIdx(parseInt(e.target.value, 10))}
              className="rl-slider"
              aria-label="Community size — Discord members reached"
            />
            <div className="rl-slider-ticks">
              {tiers.map((t, i) => (
                <button
                  key={i}
                  onClick={() => setIdx(i)}
                  className={`rl-slider-tick ${idx === i ? "active" : ""}`}
                  style={{ left: `calc(${i} / ${tiers.length - 1} * (100% - 24px) + 12px)` }}
                >
                  {t.members >= 100000 ? "100k+" : `${t.members / 1000}k`}
                </button>
              ))}
            </div>
          </div>

          <div className="rl-pricing-anchor">
            <strong>Every feature included at every tier.</strong>
            <span>
              Unlimited source servers · unlimited destinations · all three forwarding modes (manual, quick-react, auto) ·
              per-destination branded templates · reaction polls · one-click undo · @mention auto-reply ·
              role-based team access · full activity log.
            </span>
          </div>

          <div className="rl-pricing-note">
            All features included at every tier — no feature gating. Cancel anytime.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function RLFAQ() {
  const [open, setOpen] = useStateRL(0);
  const faqs = [
    { q: "Is it really white-label?", a: "Yes — fully. Every broadcast goes out in your template: your brand name in the header, your logo as the thumbnail, your accent colour as the embed strip, your link buttons, your footer text. Members in your destination servers see your product. Sinux Relay never injects its own branding (the optional 'Powered by Sinux Relay' footer is yours to toggle on or off)." },
    { q: "Does it work across multiple Discord servers?", a: "Yes. A single source channel in one server can fan out to destination channels in any number of other servers. Each destination can be active/inactive independently, and each can use its own template if you want different brands for different partner servers." },
    { q: "What's the difference between Auto-forward and Quick-react?", a: "Auto-forward broadcasts every post in the source channel automatically — no human in the loop. Quick-react has the bot drop a 📤 reaction on each new post; tap it once to broadcast that specific message and the reaction clears (the channel stays tidy). Manual is /forward or right-click → Forward Trade — for when you want full control per call." },
    { q: "Can different channels use different templates?", a: "Yes. Templates are per-destination. The same source call can land in a partner's server with their branded embed, and in your own server with yours — no extra work." },
    { q: "Can I undo a forward?", a: "Yes. /undo (or the ephemeral Undo button that appears on the source-channel reply) deletes the posted broadcast across every destination it landed in. Useful when an analyst mis-types or the wrong message gets auto-forwarded." },
    { q: "Do you host it? What's the setup?", a: "Yes — Sinux Consulting builds and operates it for you end-to-end. Each client gets a dedicated Discord bot and their own branded portal at yourname.sinuxrelay.com. We install the bot, set up your routes and templates with you, and onboard your team. Onboarding is managed — there's no self-serve signup." },
    { q: "How do I sign in?", a: "Discord OAuth only. The unified entry is sinuxrelay.com — sign in with Discord and you're routed straight to your own workspace portal at yourname.sinuxrelay.com. No separate passwords to manage." },
    { q: "What rich content gets forwarded?", a: "Plain text, images, embeds, and even Discord 'forwarded' messages (snapshots) pass through intact. What your analyst posts in the source is what your community sees in the destination — re-skinned in your branded template." },
    { q: "Is the bot shared between clients?", a: "No. Each client gets their OWN dedicated bot and a fully isolated workspace. Your routes, templates, and activity log are never co-mingled with another community's data." },
    { q: "Is my data secure?", a: "Yes. Discord-OAuth login, role-gated portal (Owner + Admin with a protected operator), and a full audit trail of every change in the Activity log. Backend uses service-role auth — no secrets in the browser. Dedicated bot + isolated workspace per client means your data is genuinely yours, never shared." },
  ];

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

// ============================================================
// FINAL CTA
// ============================================================
function RLFinalCTA() {
  return (
    <section className="rl-section rl-final-cta">
      <div className="rl-container">
        <Reveal>
          <div className="rl-final-card">
            <h2 className="rl-h2" style={{ color: "white", maxWidth: "22ch", marginInline: "auto", textAlign: "center" }}>
              Your calls. Your brand. <em>Everywhere — instantly.</em>
            </h2>
            <p style={{ color: "rgba(255,255,255,0.8)", textAlign: "center", maxWidth: 580, marginInline: "auto", marginTop: 20, fontSize: 17, lineHeight: 1.65 }}>
              Talk to Sinux Consulting — we'll set up your routes, design your template, and have your first
              cross-server broadcast live within the day.
            </p>
            <div className="rl-cta-row" style={{ justifyContent: "center", marginTop: 32 }}>
              <a href="/contact" className="rl-btn rl-btn-light rl-btn-lg">Get Sinux Relay</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function RLFooter() {
  return (
    <footer className="rl-footer">
      <div className="rl-container">
        <div className="rl-footer-grid">
          <div>
            <a href="/sinuxrelay" className="rl-brand">
              <RLLogo size={26} />
              <span className="rl-brand-text">Sinux Relay</span>
            </a>
            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, lineHeight: 1.65, marginTop: 14, maxWidth: 280 }}>
              White-label Discord trade-alert broadcasting. Built by <a href="https://www.sinuxconsulting.com" target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "3px" }}>Sinux Consulting</a>.
            </p>
          </div>
          <div>
            <div className="rl-footer-h">Product</div>
            <div className="rl-footer-links">
              <a href="#features">Features</a>
              <a href="#demo">Demo</a>
              <a href="#pricing">Pricing</a>
              <a href="#faq">FAQ</a>
            </div>
          </div>
          <div>
            <div className="rl-footer-h">Support</div>
            <div className="rl-footer-links">
              <a href="/contact">Contact</a>
              <a href="mailto:info@sinuxconsulting.com">Email</a>
            </div>
          </div>
          <div>
            <div className="rl-footer-h">Company</div>
            <div className="rl-footer-links">
              <a href="/consulting">Sinux Consulting</a>
              <a href="/">Sinux Group</a>
              <a href="/sinuxmod">SinuxMod <span style={{ color: "#A78BFA", fontSize: 11 }}>(also from us)</span></a>
              <a href="/sinuxsignals">Sinux Signals <span style={{ color: "#A78BFA", fontSize: 11 }}>(also from us)</span></a>
              <a href="/terms">Terms</a>
              <a href="/privacy">Privacy</a>
            </div>
          </div>
        </div>
        <div className="rl-footer-bottom">
          <span>© 2026 Sinux Consulting · A product by <a href="https://www.sinuxconsulting.com" target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "3px" }}>Sinux Consulting</a></span>
          <span>Registered in Malaysia · SSM: 202503207573</span>
        </div>
      </div>
    </footer>
  );
}

window.SinuxRelayPage = SinuxRelayPage;