import { useState, useEffect, useRef } from "react";

// ─── DOMAIN CONFIG ────────────────────────────────────────────────────────────
const AFFILIATE_PORTAL_URL  = "https://join.businessfundingnow.com";
const ADMIN_PORTAL_URL      = "https://affiliateadmin.businessfundingnow.com";
const REFERRAL_BASE_URL     = "https://apply.businessfundingnow.com";

// ─── CONSTANTS ────────────────────────────────────────────────────────────────
const TIERS = [
  { name: "Bronze Broker", min: 0, max: 49999, rate: 0.02, color: "#CD7F32", bg: "#2a1a0a" },
  { name: "Silver Broker", min: 50000, max: 249999, rate: 0.025, color: "#C0C0C0", bg: "#1a1a1a" },
  { name: "Gold Broker", min: 250000, max: 999999, rate: 0.03, color: "#FFD700", bg: "#1a1500" },
  { name: "Platinum Broker", min: 1000000, max: Infinity, rate: 0.04, color: "#E5E4E2", bg: "#0f0f14" },
];

const STAGES = ["Lead Captured", "Application Submitted", "Under Review", "Docs Requested", "Approved", "Funded", "Declined"];

const TRAINING_MODULES = [
  {
    id: "m1", title: "Getting Started", icon: "🚀",
    lessons: [
      { id: "l-101", title: "Welcome to BFN Edge Affiliate Program", duration: "8 min" },
      { id: "l-102", title: "How the Platform Works", duration: "12 min" },
      { id: "l-103", title: "Your Affiliate Dashboard Tour", duration: "10 min" },
      { id: "l-104", title: "Setting Up Your Profile", duration: "6 min" },
    ]
  },
  {
    id: "m2", title: "Understanding Business Funding", icon: "💼",
    lessons: [
      { id: "l-201", title: "Types of Business Funding Products", duration: "15 min" },
      { id: "l-202", title: "Qualifying Criteria for Clients", duration: "11 min" },
      { id: "l-203", title: "The Funding Process Explained", duration: "14 min" },
      { id: "l-204", title: "Common Client Questions & Answers", duration: "9 min" },
    ]
  },
  {
    id: "m3", title: "Sales & Referral Strategies", icon: "📈",
    lessons: [
      { id: "l-301", title: "Identifying Ideal Referral Clients", duration: "13 min" },
      { id: "l-302", title: "Effective Outreach Scripts", duration: "10 min" },
      { id: "l-303", title: "Leveraging Your Network", duration: "8 min" },
      { id: "l-304", title: "Tracking & Optimizing Your Funnel", duration: "12 min" },
    ]
  },
  {
    id: "m4", title: "Compliance & Best Practices", icon: "⚖️",
    lessons: [
      { id: "l-401", title: "FTC & Disclosure Requirements", duration: "11 min" },
      { id: "l-402", title: "What You Can and Cannot Promise", duration: "9 min" },
      { id: "l-403", title: "Data Privacy & Client Confidentiality", duration: "7 min" },
      { id: "l-404", title: "Certification & Next Steps", duration: "5 min" },
    ]
  },
];

// ─── MOCK DATA ─────────────────────────────────────────────────────────────────
const MOCK_AFFILIATES = [
  { id: "a1", name: "Sarah Chen", email: "sarah@example.com", phone: "+1-555-0101", company: "Chen Advisory", tier: "Gold Broker", status: "Active", affiliate_code: "SARAH-BFN", total_earned: 18420, pending_comm: 2100, commission_rate: 0.03, created_at: "2024-11-15", referral_method: "LinkedIn", ghl_contact_id: "ghl_001" },
  { id: "a2", name: "Marcus Williams", email: "marcus@fundingpro.com", phone: "+1-555-0202", company: "Funding Pro LLC", tier: "Platinum Broker", status: "Active", affiliate_code: "MARCUS-BFN", total_earned: 62800, pending_comm: 5400, commission_rate: 0.04, created_at: "2024-09-03", referral_method: "Referral", ghl_contact_id: "ghl_002" },
  { id: "a3", name: "Priya Patel", email: "priya@pateladvisors.com", phone: "+1-555-0303", company: "Patel Advisors", tier: "Silver Broker", status: "Active", affiliate_code: "PRIYA-BFN", total_earned: 9650, pending_comm: 850, commission_rate: 0.025, created_at: "2025-01-20", referral_method: "Website", ghl_contact_id: "ghl_003" },
  { id: "a4", name: "James Okonkwo", email: "james@bizbroker.net", phone: "+1-555-0404", company: "BizBroker Net", tier: "Bronze Broker", status: "Pending", affiliate_code: null, total_earned: 0, pending_comm: 0, commission_rate: 0.02, created_at: "2025-06-01", referral_method: "Google", ghl_contact_id: null },
  { id: "a5", name: "Lisa Nguyen", email: "lisa@capitalconnect.io", phone: "+1-555-0505", company: "Capital Connect", tier: "Bronze Broker", status: "Pending", affiliate_code: null, total_earned: 0, pending_comm: 0, commission_rate: 0.02, created_at: "2025-06-02", referral_method: "Instagram", ghl_contact_id: null },
];

const MOCK_DEALS = [
  { id: "d1", affiliate_id: "a1", business_name: "Green Leaf Café", loan_amount: 75000, stage: "Funded", commission: 2250, commission_paid: true, paid_at: "2025-05-10", created_at: "2025-04-01" },
  { id: "d2", affiliate_id: "a1", business_name: "TechForge Solutions", loan_amount: 140000, stage: "Approved", commission: 4200, commission_paid: false, created_at: "2025-05-15" },
  { id: "d3", affiliate_id: "a2", business_name: "Sunrise Logistics", loan_amount: 320000, stage: "Funded", commission: 12800, commission_paid: true, paid_at: "2025-04-28", created_at: "2025-03-10" },
  { id: "d4", affiliate_id: "a2", business_name: "Pacific Dental Group", loan_amount: 185000, stage: "Under Review", commission: 7400, commission_paid: false, created_at: "2025-05-20" },
  { id: "d5", affiliate_id: "a3", business_name: "Bloom Boutique", loan_amount: 45000, stage: "Application Submitted", commission: 1125, commission_paid: false, created_at: "2025-06-01" },
];

const MOCK_LINKS = [
  { id: "lk1", affiliate_id: "a1", code: "SARAH-BFN", label: "Primary Link", clicks: 342, conversions: 8, active: true },
  { id: "lk2", affiliate_id: "a1", code: "SARAH-BFN-002", label: "LinkedIn Campaign", clicks: 128, conversions: 3, active: true },
  { id: "lk3", affiliate_id: "a2", code: "MARCUS-BFN", label: "Primary Link", clicks: 891, conversions: 21, active: true },
];

