/* global React, Reveal, Icon */
const { useState: useStateSM, useEffect: useEffectSM, useRef: useRefSM } = React;

// ============================================================
// SINUXMOD MARKETING SITE
// AI-powered Discord ticket bot — product by Sinux Consulting
// ============================================================

function SinuxModPage() {
  return (
    <div className="page-enter sm-page" data-screen-label="SinuxMod">
      <SMNav />
      <SMHero />
      <SMSocialProof />
      <SMProblem />
      <SMFeatures />
      <SMDemo />
      <SMDashboard />
      <SMHowItWorks />
      <SMPricing />
      <SMFAQ />
      <SMFinalCTA />
      <SMFooter />
    </div>
  );
}

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

  return (
    <header className={`sm-header ${scrolled ? "scrolled" : ""}`}>
      <div className="sm-nav-inner">
        <a href="/sinuxmod" className="sm-brand">
          <SMLogo size={28} />
          <span className="sm-brand-text">SinuxMod</span>
        </a>
        <nav className="sm-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="/consulting/contact" className="sm-btn sm-btn-primary">Get SinuxMod</a>
      </div>
    </header>
  );
}

function SMLogo({ size = 32 }) {
  const id = "sm-" + 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="#01A0A6" />
          <stop offset="100%" stopColor="#00676E" />
        </linearGradient>
      </defs>
      <path d="M 20 4 L 34 10 L 34 22 Q 34 30 20 36 Q 6 30 6 22 L 6 10 Z" fill={`url(#${id})`} />
      {/* bot/shield mark */}
      <g fill="white" opacity="0.95">
        <circle cx="20" cy="17" r="5" fill="none" stroke="white" strokeWidth="1.5"/>
        <circle cx="17.5" cy="17" r="1.2" />
        <circle cx="22.5" cy="17" r="1.2" />
        <path d="M 15 24 L 25 24" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
      </g>
    </svg>
  );
}