// ─── UTILS ────────────────────────────────────────────────────────────────────
const fmt = (n) => n?.toLocaleString("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0 }) ?? "$0";
const fmtNum = (n) => n?.toLocaleString() ?? "0";

function getTier(earned) {
  return TIERS.find(t => earned >= t.min && earned <= t.max) || TIERS[0];
}

function getStageColor(stage) {
  const map = {
    "Lead Captured": "#64748b", "Application Submitted": "#3b82f6",
    "Under Review": "#f59e0b", "Docs Requested": "#8b5cf6",
    "Approved": "#10b981", "Funded": "#22c55e", "Declined": "#ef4444"
  };
  return map[stage] || "#64748b";
}

function StatusBadge({ status }) {
  const colors = { Active: "#22c55e", Pending: "#f59e0b", Suspended: "#ef4444", Rejected: "#64748b" };
  return (
    <span style={{ background: colors[status] + "22", color: colors[status], border: `1px solid ${colors[status]}44`, borderRadius: 6, padding: "2px 10px", fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>
      {status.toUpperCase()}
    </span>
  );
}

// ─── AI CHAT WIDGET ──────────────────────────────────────────────────────────
function AIChat({ affiliate, onClose }) {
  const [messages, setMessages] = useState([
    { role: "assistant", content: `Hey ${affiliate?.name?.split(" ")[0] || "there"}! 👋 I'm your BFN Edge AI assistant. Ask me anything about your affiliate account, commission rates, how to qualify clients, or tips to boost your referrals!` }
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const bottomRef = useRef(null);

  useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]);

  const send = async () => {
    if (!input.trim() || loading) return;
    const userMsg = input.trim();
    setInput("");
    setMessages(m => [...m, { role: "user", content: userMsg }]);
    setLoading(true);

    const context = affiliate ? `Affiliate context: Name: ${affiliate.name}, Tier: ${affiliate.tier}, Total Earned: ${fmt(affiliate.total_earned)}, Commission Rate: ${(affiliate.commission_rate * 100).toFixed(1)}%, Status: ${affiliate.status}.` : "";

    try {
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          system: `You are a helpful assistant for BFN Edge Affiliate Platform — a business funding referral program. ${context} Help affiliates understand their commissions (2-4% based on tier), how to qualify clients, referral strategies, and platform features. Be concise, friendly, and professional. Use $ formatting for amounts.`,
          messages: [...messages.filter(m => m.role !== "assistant" || messages.indexOf(m) > 0), { role: "user", content: userMsg }].map(m => ({ role: m.role, content: m.content }))
        })
      });
      const data = await res.json();
      const reply = data.content?.[0]?.text || "I couldn't get a response. Please try again.";
      setMessages(m => [...m, { role: "assistant", content: reply }]);
    } catch {
      setMessages(m => [...m, { role: "assistant", content: "Connection error. Please try again." }]);
    }
    setLoading(false);
  };

  return (
    <div style={{ position: "fixed", bottom: 24, right: 24, width: 360, background: "#0d1117", border: "1px solid #1e2a3a", borderRadius: 16, boxShadow: "0 24px 64px #000a", zIndex: 1000, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <div style={{ padding: "14px 18px", background: "linear-gradient(135deg, #0a2540, #0f3460)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: "50%", background: "linear-gradient(135deg, #1a6b3c, #22c55e)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>✦</div>
          <div>
            <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 13 }}>BFN AI Assistant</div>
            <div style={{ color: "#22c55e", fontSize: 11 }}>● Online</div>
          </div>
        </div>
        <button onClick={onClose} style={{ background: "none", border: "none", color: "#64748b", cursor: "pointer", fontSize: 18 }}>✕</button>
      </div>
      <div style={{ height: 320, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
        {messages.map((m, i) => (
          <div key={i} style={{ display: "flex", justifyContent: m.role === "user" ? "flex-end" : "flex-start" }}>
            <div style={{
              maxWidth: "82%", padding: "10px 14px", borderRadius: m.role === "user" ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
              background: m.role === "user" ? "linear-gradient(135deg, #0f3460, #1a6b3c)" : "#161e2d",
              color: "#e2e8f0", fontSize: 13, lineHeight: 1.5, border: m.role === "assistant" ? "1px solid #1e2a3a" : "none"
            }}>{m.content}</div>
          </div>
        ))}
        {loading && (
          <div style={{ display: "flex", gap: 4, padding: "10px 14px", background: "#161e2d", borderRadius: "16px 16px 16px 4px", width: "fit-content", border: "1px solid #1e2a3a" }}>
            {[0,1,2].map(i => <div key={i} style={{ width: 6, height: 6, borderRadius: "50%", background: "#22c55e", animation: `pulse 1.2s ${i*0.2}s infinite` }} />)}
          </div>
        )}
        <div ref={bottomRef} />
      </div>
      <div style={{ padding: 12, borderTop: "1px solid #1e2a3a", display: "flex", gap: 8 }}>
        <input
          value={input} onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === "Enter" && send()}
          placeholder="Ask anything..." style={{ flex: 1, background: "#161e2d", border: "1px solid #1e2a3a", borderRadius: 10, color: "#e2e8f0", padding: "9px 14px", fontSize: 13, outline: "none" }}
        />
        <button onClick={send} disabled={loading} style={{ background: "linear-gradient(135deg, #1a6b3c, #22c55e)", border: "none", borderRadius: 10, color: "#fff", padding: "9px 16px", cursor: "pointer", fontWeight: 700, fontSize: 13 }}>↑</button>
      </div>
    </div>
  );
}

// ─── SIGN-UP PAGE ─────────────────────────────────────────────────────────────
function SignUpPage({ onSubmit, onBack }) {
  const [form, setForm] = useState({ name: "", email: "", phone: "", company: "", website: "", referralMethod: "", volume: "", bio: "" });
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!form.name || !form.email) return;
    setLoading(true);
    await new Promise(r => setTimeout(r, 900));
    setSubmitted(true);
    setLoading(false);
    onSubmit?.(form);
  };

  const F = ({ label, field, type = "text", placeholder, options }) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <label style={{ color: "#94a3b8", fontSize: 12, fontWeight: 600, letterSpacing: 1, textTransform: "uppercase" }}>{label}</label>
      {options ? (
        <select value={form[field]} onChange={e => setForm({ ...form, [field]: e.target.value })} style={inputStyle}>
          <option value="">Select…</option>
          {options.map(o => <option key={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} value={form[field]} onChange={e => setForm({ ...form, [field]: e.target.value })} placeholder={placeholder} style={inputStyle} />
      )}
    </div>
  );

  if (submitted) return (
    <div style={{ minHeight: "100vh", background: "#060c14", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ maxWidth: 440, textAlign: "center" }}>
        <div style={{ fontSize: 64, marginBottom: 24 }}>🎉</div>
        <div style={{ color: "#22c55e", fontSize: 36, fontFamily: "Georgia, serif", fontWeight: 700, marginBottom: 12 }}>Application Submitted!</div>
        <div style={{ color: "#94a3b8", fontSize: 16, lineHeight: 1.7, marginBottom: 32 }}>
          Thanks, <strong style={{ color: "#e2e8f0" }}>{form.name}</strong>! Your application is under review. We'll email you at <strong style={{ color: "#e2e8f0" }}>{form.email}</strong> within 24 hours.
        </div>
        <button onClick={onBack} style={btnPrimary}>← Back to Home</button>
      </div>
    </div>
  );

  return (
    <div style={{ minHeight: "100vh", background: "#060c14", display: "flex" }}>
      {/* Left panel */}
      <div style={{ width: 420, background: "linear-gradient(160deg, #0a1929 0%, #071520 50%, #0a2540 100%)", padding: "48px 40px", display: "flex", flexDirection: "column", justifyContent: "space-between", borderRight: "1px solid #1e2a3a", flexShrink: 0 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 48 }}>
            <div style={{ width: 40, height: 40, background: "linear-gradient(135deg, #1a6b3c, #22c55e)", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>✦</div>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 800, fontSize: 16 }}>BFN EDGE</div>
              <div style={{ color: "#22c55e", fontSize: 11, letterSpacing: 2 }}>AFFILIATE NETWORK</div>
            </div>
          </div>
          <div style={{ color: "#e2e8f0", fontSize: 28, fontFamily: "Georgia, serif", fontWeight: 700, lineHeight: 1.3, marginBottom: 16 }}>Earn up to 4% on every funded deal</div>
          <div style={{ color: "#64748b", fontSize: 15, lineHeight: 1.7, marginBottom: 40 }}>Join hundreds of brokers and advisors earning recurring commissions by connecting businesses with the funding they need.</div>
          {TIERS.map(t => (
            <div key={t.name} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <div style={{ width: 8, height: 8, borderRadius: "50%", background: t.color }} />
              <div style={{ color: "#94a3b8", fontSize: 13 }}><span style={{ color: t.color, fontWeight: 700 }}>{t.name}</span> — {(t.rate * 100).toFixed(1)}% commission</div>
            </div>
          ))}
        </div>
        <div style={{ color: "#374151", fontSize: 12 }}>© 2025 Business Funding Now · <a href={`https://businessfundingnow.com`} style={{ color: "#374151", textDecoration: "none" }}>businessfundingnow.com</a></div>
      </div>

      {/* Right panel - form */}
      <div style={{ flex: 1, padding: "48px 56px", overflowY: "auto" }}>
        <button onClick={onBack} style={{ background: "none", border: "none", color: "#64748b", cursor: "pointer", fontSize: 13, marginBottom: 32, display: "flex", alignItems: "center", gap: 6 }}>← Back</button>
        <div style={{ color: "#e2e8f0", fontSize: 26, fontWeight: 800, marginBottom: 6 }}>Join the Affiliate Program</div>
        <div style={{ color: "#64748b", fontSize: 14, marginBottom: 36 }}>Complete the form below. Approval takes less than 24 hours.</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, maxWidth: 620 }}>
          <F label="Full Name *" field="name" placeholder="Jane Smith" />
          <F label="Email Address *" field="email" type="email" placeholder="jane@example.com" />
          <F label="Phone Number" field="phone" placeholder="+1 (555) 000-0000" />
          <F label="Company Name" field="company" placeholder="Acme Advisors LLC" />
          <F label="Website" field="website" placeholder="https://yoursite.com" />
          <F label="How did you hear about us?" field="referralMethod" options={["LinkedIn", "Google", "Referral", "Instagram", "Trade Show", "Other"]} />
          <F label="Monthly Referral Volume" field="volume" options={["1-5 clients", "6-15 clients", "16-30 clients", "30+ clients"]} />
          <div style={{ gridColumn: "1 / -1", display: "flex", flexDirection: "column", gap: 6 }}>
            <label style={{ color: "#94a3b8", fontSize: 12, fontWeight: 600, letterSpacing: 1, textTransform: "uppercase" }}>About You / Your Network</label>
            <textarea value={form.bio} onChange={e => setForm({ ...form, bio: e.target.value })} placeholder="Tell us about yourself and the types of clients you work with..." rows={4} style={{ ...inputStyle, resize: "vertical" }} />
          </div>
        </div>
        <button onClick={handleSubmit} disabled={loading || !form.name || !form.email} style={{ ...btnPrimary, marginTop: 28, opacity: (!form.name || !form.email) ? 0.5 : 1 }}>
          {loading ? "Submitting…" : "Submit Application →"}
        </button>
      </div>
    </div>
  );
}