// ============================================================
// HERO
// ============================================================
function SMHero() {
  return (
    <section className="sm-hero">
      <div className="sm-hero-bg" />
      <div className="sm-container">
        <div className="sm-hero-grid">
          <div className="sm-hero-text">
            <Reveal>
              <span className="sm-pill">
                <span className="sm-pulse" />
                Product by Sinux Consulting
              </span>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="sm-h1">
                Your mods shouldn't be answering the <span className="sm-h1-accent">same 5 questions</span> every day.
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="sm-lede">
                SinuxMod is an AI bot that reads your ticket channels, answers from your Knowledge Base,
                routes edge cases to the right people, and closes tickets when they're done — autonomously.
              </p>
            </Reveal>
            <Reveal delay={320}>
              <div className="sm-cta-row">
                <a href="/consulting/contact" className="sm-btn sm-btn-primary sm-btn-lg">Get SinuxMod</a>
                <a href="#demo" className="sm-btn sm-btn-outline sm-btn-lg">See it in action →</a>
              </div>
            </Reveal>
          </div>
          <Reveal delay={300} className="sm-hero-visual">
            <SMTicketMock />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Discord-style ticket mockup — staggered CSS animation
function SMTicketMock() {
  return (
    <div className="sm-discord-card">
      <div className="sm-discord-header">
        <div className="sm-discord-channel">
          <span className="sm-channel-icon">#</span>
          <span>ticket-1287</span>
        </div>
        <span className="sm-discord-status sm-discord-status-open">🟡 Open</span>
      </div>
      <div className="sm-discord-body">
        <SMDiscordMsg author="Maria K." avatar="M" delay={0} text="hey, I bought monthly last week and just upgraded to annual. will I get credit for unused days?" />
        <SMDiscordTyping delay={1.6} who="SinuxMod" />
        <SMDiscordMsg author="SinuxMod" avatar="S" bot delay={3.2}
          text={<>Hey! Based on your dates, you have <strong>11 free days</strong> to credit to your annual plan. I've notified the mod team — they'll add it within 24 hours. 🙌 — Mod Team</>} />
        <SMDiscordMsg author="Maria K." avatar="M" delay={4.6} text="Perfect, thanks!" />
        <SMDiscordMsg author="SinuxMod" avatar="S" bot delay={5.8}
          text={<>Glad we could help! 🎉 Closing this ticket now — feel free to open another if anything comes up. — Mod Team</>} />
        <div className="sm-discord-close" style={{ animationDelay: "7s" }}>
          ✅ Ticket closed · Resolved in 4 min · No mod intervention
        </div>
      </div>
    </div>
  );
}

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

function SMDiscordTyping({ delay, who }) {
  return (
    <div className="sm-discord-typing" style={{ animationDelay: `${delay}s` }}>
      <span className="sm-typing-dot"/><span className="sm-typing-dot"/><span className="sm-typing-dot"/>
      <span style={{ fontSize: 11, color: "#a1a8b4", marginLeft: 8 }}>{who} is typing…</span>
    </div>
  );
}

// ============================================================
// SOCIAL PROOF STRIP
// ============================================================
function SMSocialProof() {
  const stats = [
    { v: "200,000+", l: "Community members served" },
    { v: "10,000+", l: "Tickets handled" },
    { v: "99.2%", l: "Uptime" },
    { v: "< 2s", l: "Avg response time" },
  ];
  return (
    <section className="sm-section sm-proof-strip">
      <div className="sm-container">
        <div className="sm-proof-grid">
          {stats.map((s, i) => (
            <div key={i} className="sm-proof-stat">
              <div className="sm-proof-num">{s.v}</div>
              <div className="sm-proof-label">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function SMProblem() {
  const pains = [
    { i: "🔥", t: "Mod burnout is real", d: "Your best mods are stuck answering 'how do I get access?' for the 40th time this week." },
    { i: "🌙", t: "Tickets pile up overnight", d: "Members in different time zones open tickets at 3am. They're still waiting at 9am." },
    { i: "🧠", t: "Knowledge locked in heads", d: "When your top mod leaves, half your institutional knowledge walks out with them." },
  ];
  return (
    <section className="sm-section">
      <div className="sm-container">
        <Reveal>
          <h2 className="sm-h2">Running a paid community at scale is a <em>moderation nightmare.</em></h2>
        </Reveal>
        <div className="sm-grid-3" style={{ marginTop: 56 }}>
          {pains.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="sm-card">
                <div style={{ fontSize: 28, marginBottom: 14 }}>{p.i}</div>
                <h3 className="sm-card-title">{p.t}</h3>
                <p className="sm-card-body">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FEATURES
// ============================================================
function SMFeatures() {
  const features = [
    { i: "classify", t: "AI Ticket Classification", d: "Reads each message and routes it to the right response without rules for every scenario." },
    { i: "kb", t: "Self-Learning Knowledge Base", d: "Admins click 'Add to KB' on any answer. The bot incorporates it instantly across all future tickets." },
    { i: "rules", t: "Rule-Based Escalation", d: "If the topic is refunds, ping @billing. If it's a lifetime deal, ping @Charan. Fully configurable." },
    { i: "handoff", t: "Moderator Handoff", d: "Bot goes silent the moment a real mod joins. Resumes when they run /handoff or step away." },
    { i: "close", t: "Auto-Close on Resolution", d: "Detects when an issue is resolved from context. Sends a closing message, pings mods to archive." },
    { i: "calc", t: "Membership Overlap Calculator", d: "Monthly → annual mid-cycle? Bot calculates the credit owed and notifies the right person." },
    { i: "promo", t: "Promo Code Management", d: "Update active codes from the dashboard. Bot serves the right code in tickets instantly." },
    { i: "multi", t: "Multi-Server, One Dashboard", d: "Isolated KB, rules, and config per server. Manage everything in one place." },
  ];
  return (
    <section id="features" className="sm-section sm-section-alt">
      <div className="sm-container">
        <div className="sm-section-header">
          <Reveal>
            <div className="sm-eyebrow">Features</div>
            <h2 className="sm-h2">Everything your mods <em>shouldn't</em> have to do — automated.</h2>
          </Reveal>
        </div>
        <div className="sm-grid-4">
          {features.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className="sm-card sm-feature-card">
                <div className="sm-feature-icon"><SMFeatIcon name={f.i} /></div>
                <h3 className="sm-card-title">{f.t}</h3>
                <p className="sm-card-body">{f.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SMFeatIcon({ 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 "classify": return <svg {...p}><path d="M12 3v2m0 14v2m9-9h-2M5 12H3m13.95-6.95l-1.41 1.41M7.46 16.54l-1.41 1.41m12.9 0l-1.41-1.41M7.46 7.46L6.05 6.05"/><circle cx="12" cy="12" r="4"/></svg>;
    case "kb": return <svg {...p}><path d="M4 19V5a2 2 0 012-2h14v18H6a2 2 0 01-2-2zM8 7h8M8 11h8M8 15h5"/></svg>;
    case "rules": return <svg {...p}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M6 8v4a4 4 0 004 4h6"/></svg>;
    case "handoff": return <svg {...p}><path d="M3 12h4l3-7 4 14 3-7h4"/></svg>;
    case "close": return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>;
    case "calc": return <svg {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h2M14 11h2M8 15h2M14 15h2M8 19h2M14 19h2"/></svg>;
    case "promo": return <svg {...p}><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/></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>;
    default: return null;
  }
}

// ============================================================
// DEMO — Live ticket animation + matched KB entry
// ============================================================
function SMDemo() {
  return (
    <section id="demo" className="sm-section">
      <div className="sm-container">
        <div className="sm-section-header">
          <Reveal>
            <div className="sm-eyebrow">See It Work</div>
            <h2 className="sm-h2">Watch a ticket go from open to closed in <em>90 seconds.</em></h2>
          </Reveal>
        </div>

        <div className="sm-demo-grid">
          <Reveal>
            <SMTicketMock />
          </Reveal>
          <Reveal delay={120}>
            <div className="sm-kb-card">
              <div className="sm-kb-header">
                <div className="sm-kb-eyebrow">Matched KB entry</div>
                <span className="sm-kb-uses">Used 23 times</span>
              </div>
              <div className="sm-kb-label">QUESTION</div>
              <div className="sm-kb-q">Subscription overlap / unused days</div>
              <div className="sm-kb-label">ANSWER</div>
              <div className="sm-kb-a">Calculate credit using purchase dates, notify lead mod with overlap window. Use friendly closing tone. Do not promise refund — only credit toward upgrade.</div>
              <div className="sm-kb-tags">
                <span className="sm-kb-tag">Q&amp;A</span>
                <span className="sm-kb-tag">Billing</span>
                <span className="sm-kb-tag">Auto-close</span>
              </div>
              <div className="sm-kb-footer">
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#1ADB8A" }} />
                Live entry — applied to bot immediately
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DASHBOARD SHOWCASE — tabbed panels
// ============================================================
function SMDashboard() {
  const [tab, setTab] = useStateSM("kb");
  const tabs = [
    { id: "kb", label: "Knowledge Base" },
    { id: "chat", label: "Chat & Teach" },
    { id: "rules", label: "Rules" },
    { id: "overview", label: "Overview" },
  ];

  return (
    <section className="sm-section sm-section-alt">
      <div className="sm-container">
        <div className="sm-section-header">
          <Reveal>
            <div className="sm-eyebrow">Dashboard</div>
            <h2 className="sm-h2">One dashboard. <em>Full control.</em></h2>
          </Reveal>
        </div>

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

        <div className="sm-dash-window">
          <div className="sm-dash-chrome">
            <span className="sm-dash-dot" style={{ background: "#ef4444" }} />
            <span className="sm-dash-dot" style={{ background: "#f59e0b" }} />
            <span className="sm-dash-dot" style={{ background: "#22c55e" }} />
            <span className="sm-dash-url">sinuxmod.com/dashboard/{tab}</span>
          </div>
          <div className="sm-dash-body">
            {tab === "kb" && <SMKnowledgePanel />}
            {tab === "chat" && <SMChatPanel />}
            {tab === "rules" && <SMRulesPanel />}
            {tab === "overview" && <SMOverviewPanel />}
          </div>
        </div>
      </div>
    </section>
  );
}

function SMKnowledgePanel() {
  const entries = [
    { type: "Q&A", q: "How do I get VIP access?", a: "Auto-added after Whop purchase…", uses: 142, tag: "qa" },
    { type: "Q&A", q: "Refund for losing trade?", a: "We don't offer refunds for losses…", uses: 87, tag: "qa" },
    { type: "Q&A", q: "Where are the analyst calls?", a: "Charan posts in <#1437188…>", uses: 64, tag: "qa" },
    { type: "RULE", q: "Lifetime membership questions", a: "Ping @MrSinux and @Charan", uses: 23, tag: "rule" },
    { type: "Q&A", q: "Can't access VIP channel", a: "DO NOT ask them to add roles…", uses: 18, tag: "qa" },
    { type: "RULE", q: "User is in tilt / frustrated", a: "Acknowledge calmly, escalate", uses: 11, tag: "rule" },
  ];
  return (
    <div className="sm-kb-panel">
      <div className="sm-kb-toolbar">
        <input className="sm-kb-search" placeholder="Search entries…" />
        <button className="sm-btn sm-btn-primary sm-btn-sm">+ Add entry</button>
      </div>
      <table className="sm-kb-table">
        <thead>
          <tr><th>#</th><th>Type</th><th>Question</th><th>Answer</th><th>Uses</th></tr>
        </thead>
        <tbody>
          {entries.map((e, i) => (
            <tr key={i}>
              <td>{i + 1}</td>
              <td><span className={`sm-kb-tag-pill sm-kb-tag-${e.tag}`}>{e.type}</span></td>
              <td className="sm-kb-q-cell">{e.q}</td>
              <td className="sm-kb-a-cell">{e.a}</td>
              <td className="sm-kb-uses-cell">{e.uses}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SMChatPanel() {
  return (
    <div className="sm-chat-panel">
      <div className="sm-chat-left">
        <div className="sm-chat-header-row">
          <span style={{ fontSize: 13, fontWeight: 600, color: "#0f172a" }}>Test conversation</span>
          <button className="sm-btn sm-btn-outline sm-btn-sm">+ Add to KB</button>
        </div>
        <div className="sm-chat-thread">
          <div className="sm-chat-msg sm-chat-user">
            <div>How do I get the lifetime discount?</div>
          </div>
          <div className="sm-chat-msg sm-chat-bot">
            <div>I don't have specific info on lifetime discounts. Let me ping the mod team — <strong>@MrSinux</strong> and <strong>@Charan</strong>, can you help with this?</div>
          </div>
          <div className="sm-chat-msg sm-chat-user">
            <div>Actually the bot should just say: 'Lifetime is closed. Best plan is annual.'</div>
          </div>
        </div>
      </div>
      <div className="sm-chat-right">
        <div className="sm-chat-teach-eyebrow">Teach the bot</div>
        <textarea className="sm-chat-teach-input" placeholder="Lifetime is closed. Best plan is annual." defaultValue="Lifetime is closed. Best plan is annual." />
        <button className="sm-btn sm-btn-primary sm-btn-block" style={{ marginTop: 12 }}>Save to KB →</button>
        <div className="sm-chat-teach-hint">Saves as a Q&amp;A entry. The bot will use it on next ticket.</div>
      </div>
    </div>
  );
}

function SMRulesPanel() {
  const rules = [
    { if: "topic = refund", then: "PING @billing", icon: "💳" },
    { if: "topic = lifetime", then: "PING @Charan + @MrSinux", icon: "⭐" },
    { if: "user is angry", then: "Calm + escalate to lead mod", icon: "🛟" },
    { if: "VIP access issue", then: "DO NOT ask for role-add", icon: "🔐" },
    { if: "trade lost money", then: "Empathy + no refund offer", icon: "📉" },
  ];
  return (
    <div className="sm-rules-panel">
      {rules.map((r, i) => (
        <div key={i} className="sm-rule-row">
          <div className="sm-rule-icon">{r.icon}</div>
          <div className="sm-rule-content">
            <div className="sm-rule-if">
              <span className="sm-rule-keyword">IF</span>
              <span>{r.if}</span>
            </div>
            <div className="sm-rule-then">
              <span className="sm-rule-keyword sm-rule-keyword-then">THEN</span>
              <span>{r.then}</span>
            </div>
          </div>
          <button className="sm-rule-toggle"><span className="sm-rule-toggle-dot"/></button>
        </div>
      ))}
    </div>
  );
}

function SMOverviewPanel() {
  return (
    <div className="sm-overview-panel">
      <div className="sm-overview-stats">
        {[
          { v: "342", l: "Tickets this week" },
          { v: "2m 14s", l: "Avg resolution" },
          { v: "87", l: "KB entries" },
          { v: "4", l: "Servers connected" },
        ].map((s, i) => (
          <div key={i} className="sm-overview-stat">
            <div className="sm-overview-stat-num">{s.v}</div>
            <div className="sm-overview-stat-label">{s.l}</div>
          </div>
        ))}
      </div>
      <div className="sm-overview-chart">
        <div className="sm-chart-label">Tickets resolved · last 14 days</div>
        <svg viewBox="0 0 400 100" style={{ width: "100%", height: 100, marginTop: 8 }}>
          <defs>
            <linearGradient id="sm-chart-grad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#01A0A6" stopOpacity="0.4"/>
              <stop offset="100%" stopColor="#01A0A6" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {[18, 22, 19, 28, 31, 26, 34, 38, 33, 41, 47, 42, 49, 54].map((v, i) => (
            <rect key={i} x={i * 28 + 6} y={100 - v * 1.6} width="20" height={v * 1.6} rx="2" fill="url(#sm-chart-grad)" stroke="#01A0A6" strokeWidth="0.8"/>
          ))}
        </svg>
      </div>
    </div>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================
function SMHowItWorks() {
  const steps = [
    { n: "01", t: "Invite the bot", d: "Add SinuxMod to your Discord server in one click. It immediately starts reading ticket channels." },
    { n: "02", t: "Train it on your FAQs", d: "Paste in your existing FAQs, or let the bot learn from live tickets as they come in." },
    { n: "03", t: "Set your rules", d: "Define escalation paths, promo codes, and which mods handle which topics." },
    { n: "04", t: "Watch tickets close themselves", d: "SinuxMod handles the repetitive 80%. Your mods handle the 20% that actually needs them." },
  ];
  return (
    <section className="sm-section">
      <div className="sm-container">
        <div className="sm-section-header">
          <Reveal>
            <div className="sm-eyebrow">How It Works</div>
            <h2 className="sm-h2">From install to autopilot in <em>under an hour.</em></h2>
          </Reveal>
        </div>
        <div className="sm-steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="sm-step">
                <div className="sm-step-num">{s.n}</div>
                <div className="sm-step-body">
                  <h3 className="sm-step-title">{s.t}</h3>
                  <p className="sm-step-desc">{s.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING — interactive slider
// ============================================================
function SMPricing() {
  const tiers = [1000, 5000, 10000, 20000, 30000, 50000, 100000];
  const [idx, setIdx] = useStateSM(2);
  const members = tiers[idx];
  const isCustom = members >= 100000;
  const price = Math.round(members / 10000) * 100;

  return (
    <section id="pricing" className="sm-section sm-section-alt">
      <div className="sm-container">
        <div className="sm-section-header" style={{ textAlign: "center", marginInline: "auto" }}>
          <Reveal>
            <div className="sm-eyebrow">Pricing</div>
            <h2 className="sm-h2">Pricing that scales with your <em>community.</em></h2>
          </Reveal>
        </div>

        <div className="sm-pricing-card">
          <div className="sm-pricing-display">
            {isCustom ? (
              <div className="sm-pricing-custom">
                <div className="sm-pricing-amount">Custom pricing</div>
                <div className="sm-pricing-sub">Let's talk about your scale.</div>
                <a href="/consulting/contact" className="sm-btn sm-btn-primary sm-btn-lg" style={{ marginTop: 24 }}>Get a quote →</a>
              </div>
            ) : (
              <>
                <div className="sm-pricing-amount-row">
                  <span className="sm-pricing-currency">$</span>
                  <span className="sm-pricing-amount">{price}</span>
                  <span className="sm-pricing-period">/month</span>
                </div>
                <div className="sm-pricing-sub">For up to {members.toLocaleString()} community members</div>
                <a href="/consulting/contact" className="sm-btn sm-btn-primary sm-btn-lg" style={{ marginTop: 24 }}>Get SinuxMod →</a>
              </>
            )}
          </div>

          <div className="sm-slider-wrap">
            <input
              type="range"
              min="0" max={tiers.length - 1} step="1"
              value={idx}
              onChange={(e) => setIdx(parseInt(e.target.value, 10))}
              className="sm-slider"
            />
            <div className="sm-slider-ticks">
              {tiers.map((t, i) => (
                <button key={i} onClick={() => setIdx(i)} className={`sm-slider-tick ${idx === i ? "active" : ""}`}>
                  {t >= 100000 ? "100k+" : t >= 1000 ? `${t / 1000}k` : t}
                </button>
              ))}
            </div>
          </div>

          <div className="sm-pricing-compare">
            <div className="sm-pricing-compare-row">
              <span>One full-time community manager</span>
              <strong>$3,000+/mo</strong>
            </div>
            <div className="sm-pricing-compare-row sm-pricing-compare-highlight">
              <span>SinuxMod handling 80% of your tickets</span>
              <strong>${isCustom ? "—" : price}/mo</strong>
            </div>
          </div>

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

// ============================================================
// FAQ
// ============================================================
function SMFAQ() {
  const [open, setOpen] = useStateSM(0);
  const faqs = [
    { q: "Does it replace my mod team?", a: "No. SinuxMod handles the repetitive 80% — the same 5 questions you've answered a hundred times. Your mods handle the 20% that actually needs them. They get to do work that matters instead of copy-pasting." },
    { q: "Which AI does it use?", a: "Claude Haiku for fast classification and responses. We chose it for speed (< 2s avg response), accuracy, and cost. You can swap models on request for enterprise tiers." },
    { q: "Can it learn from corrections?", a: "Yes. When a mod corrects a bot answer, you can click 'Add to KB' and the corrected answer becomes the new source of truth — immediately, no redeploy needed." },
    { q: "What if it gives a wrong answer?", a: "Configure a confidence threshold. Below the threshold, the bot escalates to mods instead of guessing. You also have a 'Chat & Teach' panel to test queries and correct answers before they go live." },
    { q: "Do I need to write a knowledge base from scratch?", a: "No. Paste in your existing FAQ doc, Notion page, or just point us at your past tickets. The bot learns from real conversation history." },
    { q: "How does pricing scale?", a: "$100 per 10,000 community members per month. Linear and predictable. Above 100k members we move to custom pricing — usually still cheaper than a single FTE." },
    { q: "Can I cancel anytime?", a: "Yes. Month-to-month with no contracts. We're confident enough in the product that we don't need to lock you in." },
    { q: "Is my server's data private?", a: "Yes. Your KB, rules, and ticket history are isolated per server. We do not train shared models on your data. You own everything; cancellation deletes your data within 30 days." },
  ];

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

// ============================================================
// FINAL CTA
// ============================================================
function SMFinalCTA() {
  return (
    <section className="sm-section sm-final-cta">
      <div className="sm-container">
        <Reveal>
          <div className="sm-final-card">
            <h2 className="sm-h2" style={{ color: "white", maxWidth: "22ch", marginInline: "auto", textAlign: "center" }}>
              Stop answering the same questions. <em>Start building your community.</em>
            </h2>
            <p style={{ color: "rgba(255,255,255,0.8)", textAlign: "center", maxWidth: 580, marginInline: "auto", marginTop: 20, fontSize: 17, lineHeight: 1.65 }}>
              SinuxMod is running 24/7 while your mods sleep.
            </p>
            <div className="sm-cta-row" style={{ justifyContent: "center", marginTop: 32 }}>
              <a href="/consulting/contact" className="sm-btn sm-btn-light sm-btn-lg">Get SinuxMod</a>
              <a href="/consulting/contact" className="sm-btn sm-btn-outline-light sm-btn-lg">Talk to us</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function SMFooter() {
  return (
    <footer className="sm-footer">
      <div className="sm-container">
        <div className="sm-footer-grid">
          <div>
            <a href="/sinuxmod" className="sm-brand">
              <SMLogo size={26} />
              <span className="sm-brand-text">SinuxMod</span>
            </a>
            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, lineHeight: 1.65, marginTop: 14, maxWidth: 280 }}>
              AI moderation for Discord communities that don't sleep. Built by Sinux Consulting.
            </p>
          </div>
          <div>
            <div className="sm-footer-h">Product</div>
            <div className="sm-footer-links">
              <a href="#features">Features</a>
              <a href="#demo">Demo</a>
              <a href="#pricing">Pricing</a>
            </div>
          </div>
          <div>
            <div className="sm-footer-h">Support</div>
            <div className="sm-footer-links">
              <a href="/consulting/contact">Contact</a>
              <a href="mailto:info@sinuxconsulting.com">Email</a>
            </div>
          </div>
          <div>
            <div className="sm-footer-h">Company</div>
            <div className="sm-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="sm-footer-bottom">
          <span>© 2026 Sinux Consulting · A product by Sinux Consulting</span>
          <span>Registered in Malaysia · SSM: 202503207573</span>
        </div>
      </div>
    </footer>
  );
}

window.SinuxModPage = SinuxModPage;