// ─── AFFILIATE PORTAL ─────────────────────────────────────────────────────────
function AffiliatePortal({ affiliateId, onLogout }) {
  const [tab, setTab] = useState("dashboard");
  const [showChat, setShowChat] = useState(false);
  const affiliate = MOCK_AFFILIATES.find(a => a.id === affiliateId) || MOCK_AFFILIATES[0];
  const deals = MOCK_DEALS.filter(d => d.affiliate_id === affiliate.id);
  const links = MOCK_LINKS.filter(l => l.affiliate_id === affiliate.id);
  const [completedLessons, setCompletedLessons] = useState(new Set(["l-101", "l-102", "l-201"]));
  const tier = getTier(affiliate.total_earned);
  const allLessons = TRAINING_MODULES.flatMap(m => m.lessons);
  const progress = Math.round((completedLessons.size / allLessons.length) * 100);

  const navItems = [
    { id: "dashboard", icon: "◈", label: "Dashboard" },
    { id: "deals", icon: "⬡", label: "My Deals" },
    { id: "links", icon: "⌖", label: "My Links" },
    { id: "training", icon: "◉", label: "Training" },
    { id: "commissions", icon: "◎", label: "Commissions" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "#060c14", display: "flex" }}>
      {/* Sidebar */}
      <div style={{ width: 220, background: "#080f1a", borderRight: "1px solid #0d1a2e", display: "flex", flexDirection: "column", flexShrink: 0 }}>
        <div style={{ padding: "24px 20px", borderBottom: "1px solid #0d1a2e" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 32, height: 32, background: "linear-gradient(135deg, #1a6b3c, #22c55e)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>✦</div>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 800, fontSize: 13 }}>BFN EDGE</div>
              <div style={{ color: "#22c55e", fontSize: 9, letterSpacing: 2 }}>AFFILIATE</div>
            </div>
          </div>
        </div>
        <div style={{ padding: "16px 12px", borderBottom: "1px solid #0d1a2e" }}>
          <div style={{ background: "#0d1a2e", borderRadius: 10, padding: 12 }}>
            <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 13, marginBottom: 2 }}>{affiliate.name.split(" ")[0]}</div>
            <div style={{ color: tier.color, fontSize: 11, fontWeight: 600 }}>{tier.name}</div>
            <div style={{ marginTop: 8, background: "#0a1525", borderRadius: 4, height: 4, overflow: "hidden" }}>
              <div style={{ height: "100%", width: `${progress}%`, background: "linear-gradient(90deg, #1a6b3c, #22c55e)", borderRadius: 4, transition: "width 0.5s" }} />
            </div>
            <div style={{ color: "#64748b", fontSize: 10, marginTop: 4 }}>{progress}% training complete</div>
          </div>
        </div>
        <nav style={{ flex: 1, padding: "12px 8px" }}>
          {navItems.map(item => (
            <button key={item.id} onClick={() => setTab(item.id)} style={{
              width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 8, border: "none", cursor: "pointer", marginBottom: 2, textAlign: "left",
              background: tab === item.id ? "linear-gradient(135deg, #0f2a1a, #0d3320)" : "transparent",
              color: tab === item.id ? "#22c55e" : "#64748b",
              fontWeight: tab === item.id ? 700 : 400, fontSize: 13, transition: "all 0.2s"
            }}>
              <span style={{ fontSize: 16 }}>{item.icon}</span>{item.label}
            </button>
          ))}
        </nav>
        <div style={{ padding: "12px 8px", borderTop: "1px solid #0d1a2e" }}>
          <button onClick={onLogout} style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "none", background: "transparent", color: "#64748b", cursor: "pointer", fontSize: 13, textAlign: "left" }}>⎋ Log Out</button>
        </div>
      </div>

      {/* Main content */}
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "28px 32px", borderBottom: "1px solid #0d1a2e", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ color: "#e2e8f0", fontSize: 20, fontWeight: 800 }}>{navItems.find(n => n.id === tab)?.label}</div>
            <div style={{ color: "#64748b", fontSize: 13 }}>Welcome back, {affiliate.name.split(" ")[0]}!</div>
          </div>
          <button onClick={() => setShowChat(true)} style={{ ...btnSecondary, display: "flex", alignItems: "center", gap: 8 }}>✦ AI Assistant</button>
        </div>

        <div style={{ padding: "28px 32px" }}>
          {tab === "dashboard" && <PortalDashboard affiliate={affiliate} deals={deals} links={links} completedLessons={completedLessons} />}
          {tab === "deals" && <PortalDeals deals={deals} affiliate={affiliate} />}
          {tab === "links" && <PortalLinks links={links} affiliate={affiliate} />}
          {tab === "training" && <PortalTraining completedLessons={completedLessons} setCompletedLessons={setCompletedLessons} />}
          {tab === "commissions" && <PortalCommissions deals={deals} affiliate={affiliate} />}
        </div>
      </div>

      {showChat && <AIChat affiliate={affiliate} onClose={() => setShowChat(false)} />}
    </div>
  );
}

function PortalDashboard({ affiliate, deals, links, completedLessons }) {
  const tier = getTier(affiliate.total_earned);
  const funded = deals.filter(d => d.stage === "Funded");
  const totalVolume = funded.reduce((s, d) => s + d.loan_amount, 0);
  const allLessons = TRAINING_MODULES.flatMap(m => m.lessons);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* Tier banner */}
      <div style={{ background: `linear-gradient(135deg, ${tier.bg}, #0d1a2e)`, border: `1px solid ${tier.color}33`, borderRadius: 14, padding: "20px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div>
          <div style={{ color: tier.color, fontSize: 11, fontWeight: 700, letterSpacing: 2, marginBottom: 4 }}>CURRENT TIER</div>
          <div style={{ color: "#e2e8f0", fontSize: 22, fontWeight: 800 }}>{tier.name}</div>
          <div style={{ color: "#94a3b8", fontSize: 13, marginTop: 4 }}>{(tier.rate * 100).toFixed(1)}% commission rate on all funded deals</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>AFFILIATE CODE</div>
          <div style={{ color: tier.color, fontFamily: "monospace", fontSize: 18, fontWeight: 800 }}>{affiliate.affiliate_code || "PENDING"}</div>
        </div>
      </div>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[
          { label: "Total Earned", value: fmt(affiliate.total_earned), sub: "All time", accent: "#22c55e" },
          { label: "Pending Commission", value: fmt(affiliate.pending_comm), sub: "Awaiting payment", accent: "#f59e0b" },
          { label: "Total Funded Volume", value: fmt(totalVolume), sub: `${funded.length} deals funded`, accent: "#3b82f6" },
          { label: "Training Progress", value: `${Math.round((completedLessons.size / allLessons.length) * 100)}%`, sub: `${completedLessons.size}/${allLessons.length} lessons done`, accent: "#8b5cf6" },
        ].map(stat => (
          <div key={stat.label} style={{ background: "#0d1a2e", borderRadius: 12, padding: "18px 20px", border: "1px solid #1e2a3a" }}>
            <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1, marginBottom: 8 }}>{stat.label.toUpperCase()}</div>
            <div style={{ color: stat.accent, fontSize: 24, fontWeight: 800 }}>{stat.value}</div>
            <div style={{ color: "#374151", fontSize: 12, marginTop: 4 }}>{stat.sub}</div>
          </div>
        ))}
      </div>

      {/* Recent deals */}
      <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700, fontSize: 14 }}>Recent Deals</div>
        {deals.slice(0, 4).map(deal => (
          <div key={deal.id} style={{ padding: "14px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <div style={{ color: "#e2e8f0", fontSize: 14, fontWeight: 600 }}>{deal.business_name}</div>
              <div style={{ color: "#64748b", fontSize: 12 }}>{deal.loan_amount ? fmt(deal.loan_amount) + " loan" : "—"}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div><span style={{ background: getStageColor(deal.stage) + "22", color: getStageColor(deal.stage), borderRadius: 6, padding: "2px 10px", fontSize: 11, fontWeight: 700 }}>{deal.stage}</span></div>
              <div style={{ color: "#22c55e", fontSize: 12, marginTop: 4 }}>{fmt(deal.commission)}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Referral link */}
      <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
        <div style={{ color: "#e2e8f0", fontWeight: 700, marginBottom: 12 }}>Your Referral Link</div>
        <div style={{ display: "flex", gap: 10 }}>
          <input readOnly value={`${REFERRAL_BASE_URL}/?ref=${affiliate.affiliate_code}`} style={{ ...inputStyle, flex: 1, fontFamily: "monospace", fontSize: 13 }} />
          <button style={btnPrimary} onClick={() => navigator.clipboard?.writeText(`${REFERRAL_BASE_URL}/?ref=${affiliate.affiliate_code}`)}>Copy</button>
        </div>
      </div>
    </div>
  );
}

function PortalDeals({ deals, affiliate }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {deals.length === 0 ? (
        <div style={{ color: "#64748b", textAlign: "center", padding: 48 }}>No deals yet. Share your referral link to get started!</div>
      ) : deals.map(deal => (
        <div key={deal.id} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "20px 24px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 16 }}>{deal.business_name}</div>
              <div style={{ color: "#64748b", fontSize: 13, marginTop: 2 }}>Submitted {deal.created_at}</div>
            </div>
            <span style={{ background: getStageColor(deal.stage) + "22", color: getStageColor(deal.stage), border: `1px solid ${getStageColor(deal.stage)}44`, borderRadius: 8, padding: "4px 14px", fontSize: 12, fontWeight: 700 }}>{deal.stage}</span>
          </div>
          <div style={{ display: "flex", gap: 24, marginTop: 16 }}>
            <div><div style={{ color: "#64748b", fontSize: 11 }}>LOAN AMOUNT</div><div style={{ color: "#e2e8f0", fontWeight: 700 }}>{fmt(deal.loan_amount)}</div></div>
            <div><div style={{ color: "#64748b", fontSize: 11 }}>COMMISSION</div><div style={{ color: "#22c55e", fontWeight: 700 }}>{fmt(deal.commission)}</div></div>
            <div><div style={{ color: "#64748b", fontSize: 11 }}>STATUS</div><div style={{ color: deal.commission_paid ? "#22c55e" : "#f59e0b", fontWeight: 700 }}>{deal.commission_paid ? "Paid" : "Pending"}</div></div>
          </div>
          {/* Stage progress bar */}
          <div style={{ marginTop: 16 }}>
            <div style={{ display: "flex", gap: 4 }}>
              {STAGES.filter(s => s !== "Declined").map((s, i) => {
                const activeIdx = STAGES.indexOf(deal.stage);
                const thisIdx = STAGES.indexOf(s);
                return <div key={s} style={{ flex: 1, height: 3, borderRadius: 2, background: thisIdx <= activeIdx ? getStageColor(deal.stage) : "#1e2a3a" }} />;
              })}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function PortalLinks({ links, affiliate }) {
  const [newLabel, setNewLabel] = useState("");
  const [localLinks, setLocalLinks] = useState(links);

  const addLink = () => {
    if (!newLabel) return;
    setLocalLinks([...localLinks, { id: `lk${Date.now()}`, affiliate_id: affiliate.id, code: `${affiliate.affiliate_code?.split("-")[0]}-BFN-${String(localLinks.length + 1).padStart(3, "0")}`, label: newLabel, clicks: 0, conversions: 0, active: true }]);
    setNewLabel("");
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "flex", gap: 10 }}>
        <input value={newLabel} onChange={e => setNewLabel(e.target.value)} placeholder="Link label (e.g. LinkedIn Campaign)" style={{ ...inputStyle, flex: 1 }} />
        <button onClick={addLink} style={btnPrimary}>+ Create Link</button>
      </div>
      {localLinks.map(link => (
        <div key={link.id} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 22px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
            <div style={{ color: "#e2e8f0", fontWeight: 700 }}>{link.label}</div>
            <div style={{ display: "flex", gap: 20 }}>
              <div style={{ textAlign: "center" }}><div style={{ color: "#64748b", fontSize: 10 }}>CLICKS</div><div style={{ color: "#3b82f6", fontWeight: 700 }}>{fmtNum(link.clicks)}</div></div>
              <div style={{ textAlign: "center" }}><div style={{ color: "#64748b", fontSize: 10 }}>CONVERSIONS</div><div style={{ color: "#22c55e", fontWeight: 700 }}>{link.conversions}</div></div>
              <div style={{ textAlign: "center" }}><div style={{ color: "#64748b", fontSize: 10 }}>CVR</div><div style={{ color: "#f59e0b", fontWeight: 700 }}>{link.clicks ? ((link.conversions / link.clicks) * 100).toFixed(1) + "%" : "—"}</div></div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <input readOnly value={`${REFERRAL_BASE_URL}/?ref=${link.code}`} style={{ ...inputStyle, flex: 1, fontFamily: "monospace", fontSize: 12 }} />
            <button style={btnSecondary} onClick={() => navigator.clipboard?.writeText(`${REFERRAL_BASE_URL}/?ref=${link.code}`)}>Copy</button>
          </div>
        </div>
      ))}
    </div>
  );
}

function PortalTraining({ completedLessons, setCompletedLessons }) {
  const [activeLesson, setActiveLesson] = useState(null);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
      {TRAINING_MODULES.map(mod => (
        <div key={mod.id} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <span style={{ fontSize: 22 }}>{mod.icon}</span>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 14 }}>{mod.title}</div>
              <div style={{ color: "#64748b", fontSize: 12 }}>{mod.lessons.filter(l => completedLessons.has(l.id)).length}/{mod.lessons.length} complete</div>
            </div>
          </div>
          {mod.lessons.map(lesson => {
            const done = completedLessons.has(lesson.id);
            return (
              <div key={lesson.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: "1px solid #0a1525" }}>
                <button onClick={() => setCompletedLessons(prev => { const s = new Set(prev); done ? s.delete(lesson.id) : s.add(lesson.id); return s; })} style={{ width: 18, height: 18, borderRadius: 4, border: done ? "none" : "1px solid #374151", background: done ? "#22c55e" : "transparent", cursor: "pointer", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 11 }}>
                  {done ? "✓" : ""}
                </button>
                <div style={{ flex: 1 }}>
                  <div style={{ color: done ? "#64748b" : "#e2e8f0", fontSize: 13, textDecoration: done ? "line-through" : "none" }}>{lesson.title}</div>
                  <div style={{ color: "#374151", fontSize: 11 }}>{lesson.duration}</div>
                </div>
                <button onClick={() => setActiveLesson(lesson)} style={{ ...btnSecondary, padding: "4px 10px", fontSize: 11 }}>Watch</button>
              </div>
            );
          })}
        </div>
      ))}
      {activeLesson && (
        <div style={{ position: "fixed", inset: 0, background: "#000a", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ background: "#0d1a2e", borderRadius: 16, padding: 24, width: 560, border: "1px solid #1e2a3a" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
              <div style={{ color: "#e2e8f0", fontWeight: 700 }}>{activeLesson.title}</div>
              <button onClick={() => setActiveLesson(null)} style={{ background: "none", border: "none", color: "#64748b", cursor: "pointer", fontSize: 18 }}>✕</button>
            </div>
            <div style={{ background: "#060c14", borderRadius: 10, height: 240, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid #1e2a3a", marginBottom: 16 }}>
              <div style={{ textAlign: "center" }}>
                <div style={{ fontSize: 48, marginBottom: 8 }}>▶</div>
                <div style={{ color: "#64748b", fontSize: 13 }}>Video player — connect GHL embed URL</div>
                <div style={{ color: "#374151", fontSize: 11, marginTop: 4 }}>Duration: {activeLesson.duration}</div>
              </div>
            </div>
            <button onClick={() => { setCompletedLessons(prev => new Set([...prev, activeLesson.id])); setActiveLesson(null); }} style={btnPrimary}>Mark Complete ✓</button>
          </div>
        </div>
      )}
    </div>
  );
}

function PortalCommissions({ deals, affiliate }) {
  const paid = deals.filter(d => d.commission_paid);
  const pending = deals.filter(d => !d.commission_paid && d.stage === "Funded");
  const paidTotal = paid.reduce((s, d) => s + d.commission, 0);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
        {[
          { label: "Total Paid Out", value: fmt(paidTotal), color: "#22c55e" },
          { label: "Pending Payment", value: fmt(affiliate.pending_comm), color: "#f59e0b" },
          { label: "Payout Method", value: affiliate.payout_method || "ACH Direct", color: "#3b82f6" },
        ].map(s => (
          <div key={s.label} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
            <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>{s.label.toUpperCase()}</div>
            <div style={{ color: s.color, fontSize: 22, fontWeight: 800, marginTop: 6 }}>{s.value}</div>
          </div>
        ))}
      </div>
      <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
        <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700 }}>Commission History</div>
        {deals.map(deal => (
          <div key={deal.id} style={{ padding: "14px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div>
              <div style={{ color: "#e2e8f0", fontSize: 14 }}>{deal.business_name}</div>
              <div style={{ color: "#64748b", fontSize: 12 }}>{deal.stage} · {deal.created_at}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ color: "#22c55e", fontWeight: 700 }}>{fmt(deal.commission)}</div>
              <div style={{ fontSize: 11, color: deal.commission_paid ? "#22c55e" : "#f59e0b" }}>{deal.commission_paid ? "✓ Paid " + deal.paid_at : "Pending"}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── ADMIN DASHBOARD ──────────────────────────────────────────────────────────
function AdminDashboard({ onLogout }) {
  const [tab, setTab] = useState("overview");
  const [affiliates, setAffiliates] = useState(MOCK_AFFILIATES);
  const [deals] = useState(MOCK_DEALS);
  const [search, setSearch] = useState("");
  const [showChat, setShowChat] = useState(false);
  const [aiAnalysis, setAiAnalysis] = useState("");
  const [aiLoading, setAiLoading] = useState(false);

  const pending = affiliates.filter(a => a.status === "Pending");
  const active = affiliates.filter(a => a.status === "Active");
  const totalFunded = deals.filter(d => d.stage === "Funded").reduce((s, d) => s + d.loan_amount, 0);
  const totalComm = deals.reduce((s, d) => s + d.commission, 0);

  const approve = (id) => setAffiliates(prev => prev.map(a => a.id === id ? { ...a, status: "Active", affiliate_code: `${a.name.split(" ")[0].toUpperCase().slice(0, 8)}-BFN` } : a));
  const reject = (id) => setAffiliates(prev => prev.map(a => a.id === id ? { ...a, status: "Rejected" } : a));

  const getAiInsights = async () => {
    setAiLoading(true);
    const summary = `Active affiliates: ${active.length}. Pending: ${pending.length}. Total funded volume: ${fmt(totalFunded)}. Total commissions: ${fmt(totalComm)}. Top earner: ${active.sort((a, b) => b.total_earned - a.total_earned)[0]?.name}.`;
    try {
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          messages: [{
            role: "user",
            content: `You're an analyst for BFN Edge Affiliate Program. Analyze this data and provide 3-4 actionable insights: ${summary}. Focus on growth opportunities, retention, and performance optimization. Be concise with bullet points.`
          }]
        })
      });
      const data = await res.json();
      setAiAnalysis(data.content?.[0]?.text || "No insights available.");
    } catch { setAiAnalysis("Failed to load insights."); }
    setAiLoading(false);
  };

  const navItems = [
    { id: "overview", icon: "◈", label: "Overview" },
    { id: "affiliates", icon: "⬡", label: "Affiliates" },
    { id: "deals", icon: "⌖", label: "All Deals" },
    { id: "commissions", icon: "◎", label: "Commissions" },
    { id: "automations", icon: "⟳", label: "Automations" },
  ];

  const filtered = affiliates.filter(a => !search || a.name.toLowerCase().includes(search.toLowerCase()) || a.email.toLowerCase().includes(search.toLowerCase()));

  return (
    <div style={{ minHeight: "100vh", background: "#060c14", display: "flex" }}>
      {/* Sidebar */}
      <div style={{ width: 220, background: "#080f1a", borderRight: "1px solid #0d1a2e", display: "flex", flexDirection: "column", flexShrink: 0 }}>
        <div style={{ padding: "24px 20px", borderBottom: "1px solid #0d1a2e" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 32, height: 32, background: "linear-gradient(135deg, #1a3a6b, #3b82f6)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>⬡</div>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 800, fontSize: 13 }}>BFN EDGE</div>
              <div style={{ color: "#3b82f6", fontSize: 9, letterSpacing: 2 }}>ADMIN</div>
            </div>
          </div>
        </div>
        {pending.length > 0 && (
          <div style={{ margin: "12px 12px 0", background: "#1a1000", border: "1px solid #f59e0b44", borderRadius: 8, padding: "10px 12px" }}>
            <div style={{ color: "#f59e0b", fontSize: 11, fontWeight: 700 }}>⚡ {pending.length} pending approval{pending.length > 1 ? "s" : ""}</div>
          </div>
        )}
        <nav style={{ flex: 1, padding: "12px 8px" }}>
          {navItems.map(item => (
            <button key={item.id} onClick={() => setTab(item.id)} style={{
              width: "100%", display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: 8, border: "none", cursor: "pointer", marginBottom: 2, textAlign: "left",
              background: tab === item.id ? "linear-gradient(135deg, #0d1a3a, #0d2060)" : "transparent",
              color: tab === item.id ? "#3b82f6" : "#64748b",
              fontWeight: tab === item.id ? 700 : 400, fontSize: 13, transition: "all 0.2s"
            }}>
              <span style={{ fontSize: 16 }}>{item.icon}</span>{item.label}
            </button>
          ))}
        </nav>
        <div style={{ padding: "12px 8px", borderTop: "1px solid #0d1a2e", display: "flex", flexDirection: "column", gap: 4 }}>
          <button onClick={() => setShowChat(true)} style={{ ...btnSecondary, width: "100%", fontSize: 12 }}>✦ AI Insights</button>
          <button onClick={onLogout} style={{ width: "100%", padding: "10px 12px", borderRadius: 8, border: "none", background: "transparent", color: "#64748b", cursor: "pointer", fontSize: 13, textAlign: "left" }}>⎋ Log Out</button>
        </div>
      </div>

      {/* Main */}
      <div style={{ flex: 1, overflowY: "auto" }}>
        <div style={{ padding: "28px 32px", borderBottom: "1px solid #0d1a2e", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ color: "#e2e8f0", fontSize: 20, fontWeight: 800 }}>{navItems.find(n => n.id === tab)?.label}</div>
            <div style={{ color: "#64748b", fontSize: 13 }}>Admin · Business Funding Now</div>
          </div>
          <button onClick={getAiInsights} style={{ ...btnSecondary, display: "flex", alignItems: "center", gap: 8 }}>
            {aiLoading ? "Analyzing…" : "✦ AI Analysis"}
          </button>
        </div>

        {aiAnalysis && (
          <div style={{ margin: "20px 32px 0", background: "#0d1a2e", borderRadius: 12, border: "1px solid #3b82f644", padding: "16px 20px" }}>
            <div style={{ color: "#3b82f6", fontWeight: 700, fontSize: 12, marginBottom: 8, letterSpacing: 1 }}>✦ AI INSIGHTS</div>
            <div style={{ color: "#94a3b8", fontSize: 13, lineHeight: 1.7, whiteSpace: "pre-wrap" }}>{aiAnalysis}</div>
            <button onClick={() => setAiAnalysis("")} style={{ marginTop: 10, background: "none", border: "none", color: "#374151", cursor: "pointer", fontSize: 12 }}>Dismiss</button>
          </div>
        )}

        <div style={{ padding: "24px 32px" }}>
          {tab === "overview" && <AdminOverview affiliates={affiliates} deals={deals} approve={approve} reject={reject} totalFunded={totalFunded} totalComm={totalComm} />}
          {tab === "affiliates" && <AdminAffiliates affiliates={filtered} search={search} setSearch={setSearch} approve={approve} reject={reject} />}
          {tab === "deals" && <AdminDeals deals={deals} affiliates={affiliates} />}
          {tab === "commissions" && <AdminCommissions deals={deals} affiliates={affiliates} />}
          {tab === "automations" && <AdminAutomations />}
        </div>
      </div>
      {showChat && <AIChat onClose={() => setShowChat(false)} />}
    </div>
  );
}

function AdminOverview({ affiliates, deals, approve, reject, totalFunded, totalComm }) {
  const pending = affiliates.filter(a => a.status === "Pending");
  const active = affiliates.filter(a => a.status === "Active");
  const funded = deals.filter(d => d.stage === "Funded");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {[
          { label: "Active Affiliates", value: active.length, accent: "#22c55e", icon: "⬡" },
          { label: "Total Funded Volume", value: fmt(totalFunded), accent: "#3b82f6", icon: "◈" },
          { label: "Total Commissions", value: fmt(totalComm), accent: "#f59e0b", icon: "◎" },
          { label: "Pending Approvals", value: pending.length, accent: "#ef4444", icon: "⚡" },
        ].map(s => (
          <div key={s.label} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>{s.label.toUpperCase()}</div>
              <span style={{ color: s.accent, fontSize: 18 }}>{s.icon}</span>
            </div>
            <div style={{ color: s.accent, fontSize: 26, fontWeight: 800, marginTop: 8 }}>{s.value}</div>
          </div>
        ))}
      </div>

      {pending.length > 0 && (
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
          <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ color: "#e2e8f0", fontWeight: 700 }}>Pending Approvals</span>
            <span style={{ background: "#f59e0b22", color: "#f59e0b", borderRadius: 6, padding: "2px 10px", fontSize: 11, fontWeight: 700 }}>{pending.length} WAITING</span>
          </div>
          {pending.map(a => (
            <div key={a.id} style={{ padding: "16px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div>
                <div style={{ color: "#e2e8f0", fontWeight: 600 }}>{a.name}</div>
                <div style={{ color: "#64748b", fontSize: 13 }}>{a.email} · {a.company} · via {a.referral_method}</div>
                <div style={{ color: "#374151", fontSize: 12 }}>Applied {a.created_at}</div>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                <button onClick={() => approve(a.id)} style={{ ...btnPrimary, padding: "8px 16px", fontSize: 13 }}>✓ Approve</button>
                <button onClick={() => reject(a.id)} style={{ background: "#1a0a0a", border: "1px solid #ef444444", color: "#ef4444", borderRadius: 8, padding: "8px 16px", cursor: "pointer", fontSize: 13 }}>✗ Reject</button>
              </div>
            </div>
          ))}
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
          <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700, fontSize: 14 }}>Top Performers</div>
          {affiliates.filter(a => a.status === "Active").sort((a, b) => b.total_earned - a.total_earned).slice(0, 4).map((a, i) => (
            <div key={a.id} style={{ padding: "12px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{ width: 24, height: 24, borderRadius: "50%", background: ["#FFD700", "#C0C0C0", "#CD7F32", "#64748b"][i] + "33", color: ["#FFD700", "#C0C0C0", "#CD7F32", "#64748b"][i], display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 800 }}>{i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ color: "#e2e8f0", fontSize: 13, fontWeight: 600 }}>{a.name}</div>
                <div style={{ color: "#64748b", fontSize: 11 }}>{a.tier}</div>
              </div>
              <div style={{ color: "#22c55e", fontWeight: 700, fontSize: 13 }}>{fmt(a.total_earned)}</div>
            </div>
          ))}
        </div>
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
          <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700, fontSize: 14 }}>Deal Pipeline</div>
          {STAGES.slice(0, 6).map(stage => {
            const count = deals.filter(d => d.stage === stage).length;
            return (
              <div key={stage} style={{ padding: "10px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: getStageColor(stage), flexShrink: 0 }} />
                <div style={{ flex: 1, color: "#94a3b8", fontSize: 13 }}>{stage}</div>
                <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 13 }}>{count}</div>
                <div style={{ width: 60, height: 3, background: "#0a1525", borderRadius: 2 }}><div style={{ height: "100%", width: `${(count / deals.length) * 100}%`, background: getStageColor(stage), borderRadius: 2 }} /></div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function AdminAffiliates({ affiliates, search, setSearch, approve, reject }) {
  const [selected, setSelected] = useState(null);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search by name or email…" style={{ ...inputStyle, maxWidth: 360 }} />
      <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr auto", padding: "12px 20px", borderBottom: "1px solid #1e2a3a" }}>
          {["Affiliate", "Company", "Tier", "Earned", "Status", "Actions"].map(h => (
            <div key={h} style={{ color: "#64748b", fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>{h.toUpperCase()}</div>
          ))}
        </div>
        {affiliates.map(a => (
          <div key={a.id} onClick={() => setSelected(a)} style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr auto", padding: "14px 20px", borderBottom: "1px solid #0a1525", cursor: "pointer", transition: "background 0.15s" }}
            onMouseEnter={e => e.currentTarget.style.background = "#0a1525"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 600, fontSize: 13 }}>{a.name}</div>
              <div style={{ color: "#64748b", fontSize: 11 }}>{a.email}</div>
            </div>
            <div style={{ color: "#94a3b8", fontSize: 13, alignSelf: "center" }}>{a.company || "—"}</div>
            <div style={{ alignSelf: "center" }}><span style={{ color: getTier(a.total_earned).color, fontSize: 11, fontWeight: 700 }}>{a.tier}</span></div>
            <div style={{ color: "#22c55e", fontWeight: 700, fontSize: 13, alignSelf: "center" }}>{fmt(a.total_earned)}</div>
            <div style={{ alignSelf: "center" }}><StatusBadge status={a.status} /></div>
            <div style={{ display: "flex", gap: 6, alignSelf: "center" }} onClick={e => e.stopPropagation()}>
              {a.status === "Pending" && <>
                <button onClick={() => approve(a.id)} style={{ ...btnPrimary, padding: "5px 10px", fontSize: 11 }}>✓</button>
                <button onClick={() => reject(a.id)} style={{ background: "#1a0a0a", border: "1px solid #ef444444", color: "#ef4444", borderRadius: 6, padding: "5px 10px", cursor: "pointer", fontSize: 11 }}>✗</button>
              </>}
            </div>
          </div>
        ))}
      </div>

      {selected && (
        <div style={{ position: "fixed", inset: 0, background: "#000a", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ background: "#0d1a2e", borderRadius: 16, padding: 28, width: 520, border: "1px solid #1e2a3a", maxHeight: "85vh", overflowY: "auto" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
              <div style={{ color: "#e2e8f0", fontSize: 18, fontWeight: 800 }}>{selected.name}</div>
              <button onClick={() => setSelected(null)} style={{ background: "none", border: "none", color: "#64748b", cursor: "pointer", fontSize: 20 }}>✕</button>
            </div>
            {[
              ["Email", selected.email], ["Phone", selected.phone], ["Company", selected.company],
              ["Tier", selected.tier], ["Status", selected.status], ["Affiliate Code", selected.affiliate_code || "Not assigned"],
              ["Commission Rate", (selected.commission_rate * 100).toFixed(1) + "%"], ["Total Earned", fmt(selected.total_earned)],
              ["Pending Commission", fmt(selected.pending_comm)], ["Referral Method", selected.referral_method],
              ["Joined", selected.created_at],
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid #0a1525" }}>
                <span style={{ color: "#64748b", fontSize: 13 }}>{k}</span>
                <span style={{ color: "#e2e8f0", fontSize: 13, fontWeight: 600 }}>{v}</span>
              </div>
            ))}
            {selected.status === "Pending" && (
              <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
                <button onClick={() => { approve(selected.id); setSelected(null); }} style={{ ...btnPrimary, flex: 1 }}>✓ Approve</button>
                <button onClick={() => { reject(selected.id); setSelected(null); }} style={{ background: "#1a0a0a", border: "1px solid #ef444444", color: "#ef4444", borderRadius: 10, padding: "10px 20px", cursor: "pointer", flex: 1 }}>✗ Reject</button>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function AdminDeals({ deals, affiliates }) {
  return (
    <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr", padding: "12px 20px", borderBottom: "1px solid #1e2a3a" }}>
        {["Business", "Affiliate", "Loan Amount", "Commission", "Stage"].map(h => (
          <div key={h} style={{ color: "#64748b", fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>{h.toUpperCase()}</div>
        ))}
      </div>
      {deals.map(deal => {
        const aff = affiliates.find(a => a.id === deal.affiliate_id);
        return (
          <div key={deal.id} style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 1fr 1fr 1fr", padding: "14px 20px", borderBottom: "1px solid #0a1525" }}>
            <div>
              <div style={{ color: "#e2e8f0", fontWeight: 600, fontSize: 13 }}>{deal.business_name}</div>
              <div style={{ color: "#64748b", fontSize: 11 }}>{deal.created_at}</div>
            </div>
            <div style={{ color: "#94a3b8", fontSize: 13, alignSelf: "center" }}>{aff?.name || "—"}</div>
            <div style={{ color: "#3b82f6", fontWeight: 700, fontSize: 13, alignSelf: "center" }}>{fmt(deal.loan_amount)}</div>
            <div style={{ alignSelf: "center" }}>
              <div style={{ color: "#22c55e", fontWeight: 700, fontSize: 13 }}>{fmt(deal.commission)}</div>
              <div style={{ fontSize: 10, color: deal.commission_paid ? "#22c55e" : "#f59e0b" }}>{deal.commission_paid ? "Paid" : "Pending"}</div>
            </div>
            <div style={{ alignSelf: "center" }}><span style={{ background: getStageColor(deal.stage) + "22", color: getStageColor(deal.stage), borderRadius: 6, padding: "3px 10px", fontSize: 11, fontWeight: 700 }}>{deal.stage}</span></div>
          </div>
        );
      })}
    </div>
  );
}

function AdminCommissions({ deals, affiliates }) {
  const unpaid = deals.filter(d => d.stage === "Funded" && !d.commission_paid);
  const paid = deals.filter(d => d.commission_paid);
  const totalDue = unpaid.reduce((s, d) => s + d.commission, 0);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #ef444444", padding: "18px 20px" }}>
          <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>COMMISSIONS DUE</div>
          <div style={{ color: "#ef4444", fontSize: 26, fontWeight: 800, marginTop: 6 }}>{fmt(totalDue)}</div>
          <div style={{ color: "#374151", fontSize: 12 }}>{unpaid.length} payout{unpaid.length !== 1 ? "s" : ""} pending</div>
        </div>
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #22c55e44", padding: "18px 20px" }}>
          <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>TOTAL PAID OUT</div>
          <div style={{ color: "#22c55e", fontSize: 26, fontWeight: 800, marginTop: 6 }}>{fmt(paid.reduce((s, d) => s + d.commission, 0))}</div>
          <div style={{ color: "#374151", fontSize: 12 }}>{paid.length} commissions paid</div>
        </div>
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
          <div style={{ color: "#64748b", fontSize: 11, letterSpacing: 1 }}>AVG COMMISSION</div>
          <div style={{ color: "#3b82f6", fontSize: 26, fontWeight: 800, marginTop: 6 }}>{fmt(deals.length ? deals.reduce((s, d) => s + d.commission, 0) / deals.length : 0)}</div>
          <div style={{ color: "#374151", fontSize: 12 }}>per deal</div>
        </div>
      </div>

      {unpaid.length > 0 && (
        <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
          <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700 }}>Pending Payouts</div>
          {unpaid.map(deal => {
            const aff = affiliates.find(a => a.id === deal.affiliate_id);
            return (
              <div key={deal.id} style={{ padding: "14px 20px", borderBottom: "1px solid #0a1525", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <div style={{ color: "#e2e8f0", fontWeight: 600 }}>{deal.business_name}</div>
                  <div style={{ color: "#64748b", fontSize: 12 }}>To: {aff?.name} · {aff?.payout_method || "ACH Direct"}</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <div style={{ color: "#22c55e", fontWeight: 800, fontSize: 16 }}>{fmt(deal.commission)}</div>
                  <button style={btnPrimary}>Mark Paid ✓</button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function AdminAutomations() {
  const automations = [
    { id: 1, name: "Affiliate Onboarding Sequence", trigger: "Tag: affiliate-active added", steps: [`Send welcome email with affiliate link`, `Send SMS: Congrats + portal link → ${AFFILIATE_PORTAL_URL}`, "Wait 2 days → Send 'First referral?' email", "Wait 5 days → Send training tip email"], status: "Active" },
    { id: 2, name: "Deal Stage Notification", trigger: "Opportunity stage changes in BFN pipeline", steps: [`Fire outbound webhook to ${ADMIN_PORTAL_URL}/api/affiliate/webhook`, "If Funded → Add tag: commission-pending", "Notify admin of funded deal"], status: "Active" },
    { id: 3, name: "Affiliate Certification", trigger: "Tag: affiliate-certified added", steps: ["Send certification congratulations email", "Send SMS: Badge notification", "Update custom field: certified = true"], status: "Active" },
    { id: 4, name: "Commission Paid Notification", trigger: "Commission marked as paid in dashboard", steps: ["Send payment confirmation email to affiliate", "Update Supabase commission_paid = true"], status: "Active" },
  ];

  const notifications = [
    { event: "New affiliate applies", channels: ["Admin email", "Admin SMS"], template: "🔔 New Affiliate Application — {name}" },
    { event: "Application confirmed", channels: ["Applicant email"], template: "✅ We received your BFN Edge Affiliate Application!" },
    { event: "Affiliate approved", channels: ["Affiliate email", "Affiliate SMS"], template: "🎉 You're approved! Your BFN Edge Affiliate Account is Live" },
    { event: "Deal stage updated", channels: ["Affiliate email"], template: "📊 Deal Update: {business} → {stage}" },
    { event: "Deal funded", channels: ["Affiliate email", "Admin email"], template: "💰 Commission Earned! {business} has been funded" },
    { event: "Commission paid", channels: ["Affiliate email"], template: "✅ Your BFN Commission Has Been Paid" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {automations.map(a => (
          <div key={a.id} style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", padding: "18px 20px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
              <div style={{ color: "#e2e8f0", fontWeight: 700, fontSize: 14 }}>{a.name}</div>
              <span style={{ background: "#22c55e22", color: "#22c55e", borderRadius: 6, padding: "2px 10px", fontSize: 10, fontWeight: 700 }}>ACTIVE</span>
            </div>
            <div style={{ color: "#3b82f6", fontSize: 12, marginBottom: 10, background: "#0d2060", padding: "6px 10px", borderRadius: 6 }}>⚡ {a.trigger}</div>
            {a.steps.map((step, i) => (
              <div key={i} style={{ display: "flex", gap: 8, marginBottom: 6, alignItems: "flex-start" }}>
                <div style={{ width: 18, height: 18, borderRadius: "50%", background: "#1e2a3a", color: "#64748b", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, flexShrink: 0 }}>{i + 1}</div>
                <div style={{ color: "#94a3b8", fontSize: 12, lineHeight: 1.4 }}>{step}</div>
              </div>
            ))}
          </div>
        ))}
      </div>

      <div style={{ background: "#0d1a2e", borderRadius: 12, border: "1px solid #1e2a3a", overflow: "hidden" }}>
        <div style={{ padding: "14px 20px", borderBottom: "1px solid #1e2a3a", color: "#e2e8f0", fontWeight: 700 }}>Notification Templates</div>
        {notifications.map((n, i) => (
          <div key={i} style={{ padding: "14px 20px", borderBottom: "1px solid #0a1525", display: "grid", gridTemplateColumns: "2fr 1.5fr 2fr", alignItems: "center", gap: 12 }}>
            <div style={{ color: "#e2e8f0", fontSize: 13 }}>{n.event}</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {n.channels.map(ch => <span key={ch} style={{ background: "#1e2a3a", color: "#94a3b8", borderRadius: 4, padding: "2px 8px", fontSize: 10 }}>{ch}</span>)}
            </div>
            <div style={{ color: "#64748b", fontSize: 12, fontFamily: "monospace" }}>{n.template}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── SHARED STYLES ────────────────────────────────────────────────────────────
const inputStyle = {
  background: "#0d1a2e", border: "1px solid #1e2a3a", borderRadius: 10,
  color: "#e2e8f0", padding: "10px 14px", fontSize: 13, outline: "none", width: "100%", boxSizing: "border-box"
};
const btnPrimary = {
  background: "linear-gradient(135deg, #1a6b3c, #22c55e)", border: "none", borderRadius: 10,
  color: "#fff", padding: "10px 20px", cursor: "pointer", fontWeight: 700, fontSize: 14
};
const btnSecondary = {
  background: "#0d1a2e", border: "1px solid #1e2a3a", borderRadius: 10,
  color: "#94a3b8", padding: "10px 16px", cursor: "pointer", fontWeight: 600, fontSize: 13
};

// ─── LOGIN PAGE ───────────────────────────────────────────────────────────────
function LoginPage({ onLogin }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const handleLogin = async (role) => {
    setLoading(true);
    await new Promise(r => setTimeout(r, 700));
    setLoading(false);
    onLogin(role);
  };

  return (
    <div style={{ minHeight: "100vh", background: "#060c14", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ width: "100%", maxWidth: 400 }}>
        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <div style={{ width: 52, height: 52, background: "linear-gradient(135deg, #1a6b3c, #22c55e)", borderRadius: 14, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, margin: "0 auto 16px" }}>✦</div>
          <div style={{ color: "#e2e8f0", fontSize: 24, fontWeight: 800 }}>BFN Edge</div>
          <div style={{ color: "#64748b", fontSize: 14, marginTop: 4 }}>Sign in to your account</div>
        </div>
        <div style={{ background: "#0d1a2e", borderRadius: 16, border: "1px solid #1e2a3a", padding: 28 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 20 }}>
            <div>
              <label style={{ color: "#94a3b8", fontSize: 11, fontWeight: 600, letterSpacing: 1, display: "block", marginBottom: 6 }}>EMAIL</label>
              <input value={email} onChange={e => setEmail(e.target.value)} type="email" placeholder="you@example.com" style={inputStyle} />
            </div>
            <div>
              <label style={{ color: "#94a3b8", fontSize: 11, fontWeight: 600, letterSpacing: 1, display: "block", marginBottom: 6 }}>PASSWORD</label>
              <input value={password} onChange={e => setPassword(e.target.value)} type="password" placeholder="••••••••" style={inputStyle} />
            </div>
          </div>
          <button onClick={() => handleLogin("affiliate")} disabled={loading} style={{ ...btnPrimary, width: "100%", marginBottom: 10 }}>
            {loading ? "Signing in…" : "Sign In as Affiliate"}
          </button>
          <button onClick={() => handleLogin("admin")} style={{ ...btnSecondary, width: "100%" }}>
            Sign In as Admin (Demo)
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── HOME / LANDING ───────────────────────────────────────────────────────────
function HomePage({ onJoin, onLogin }) {
  return (
    <div style={{ minHeight: "100vh", background: "#060c14", color: "#e2e8f0" }}>
      <nav style={{ padding: "20px 48px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid #0d1a2e" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 36, height: 36, background: "linear-gradient(135deg, #1a6b3c, #22c55e)", borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>✦</div>
          <div>
            <div style={{ fontWeight: 800, fontSize: 15 }}>BFN EDGE</div>
            <div style={{ color: "#22c55e", fontSize: 9, letterSpacing: 2 }}>AFFILIATE NETWORK</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <button onClick={onLogin} style={btnSecondary}>Sign In</button>
          <button onClick={onJoin} style={btnPrimary}>Apply Now →</button>
        </div>
      </nav>

      <div style={{ padding: "80px 48px 60px", maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-block", background: "#22c55e22", border: "1px solid #22c55e44", borderRadius: 20, padding: "6px 18px", fontSize: 12, color: "#22c55e", fontWeight: 700, letterSpacing: 1, marginBottom: 24 }}>EARN 2–4% COMMISSION</div>
        <div style={{ fontSize: 52, fontFamily: "Georgia, serif", fontWeight: 700, lineHeight: 1.15, marginBottom: 20 }}>Turn Your Network Into<br /><span style={{ color: "#22c55e" }}>Recurring Revenue</span></div>
        <div style={{ color: "#64748b", fontSize: 18, lineHeight: 1.7, marginBottom: 40, maxWidth: 600, margin: "0 auto 40px" }}>
          Refer businesses that need funding. Earn commissions when they get funded. Track everything in real time.
        </div>
        <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
          <button onClick={onJoin} style={{ ...btnPrimary, padding: "14px 32px", fontSize: 16 }}>Join the Network →</button>
          <button onClick={onLogin} style={{ ...btnSecondary, padding: "14px 32px", fontSize: 16 }}>Access Portal</button>
        </div>
      </div>

      <div style={{ padding: "0 48px 80px", maxWidth: 1000, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {TIERS.map(t => (
            <div key={t.name} style={{ background: "#0d1a2e", borderRadius: 14, border: `1px solid ${t.color}33`, padding: "24px 20px", textAlign: "center" }}>
              <div style={{ width: 12, height: 12, borderRadius: "50%", background: t.color, margin: "0 auto 14px" }} />
              <div style={{ color: t.color, fontWeight: 800, fontSize: 15, marginBottom: 6 }}>{t.name}</div>
              <div style={{ color: "#e2e8f0", fontSize: 28, fontWeight: 800 }}>{(t.rate * 100).toFixed(1)}%</div>
              <div style={{ color: "#64748b", fontSize: 12, marginTop: 6 }}>
                {t.max === Infinity ? `${fmt(t.min)}+ funded` : `Up to ${fmt(t.max)} funded`}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── ROOT APP ─────────────────────────────────────────────────────────────────
export default function App() {
  const [view, setView] = useState("home"); // home | join | login | affiliate | admin

  return (
    <>
      <style>{`
        * { box-sizing: border-box; }
        body { margin: 0; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&display=swap');
        @keyframes pulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }
        input:focus, select:focus, textarea:focus { border-color: #22c55e !important; }
        ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #060c14; } ::-webkit-scrollbar-thumb { background: #1e2a3a; border-radius: 2px; }
      `}</style>

      {view === "home" && <HomePage onJoin={() => setView("join")} onLogin={() => setView("login")} />}
      {view === "join" && <SignUpPage onBack={() => setView("home")} onSubmit={() => {}} />}
      {view === "login" && <LoginPage onLogin={role => setView(role === "admin" ? "admin" : "affiliate")} />}
      {view === "affiliate" && <AffiliatePortal affiliateId="a1" onLogout={() => setView("home")} />}
      {view === "admin" && <AdminDashboard onLogout={() => setView("home")} />}
    </>
  );
}