import { useState, useEffect, useCallback, useRef } from "react";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Legend, AreaChart, Area } from "recharts";

const STORAGE_KEY_DAILY = "wb_daily_v2";
const STORAGE_KEY_LEADS = "wb_leads_v2";
const STORAGE_KEY_SCRIPTS = "wb_scripts_v2";
const STORAGE_KEY_SETTINGS = "wb_settings_v2";
const STORAGE_KEY_CLIENTS = "wb_clients_v2";
const STORAGE_KEY_CALLS = "wb_calls_v2";

const STATUS_COLORS = {
  New: "#64748b", Contacted: "#3b82f6", Replied: "#8b5cf6",
  Interested: "#f59e0b", Booked: "#10b981", Closed: "#22c55e", Lost: "#ef4444"
};
const TEMP_COLORS = { Cold: "#64748b", Warm: "#f59e0b", Hot: "#ef4444" };

const genId = () => Math.random().toString(36).slice(2, 10);
const today = () => new Date().toISOString().split("T")[0];
const fmt = (n, d = 1) => isNaN(n) ? "0" : Number(n).toFixed(d);
const pct = (a, b) => b > 0 ? fmt((a / b) * 100) : "0.0";

const defaultScripts = [
  {
    id: genId(),
    name: "Script A — SOP v1.0",
    content: "Hey [Name], do you get most of your cleaning jobs through referrals or are you running anything online to bring in new homeowners?",
    active: true,
    stages: [
      {
        title: "Stage 1 — The Opener",
        body: `Send this to every carpet/home cleaner you find on Facebook:\n\n"Hey [Name], do you get most of your cleaning jobs through referrals or are you running anything online to bring in new homeowners?"\n\n✅ Why This Works: It's a question, not a pitch. Zero resistance. Forces them to think about their lead source. Either answer opens the door for you.`
      },
      {
        title: "Stage 2 — Handling Their Reply",
        body: `"Mostly referrals" → Yeah thats how most cleaners run it. Problem is referrals are unpredictable — some months are great, others are dead. Are you getting a consistent flow right now or is it hit or miss?\n\n"Little bit of both" → Nice. Is the online side actually bringing in consistent leads or still kind of hit or miss?\n\n"We run ads / do social media" → Nice, whats been working for you? Most cleaners I talk to say ads feel like gambling — spend money and hope something sticks.\n\n"Rn just trying to build clientele" → Thats exactly what I help with. I run Facebook ads for cleaning businesses that bring in direct homeowner leads. You only pay if you're satisfied — no risk. Want me to show you how it works?\n\n"We're pretty busy / fully booked" → Thats great. I work with cleaners who want to stay consistently booked even in slow season. If things ever slow down, I'd be happy to show you what I do. Good luck!\n\nShort/one-word reply → I'll keep it straight — I help cleaning businesses get homeowner leads through Facebook ads. No retainer, you only pay if satisfied. Worth a 2 min chat?\n\nNo reply → Wait 2 days then: "Hey [Name], just wanted to follow up - I help cleaning businesses get consistent homeowner leads on Facebook. Happy to show you how it works if you're open to it."`
      },
      {
        title: "Stage 3 — Pain Qualification",
        body: `If they admitted inconsistency:\n"Yeah that's the biggest problem I see with cleaners - it's either feast or famine. Is slow season hitting you right now or is it more of a general inconsistency thing?"\n\nIf they said social media but no real results:\n"Makes sense. Organic posting builds trust but rarely brings in leads on demand - you're waiting for people to find you. Are you getting actual inquiries from it or more just likes and follows?"\n\nIf they're running ads but struggling:\n"What kind of results are you seeing? Cost per lead, bookings from it? I ask because most cleaners I talk to say they're spending but not really converting homeowners."\n\n🎯 What You're Listening For: Any sign of inconsistency, slow months, or wasted ad spend. Frustration with their current method. Openness to something new.`
      },
      {
        title: "Stage 4 — The Pitch",
        body: `Only pitch AFTER they've shown pain or interest. Never before.\n\nStandard pitch:\n"So what I do is run Facebook ads specifically for cleaning businesses - targeting homeowners in your area who are actively looking for cleaning services. You get direct leads, not just clicks. And the deal is simple: you only pay if you're actually satisfied with the results. No retainer, no contracts. Want me to walk you through how it works?"\n\nIf hesitant about ads:\n"Totally get it - most cleaners have had bad experiences with agencies that take money and disappear. That's why I only work on a pay-if-satisfied basis. No results, you don't pay. Worst case you get a free look at what's possible."\n\nIf they ask 'what do you charge?':\n"Depends on what you need - but the model is simple. You only pay if you're satisfied with the leads you get. No upfront fees. Want me to show you the setup first so you can decide if it even makes sense for your business?"\n\n⚠️ Pitch Rules: Always mention 'pay only if satisfied'. Talk outcomes: leads, homeowners, bookings. End every pitch with a question.`
      },
      {
        title: "Stage 5 — Moving to Close",
        body: `"Sure, show me" → Perfect. I'll walk you through it right here - no call needed unless you want one. Here's basically how it works: [explain your process in 3-4 sentences]. Does this sound like something that would work for your business?\n\n"Sounds interesting, tell me more" → So the way it works: I set up Facebook ads targeting homeowners in your area looking for cleaning services. The leads come directly to you - name, number, ready to book. I handle everything on the ad side. You focus on closing the jobs. And again - pay only if you're happy with what you're getting. Want to give it a shot?\n\n"I'll think about it" → No rush at all. Just so you know - I only take on 2-3 clients per area so I can focus on results. If you want, I can check if your area is still open when you're ready.\n\n"Yes, let's do it" → Awesome. Let me get a few quick details from you so I can get started - what city/area are you targeting, and what's the best number to reach you on?`
      },
      {
        title: "Stage 6 — Objections",
        body: `"I don't have budget right now" → That's exactly why the model works - you don't pay anything upfront. You only pay after you're satisfied with the leads. Zero risk to try it.\n\n"I tried ads before and it didn't work" → That's the most common thing I hear. Most agencies run generic ads and disappear. I only work with cleaning businesses and I'm accountable for results - you don't pay if it doesn't work.\n\n"I'm not sure about Facebook ads" → Totally fair. Facebook is still the best platform for reaching local homeowners - that's just where they are. I can show you what the ads look like before anything goes live.\n\n"How do I know you're legit?" → Fair question. I'm happy to show you examples of what I've done and walk you through exactly how it works before you commit to anything. No pressure.\n\n"I'm too busy right now" → No problem at all. I'll check back in when things slow down. What months are usually slower for you?\n\n"Send me more info" → Happy to. What's the main thing you want to know - how the leads come in, what the ads look like, or how the pay model works?`
      },
      {
        title: "Follow-Up Sequence",
        body: `Day 2 (no reply to opener): "Hey [Name], just wanted to follow up on my last message. I help cleaning businesses get homeowner leads on Facebook - pay only if satisfied. Worth a quick chat?"\n\nDay 5 (said 'I'll think about it'): "Hey [Name], just checking back in. Still have your area open if you're interested in giving it a shot."\n\nDay 10 (went cold mid-convo): "Hey [Name], I know things get busy. Still happy to show you how the lead system works whenever you're ready."\n\nDay 30 (long cold prospect): "Hey [Name], just reaching out again as we're taking on new cleaning clients this month. Is now a better time to talk?"`
      },
      {
        title: "🔥 Ignore Breaker Messages",
        body: `After opener no reply:\n"Hey [Name], I'll be straight with you — I help carpet & home cleaning businesses get 20 to 30 homeowner leads every month through Facebook ads + an AI follow-up system that works 24/7. You don't touch the ads. You don't chase leads. You just show up and do the job. And you don't pay a single penny until you're actually making money from it. If that sounds worth 2 minutes — I can show you exactly how it works for your area. Just say the word."\n\nAfter opener reply if they don't reply back:\n"Hey [Name], I know things get busy so I'll keep it short. When we last spoke you mentioned [referrals / trying online — swap based on their reply]. A lot of cleaners I work with were in the same spot — before we got them a steady pipeline of 20 to 30 ready-to-book homeowners every month. The setup is simple — Facebook ads targeted to your area, AI handles the follow-up, you only pay once you're actually making money from the leads. Still have your area open. Worth picking back up where we left off?"`
      }
    ]
  },
  {
    id: genId(),
    name: "Script B — SOP v2.0",
    content: "Hey [Name] — quick thing I noticed. Most cleaning businesses I've been working with lately are getting leads for around $8–$15 each using Facebook ads. I checked your page and it doesn't look like you're running anything right now — are you mainly relying on referrals or testing anything paid?",
    active: true,
    stages: [
      {
        title: "Stage 1 — Opener (Authority-First)",
        body: `"Hey [Name] — quick thing I noticed.\n\nMost cleaning businesses I've been working with lately are getting leads for around $8–$15 each using Facebook ads.\n\nI checked your page and it doesn't look like you're running anything right now — are you mainly relying on referrals or testing anything paid?"\n\n✅ Why This Works: Leads with insight and authority (specific numbers). Shows you've done your homework. Opens with value before asking anything.`
      },
      {
        title: "Stage 2 — Handling Replies",
        body: `"Referrals" → Yeah that's how most start — but it gets unpredictable fast. Some weeks are full, others dead. Are you getting consistent jobs right now or is it up and down?\n\n"We run ads" → Nice — what kind of cost per lead are you seeing right now? Most I talk to are spending but not actually converting into jobs.\n\n"Trying to grow" → Makes sense — that's exactly where ads help most. Are you actively trying to bring in more jobs right now or just building slowly?`
      },
      {
        title: "Stage 3 — Pain Qualification",
        body: `"Yeah that's the biggest issue I see — cleaners stuck in that feast-or-famine cycle.\n\nIf you could lock in a consistent flow of jobs every month, would that be something you'd want to fix?"\n\n🎯 You're listening for: Any frustration with inconsistency. A 'yes' or 'definitely' to your question. Openness to change.`
      },
      {
        title: "Stage 4 — The Pitch",
        body: `"So what we do is simple.\n\nWe run Facebook ads targeting homeowners in your area who are actively looking for cleaning.\n\nLeads come directly to you — name + number — ready to book.\n\nAnd there's no upfront cost — you only pay if you're actually getting results.\n\nIf I could show you how this would work specifically for your area, would you be open to it?"`
      },
      {
        title: "Stage 5 — Close",
        body: `"Perfect — I'll keep it simple.\n\nI'll show you:\n- What the ads look like\n- How leads come in\n- What results to expect\n\nIf it makes sense, we move forward. If not, no worries."\n\n🎯 Goal: Remove all friction. Make the yes feel easy and the no feel safe.`
      },
      {
        title: "Follow-Up Sequence",
        body: `Day 2: "Hey [Name], just following up — still open to seeing how this could bring in a few extra jobs this month?"\n\nDay 5: "Hey — quick one, still have your area open if you're interested."\n\nDay 10: "Hey [Name], I know things get busy — happy to show you whenever timing's better."`
      },
      {
        title: "🔥 Ignore Breaker",
        body: `"Hey [Name] — I'll keep it straight.\n\nWe help cleaning businesses generate 20–30 jobs per month using Facebook ads.\n\nNo upfront cost. You only pay if it works.\n\nIf that's even slightly interesting, I can show you how it works for your area."`
      }
    ]
  },
];

const defaultSettings = {
  userName: "Ayan",
  partnerName: "Rohan",
  niches: ["Cleaning", "Construction"],
  services: ["Ads", "Website"],
  targetDMs: 90,
  dealValue: 700,
  currency: "$",
};

const TABS = ["Dashboard", "Daily Log", "Lead CRM", "Cold Calls", "Scripts", "Pipeline", "Reports", "Settings"];

const parseJSONSafe = (value, fallback) => {
  if (typeof value !== "string" || !value.trim()) return fallback;
  try {
    return JSON.parse(value);
  } catch {
    return fallback;
  }
};

const getLeadsFromLocal = () => {
  if (typeof window === "undefined" || !window.localStorage) return [];
  return parseJSONSafe(window.localStorage.getItem(STORAGE_KEY_LEADS), []);
};

const saveLeadsToLocal = (data) => {
  if (typeof window === "undefined" || !window.localStorage) return;
  try {
    window.localStorage.setItem(STORAGE_KEY_LEADS, JSON.stringify(data));
  } catch {}
};

export default function WebbotixCRM() {
  const [tab, setTab] = useState("Dashboard");
  const [daily, setDaily] = useState([]);
  const [leads, setLeads] = useState([]);
  const [scripts, setScripts] = useState(defaultScripts);
  const [clients, setClients] = useState([]);
  const [calls, setCalls] = useState([]);
  const [settings, setSettings] = useState(defaultSettings);
  const [loading, setLoading] = useState(true);
  const [saveIndicator, setSaveIndicator] = useState("");
  const [rangeFilter, setRangeFilter] = useState(30);

  const showSaved = (msg = "Saved") => {
    setSaveIndicator(msg);
    setTimeout(() => setSaveIndicator(""), 2000);
  };

  const loadAll = useCallback(async () => {
    try {
      const [d, l, s, st, cl, ca] = await Promise.allSettled([
        window.storage.get(STORAGE_KEY_DAILY, true),
        window.storage.get(STORAGE_KEY_LEADS, true),
        window.storage.get(STORAGE_KEY_SCRIPTS, true),
        window.storage.get(STORAGE_KEY_SETTINGS, true),
        window.storage.get(STORAGE_KEY_CLIENTS, true),
        window.storage.get(STORAGE_KEY_CALLS, true),
      ]);
      if (d.status === "fulfilled" && d.value) setDaily(JSON.parse(d.value.value));
      if (l.status === "fulfilled" && l.value) {
        const cloudLeads = parseJSONSafe(l.value.value, null);
        if (Array.isArray(cloudLeads)) {
          setLeads(cloudLeads);
          saveLeadsToLocal(cloudLeads);
        } else {
          setLeads(getLeadsFromLocal());
        }
      } else {
        setLeads(getLeadsFromLocal());
      }
      if (s.status === "fulfilled" && s.value) setScripts(JSON.parse(s.value.value));
      if (st.status === "fulfilled" && st.value) setSettings(JSON.parse(st.value.value));
      if (cl.status === "fulfilled" && cl.value) setClients(JSON.parse(cl.value.value));
      if (ca.status === "fulfilled" && ca.value) setCalls(JSON.parse(ca.value.value));
    } catch (e) {}
    setLoading(false);
  }, []);

  useEffect(() => { loadAll(); }, []);

  const saveDaily = async (data) => {
    setDaily(data);
    try { await window.storage.set(STORAGE_KEY_DAILY, JSON.stringify(data), true); showSaved(); } catch (e) {}
  };
  const saveLeads = async (data) => {
    setLeads(data);
    saveLeadsToLocal(data);
    try { await window.storage.set(STORAGE_KEY_LEADS, JSON.stringify(data), true); showSaved(); } catch (e) { showSaved(); }
  };
  const saveScripts = async (data) => {
    setScripts(data);
    try { await window.storage.set(STORAGE_KEY_SCRIPTS, JSON.stringify(data), true); showSaved(); } catch (e) {}
  };
  const saveSettings = async (data) => {
    setSettings(data);
    try { await window.storage.set(STORAGE_KEY_SETTINGS, JSON.stringify(data), true); showSaved(); } catch (e) {}
  };
  const saveClients = async (data) => {
    setClients(data);
    try { await window.storage.set(STORAGE_KEY_CLIENTS, JSON.stringify(data), true); showSaved(); } catch (e) {}
  };
  const saveCalls = async (data) => {
    setCalls(data);
    try { await window.storage.set(STORAGE_KEY_CALLS, JSON.stringify(data), true); showSaved(); } catch (e) {}
  };

  const [quickAddOpen, setQuickAddOpen] = useState(false);
  const [quickLead, setQuickLead] = useState(null);
  const blankLead = () => ({ id: genId(), name: "", businessName: "", niche: settings.niches?.[0] || "Cleaning", city: "", platform: "Instagram", dateContacted: today(), status: "New", leadScore: 5, temp: "Cold", lastMessage: "", nextFollowUp: "", notes: "", scriptUsed: "", facebookLink: "", profileNo: "", phoneNumber: "", service: settings.services?.[0] || "Ads", fee: settings.dealValue || 700 });
  const openQuickAdd = () => { setQuickLead(blankLead()); setQuickAddOpen(true); };
  const saveQuickLead = () => { if (quickLead) { saveLeads([...leads, quickLead]); setQuickAddOpen(false); showSaved("Lead added! ✓"); } };

  const filteredDaily = daily
    .slice()
    .sort((a, b) => a.date.localeCompare(b.date))
    .slice(-rangeFilter);

  const chartData = filteredDaily.map(d => ({
    date: d.date.slice(5),
    DMs: d.dms,
    SMS: d.sms || 0,
    Emails: d.emails || 0,
    "Reply Rate": d.dms > 0 ? parseFloat(pct(d.replies, d.dms)) : 0,
    "Interest Rate": d.dms > 0 ? parseFloat(pct(d.interested, d.dms)) : 0,
    "Close Rate": d.dms > 0 ? parseFloat(pct(d.closed, d.dms)) : 0,
    Revenue: (d.closed || 0) * (settings.dealValue || 700),
  }));

  const totalDMs = filteredDaily.reduce((s, d) => s + (d.dms || 0), 0);
  const totalReplies = filteredDaily.reduce((s, d) => s + (d.replies || 0), 0);
  const totalInterested = filteredDaily.reduce((s, d) => s + (d.interested || 0), 0);
  const totalClosed = filteredDaily.reduce((s, d) => s + (d.closed || 0), 0);
  const totalRevenue = totalClosed * (settings.dealValue || 500);
  const hotLeads = leads.filter(l => l.temp === "Hot" && l.status !== "Closed" && l.status !== "Lost");
  const followUps = leads.filter(l => l.nextFollowUp && l.nextFollowUp <= today() && l.status !== "Closed" && l.status !== "Lost");

  if (loading) return (
    <div style={{ background: "#0a0f1e", minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ width: 48, height: 48, border: "3px solid #1e3a5f", borderTop: "3px solid #00d4ff", borderRadius: "50%", animation: "spin 1s linear infinite", margin: "0 auto 16px" }} />
        <p style={{ color: "#64748b", fontFamily: "monospace" }}>Loading Webbotix CRM...</p>
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );

  return (
    <div style={{ background: "#080d1a", minHeight: "100vh", fontFamily: "'DM Sans', system-ui, sans-serif", color: "#e2e8f0" }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
        * { box-sizing: border-box; margin: 0; padding: 0; }
        ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #0d1526; } ::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }
        input, select, textarea { background: #0d1a2e !important; border: 1px solid #1e3a5f !important; color: #e2e8f0 !important; border-radius: 8px !important; padding: 8px 12px !important; font-family: inherit !important; font-size: 13px !important; outline: none !important; width: 100%; }
        input:focus, select:focus, textarea:focus { border-color: #00d4ff !important; box-shadow: 0 0 0 2px rgba(0,212,255,0.1) !important; }
        select option { background: #0d1a2e; }
        button { cursor: pointer; font-family: inherit; }
        .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        .fade-in { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
      `}</style>

      {/* HEADER */}
      <div style={{ background: "linear-gradient(135deg, #0d1526 0%, #0a1929 100%)", borderBottom: "1px solid #1e3a5f", padding: "0 24px", position: "sticky", top: 0, zIndex: 100 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 56 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 32, height: 32, background: "linear-gradient(135deg, #00d4ff, #0066ff)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif" }}>W</div>
            <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: "#fff", letterSpacing: "-0.3px" }}>Webbotix CRM</span>
            <span style={{ background: "#0d2a1a", color: "#22c55e", fontSize: 10, padding: "2px 8px", borderRadius: 20, border: "1px solid #166534", fontWeight: 500 }}>LIVE</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            {saveIndicator && <span style={{ color: "#22c55e", fontSize: 12, display: "flex", alignItems: "center", gap: 4 }}>✓ {saveIndicator}</span>}
            {hotLeads.length > 0 && <span style={{ background: "#7f1d1d", color: "#fca5a5", fontSize: 11, padding: "3px 10px", borderRadius: 20, border: "1px solid #ef4444" }} className="pulse">🔥 {hotLeads.length} Hot Leads</span>}
            {followUps.length > 0 && <span style={{ background: "#451a03", color: "#fcd34d", fontSize: 11, padding: "3px 10px", borderRadius: 20, border: "1px solid #f59e0b" }}>⏰ {followUps.length} Follow-ups</span>}
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <div style={{ width: 26, height: 26, borderRadius: "50%", background: "linear-gradient(135deg, #7c3aed, #4f46e5)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>{settings.userName?.[0] || "A"}</div>
              <span style={{ fontSize: 12, color: "#94a3b8" }}>{settings.userName}</span>
            </div>
          </div>
        </div>
        <nav style={{ display: "flex", gap: 2, paddingBottom: 0 }}>
          {TABS.map(t => (
            <button key={t} onClick={() => setTab(t)} style={{ background: "none", border: "none", color: tab === t ? "#00d4ff" : "#64748b", fontSize: 13, padding: "8px 14px", borderBottom: tab === t ? "2px solid #00d4ff" : "2px solid transparent", fontWeight: tab === t ? 600 : 400, transition: "all 0.2s", fontFamily: "'Space Grotesk', sans-serif" }}>
              {t}
            </button>
          ))}
        </nav>
      </div>

      <div style={{ padding: "20px 24px", maxWidth: 1400, margin: "0 auto" }} className="fade-in">
        {tab === "Dashboard" && <Dashboard chartData={chartData} totalDMs={totalDMs} totalReplies={totalReplies} totalInterested={totalInterested} totalClosed={totalClosed} totalRevenue={totalRevenue} hotLeads={hotLeads} followUps={followUps} leads={leads} daily={filteredDaily} allDaily={daily} rangeFilter={rangeFilter} setRangeFilter={setRangeFilter} settings={settings} saveSettings={saveSettings} scripts={scripts} />}
        {tab === "Daily Log" && <DailyLog daily={daily} saveDaily={saveDaily} settings={settings} scripts={scripts} />}
        {tab === "Lead CRM" && <LeadCRM leads={leads} saveLeads={saveLeads} settings={settings} scripts={scripts} />}
        {tab === "Cold Calls" && <ColdCalls leads={leads} calls={calls} saveCalls={saveCalls} settings={settings} />}
        {tab === "Scripts" && <ScriptsTab scripts={scripts} saveScripts={saveScripts} daily={daily} leads={leads} />}
        {tab === "Pipeline" && <Pipeline leads={leads} saveLeads={saveLeads} clients={clients} saveClients={saveClients} settings={settings} />}
        {tab === "Reports" && <Reports daily={daily} leads={leads} scripts={scripts} settings={settings} clients={clients} />}
        {tab === "Settings" && <Settings settings={settings} saveSettings={saveSettings} scripts={scripts} saveScripts={saveScripts} />}
      </div>

      {/* ⚡ Floating Quick-Add Lead Button */}
      <button onClick={openQuickAdd} title="Quick Add Lead" style={{ position: "fixed", bottom: 28, right: 28, width: 52, height: 52, borderRadius: "50%", background: "linear-gradient(135deg, #0066ff, #00d4ff)", border: "none", color: "#000", fontSize: 26, fontWeight: 700, boxShadow: "0 4px 20px rgba(0,212,255,0.4)", zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center" }}>+</button>

      {/* Quick-Add Modal */}
      {quickAddOpen && quickLead && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
          <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 20, padding: 28, width: "100%", maxWidth: 520 }} className="fade-in">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <div>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: "#fff", fontSize: 16 }}>⚡ Quick Add Lead</h3>
                <p style={{ color: "#64748b", fontSize: 11, marginTop: 3 }}>Capture fast — fill details later in Lead CRM</p>
              </div>
              <button onClick={() => setQuickAddOpen(false)} style={{ background: "none", border: "none", color: "#64748b", fontSize: 22 }}>✕</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="Name *"><input value={quickLead.name} onChange={e => setQuickLead(p => ({...p, name: e.target.value}))} placeholder="John Smith" /></Field>
              <Field label="Business"><input value={quickLead.businessName} onChange={e => setQuickLead(p => ({...p, businessName: e.target.value}))} placeholder="Smith Cleaning Co." /></Field>
              <Field label="Niche"><select value={quickLead.niche} onChange={e => setQuickLead(p => ({...p, niche: e.target.value}))}>{(settings.niches||[]).map(n=><option key={n}>{n}</option>)}</select></Field>
              <Field label="Platform"><select value={quickLead.platform} onChange={e => setQuickLead(p => ({...p, platform: e.target.value}))}>{["Instagram","Facebook","LinkedIn","Twitter/X","TikTok","Other"].map(p=><option key={p}>{p}</option>)}</select></Field>
              <Field label="Status"><select value={quickLead.status} onChange={e => setQuickLead(p => ({...p, status: e.target.value}))}>{Object.keys(STATUS_COLORS).map(s=><option key={s}>{s}</option>)}</select></Field>
              <Field label="Temperature"><select value={quickLead.temp} onChange={e => setQuickLead(p => ({...p, temp: e.target.value}))}>{["Cold","Warm","Hot"].map(t=><option key={t}>{t}</option>)}</select></Field>
              <Field label="Phone"><input value={quickLead.phoneNumber} onChange={e => setQuickLead(p => ({...p, phoneNumber: e.target.value}))} placeholder="+1 234 567 8900" /></Field>
              <Field label="Next Follow-Up"><input type="date" value={quickLead.nextFollowUp} onChange={e => setQuickLead(p => ({...p, nextFollowUp: e.target.value}))} /></Field>
            </div>
            <Field label="Last Message / Note" style={{ marginTop: 12 }}><textarea value={quickLead.lastMessage} onChange={e => setQuickLead(p => ({...p, lastMessage: e.target.value}))} rows={2} placeholder="What you said to them..." /></Field>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              <button onClick={saveQuickLead} style={{ flex: 1, background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: 13, fontSize: 14, fontWeight: 700 }}>⚡ Save Lead</button>
              <button onClick={() => setQuickAddOpen(false)} style={{ background: "#1e3a5f", color: "#94a3b8", border: "none", borderRadius: 10, padding: "13px 20px" }}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── DASHBOARD ─── */
function Dashboard({ chartData, totalDMs, totalReplies, totalInterested, totalClosed, totalRevenue, hotLeads, followUps, leads, daily, allDaily, rangeFilter, setRangeFilter, settings, saveSettings, scripts }) {
  const todayLog = allDaily.find(d => d.date === today());
  const avgReplyRate = chartData.length > 0 ? (chartData.reduce((s, d) => s + d["Reply Rate"], 0) / chartData.length) : 0;
  const avgCloseRate = chartData.length > 0 ? (chartData.reduce((s, d) => s + d["Close Rate"], 0) / chartData.length) : 0;
  const [editingGoal, setEditingGoal] = useState(false);
  const [goalInput, setGoalInput] = useState(settings.targetDMs || 90);

  // 🔥 Streak — consecutive days hitting DM target
  const target = settings.targetDMs || 30;
  const streak = (() => {
    const sorted = [...allDaily].sort((a,b) => b.date.localeCompare(a.date));
    let count = 0;
    let checkDate = new Date();
    for (const d of sorted) {
      const dateStr = checkDate.toISOString().split("T")[0];
      if (d.date === dateStr && (d.dms || 0) >= target) { count++; checkDate.setDate(checkDate.getDate() - 1); }
      else if (d.date < dateStr) break;
    }
    return count;
  })();

  // 🎯 Today's goal progress
  const todayDMs = todayLog?.dms || 0;
  const goalPct = Math.min(100, Math.round((todayDMs / target) * 100));
  const goalColor = goalPct >= 100 ? "#22c55e" : goalPct >= 60 ? "#f59e0b" : "#3b82f6";

  const scriptPerf = scripts.map(sc => {
    const scLeads = leads.filter(l => l.scriptUsed === sc.name);
    const closed = scLeads.filter(l => l.status === "Closed").length;
    return { name: sc.name, leads: scLeads.length, closed, rate: scLeads.length > 0 ? ((closed / scLeads.length) * 100).toFixed(1) : 0 };
  }).filter(s => s.leads > 0);

  const nicheData = (settings.niches || []).map(n => {
    const nLeads = leads.filter(l => l.niche === n);
    const closed = nLeads.filter(l => l.status === "Closed").length;
    return { name: n, leads: nLeads.length, closed, revenue: closed * (settings.dealValue || 500) };
  });

  const coachingMessages = [];
  if (hotLeads.length > 0) coachingMessages.push({ type: "warning", msg: `You have ${hotLeads.length} HOT lead${hotLeads.length > 1 ? "s" : ""} not closed — act NOW before they go cold.` });
  if (followUps.length > 0) coachingMessages.push({ type: "danger", msg: `${followUps.length} lead${followUps.length > 1 ? "s" : ""} need follow-up TODAY — you are losing money by waiting.` });
  if (avgReplyRate < 10 && totalDMs > 20) coachingMessages.push({ type: "info", msg: `Your reply rate is ${fmt(avgReplyRate)}% — your opener needs improvement. Test a new Script.` });
  if (avgCloseRate < 5 && totalClosed === 0 && totalInterested > 0) coachingMessages.push({ type: "info", msg: `You have interested leads but no closes — work on your pitch or offer urgency.` });
  if (!todayLog) coachingMessages.push({ type: "warning", msg: "No outreach logged today. Go to Daily Log and add your numbers." });
  if (coachingMessages.length === 0) coachingMessages.push({ type: "success", msg: "You are on track! Keep the momentum — consistency is everything." });

  const statusCounts = {};
  leads.forEach(l => { statusCounts[l.status] = (statusCounts[l.status] || 0) + 1; });

  return (
    <div>
      {/* Range Selector */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
        <div>
          <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 22, fontWeight: 700, color: "#fff" }}>Growth Dashboard</h1>
          <p style={{ color: "#64748b", fontSize: 13, marginTop: 2 }}>Real-time performance overview · Shared between {settings.userName} & {settings.partnerName}</p>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {[7, 14, 30, 60, 90].map(d => (
            <button key={d} onClick={() => setRangeFilter(d)} style={{ background: rangeFilter === d ? "#00d4ff" : "#0d1a2e", color: rangeFilter === d ? "#000" : "#64748b", border: "1px solid " + (rangeFilter === d ? "#00d4ff" : "#1e3a5f"), borderRadius: 6, padding: "5px 12px", fontSize: 12, fontWeight: 500 }}>
              {d}D
            </button>
          ))}
        </div>
      </div>

      {/* 🎯 Daily Goal + 🔥 Streak Row */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 12, marginBottom: 20 }}>
        <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 14, padding: "16px 20px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 16 }}>🎯</span>
              <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: "#fff" }}>Daily DM Goal</span>
              <span style={{ fontSize: 11, color: "#64748b" }}>(Ayan + Rohan combined)</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 22, fontWeight: 700, color: goalColor, fontFamily: "'Space Grotesk', sans-serif" }}>{todayDMs}</span>
              {editingGoal ? (
                <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                  <input type="number" value={goalInput} onChange={e => setGoalInput(+e.target.value)} style={{ width: 70, padding: "4px 8px !important", fontSize: 13 }} />
                  <button onClick={() => { saveSettings({ ...settings, targetDMs: goalInput }); setEditingGoal(false); }} style={{ background: "#22c55e", color: "#000", border: "none", borderRadius: 6, padding: "4px 10px", fontSize: 11, fontWeight: 700 }}>✓</button>
                  <button onClick={() => setEditingGoal(false)} style={{ background: "#1e3a5f", color: "#94a3b8", border: "none", borderRadius: 6, padding: "4px 8px", fontSize: 11 }}>✕</button>
                </div>
              ) : (
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 13, color: "#64748b" }}>/ {target}</span>
                  <button onClick={() => { setGoalInput(target); setEditingGoal(true); }} style={{ background: "#0a1929", color: "#64748b", border: "1px solid #1e3a5f", borderRadius: 6, padding: "3px 8px", fontSize: 10 }}>✏️ Edit</button>
                  {goalPct >= 100 && <span style={{ background: "#052e16", color: "#22c55e", fontSize: 11, padding: "2px 8px", borderRadius: 20, border: "1px solid #22c55e44", fontWeight: 600 }}>✅ DONE</span>}
                </div>
              )}
            </div>
          </div>
          <div style={{ background: "#0a1929", borderRadius: 999, height: 10, overflow: "hidden" }}>
            <div style={{ width: `${goalPct}%`, height: "100%", background: `linear-gradient(90deg, ${goalColor}, ${goalColor}cc)`, borderRadius: 999, transition: "width 0.6s ease", boxShadow: `0 0 8px ${goalColor}66` }} />
          </div>
          <div style={{ marginTop: 6, fontSize: 11, color: "#64748b" }}>
            {goalPct >= 100 ? `🔥 Goal smashed! ${todayDMs - target} extra DMs today · Target: close a client for ${settings.currency}${settings.dealValue}` : `${target - todayDMs} more DMs to hit today's target · Close goal: ${settings.currency}${settings.dealValue} per client`}
          </div>
        </div>
        <div style={{ background: "#0d1526", border: "1px solid #f59e0b44", borderRadius: 14, padding: "16px 24px", textAlign: "center", minWidth: 120 }}>
          <div style={{ fontSize: 32, marginBottom: 2 }}>{streak >= 7 ? "🔥" : streak >= 3 ? "⚡" : "💪"}</div>
          <div style={{ fontSize: 28, fontWeight: 700, color: streak >= 7 ? "#f59e0b" : streak >= 3 ? "#00d4ff" : "#64748b", fontFamily: "'Space Grotesk', sans-serif", lineHeight: 1 }}>{streak}</div>
          <div style={{ fontSize: 11, color: "#64748b", marginTop: 4 }}>Day Streak</div>
          {streak >= 7 && <div style={{ fontSize: 10, color: "#f59e0b", marginTop: 2, fontWeight: 600 }}>ON FIRE 🔥</div>}
        </div>
      </div>

      {/* KPI Cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12, marginBottom: 20 }}>
        {[
          { label: "Total DMs", value: totalDMs, color: "#3b82f6", icon: "📤" },
          { label: "Replies", value: `${totalReplies} (${pct(totalReplies, totalDMs)}%)`, color: "#8b5cf6", icon: "💬" },
          { label: "Interested", value: `${totalInterested} (${pct(totalInterested, totalDMs)}%)`, color: "#f59e0b", icon: "⭐" },
          { label: "Closed", value: totalClosed, color: "#22c55e", icon: "✅" },
          { label: "Revenue", value: `${settings.currency}${totalRevenue.toLocaleString()}`, color: "#00d4ff", icon: "💰" },
          { label: "Hot Leads", value: hotLeads.length, color: "#ef4444", icon: "🔥" },
          { label: "Follow-ups", value: followUps.length, color: "#f59e0b", icon: "⏰" },
          { label: "Close Rate", value: `${pct(totalClosed, totalDMs)}%`, color: "#10b981", icon: "📈" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#0d1526", border: `1px solid ${k.color}22`, borderRadius: 12, padding: "14px 16px", borderTop: `3px solid ${k.color}` }}>
            <div style={{ fontSize: 18, marginBottom: 6 }}>{k.icon}</div>
            <div style={{ fontSize: 20, fontWeight: 700, color: k.color, fontFamily: "'Space Grotesk', sans-serif", lineHeight: 1 }}>{k.value}</div>
            <div style={{ fontSize: 11, color: "#64748b", marginTop: 4 }}>{k.label}</div>
          </div>
        ))}
      </div>

      {/* AI Coach */}
      <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 12, padding: 16, marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <span style={{ fontSize: 16 }}>🤖</span>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 14, color: "#00d4ff" }}>AI Sales Coach</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {coachingMessages.map((m, i) => {
            const cols = { warning: { bg: "#451a03", border: "#f59e0b", text: "#fcd34d" }, danger: { bg: "#7f1d1d", border: "#ef4444", text: "#fca5a5" }, info: { bg: "#0c1e3d", border: "#3b82f6", text: "#93c5fd" }, success: { bg: "#052e16", border: "#22c55e", text: "#86efac" } };
            const c = cols[m.type] || cols.info;
            return <div key={i} style={{ background: c.bg, border: `1px solid ${c.border}44`, borderLeft: `3px solid ${c.border}`, borderRadius: 8, padding: "10px 14px", fontSize: 13, color: c.text }}>{m.msg}</div>;
          })}
        </div>
      </div>

      {/* Today's Summary */}
      {todayLog && (
        <div style={{ background: "#0d1526", border: "1px solid #22c55e44", borderRadius: 12, padding: 16, marginBottom: 20 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: "#22c55e", marginBottom: 10, fontFamily: "'Space Grotesk', sans-serif" }}>📅 TODAY — {today()}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
            {[["DMs Sent", todayLog.dms], ["Replies", todayLog.replies], ["Interested", todayLog.interested], ["Booked", todayLog.booked], ["Closed", todayLog.closed]].map(([l, v]) => (
              <div key={l} style={{ textAlign: "center" }}>
                <div style={{ fontSize: 22, fontWeight: 700, color: "#fff", fontFamily: "'Space Grotesk', sans-serif" }}>{v || 0}</div>
                <div style={{ fontSize: 11, color: "#64748b" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Charts Row */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
        <ChartCard title="DMs Sent Over Time" color="#3b82f6">
          <ResponsiveContainer width="100%" height={200}>
            <AreaChart data={chartData}><defs><linearGradient id="dm" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/><stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f" /><XAxis dataKey="date" tick={{ fill: "#64748b", fontSize: 10 }} /><YAxis tick={{ fill: "#64748b", fontSize: 10 }} /><Tooltip contentStyle={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} /><Area type="monotone" dataKey="DMs" stroke="#3b82f6" fill="url(#dm)" strokeWidth={2} /></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="Rate Trends (%)" color="#00d4ff">
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={chartData}><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f" /><XAxis dataKey="date" tick={{ fill: "#64748b", fontSize: 10 }} /><YAxis tick={{ fill: "#64748b", fontSize: 10 }} /><Tooltip contentStyle={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} /><Legend wrapperStyle={{ color: "#94a3b8", fontSize: 11 }} /><Line type="monotone" dataKey="Reply Rate" stroke="#8b5cf6" strokeWidth={2} dot={false} /><Line type="monotone" dataKey="Interest Rate" stroke="#f59e0b" strokeWidth={2} dot={false} /><Line type="monotone" dataKey="Close Rate" stroke="#22c55e" strokeWidth={2} dot={false} /></LineChart>
          </ResponsiveContainer>
        </ChartCard>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
        <ChartCard title="Revenue Growth" color="#22c55e">
          <ResponsiveContainer width="100%" height={200}>
            <AreaChart data={chartData}><defs><linearGradient id="rev" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#22c55e" stopOpacity={0.3}/><stop offset="95%" stopColor="#22c55e" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f" /><XAxis dataKey="date" tick={{ fill: "#64748b", fontSize: 10 }} /><YAxis tick={{ fill: "#64748b", fontSize: 10 }} /><Tooltip contentStyle={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} formatter={(v) => [`${settings.currency}${v}`, "Revenue"]} /><Area type="monotone" dataKey="Revenue" stroke="#22c55e" fill="url(#rev)" strokeWidth={2} /></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="Niche Performance" color="#f59e0b">
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={nicheData}><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f" /><XAxis dataKey="name" tick={{ fill: "#64748b", fontSize: 10 }} /><YAxis tick={{ fill: "#64748b", fontSize: 10 }} /><Tooltip contentStyle={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 8, color: "#e2e8f0", fontSize: 12 }} /><Bar dataKey="leads" fill="#3b82f6" radius={[4,4,0,0]} name="Total Leads" /><Bar dataKey="closed" fill="#22c55e" radius={[4,4,0,0]} name="Closed" /></BarChart>
          </ResponsiveContainer>
        </ChartCard>
      </div>

      {/* SMS / Email / Reply Rate charts */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 20 }}>
        <ChartCard title="📱 SMS Sent Over Time" color="#a78bfa">
          <ResponsiveContainer width="100%" height={170}>
            <AreaChart data={chartData}><defs><linearGradient id="sms" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#a78bfa" stopOpacity={0.3}/><stop offset="95%" stopColor="#a78bfa" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/><Area type="monotone" dataKey="SMS" stroke="#a78bfa" fill="url(#sms)" strokeWidth={2}/></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="📧 Emails Sent Over Time" color="#f97316">
          <ResponsiveContainer width="100%" height={170}>
            <AreaChart data={chartData}><defs><linearGradient id="email" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#f97316" stopOpacity={0.3}/><stop offset="95%" stopColor="#f97316" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/><Area type="monotone" dataKey="Emails" stroke="#f97316" fill="url(#email)" strokeWidth={2}/></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="💬 Reply Rate % (Daily)" color="#00d4ff">
          <ResponsiveContainer width="100%" height={170}>
            <LineChart data={chartData}><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}} unit="%"/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}} formatter={v=>[v+"%","Reply Rate"]}/><Line type="monotone" dataKey="Reply Rate" stroke="#00d4ff" strokeWidth={2} dot={false}/></LineChart>
          </ResponsiveContainer>
        </ChartCard>
      </div>

      {/* Bottom Row */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {/* Hot Leads */}
        <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 12, padding: 16 }}>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 14, color: "#ef4444", marginBottom: 12 }}>🔥 Hot Leads — Close Now</div>
          {hotLeads.length === 0 ? <p style={{ color: "#64748b", fontSize: 13 }}>No hot leads right now. Keep outreaching!</p> : hotLeads.slice(0, 5).map(l => (
            <div key={l.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #1e3a5f" }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, color: "#fff" }}>{l.name || "Unknown"}</div>
                <div style={{ fontSize: 11, color: "#64748b" }}>{l.businessName} · {l.niche} · Score: {l.leadScore}/10</div>
              </div>
              <span style={{ background: "#7f1d1d", color: "#fca5a5", fontSize: 10, padding: "3px 8px", borderRadius: 10 }}>{l.status}</span>
            </div>
          ))}
        </div>
        {/* Script Performance */}
        <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 12, padding: 16 }}>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 14, color: "#00d4ff", marginBottom: 12 }}>📝 Script Performance</div>
          {scriptPerf.length === 0 ? <p style={{ color: "#64748b", fontSize: 13 }}>No script data yet. Add leads with script tags.</p> : scriptPerf.map((s, i) => (
            <div key={i} style={{ padding: "8px 0", borderBottom: "1px solid #1e3a5f" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 500, color: "#fff" }}>{s.name}</span>
                <span style={{ fontSize: 12, color: "#22c55e" }}>{s.rate}% close rate</span>
              </div>
              <div style={{ fontSize: 11, color: "#64748b" }}>{s.leads} leads · {s.closed} closed</div>
              <div style={{ height: 4, background: "#0a1929", borderRadius: 2, marginTop: 6 }}><div style={{ height: "100%", width: `${Math.min(s.rate, 100)}%`, background: "#00d4ff", borderRadius: 2 }} /></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ChartCard({ title, color, children }) {
  return (
    <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 12, padding: 16 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color, fontFamily: "'Space Grotesk', sans-serif", marginBottom: 12 }}>{title}</div>
      {children}
    </div>
  );
}

/* ─── DAILY LOG ─── */
function DailyLog({ daily, saveDaily, settings, scripts }) {
  const [form, setForm] = useState({ date: today(), dms: "", sms: "", emails: "", replies: "", positiveReplies: "", interested: "", booked: "", closed: "", niche: settings.niches?.[0] || "Cleaning", scriptUsed: "", notes: "" });
  const [editId, setEditId] = useState(null);
  const [view, setView] = useState("add");

  const todayEntry = daily.find(d => d.date === form.date);
  useEffect(() => {
    if (todayEntry && !editId) {
      setForm({ ...todayEntry });
    }
  }, [form.date]);

  const handleSave = () => {
    const entry = { ...form, dms: +form.dms || 0, sms: +form.sms || 0, emails: +form.emails || 0, replies: +form.replies || 0, positiveReplies: +form.positiveReplies || 0, interested: +form.interested || 0, booked: +form.booked || 0, closed: +form.closed || 0, id: editId || form.date };
    const existing = daily.findIndex(d => d.date === form.date);
    let updated;
    if (existing >= 0) { updated = [...daily]; updated[existing] = entry; }
    else { updated = [...daily, entry]; }
    saveDaily(updated);
    setEditId(null);
    setView("history");
  };

  const sortedDaily = [...daily].sort((a, b) => b.date.localeCompare(a.date));

  return (
    <div>
      <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
        {["add", "history"].map(v => <button key={v} onClick={() => setView(v)} style={{ background: view === v ? "#00d4ff" : "#0d1a2e", color: view === v ? "#000" : "#64748b", border: "1px solid " + (view === v ? "#00d4ff" : "#1e3a5f"), borderRadius: 8, padding: "8px 18px", fontSize: 13, fontWeight: 600 }}>{v === "add" ? "➕ Log Today" : "📋 History"}</button>)}
      </div>

      {view === "add" && (
        <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 16, padding: 24, maxWidth: 760 }}>
          {/* How it works banner */}
          <div style={{ background: "#0a1929", border: "1px solid #00d4ff33", borderRadius: 10, padding: "10px 14px", marginBottom: 18, display: "flex", gap: 12, alignItems: "flex-start" }}>
            <span style={{ fontSize: 16 }}>📊</span>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: "#00d4ff", marginBottom: 3 }}>How graphs are powered</div>
              <div style={{ fontSize: 11, color: "#64748b", lineHeight: 1.6 }}>
                <b style={{ color: "#3b82f6" }}>DMs</b> → Instagram/Facebook direct messages &nbsp;·&nbsp;
                <b style={{ color: "#a78bfa" }}>SMS</b> → text messages sent &nbsp;·&nbsp;
                <b style={{ color: "#f97316" }}>Emails</b> → emails sent to leads &nbsp;·&nbsp;
                All three feed the 📱SMS, 📧Email and 💬Reply Rate graphs on Dashboard. Log them here daily.
              </div>
            </div>
          </div>

          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff", marginBottom: 20 }}>Daily Outreach Log</h2>
          {todayEntry && !editId && <div style={{ background: "#052e16", border: "1px solid #22c55e44", borderRadius: 8, padding: 10, marginBottom: 16, fontSize: 12, color: "#86efac" }}>✓ Entry exists for {form.date} — saving will overwrite it.</div>}

          {/* Section: Basic Info */}
          <div style={{ fontSize: 11, color: "#00d4ff", fontWeight: 700, letterSpacing: "0.5px", textTransform: "uppercase", marginBottom: 10 }}>📅 Date & Niche</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
            <Field label="Date"><input type="date" value={form.date} onChange={e => setForm(p => ({ ...p, date: e.target.value }))} /></Field>
            <Field label="Niche"><select value={form.niche} onChange={e => setForm(p => ({ ...p, niche: e.target.value }))}>{(settings.niches || []).map(n => <option key={n}>{n}</option>)}</select></Field>
          </div>

          {/* Section: Outreach Channels */}
          <div style={{ fontSize: 11, color: "#a78bfa", fontWeight: 700, letterSpacing: "0.5px", textTransform: "uppercase", marginBottom: 10 }}>📤 Outreach Channels (feeds graphs)</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 4 }}>
            <Field label="💬 DMs Sent (Instagram/FB)"><input type="number" min="0" placeholder="e.g. 45" value={form.dms} onChange={e => setForm(p => ({ ...p, dms: e.target.value }))} /></Field>
            <Field label="📱 SMS Sent (text messages)"><input type="number" min="0" placeholder="e.g. 20" value={form.sms} onChange={e => setForm(p => ({ ...p, sms: e.target.value }))} /></Field>
            <Field label="📧 Emails Sent"><input type="number" min="0" placeholder="e.g. 15" value={form.emails} onChange={e => setForm(p => ({ ...p, emails: e.target.value }))} /></Field>
          </div>
          <div style={{ fontSize: 11, color: "#475569", marginBottom: 20, paddingLeft: 2 }}>↑ These 3 numbers power the SMS, Email and Reply Rate graphs on your Dashboard</div>

          {/* Section: Results */}
          <div style={{ fontSize: 11, color: "#22c55e", fontWeight: 700, letterSpacing: "0.5px", textTransform: "uppercase", marginBottom: 10 }}>📈 Results (from all channels combined)</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
            <Field label="Replies (total across DM+SMS+Email)"><input type="number" min="0" placeholder="e.g. 12" value={form.replies} onChange={e => setForm(p => ({ ...p, replies: e.target.value }))} /></Field>
            <Field label="Positive Replies"><input type="number" min="0" placeholder="e.g. 5" value={form.positiveReplies} onChange={e => setForm(p => ({ ...p, positiveReplies: e.target.value }))} /></Field>
            <Field label="Interested"><input type="number" min="0" placeholder="e.g. 3" value={form.interested} onChange={e => setForm(p => ({ ...p, interested: e.target.value }))} /></Field>
            <Field label="Booked (calls)"><input type="number" min="0" placeholder="e.g. 2" value={form.booked} onChange={e => setForm(p => ({ ...p, booked: e.target.value }))} /></Field>
            <Field label="Closed (deals)"><input type="number" min="0" placeholder="e.g. 1" value={form.closed} onChange={e => setForm(p => ({ ...p, closed: e.target.value }))} /></Field>
            <Field label="Script Used"><select value={form.scriptUsed} onChange={e => setForm(p => ({ ...p, scriptUsed: e.target.value }))}><option value="">— Select Script —</option>{scripts.map(s => <option key={s.id}>{s.name}</option>)}</select></Field>
          </div>
          <Field label="Notes"><input type="text" placeholder="Any notes about today..." value={form.notes} onChange={e => setForm(p => ({ ...p, notes: e.target.value }))} /></Field>

          {/* Live stats preview */}
          {(+form.dms > 0 || +form.sms > 0 || +form.emails > 0) && (() => {
            const totalOutreach = (+form.dms||0) + (+form.sms||0) + (+form.emails||0);
            return (
              <div style={{ background: "#0a1929", borderRadius: 10, padding: 14, marginTop: 16 }}>
                <div style={{ fontSize: 11, color: "#64748b", fontWeight: 600, marginBottom: 10, textTransform: "uppercase", letterSpacing: "0.5px" }}>📊 Today's Live Stats</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 10 }}>
                  {[[`DMs: ${form.dms||0}`, "#3b82f6"], [`SMS: ${form.sms||0}`, "#a78bfa"], [`Emails: ${form.emails||0}`, "#f97316"]].map(([l,c]) => (
                    <div key={l} style={{ textAlign:"center", background:c+"11", borderRadius:8, padding:"8px 4px" }}>
                      <div style={{ fontSize:15, fontWeight:700, color:c }}>{l}</div>
                    </div>
                  ))}
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
                  {[["Reply Rate", pct(form.replies, totalOutreach) + "%", "#8b5cf6"], ["Interest Rate", pct(form.interested, totalOutreach) + "%", "#f59e0b"], ["Booking Rate", pct(form.booked, totalOutreach) + "%", "#10b981"], ["Close Rate", pct(form.closed, totalOutreach) + "%", "#22c55e"]].map(([l, v, c]) => (
                    <div key={l} style={{ textAlign: "center" }}><div style={{ fontSize: 18, fontWeight: 700, color: c, fontFamily: "'Space Grotesk', sans-serif" }}>{v}</div><div style={{ fontSize: 10, color: "#64748b" }}>{l}</div></div>
                  ))}
                </div>
              </div>
            );
          })()}
          <button onClick={handleSave} style={{ marginTop: 20, background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: "12px 28px", fontSize: 14, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif" }}>
            Save Log Entry
          </button>
        </div>
      )}

      {view === "history" && (
        <div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff", marginBottom: 16 }}>All Daily Logs ({daily.length} days)</h2>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
              <thead><tr style={{ borderBottom: "1px solid #1e3a5f" }}>
                {["Date","Niche","💬 DMs","📱 SMS","📧 Email","Replies","Reply%","Interested","Interest%","Booked","Closed","Close%","Script","Actions"].map(h => (
                  <th key={h} style={{ padding: "8px 10px", textAlign: "left", color: "#64748b", fontWeight: 500, whiteSpace: "nowrap" }}>{h}</th>
                ))}
              </tr></thead>
              <tbody>{sortedDaily.map((d, i) => (
                <tr key={d.date} style={{ borderBottom: "1px solid #1e3a5f11", background: i % 2 === 0 ? "#0d152611" : "transparent" }}>
                  <td style={{ padding: "8px 10px", color: d.date === today() ? "#00d4ff" : "#e2e8f0", fontWeight: d.date === today() ? 600 : 400, whiteSpace:"nowrap" }}>{d.date}</td>
                  <td style={{ padding: "8px 10px", color: "#94a3b8" }}>{d.niche}</td>
                  <td style={{ padding: "8px 10px", color: "#3b82f6", fontWeight: 600 }}>{d.dms || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#a78bfa", fontWeight: 600 }}>{d.sms || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#f97316", fontWeight: 600 }}>{d.emails || 0}</td>
                  <td style={{ padding: "8px 10px" }}>{d.replies || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#8b5cf6" }}>{pct(d.replies, (d.dms||0)+(d.sms||0)+(d.emails||0))}%</td>
                  <td style={{ padding: "8px 10px" }}>{d.interested || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#f59e0b" }}>{pct(d.interested, (d.dms||0)+(d.sms||0)+(d.emails||0))}%</td>
                  <td style={{ padding: "8px 10px" }}>{d.booked || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#22c55e", fontWeight: 600 }}>{d.closed || 0}</td>
                  <td style={{ padding: "8px 10px", color: "#22c55e" }}>{pct(d.closed, (d.dms||0)+(d.sms||0)+(d.emails||0))}%</td>
                  <td style={{ padding: "8px 10px", color: "#64748b", fontSize: 11 }}>{d.scriptUsed || "—"}</td>
                  <td style={{ padding: "8px 10px" }}><button onClick={() => { setForm({ ...d }); setEditId(d.date); setView("add"); }} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 6, padding: "4px 10px", fontSize: 11 }}>Edit</button></td>
                </tr>
              ))}</tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── LEAD CRM ─── */
function LeadCRM({ leads, saveLeads, settings, scripts }) {
  const [showForm, setShowForm] = useState(false);
  const [editLead, setEditLead] = useState(null);
  const [filterStatus, setFilterStatus] = useState("All");
  const [filterTemp, setFilterTemp] = useState("All");
  const [filterNiche, setFilterNiche] = useState("All");
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState(new Set());
  const [bulkStatus, setBulkStatus] = useState("");
  const blank = { name: "", businessName: "", niche: settings.niches?.[0] || "Cleaning", city: "", platform: "Instagram", dateContacted: today(), status: "New", leadScore: 5, temp: "Cold", lastMessage: "", nextFollowUp: "", notes: "", scriptUsed: "", facebookLink: "", profileNo: "", phoneNumber: "", email: "", service: settings.services?.[0] || "Ads", fee: settings.dealValue || 700 };

  const openAdd = () => { setEditLead({ ...blank, id: genId() }); setShowForm(true); };
  const openEdit = (l) => { setEditLead({ ...l }); setShowForm(true); };
  const handleSave = () => {
    const updated = editLead.id && leads.find(l => l.id === editLead.id) ? leads.map(l => l.id === editLead.id ? editLead : l) : [...leads, editLead];
    saveLeads(updated);
    setShowForm(false);
  };
  const handleDelete = (id) => { if (confirm("Delete this lead?")) saveLeads(leads.filter(l => l.id !== id)); };

  const filtered = leads.filter(l =>
    (filterStatus === "All" || l.status === filterStatus) &&
    (filterTemp === "All" || l.temp === filterTemp) &&
    (filterNiche === "All" || l.niche === filterNiche) &&
    (search === "" || l.name?.toLowerCase().includes(search.toLowerCase()) || l.businessName?.toLowerCase().includes(search.toLowerCase()))
  ).sort((a, b) => (b.leadScore || 0) - (a.leadScore || 0));

  const toggleSelect = (id) => setSelected(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const toggleAll = () => setSelected(selected.size === filtered.length ? new Set() : new Set(filtered.map(l => l.id)));
  const applyBulkStatus = () => {
    if (!bulkStatus) return;
    saveLeads(leads.map(l => selected.has(l.id) ? { ...l, status: bulkStatus } : l));
    setSelected(new Set()); setBulkStatus("");
  };
  const bulkDelete = () => {
    if (!confirm(`Delete ${selected.size} leads?`)) return;
    saveLeads(leads.filter(l => !selected.has(l.id)));
    setSelected(new Set());
  };
  const exportCSV = () => {
    const headers = ["Name","Business","Niche","City","Platform","Status","Temp","Score","Script","Date Contacted","Next Follow-Up","Phone","Last Message","Notes","FB Link"];
    const rows = filtered.map(l => [l.name,l.businessName,l.niche,l.city,l.platform,l.status,l.temp,l.leadScore,l.scriptUsed,l.dateContacted,l.nextFollowUp,l.phoneNumber,l.lastMessage,l.notes,l.facebookLink].map(v => `"${(v||"").toString().replace(/"/g,'""')}"`));
    const csv = [headers.join(","), ...rows.map(r => r.join(","))].join("\n");
    const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([csv],{type:"text/csv"})); a.download = `Webbotix-Leads-${today()}.csv`; a.click();
  };

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff" }}>Lead CRM — {filtered.length} leads</h2>
        <div style={{ display: "flex", gap: 8 }}>
          <button onClick={exportCSV} style={{ background: "#052e16", color: "#86efac", border: "1px solid #22c55e44", borderRadius: 10, padding: "10px 16px", fontSize: 12, fontWeight: 600 }}>📥 Export CSV</button>
          <button onClick={openAdd} style={{ background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: "10px 20px", fontSize: 13, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif" }}>+ Add Lead</button>
        </div>
      </div>
      {/* Filters */}
      <div style={{ display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap" }}>
        <input type="text" placeholder="🔍 Search name or business..." value={search} onChange={e => setSearch(e.target.value)} style={{ width: 220 }} />
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={{ width: 140 }}><option value="All">All Status</option>{Object.keys(STATUS_COLORS).map(s => <option key={s}>{s}</option>)}</select>
        <select value={filterTemp} onChange={e => setFilterTemp(e.target.value)} style={{ width: 120 }}><option value="All">All Temp</option>{["Cold", "Warm", "Hot"].map(t => <option key={t}>{t}</option>)}</select>
        <select value={filterNiche} onChange={e => setFilterNiche(e.target.value)} style={{ width: 140 }}><option value="All">All Niches</option>{(settings.niches || []).map(n => <option key={n}>{n}</option>)}</select>
      </div>
      {/* Status badges summary */}
      <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
        {Object.entries(STATUS_COLORS).map(([s, c]) => {
          const cnt = leads.filter(l => l.status === s).length;
          return cnt > 0 ? <span key={s} style={{ background: c + "22", color: c, border: `1px solid ${c}44`, borderRadius: 20, padding: "3px 10px", fontSize: 11, fontWeight: 500 }}>{s}: {cnt}</span> : null;
        })}
      </div>
      {/* Bulk Action Bar */}
      {selected.size > 0 && (
        <div style={{ background: "#0c1e3d", border: "1px solid #3b82f644", borderRadius: 12, padding: "10px 16px", marginBottom: 14, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <span style={{ color: "#93c5fd", fontWeight: 600, fontSize: 13 }}>☑️ {selected.size} selected</span>
          <select value={bulkStatus} onChange={e => setBulkStatus(e.target.value)} style={{ width: 150, padding: "6px 10px !important" }}>
            <option value="">Change status…</option>
            {Object.keys(STATUS_COLORS).map(s => <option key={s}>{s}</option>)}
          </select>
          <button onClick={applyBulkStatus} disabled={!bulkStatus} style={{ background: "#1e3a5f", color: "#93c5fd", border: "1px solid #3b82f644", borderRadius: 8, padding: "6px 14px", fontSize: 12, fontWeight: 600, opacity: bulkStatus ? 1 : 0.5 }}>Apply</button>
          <button onClick={bulkDelete} style={{ background: "#7f1d1d", color: "#fca5a5", border: "none", borderRadius: 8, padding: "6px 14px", fontSize: 12, fontWeight: 600 }}>🗑 Delete All</button>
          <button onClick={() => setSelected(new Set())} style={{ background: "none", color: "#64748b", border: "none", fontSize: 12 }}>Clear</button>
        </div>
      )}
      {/* Table */}
      <div style={{ overflowX: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
          <thead><tr style={{ borderBottom: "1px solid #1e3a5f" }}>
            <th style={{ padding: "8px 10px", textAlign: "left", color: "#64748b", fontWeight: 500 }}>
              <input type="checkbox" checked={selected.size === filtered.length && filtered.length > 0} onChange={toggleAll} style={{ width: "auto", cursor: "pointer" }} />
            </th>
            {["Score", "Name", "Business", "Niche", "Service", "Fee", "Platform", "Status", "Temp", "Follow-Up", "Script", "Date", "Actions"].map(h => <th key={h} style={{ padding: "8px 10px", textAlign: "left", color: "#64748b", fontWeight: 500 }}>{h}</th>)}
          </tr></thead>
          <tbody>{filtered.length === 0 ? <tr><td colSpan={14} style={{ padding: 30, textAlign: "center", color: "#64748b" }}>No leads match your filters. Add your first lead!</td></tr> : filtered.map((l, i) => (
            <tr key={l.id} style={{ borderBottom: "1px solid #1e3a5f11", background: selected.has(l.id) ? "#0c1e3d" : l.temp === "Hot" ? "#7f1d1d11" : i % 2 === 0 ? "#0d152611" : "transparent" }}>
              <td style={{ padding: "8px 10px" }}><input type="checkbox" checked={selected.has(l.id)} onChange={() => toggleSelect(l.id)} style={{ width: "auto", cursor: "pointer" }} /></td>
              <td style={{ padding: "8px 10px" }}><span style={{ background: l.leadScore >= 8 ? "#22c55e22" : l.leadScore >= 5 ? "#f59e0b22" : "#64748b22", color: l.leadScore >= 8 ? "#22c55e" : l.leadScore >= 5 ? "#f59e0b" : "#64748b", borderRadius: 6, padding: "2px 8px", fontWeight: 700, fontSize: 12 }}>{l.leadScore}/10</span></td>
              <td style={{ padding: "8px 10px", color: "#fff", fontWeight: 500 }}>{l.name || "—"}</td>
              <td style={{ padding: "8px 10px", color: "#94a3b8" }}>{l.businessName || "—"}</td>
              <td style={{ padding: "8px 10px", color: "#64748b" }}>{l.niche}</td>
              <td style={{ padding: "8px 10px" }}>{l.service ? <span style={{ background:"#0c1e3d", color:"#00d4ff", border:"1px solid #00d4ff33", borderRadius:8, padding:"2px 8px", fontSize:10, fontWeight:600 }}>{l.service}</span> : <span style={{color:"#475569"}}>—</span>}</td>
              <td style={{ padding: "8px 10px", color: l.fee ? "#22c55e" : "#64748b", fontWeight: l.fee ? 700 : 400, fontSize:12 }}>{l.fee ? `${settings.currency||"$"}${Number(l.fee).toLocaleString()}` : "—"}</td>
              <td style={{ padding: "8px 10px", color: "#64748b" }}>{l.platform}</td>
              <td style={{ padding: "8px 10px" }}><span style={{ background: STATUS_COLORS[l.status] + "22", color: STATUS_COLORS[l.status], border: `1px solid ${STATUS_COLORS[l.status]}44`, borderRadius: 10, padding: "2px 8px", fontSize: 10, fontWeight: 600 }}>{l.status}</span></td>
              <td style={{ padding: "8px 10px" }}><span style={{ color: TEMP_COLORS[l.temp], fontWeight: 600, fontSize: 11 }}>{l.temp === "Hot" ? "🔥" : l.temp === "Warm" ? "⭐" : "❄️"} {l.temp}</span></td>
              <td style={{ padding: "8px 10px", color: l.nextFollowUp <= today() ? "#ef4444" : "#64748b", fontSize: 11 }}>{l.nextFollowUp || "—"}</td>
              <td style={{ padding: "8px 10px", color: "#64748b", fontSize: 11 }}>{l.scriptUsed || "—"}</td>
              <td style={{ padding: "8px 10px", color: "#64748b", fontSize: 11 }}>{l.dateContacted}</td>
              <td style={{ padding: "8px 10px" }}>
                <div style={{ display: "flex", gap: 4 }}>
                  <button onClick={() => openEdit(l)} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 5, padding: "4px 8px", fontSize: 10 }}>Edit</button>
                  {l.email && <a href={`mailto:${l.email}`} style={{ background: "#1a2e1a", color: "#f97316", border: "none", borderRadius: 5, padding: "4px 8px", fontSize: 10, textDecoration: "none" }}>📧</a>}
                  {l.facebookLink && <a href={l.facebookLink} target="_blank" rel="noreferrer" style={{ background: "#1a3a6e", color: "#60a5fa", border: "none", borderRadius: 5, padding: "4px 8px", fontSize: 10, textDecoration: "none", display: "flex", alignItems: "center" }}>FB</a>}
                  <button onClick={() => handleDelete(l.id)} style={{ background: "#7f1d1d", color: "#fca5a5", border: "none", borderRadius: 5, padding: "4px 8px", fontSize: 10 }}>Del</button>
                </div>
              </td>
            </tr>
          ))}</tbody>
        </table>
      </div>
      {/* Modal */}
      {showForm && editLead && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.8)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
          <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 20, padding: 28, width: "100%", maxWidth: 600, maxHeight: "90vh", overflowY: "auto" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: "#fff", fontSize: 16 }}>Lead Details</h3>
              <button onClick={() => setShowForm(false)} style={{ background: "none", border: "none", color: "#64748b", fontSize: 20 }}>✕</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Field label="Service"><select value={editLead.service||""} onChange={e => setEditLead(p => ({ ...p, service: e.target.value }))}><option value="">— Select Service —</option>{(settings.services||["Ads","Website"]).map(s => <option key={s}>{s}</option>)}</select></Field>
              <Field label={`Fee / Value (${settings.currency||"$"})`}><input type="number" value={editLead.fee||""} onChange={e => setEditLead(p => ({ ...p, fee: +e.target.value }))} placeholder={settings.dealValue||700} /></Field>
              <Field label="Name"><input value={editLead.name} onChange={e => setEditLead(p => ({ ...p, name: e.target.value }))} placeholder="John Smith" /></Field>
              <Field label="Business Name"><input value={editLead.businessName} onChange={e => setEditLead(p => ({ ...p, businessName: e.target.value }))} placeholder="Smith Cleaning Co." /></Field>
              <Field label="Niche"><select value={editLead.niche} onChange={e => setEditLead(p => ({ ...p, niche: e.target.value }))}>{(settings.niches || []).map(n => <option key={n}>{n}</option>)}</select></Field>
              <Field label="City"><input value={editLead.city} onChange={e => setEditLead(p => ({ ...p, city: e.target.value }))} placeholder="New York" /></Field>
              <Field label="Platform"><select value={editLead.platform} onChange={e => setEditLead(p => ({ ...p, platform: e.target.value }))}>{["Instagram", "Facebook", "LinkedIn", "Twitter/X", "TikTok", "Other"].map(p => <option key={p}>{p}</option>)}</select></Field>
              <Field label="Status"><select value={editLead.status} onChange={e => setEditLead(p => ({ ...p, status: e.target.value }))}>{Object.keys(STATUS_COLORS).map(s => <option key={s}>{s}</option>)}</select></Field>
              <Field label="Lead Temperature"><select value={editLead.temp} onChange={e => setEditLead(p => ({ ...p, temp: e.target.value }))}>{["Cold", "Warm", "Hot"].map(t => <option key={t}>{t}</option>)}</select></Field>
              <Field label="Script Used"><select value={editLead.scriptUsed} onChange={e => setEditLead(p => ({ ...p, scriptUsed: e.target.value }))}><option value="">— None —</option>{scripts.map(s => <option key={s.id}>{s.name}</option>)}</select></Field>
              <Field label="Date Contacted"><input type="date" value={editLead.dateContacted} onChange={e => setEditLead(p => ({ ...p, dateContacted: e.target.value }))} /></Field>
              <Field label="Next Follow-Up Date"><input type="date" value={editLead.nextFollowUp} onChange={e => setEditLead(p => ({ ...p, nextFollowUp: e.target.value }))} /></Field>
              <Field label="Last Message Sent"><input value={editLead.lastMessage} onChange={e => setEditLead(p => ({ ...p, lastMessage: e.target.value }))} placeholder="What you last sent..." /></Field>
              <Field label="Facebook Profile Link"><input value={editLead.facebookLink || ""} onChange={e => setEditLead(p => ({ ...p, facebookLink: e.target.value }))} placeholder="https://facebook.com/..." /></Field>
              <Field label="Profile No."><input value={editLead.profileNo || ""} onChange={e => setEditLead(p => ({ ...p, profileNo: e.target.value }))} placeholder="e.g. FB12345 / @handle" /></Field>
              <Field label="Phone Number"><input value={editLead.phoneNumber || ""} onChange={e => setEditLead(p => ({ ...p, phoneNumber: e.target.value }))} placeholder="e.g. +1 234 567 8900" /></Field>
              <Field label="📧 Email Address"><input type="email" value={editLead.email || ""} onChange={e => setEditLead(p => ({ ...p, email: e.target.value }))} placeholder="john@smithcleaning.com" /></Field>
            </div>

            {/* Lead Score Quality Widget */}
            {(() => {
              const score = editLead.leadScore || 5;
              const quality = score >= 9 ? { label: "🔥 On Fire", desc: "Close TODAY — highest priority", color: "#ef4444", bg: "#7f1d1d", bar: "#ef4444" }
                : score >= 7 ? { label: "⭐ Hot Lead", desc: "Strong interest — follow up immediately", color: "#f59e0b", bg: "#451a03", bar: "#f59e0b" }
                : score >= 5 ? { label: "💬 Warm Lead", desc: "Showing interest — nurture and follow up", color: "#3b82f6", bg: "#0c1e3d", bar: "#3b82f6" }
                : score >= 3 ? { label: "❄️ Cold Lead", desc: "Early stage — keep outreaching", color: "#64748b", bg: "#0d1a2e", bar: "#64748b" }
                : { label: "⬇️ Low Quality", desc: "Low signal — de-prioritise for now", color: "#475569", bg: "#0a0f1e", bar: "#475569" };
              return (
                <div style={{ background: quality.bg, border: `1px solid ${quality.color}44`, borderRadius: 12, padding: 14, marginTop: 16 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: quality.color }}>{quality.label}</div>
                      <div style={{ fontSize: 11, color: quality.color, opacity: 0.8, marginTop: 2 }}>{quality.desc}</div>
                    </div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 28, fontWeight: 700, color: quality.color }}>{score}<span style={{ fontSize: 14, opacity: 0.6 }}>/10</span></div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ fontSize: 10, color: "#64748b", width: 14 }}>1</span>
                    <div style={{ flex: 1, position: "relative" }}>
                      <input type="range" min="1" max="10" step="1" value={score}
                        onChange={e => setEditLead(p => ({ ...p, leadScore: +e.target.value }))}
                        style={{ width: "100%", padding: 0, background: "none", border: "none", cursor: "pointer", accentColor: quality.bar }} />
                      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                        {[1,2,3,4,5,6,7,8,9,10].map(n => (
                          <div key={n} style={{ width: 6, height: 6, borderRadius: "50%", background: n <= score ? quality.bar : "#1e3a5f", transition: "background 0.2s" }} />
                        ))}
                      </div>
                    </div>
                    <span style={{ fontSize: 10, color: "#64748b", width: 14, textAlign: "right" }}>10</span>
                  </div>
                  <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
                    {[["1–2", "Low Quality", "#475569"], ["3–4", "Cold", "#64748b"], ["5–6", "Warm", "#3b82f6"], ["7–8", "Hot", "#f59e0b"], ["9–10", "On Fire 🔥", "#ef4444"]].map(([range, lbl, c]) => (
                      <span key={range} style={{ fontSize: 10, color: c, background: c + "15", border: `1px solid ${c}33`, borderRadius: 10, padding: "2px 8px" }}>{range} · {lbl}</span>
                    ))}
                  </div>
                </div>
              );
            })()}
            <Field label="Notes" style={{ marginTop: 14 }}><textarea value={editLead.notes} onChange={e => setEditLead(p => ({ ...p, notes: e.target.value }))} rows={3} placeholder="Pain points, budget signals, anything useful..." style={{ resize: "vertical" }} /></Field>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              <button onClick={handleSave} style={{ flex: 1, background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: "12px", fontSize: 14, fontWeight: 700 }}>Save Lead</button>
              <button onClick={() => setShowForm(false)} style={{ background: "#1e3a5f", color: "#94a3b8", border: "none", borderRadius: 10, padding: "12px 20px", fontSize: 13 }}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── SCRIPTS ─── */
function ScriptsTab({ scripts, saveScripts, daily, leads }) {
  const [editScript, setEditScript] = useState(null);
  const [showForm, setShowForm] = useState(false);
  const [expandedStages, setExpandedStages] = useState({});
  const [sopOpen, setSopOpen] = useState({});

  const toggleStage = (scriptId, idx) => {
    setExpandedStages(p => ({ ...p, [`${scriptId}-${idx}`]: !p[`${scriptId}-${idx}`] }));
  };
  const toggleSop = (scriptId) => setSopOpen(p => ({ ...p, [scriptId]: !p[scriptId] }));

  const scriptStats = scripts.map(sc => {
    const scLeads = leads.filter(l => l.scriptUsed === sc.name);
    const replied = scLeads.filter(l => ["Replied", "Interested", "Booked", "Closed"].includes(l.status)).length;
    const interested = scLeads.filter(l => ["Interested", "Booked", "Closed"].includes(l.status)).length;
    const closed = scLeads.filter(l => l.status === "Closed").length;
    return { ...sc, totalLeads: scLeads.length, replied, interested, closed, replyRate: scLeads.length > 0 ? pct(replied, scLeads.length) : "0.0", closeRate: scLeads.length > 0 ? pct(closed, scLeads.length) : "0.0" };
  });

  const best = scriptStats.reduce((b, s) => (!b || parseFloat(s.closeRate) > parseFloat(b.closeRate)) ? s : b, null);

  const getNextScriptName = () => {
    const idx = scripts.length;
    if (idx < 26) return `Script ${String.fromCharCode(65 + idx)}`;
    return `Script ${idx + 1}`;
  };
  const addScript = () => { setEditScript({ id: genId(), name: getNextScriptName(), content: "", active: true, stages: [] }); setShowForm(true); };
  const duplicateScript = (sc) => {
    const copy = { ...sc, id: genId(), name: `${sc.name} (Copy)`, stages: sc.stages ? sc.stages.map(s => ({ ...s })) : [] };
    setEditScript(copy);
    setShowForm(true);
  };
  const saveScript = () => {
    const exists = scripts.find(s => s.id === editScript.id);
    saveScripts(exists ? scripts.map(s => s.id === editScript.id ? editScript : s) : [...scripts, editScript]);
    setShowForm(false);
  };

  const stageColors = ["#3b82f6","#8b5cf6","#f59e0b","#ef4444","#10b981","#00d4ff","#22c55e","#f97316"];

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff" }}>Script Performance Tracker</h2>
          <span style={{ background: "#0c1e3d", color: "#00d4ff", border: "1px solid #00d4ff44", borderRadius: 20, padding: "3px 12px", fontSize: 12, fontWeight: 600 }}>{scripts.length} script{scripts.length !== 1 ? "s" : ""}</span>
        </div>
        <button onClick={addScript} style={{ background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: "10px 22px", fontSize: 14, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif" }}>+ New Script</button>
      </div>

      {/* Big Add Card */}
      <div onClick={addScript} style={{ background: "#0d1526", border: "2px dashed #1e3a5f", borderRadius: 16, padding: "18px 24px", marginBottom: 20, display: "flex", alignItems: "center", gap: 16, cursor: "pointer" }}
        onMouseEnter={e => { e.currentTarget.style.borderColor = "#00d4ff"; e.currentTarget.style.background = "#0d1e3a"; }}
        onMouseLeave={e => { e.currentTarget.style.borderColor = "#1e3a5f"; e.currentTarget.style.background = "#0d1526"; }}>
        <div style={{ width: 44, height: 44, borderRadius: "50%", background: "linear-gradient(135deg, #0066ff22, #00d4ff22)", border: "2px dashed #00d4ff66", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, color: "#00d4ff", flexShrink: 0 }}>+</div>
        <div>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 15, color: "#00d4ff" }}>Create a New Script</div>
          <div style={{ fontSize: 12, color: "#64748b", marginTop: 2 }}>Add unlimited scripts — name it, write your opener, and build out stages step by step.</div>
        </div>
        <div style={{ marginLeft: "auto", color: "#00d4ff", fontSize: 20, opacity: 0.5 }}>→</div>
      </div>
      {best && best.totalLeads > 0 && (
        <div style={{ background: "#052e16", border: "1px solid #22c55e44", borderRadius: 12, padding: 14, marginBottom: 20, fontSize: 13, color: "#86efac" }}>
          🏆 <strong>{best.name}</strong> is your best performing script with {best.closeRate}% close rate. Double down on it!
        </div>
      )}
      <div style={{ display: "grid", gap: 20 }}>
        {scriptStats.map(sc => (
          <div key={sc.id} style={{ background: "#0d1526", border: `1px solid ${sc.id === best?.id && sc.totalLeads > 0 ? "#22c55e44" : "#1e3a5f"}`, borderRadius: 16, padding: 20 }}>
            {/* Header */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: "#fff" }}>{sc.name}</span>
                {sc.id === best?.id && sc.totalLeads > 0 && <span style={{ background: "#052e16", color: "#22c55e", border: "1px solid #22c55e44", borderRadius: 20, fontSize: 10, padding: "2px 8px", fontWeight: 600 }}>BEST</span>}
                {!sc.active && <span style={{ background: "#1e3a5f", color: "#64748b", borderRadius: 20, fontSize: 10, padding: "2px 8px" }}>INACTIVE</span>}
                {sc.stages?.length > 0 && <span style={{ background: "#0c1e3d", color: "#3b82f6", border: "1px solid #3b82f644", borderRadius: 20, fontSize: 10, padding: "2px 8px" }}>{sc.stages.length} stages</span>}
              </div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <button onClick={() => { setEditScript({ ...sc }); setShowForm(true); }} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 8, padding: "6px 14px", fontSize: 12 }}>Edit</button>
                <button onClick={() => duplicateScript(sc)} style={{ background: "#0c1e3d", color: "#60a5fa", border: "1px solid #3b82f644", borderRadius: 8, padding: "6px 14px", fontSize: 12 }}>⧉ Duplicate</button>
                <button onClick={() => saveScripts(scripts.map(s => s.id === sc.id ? { ...s, active: !s.active } : s))} style={{ background: sc.active ? "#7f1d1d" : "#052e16", color: sc.active ? "#fca5a5" : "#86efac", border: "none", borderRadius: 8, padding: "6px 14px", fontSize: 12 }}>{sc.active ? "Deactivate" : "Activate"}</button>
                <button onClick={() => { if (confirm("Delete script?")) saveScripts(scripts.filter(s => s.id !== sc.id)); }} style={{ background: "#1e1e1e", color: "#64748b", border: "none", borderRadius: 8, padding: "6px 14px", fontSize: 12 }}>Delete</button>
              </div>
            </div>

            {/* Opener preview */}
            <div style={{ background: "#0a1929", borderRadius: 10, padding: 14, marginBottom: 14, fontSize: 13, color: "#94a3b8", lineHeight: 1.6, fontStyle: "italic", borderLeft: "3px solid #00d4ff" }}>
              <div style={{ fontSize: 10, color: "#00d4ff", fontWeight: 600, fontStyle: "normal", marginBottom: 6, letterSpacing: "0.5px" }}>OPENER</div>
              "{sc.content || "No opener set yet."}"
            </div>

            {/* Performance Stats */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10, marginBottom: 16 }}>
              {[["Leads Used", sc.totalLeads, "#3b82f6"], ["Replied", sc.replied, "#8b5cf6"], ["Interested", sc.interested, "#f59e0b"], ["Closed", sc.closed, "#22c55e"], ["Close Rate", sc.closeRate + "%", "#00d4ff"]].map(([l, v, c]) => (
                <div key={l} style={{ textAlign: "center", background: "#0a1929", borderRadius: 8, padding: 10 }}>
                  <div style={{ fontSize: 20, fontWeight: 700, color: c, fontFamily: "'Space Grotesk', sans-serif" }}>{v}</div>
                  <div style={{ fontSize: 10, color: "#64748b", marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>

            {/* Full SOP Toggle */}
            {sc.stages?.length > 0 && (
              <div>
                <button onClick={() => toggleSop(sc.id)} style={{ width: "100%", background: sopOpen[sc.id] ? "#0c1e3d" : "#0a1929", border: `1px solid ${sopOpen[sc.id] ? "#3b82f6" : "#1e3a5f"}`, borderRadius: 10, padding: "10px 16px", color: sopOpen[sc.id] ? "#93c5fd" : "#64748b", fontSize: 13, fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center", transition: "all 0.2s" }}>
                  <span>📋 View Full SOP — {sc.stages.length} Stages</span>
                  <span style={{ fontSize: 16 }}>{sopOpen[sc.id] ? "▲" : "▼"}</span>
                </button>

                {sopOpen[sc.id] && (
                  <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }}>
                    {sc.stages.map((stage, idx) => {
                      const color = stageColors[idx % stageColors.length];
                      const isOpen = expandedStages[`${sc.id}-${idx}`];
                      return (
                        <div key={idx} style={{ border: `1px solid ${color}33`, borderRadius: 10, overflow: "hidden" }}>
                          <button onClick={() => toggleStage(sc.id, idx)} style={{ width: "100%", background: isOpen ? `${color}11` : "#0a1929", border: "none", padding: "11px 16px", color: "#fff", fontSize: 13, fontWeight: 600, display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer" }}>
                            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                              <span style={{ width: 22, height: 22, borderRadius: "50%", background: color, color: "#000", fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>{idx + 1}</span>
                              <span style={{ color: isOpen ? color : "#e2e8f0" }}>{stage.title}</span>
                            </span>
                            <span style={{ color: "#64748b", fontSize: 14 }}>{isOpen ? "▲" : "▼"}</span>
                          </button>
                          {isOpen && (
                            <div style={{ background: "#070c1a", padding: "14px 16px", fontSize: 13, color: "#94a3b8", lineHeight: 1.8, whiteSpace: "pre-wrap", borderTop: `1px solid ${color}22` }}>
                              {stage.body}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Edit Modal */}
      {showForm && editScript && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
          <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 20, padding: 28, width: "100%", maxWidth: 580, maxHeight: "90vh", overflowY: "auto" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: "#fff" }}>Edit Script</h3>
              <button onClick={() => setShowForm(false)} style={{ background: "none", border: "none", color: "#64748b", fontSize: 20 }}>✕</button>
            </div>
            <Field label="Script Name"><input value={editScript.name} onChange={e => setEditScript(p => ({ ...p, name: e.target.value }))} /></Field>
            <Field label="Opener (Stage 1 message)" style={{ marginTop: 14 }}><textarea value={editScript.content} onChange={e => setEditScript(p => ({ ...p, content: e.target.value }))} rows={4} placeholder="Write your cold opener here. Use [Name] for personalization." style={{ resize: "vertical" }} /></Field>

            {/* Stage editors */}
            {(editScript.stages || []).map((stage, idx) => (
              <div key={idx} style={{ marginTop: 14 }}>
                <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
                  <input value={stage.title} onChange={e => setEditScript(p => ({ ...p, stages: p.stages.map((s, i) => i === idx ? { ...s, title: e.target.value } : s) }))} style={{ fontWeight: 600, color: "#00d4ff" }} />
                  <button onClick={() => setEditScript(p => ({ ...p, stages: p.stages.filter((_, i) => i !== idx) }))} style={{ background: "#7f1d1d", color: "#fca5a5", border: "none", borderRadius: 6, padding: "4px 10px", fontSize: 11, whiteSpace: "nowrap" }}>Remove</button>
                </div>
                <textarea value={stage.body} onChange={e => setEditScript(p => ({ ...p, stages: p.stages.map((s, i) => i === idx ? { ...s, body: e.target.value } : s) }))} rows={5} style={{ resize: "vertical" }} />
              </div>
            ))}
            <button onClick={() => setEditScript(p => ({ ...p, stages: [...(p.stages || []), { title: `Stage ${(p.stages || []).length + 1}`, body: "" }] }))} style={{ marginTop: 12, background: "#0c1e3d", color: "#3b82f6", border: "1px solid #3b82f644", borderRadius: 8, padding: "8px 16px", fontSize: 12, width: "100%" }}>+ Add Stage</button>

            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              <button onClick={saveScript} style={{ flex: 1, background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: 12, fontSize: 14, fontWeight: 700 }}>Save Script</button>
              <button onClick={() => setShowForm(false)} style={{ background: "#1e3a5f", color: "#94a3b8", border: "none", borderRadius: 10, padding: "12px 20px" }}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── PIPELINE ─── */
function Pipeline({ leads, saveLeads, clients, saveClients, settings }) {
  const [showClientForm, setShowClientForm] = useState(false);
  const [editClient, setEditClient] = useState(null);
  const blank = { id: genId(), name: "", businessName: "", service: "Facebook Ads", value: settings.dealValue || 500, startDate: today(), status: "Active", notes: "" };

  const pipelineStages = ["Interested", "Booked", "Closed"];
  const pipeline = pipelineStages.map(s => {
    const stageLeads = leads.filter(l => l.status === s);
    const value = stageLeads.length * (settings.dealValue || 500);
    return { stage: s, leads: stageLeads, count: stageLeads.length, value };
  });
  const totalPipeline = pipeline.reduce((s, p) => s + p.value, 0);
  const activeClients = clients.filter(c => c.status === "Active");
  const mrr = activeClients.reduce((s, c) => s + (+c.value || 0), 0);
  const churnedClients = clients.filter(c => c.status === "Churned");

  const moveToClient = (lead) => {
    setEditClient({ ...blank, id: genId(), name: lead.name, businessName: lead.businessName });
    setShowClientForm(true);
  };
  const saveClient = () => {
    const exists = clients.find(c => c.id === editClient.id);
    saveClients(exists ? clients.map(c => c.id === editClient.id ? editClient : c) : [...clients, editClient]);
    setShowClientForm(false);
  };

  return (
    <div>
      <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff", marginBottom: 20 }}>Pipeline & Revenue</h2>
      {/* Revenue KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 24 }}>
        {[
          { label: "Pipeline Value", value: `${settings.currency}${totalPipeline.toLocaleString()}`, sub: "Potential revenue", color: "#3b82f6" },
          { label: "Active Clients", value: activeClients.length, sub: "Currently billing", color: "#22c55e" },
          { label: "Monthly Revenue", value: `${settings.currency}${mrr.toLocaleString()}`, sub: "From active clients", color: "#00d4ff" },
          { label: "Churned Clients", value: churnedClients.length, sub: "Lost clients", color: "#ef4444" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#0d1526", border: `1px solid ${k.color}22`, borderTop: `3px solid ${k.color}`, borderRadius: 12, padding: 16 }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: k.color, fontFamily: "'Space Grotesk', sans-serif" }}>{k.value}</div>
            <div style={{ fontSize: 12, color: "#fff", fontWeight: 500, marginTop: 4 }}>{k.label}</div>
            <div style={{ fontSize: 11, color: "#64748b" }}>{k.sub}</div>
          </div>
        ))}
      </div>
      {/* Pipeline Board */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 24 }}>
        {pipeline.map(({ stage, leads: stageLeads, count, value }) => (
          <div key={stage} style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 16, padding: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span style={{ background: STATUS_COLORS[stage] + "22", color: STATUS_COLORS[stage], border: `1px solid ${STATUS_COLORS[stage]}44`, borderRadius: 10, padding: "3px 12px", fontSize: 12, fontWeight: 600 }}>{stage}</span>
              <span style={{ fontSize: 12, color: "#64748b" }}>{settings.currency}{value.toLocaleString()}</span>
            </div>
            <div style={{ fontSize: 24, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif", color: "#fff", marginBottom: 14 }}>{count} leads</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {stageLeads.slice(0, 5).map(l => (
                <div key={l.id} style={{ background: "#0a1929", borderRadius: 8, padding: 10 }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: "#fff" }}>{l.name || "Unknown"}</div>
                  <div style={{ fontSize: 11, color: "#64748b", marginBottom: 6 }}>{l.businessName} · {l.niche}</div>
                  {stage !== "Closed" ? (
                    <button onClick={() => saveLeads(leads.map(ld => ld.id === l.id ? { ...ld, status: stage === "Interested" ? "Booked" : "Closed" } : ld))}
                      style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 6, padding: "3px 10px", fontSize: 10, cursor: "pointer" }}>
                      → Move to {stage === "Interested" ? "Booked" : "Closed"}
                    </button>
                  ) : (
                    <button onClick={() => moveToClient(l)} style={{ background: "#052e16", color: "#86efac", border: "1px solid #22c55e44", borderRadius: 6, padding: "3px 10px", fontSize: 10, cursor: "pointer" }}>
                      + Add as Client
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      {/* Clients Table */}
      <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 16, padding: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: "#fff", fontSize: 15 }}>Client Tracker</h3>
          <button onClick={() => { setEditClient({ ...blank }); setShowClientForm(true); }} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 8, padding: "8px 14px", fontSize: 12, fontWeight: 600 }}>+ Add Client</button>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
          <thead><tr style={{ borderBottom: "1px solid #1e3a5f" }}>{["Name", "Business", "Service", "Value/mo", "Start Date", "Status", "Actions"].map(h => <th key={h} style={{ padding: "8px 12px", textAlign: "left", color: "#64748b", fontWeight: 500 }}>{h}</th>)}</tr></thead>
          <tbody>{clients.length === 0 ? <tr><td colSpan={7} style={{ padding: 20, textAlign: "center", color: "#64748b" }}>No clients yet. Close deals and add them here!</td></tr> : clients.map((c, i) => (
            <tr key={c.id} style={{ borderBottom: "1px solid #1e3a5f11", background: i % 2 === 0 ? "#0a192911" : "transparent" }}>
              <td style={{ padding: "8px 12px", color: "#fff", fontWeight: 500 }}>{c.name}</td>
              <td style={{ padding: "8px 12px", color: "#94a3b8" }}>{c.businessName}</td>
              <td style={{ padding: "8px 12px", color: "#64748b" }}>{c.service}</td>
              <td style={{ padding: "8px 12px", color: "#22c55e", fontWeight: 600 }}>{settings.currency}{(+c.value).toLocaleString()}</td>
              <td style={{ padding: "8px 12px", color: "#64748b" }}>{c.startDate}</td>
              <td style={{ padding: "8px 12px" }}><span style={{ background: c.status === "Active" ? "#052e16" : "#7f1d1d", color: c.status === "Active" ? "#22c55e" : "#ef4444", borderRadius: 10, padding: "2px 8px", fontSize: 10 }}>{c.status}</span></td>
              <td style={{ padding: "8px 12px" }}>
                <div style={{ display: "flex", gap: 4 }}>
                  <button onClick={() => { setEditClient({ ...c }); setShowClientForm(true); }} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 5, padding: "3px 8px", fontSize: 10 }}>Edit</button>
                  <button onClick={() => saveClients(clients.map(cl => cl.id === c.id ? { ...cl, status: cl.status === "Active" ? "Churned" : "Active" } : cl))} style={{ background: c.status === "Active" ? "#7f1d1d" : "#052e16", color: c.status === "Active" ? "#fca5a5" : "#86efac", border: "none", borderRadius: 5, padding: "3px 8px", fontSize: 10 }}>{c.status === "Active" ? "Churn" : "Reactivate"}</button>
                </div>
              </td>
            </tr>
          ))}</tbody>
        </table>
      </div>
      {showClientForm && editClient && (
        <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.8)", zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
          <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 20, padding: 28, width: "100%", maxWidth: 480 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, color: "#fff" }}>Client Details</h3>
              <button onClick={() => setShowClientForm(false)} style={{ background: "none", border: "none", color: "#64748b", fontSize: 20 }}>✕</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Field label="Contact Name"><input value={editClient.name} onChange={e => setEditClient(p => ({ ...p, name: e.target.value }))} /></Field>
              <Field label="Business Name"><input value={editClient.businessName} onChange={e => setEditClient(p => ({ ...p, businessName: e.target.value }))} /></Field>
              <Field label="Service"><select value={editClient.service} onChange={e => setEditClient(p => ({ ...p, service: e.target.value }))}>{["Facebook Ads", "Google Ads", "Website Design", "Full Package"].map(s => <option key={s}>{s}</option>)}</select></Field>
              <Field label="Monthly Value ($)"><input type="number" value={editClient.value} onChange={e => setEditClient(p => ({ ...p, value: e.target.value }))} /></Field>
              <Field label="Start Date"><input type="date" value={editClient.startDate} onChange={e => setEditClient(p => ({ ...p, startDate: e.target.value }))} /></Field>
              <Field label="Status"><select value={editClient.status} onChange={e => setEditClient(p => ({ ...p, status: e.target.value }))}><option>Active</option><option>Churned</option><option>On Hold</option></select></Field>
            </div>
            <Field label="Notes" style={{ marginTop: 14 }}><textarea value={editClient.notes || ""} onChange={e => setEditClient(p => ({ ...p, notes: e.target.value }))} rows={2} /></Field>
            <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
              <button onClick={saveClient} style={{ flex: 1, background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 10, padding: 12, fontSize: 14, fontWeight: 700 }}>Save Client</button>
              <button onClick={() => setShowClientForm(false)} style={{ background: "#1e3a5f", color: "#94a3b8", border: "none", borderRadius: 10, padding: "12px 20px" }}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── REPORTS ─── */
function Reports({ daily, leads, scripts, settings, clients }) {
  const [period, setPeriod] = useState("30");
  const [customMonth, setCustomMonth] = useState(new Date().toISOString().slice(0,7));
  const [customFrom, setCustomFrom] = useState(new Date(Date.now()-6*86400000).toISOString().split("T")[0]);
  const [customTo, setCustomTo] = useState(new Date().toISOString().split("T")[0]);
  const [generating, setGenerating] = useState(false);
  const now = new Date();
  const todayStr = now.toISOString().split("T")[0];

  const getRange = () => {
    if (period === "month") {
      const [y, m] = customMonth.split("-");
      const start = `${y}-${m.padStart(2,"0")}-01`;
      const lastDay = new Date(+y, +m, 0).getDate();
      const end = `${y}-${m.padStart(2,"0")}-${String(lastDay).padStart(2,"0")}`;
      return { start, end, label: new Date(+y, +m-1).toLocaleString("default",{month:"long",year:"numeric"}) };
    }
    if (period === "year") {
      const y = now.getFullYear();
      return { start:`${y}-01-01`, end:`${y}-12-31`, label:`Full Year ${y}` };
    }
    if (period === "1") {
      return { start: todayStr, end: todayStr, label: `Today (${todayStr})` };
    }
    if (period === "custom") {
      const from = customFrom || todayStr;
      const to = customTo || todayStr;
      return { start: from <= to ? from : to, end: from <= to ? to : from, label: `${customFrom} → ${customTo}` };
    }
    const days = parseInt(period);
    const s = new Date(now); s.setDate(s.getDate() - days + 1);
    return { start: s.toISOString().split("T")[0], end: todayStr, label:`Last ${days} Days` };
  };
  const { start, end, label } = getRange();

  const filteredDaily = daily.filter(d => d.date >= start && d.date <= end).sort((a,b) => a.date.localeCompare(b.date));
  const filteredLeads = leads.filter(l => l.dateContacted >= start && l.dateContacted <= end);

  const totalDMs = filteredDaily.reduce((s,d)=>s+(d.dms||0),0);
  const totalReplies = filteredDaily.reduce((s,d)=>s+(d.replies||0),0);
  const totalPositive = filteredDaily.reduce((s,d)=>s+(d.positiveReplies||0),0);
  const totalInterested = filteredDaily.reduce((s,d)=>s+(d.interested||0),0);
  const totalBooked = filteredDaily.reduce((s,d)=>s+(d.booked||0),0);
  const totalClosed = filteredDaily.reduce((s,d)=>s+(d.closed||0),0);
  const totalRevenue = totalClosed * (settings.dealValue||500);
  const totalLost = filteredLeads.filter(l=>l.status==="Lost").length;
  const lostRevenue = totalLost * (settings.dealValue||500);

  const scriptBreakdown = scripts.map(sc => {
    const scLeads = filteredLeads.filter(l=>l.scriptUsed===sc.name);
    const closed = scLeads.filter(l=>l.status==="Closed").length;
    const interested = scLeads.filter(l=>["Interested","Booked","Closed"].includes(l.status)).length;
    return { name:sc.name, leads:scLeads.length, interested, closed, revenue:closed*(settings.dealValue||500) };
  }).filter(s=>s.leads>0);

  const chartData = filteredDaily.map(d=>({
    date: d.date.slice(5),
    DMs: d.dms||0, Replies: d.replies||0, Interested: d.interested||0,
    Closed: d.closed||0, Revenue:(d.closed||0)*(settings.dealValue||500),
  }));

  const getWeekDays = (offset=0) => {
    const days=[]; const st=new Date(now);
    st.setDate(st.getDate()-st.getDay()-(offset*7));
    for(let i=0;i<7;i++){const d=new Date(st);d.setDate(d.getDate()+i);days.push(d.toISOString().split("T")[0]);}
    return days;
  };
  const sumWeek = (days) => {
    const entries = daily.filter(d=>days.includes(d.date));
    return { dms:entries.reduce((s,d)=>s+(d.dms||0),0), replies:entries.reduce((s,d)=>s+(d.replies||0),0), interested:entries.reduce((s,d)=>s+(d.interested||0),0), booked:entries.reduce((s,d)=>s+(d.booked||0),0), closed:entries.reduce((s,d)=>s+(d.closed||0),0) };
  };
  const tw=sumWeek(getWeekDays(0)); const lw=sumWeek(getWeekDays(1));
  const diff=(a,b)=>b>0?(((a-b)/b)*100).toFixed(0):a>0?"+100":"0";

  const nichePerf=(settings.niches||[]).map(n=>{
    const nLeads=filteredLeads.filter(l=>l.niche===n);
    const closed=nLeads.filter(l=>l.status==="Closed").length;
    return {niche:n,leads:nLeads.length,closed,revenue:closed*(settings.dealValue||500),rate:nLeads.length>0?pct(closed,nLeads.length):"0.0"};
  });
  const bestNiche=nichePerf.reduce((b,n)=>(!b||parseFloat(n.rate)>parseFloat(b.rate))?n:b,null);
  const expectedNextWeek={dms:Math.round(tw.dms*1.1),leads:Math.round(tw.interested*1.1),revenue:Math.round((tw.closed*1.1)*(settings.dealValue||500))};

  const generatePDF = () => {
    setGenerating(true);
    try {
      const cur = settings.currency || "$";
      const tableStyle = `border-collapse:collapse;width:100%;margin-bottom:24px;font-size:12px;`;
      const thStyle = `background:#0d1526;color:#00d4ff;padding:8px 10px;text-align:left;border:1px solid #1e3a5f;font-weight:700;`;
      const tdStyle = `padding:7px 10px;border:1px solid #e2e8f0;color:#1e293b;`;
      const tdAlt = `padding:7px 10px;border:1px solid #e2e8f0;color:#1e293b;background:#f0f9ff;`;

      const kpiRows = [
        ["Total DMs Sent", totalDMs, "—"],
        ["Total Replies", totalReplies, `${pct(totalReplies,totalDMs)}%`],
        ["Positive Replies", totalPositive, `${pct(totalPositive,totalDMs)}%`],
        ["Interested Leads", totalInterested, `${pct(totalInterested,totalDMs)}%`],
        ["Booked (Calls)", totalBooked, `${pct(totalBooked,totalDMs)}%`],
        ["Deals Closed", totalClosed, `${pct(totalClosed,totalDMs)}%`],
        ["Lost Leads", totalLost, `${pct(totalLost,filteredLeads.length)}% of leads`],
        ["Revenue Earned", `${cur}${totalRevenue.toLocaleString()}`, "—"],
        ["Revenue Lost (Lost leads)", `${cur}${lostRevenue.toLocaleString()}`, "—"],
        ["Days Logged", filteredDaily.length, "—"],
      ];

      const scriptRows = scriptBreakdown.length > 0
        ? scriptBreakdown.map((s,i) => `<tr>
            <td style="${i%2===0?tdStyle:tdAlt}">${s.name}</td>
            <td style="${i%2===0?tdStyle:tdAlt}">${s.leads}</td>
            <td style="${i%2===0?tdStyle:tdAlt}">${s.interested}</td>
            <td style="${i%2===0?tdStyle:tdAlt}">${s.closed}</td>
            <td style="${i%2===0?tdStyle:tdAlt}">${cur}${s.revenue.toLocaleString()}</td>
            <td style="${i%2===0?tdStyle:tdAlt}">${s.leads>0?((s.closed/s.leads)*100).toFixed(1)+"%" :"0.0%"}</td>
          </tr>`).join("")
        : `<tr><td colspan="6" style="${tdStyle}text-align:center;color:#94a3b8;">No script data for this period</td></tr>`;

      const dailyRows = filteredDaily.map((d,i) => `<tr>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.date}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.niche||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.dms||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.replies||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${pct(d.replies,d.dms)}%</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.positiveReplies||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.interested||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.booked||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.closed||0}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${cur}${((d.closed||0)*(settings.dealValue||500)).toLocaleString()}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${d.scriptUsed||"—"}</td>
      </tr>`).join("") || `<tr><td colspan="11" style="${tdStyle}text-align:center;color:#94a3b8;">No daily logs for this period</td></tr>`;

      const leadRows = filteredLeads.map((l,i) => `<tr>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.name||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.businessName||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.niche||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.city||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.platform||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.status||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.temp||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.leadScore?l.leadScore+"/10":"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.scriptUsed||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.dateContacted||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.nextFollowUp||"—"}</td>
        <td style="${i%2===0?tdStyle:tdAlt}">${l.phoneNumber||"—"}</td>
      </tr>`).join("") || `<tr><td colspan="12" style="${tdStyle}text-align:center;color:#94a3b8;">No leads for this period</td></tr>`;

      // Serialize chart data for embedding in HTML
      const chartLabels = JSON.stringify(filteredDaily.map(d => d.date.slice(5)));
      const dmData     = JSON.stringify(filteredDaily.map(d => d.dms||0));
      const replyData  = JSON.stringify(filteredDaily.map(d => d.replies||0));
      const intData    = JSON.stringify(filteredDaily.map(d => d.interested||0));
      const closedData = JSON.stringify(filteredDaily.map(d => d.closed||0));
      const revData    = JSON.stringify(filteredDaily.map(d => (d.closed||0)*(settings.dealValue||500)));
      const replyRateData = JSON.stringify(filteredDaily.map(d => d.dms>0?parseFloat(pct(d.replies,d.dms)):0));
      const intRateData   = JSON.stringify(filteredDaily.map(d => d.dms>0?parseFloat(pct(d.interested,d.dms)):0));
      const closeRateData = JSON.stringify(filteredDaily.map(d => d.dms>0?parseFloat(pct(d.closed,d.dms)):0));
      const scriptNames   = JSON.stringify(scriptBreakdown.map(s=>s.name));
      const scriptLeads   = JSON.stringify(scriptBreakdown.map(s=>s.leads));
      const scriptClosed  = JSON.stringify(scriptBreakdown.map(s=>s.closed));
      const nicheNames    = JSON.stringify(nichePerf.map(n=>n.niche));
      const nicheLeads    = JSON.stringify(nichePerf.map(n=>n.leads));
      const nicheClosed   = JSON.stringify(nichePerf.map(n=>n.closed));

      const html = `<!DOCTYPE html><html><head><meta charset="UTF-8"/>
        <title>Webbotix Report — ${label}</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"><\/script>
        <script>if(!window.Chart){document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"><\/sc'+'ript>');}<\/script>
        <style>
          *{box-sizing:border-box;}
          body{font-family:'Helvetica Neue',Arial,sans-serif;background:#fff;color:#1e293b;margin:0;padding:32px;}
          h2{color:#0066ff;font-size:14px;margin:28px 0 8px;border-bottom:2px solid #00d4ff;padding-bottom:4px;text-transform:uppercase;letter-spacing:1px;}
          .header{background:#0a0f1e;padding:24px 32px;margin:-32px -32px 28px;border-bottom:3px solid #00d4ff;}
          .header h1{color:#00d4ff;font-size:24px;margin:0 0 4px;}
          .header p{color:#e2e8f0;margin:4px 0 0;font-size:13px;}
          .header small{color:#64748b;font-size:11px;}
          table{border-collapse:collapse;width:100%;margin-bottom:24px;font-size:11.5px;}
          th{background:#0d1526;color:#00d4ff;padding:7px 9px;text-align:left;border:1px solid #1e3a5f;font-weight:700;}
          td{padding:6px 9px;border:1px solid #e2e8f0;color:#1e293b;}
          tr:nth-child(even) td{background:#f0f9ff;}
          .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
          .kpi{background:#f0f9ff;border:1px solid #bfdbfe;border-top:3px solid #0066ff;border-radius:8px;padding:12px 14px;}
          .kpi .val{font-size:20px;font-weight:700;color:#0066ff;}
          .kpi .lbl{font-size:10px;color:#64748b;margin-top:3px;}
          .charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;}
          .chart-box{background:#f8faff;border:1px solid #dbeafe;border-radius:10px;padding:16px;}
          .chart-title{font-size:12px;font-weight:700;color:#0066ff;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px;}
          .footer{margin-top:40px;padding-top:14px;border-top:1px solid #e2e8f0;font-size:10px;color:#94a3b8;text-align:center;}
          @media print{
            body{padding:16px;}
            .header{margin:-16px -16px 20px;}
            .charts-grid{grid-template-columns:1fr 1fr;page-break-inside:avoid;}
            .chart-box{page-break-inside:avoid;}
            @page{margin:1.2cm;}
          }
        </style>
      </head><body>
        <div class="header">
          <h1>⚡ Webbotix CRM</h1>
          <p>Performance Report — ${label}</p>
          <small>Generated: ${new Date().toLocaleDateString("en-GB",{day:"2-digit",month:"short",year:"numeric"})} &nbsp;·&nbsp; Team: ${settings.userName} &amp; ${settings.partnerName} &nbsp;·&nbsp; Period: ${start} → ${end}</small>
        </div>

        <div class="kpi-grid">
          ${[["📤 DMs Sent",totalDMs],["💬 Replies",`${totalReplies} (${pct(totalReplies,totalDMs)}%)`],["⭐ Interested",`${totalInterested} (${pct(totalInterested,totalDMs)}%)`],["✅ Closed",totalClosed],["💰 Revenue",`${cur}${totalRevenue.toLocaleString()}`],["❌ Lost",totalLost],["📈 Close Rate",`${pct(totalClosed,totalDMs)}%`],["📅 Days Logged",filteredDaily.length]].map(([l,v])=>`<div class="kpi"><div class="val">${v}</div><div class="lbl">${l}</div></div>`).join("")}
        </div>

        <h2>Performance Summary</h2>
        <table><thead><tr><th>Metric</th><th>Value</th><th>Rate vs DMs</th></tr></thead>
        <tbody>${[
          ["Total DMs Sent",totalDMs,"—"],
          ["Total Replies",totalReplies,`${pct(totalReplies,totalDMs)}%`],
          ["Positive Replies",totalPositive,`${pct(totalPositive,totalDMs)}%`],
          ["Interested Leads",totalInterested,`${pct(totalInterested,totalDMs)}%`],
          ["Booked (Calls)",totalBooked,`${pct(totalBooked,totalDMs)}%`],
          ["Deals Closed",totalClosed,`${pct(totalClosed,totalDMs)}%`],
          ["Lost Leads",totalLost,`${pct(totalLost,filteredLeads.length)}% of leads`],
          ["Revenue Earned",`${cur}${totalRevenue.toLocaleString()}`,"—"],
          ["Revenue Lost",`${cur}${lostRevenue.toLocaleString()}`,"—"],
          ["Days Logged",filteredDaily.length,"—"],
        ].map(([m,v,r])=>`<tr><td><strong>${m}</strong></td><td style="font-weight:600;color:#0066ff">${v}</td><td>${r}</td></tr>`).join("")}</tbody></table>

        <h2>📊 Charts &amp; Trends</h2>
        <div class="charts-grid">
          <div class="chart-box">
            <div class="chart-title">📤 DMs Sent Over Period</div>
            <canvas id="c1" height="160"></canvas>
          </div>
          <div class="chart-box">
            <div class="chart-title">📈 Conversion Rate Trends (%)</div>
            <canvas id="c2" height="160"></canvas>
          </div>
          <div class="chart-box">
            <div class="chart-title">💰 Revenue Growth</div>
            <canvas id="c3" height="160"></canvas>
          </div>
          <div class="chart-box">
            <div class="chart-title">🎯 Replies · Interested · Closed</div>
            <canvas id="c4" height="160"></canvas>
          </div>
        </div>

        <div class="charts-grid">
          <div class="chart-box">
            <div class="chart-title">📝 Script Performance (Leads vs Closed)</div>
            <canvas id="c5" height="160"></canvas>
          </div>
          <div class="chart-box">
            <div class="chart-title">🏆 Niche Performance</div>
            <canvas id="c6" height="160"></canvas>
          </div>
        </div>

        <h2>Script Performance</h2>
        <table><thead><tr>${["Script","Leads","Interested","Closed","Revenue","Close Rate"].map(h=>`<th>${h}</th>`).join("")}</tr></thead>
        <tbody>${scriptRows}</tbody></table>

        <h2>Daily Outreach Log</h2>
        <table><thead><tr>${["Date","Niche","DMs","Replies","Reply%","Positive","Interested","Booked","Closed","Revenue","Script"].map(h=>`<th>${h}</th>`).join("")}</tr></thead>
        <tbody>${dailyRows}</tbody></table>

        <h2>All Leads — ${filteredLeads.length} records</h2>
        <table><thead><tr>${["Name","Business","Niche","City","Platform","Status","Temp","Score","Script","Date","Follow-Up","Phone"].map(h=>`<th>${h}</th>`).join("")}</tr></thead>
        <tbody>${leadRows}</tbody></table>

        <div class="footer">Webbotix CRM &nbsp;·&nbsp; ${label} &nbsp;·&nbsp; Confidential &nbsp;·&nbsp; Open in browser → Ctrl+P / Cmd+P → Save as PDF</div>

        <script>
        window.onload = function() {
          const labels = ${chartLabels};
          const dms    = ${dmData};
          const replies= ${replyData};
          const inter  = ${intData};
          const closed = ${closedData};
          const rev    = ${revData};
          const rRate  = ${replyRateData};
          const iRate  = ${intRateData};
          const cRate  = ${closeRateData};
          const sNames = ${scriptNames};
          const sLeads = ${scriptLeads};
          const sClosed= ${scriptClosed};
          const nNames = ${nicheNames};
          const nLeads = ${nicheLeads};
          const nClosed= ${nicheClosed};

          const grid = {color:'rgba(0,0,0,0.06)'};
          const tick = {color:'#64748b',font:{size:9}};
          const tt   = {backgroundColor:'#0d1526',titleColor:'#00d4ff',bodyColor:'#e2e8f0',borderColor:'#1e3a5f',borderWidth:1};

          // Chart 1 — DMs bar
          new Chart(document.getElementById('c1'),{type:'bar',data:{labels,datasets:[{label:'DMs Sent',data:dms,backgroundColor:'rgba(59,130,246,0.7)',borderColor:'#3b82f6',borderWidth:1,borderRadius:3}]},options:{plugins:{legend:{display:false},tooltip:tt},scales:{x:{grid,ticks:tick},y:{grid,ticks:tick}}}});

          // Chart 2 — Rate trends line
          new Chart(document.getElementById('c2'),{type:'line',data:{labels,datasets:[{label:'Reply %',data:rRate,borderColor:'#8b5cf6',tension:0.4,fill:false,pointRadius:2},{label:'Interested %',data:iRate,borderColor:'#f59e0b',tension:0.4,fill:false,pointRadius:2},{label:'Close %',data:cRate,borderColor:'#22c55e',tension:0.4,fill:false,pointRadius:2}]},options:{plugins:{legend:{labels:{color:'#475569',font:{size:10}}},tooltip:tt},scales:{x:{grid,ticks:tick},y:{grid,ticks:tick}}}});

          // Chart 3 — Revenue area
          new Chart(document.getElementById('c3'),{type:'line',data:{labels,datasets:[{label:'Revenue',data:rev,borderColor:'#10b981',backgroundColor:'rgba(16,185,129,0.12)',tension:0.4,fill:true,pointRadius:2}]},options:{plugins:{legend:{display:false},tooltip:{...tt,callbacks:{label:ctx=>'${cur}'+ctx.parsed.y.toLocaleString()}}},scales:{x:{grid,ticks:tick},y:{grid,ticks:{...tick,callback:v=>'${cur}'+v.toLocaleString()}}}}});

          // Chart 4 — Replies/Interested/Closed line
          new Chart(document.getElementById('c4'),{type:'line',data:{labels,datasets:[{label:'Replies',data:replies,borderColor:'#8b5cf6',tension:0.4,fill:false,pointRadius:2},{label:'Interested',data:inter,borderColor:'#f59e0b',tension:0.4,fill:false,pointRadius:2},{label:'Closed',data:closed,borderColor:'#22c55e',tension:0.4,fill:false,pointRadius:2}]},options:{plugins:{legend:{labels:{color:'#475569',font:{size:10}}},tooltip:tt},scales:{x:{grid,ticks:tick},y:{grid,ticks:tick}}}});

          // Chart 5 — Script perf bar
          if(sNames.length>0){new Chart(document.getElementById('c5'),{type:'bar',data:{labels:sNames,datasets:[{label:'Total Leads',data:sLeads,backgroundColor:'rgba(59,130,246,0.7)',borderRadius:4},{label:'Closed',data:sClosed,backgroundColor:'rgba(34,197,94,0.8)',borderRadius:4}]},options:{plugins:{legend:{labels:{color:'#475569',font:{size:10}}},tooltip:tt},scales:{x:{grid,ticks:tick},y:{grid,ticks:tick}}}});}

          // Chart 6 — Niche perf bar
          if(nNames.length>0){new Chart(document.getElementById('c6'),{type:'bar',data:{labels:nNames,datasets:[{label:'Total Leads',data:nLeads,backgroundColor:'rgba(245,158,11,0.7)',borderRadius:4},{label:'Closed',data:nClosed,backgroundColor:'rgba(239,68,68,0.8)',borderRadius:4}]},options:{plugins:{legend:{labels:{color:'#475569',font:{size:10}}},tooltip:tt},scales:{x:{grid,ticks:tick},y:{grid,ticks:tick}}}});}

          setTimeout(()=>window.print(), 2000);
        };
        <\/script>
      </body></html>`;

      const blob = new Blob([html], { type: "text/html;charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `Webbotix-Report-${label.replace(/[\s→]+/g,"-")}-${todayStr}.html`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 5000);
    } catch(e) {
      console.error("Report error:", e);
      alert("Report generation failed: " + e.message);
    }
    setGenerating(false);
  };

  return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
        <div>
          <h2 style={{ fontFamily:"'Space Grotesk',sans-serif", fontSize:18, fontWeight:700, color:"#fff" }}>Performance Reports</h2>
          <p style={{ color:"#64748b", fontSize:12, marginTop:3 }}>Select a period below — charts, tables & PDF all update live</p>
        </div>
        <button onClick={generatePDF} disabled={generating} style={{ background:generating?"#1e3a5f":"linear-gradient(135deg,#22c55e,#10b981)", color:generating?"#64748b":"#000", border:"none", borderRadius:10, padding:"11px 22px", fontSize:13, fontWeight:700, fontFamily:"'Space Grotesk',sans-serif", opacity:generating?0.7:1, display:"flex", alignItems:"center", gap:8 }}>
          {generating?"⏳ Building Report…":"⬇ Download Report (PDF)"}
        </button>
      </div>

      {/* Period Selector */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:14, padding:18, marginBottom:20 }}>
        <div style={{ fontSize:11, color:"#64748b", fontWeight:600, marginBottom:10, letterSpacing:"0.5px", textTransform:"uppercase" }}>Select Report Period</div>
        <div style={{ display:"flex", gap:8, flexWrap:"wrap", alignItems:"center", marginBottom: (period==="month"||period==="custom") ? 12 : 0 }}>
          {[["1","Today"],["7","7 Days"],["30","30 Days"],["60","60 Days"],["90","90 Days"],["120","120 Days"],["month","Month"],["year","Full Year"],["custom","Custom Range"]].map(([val,lbl])=>(
            <button key={val} onClick={()=>setPeriod(val)} style={{ background:period===val?"#00d4ff":"#0d1a2e", color:period===val?"#000":"#64748b", border:"1px solid "+(period===val?"#00d4ff":"#1e3a5f"), borderRadius:8, padding:"8px 14px", fontSize:12, fontWeight:600, cursor:"pointer" }}>{lbl}</button>
          ))}
        </div>
        {period==="month" && (
          <div style={{ display:"flex", alignItems:"center", gap:10, marginTop:10 }}>
            <span style={{ fontSize:12, color:"#64748b" }}>Pick Month:</span>
            <input type="month" value={customMonth} onChange={e=>setCustomMonth(e.target.value)} style={{ width:170 }} />
          </div>
        )}
        {period==="custom" && (
          <div style={{ display:"flex", alignItems:"center", gap:10, marginTop:10, flexWrap:"wrap" }}>
            <span style={{ fontSize:12, color:"#64748b" }}>From:</span>
            <input type="date" value={customFrom} onChange={e=>setCustomFrom(e.target.value)} style={{ width:160 }} />
            <span style={{ fontSize:12, color:"#64748b" }}>To:</span>
            <input type="date" value={customTo} onChange={e=>setCustomTo(e.target.value)} style={{ width:160 }} />
          </div>
        )}
        <div style={{ marginTop:12, fontSize:13, color:"#00d4ff", fontWeight:600 }}>
          📅 {label} &nbsp;·&nbsp; <span style={{ color:"#64748b", fontWeight:400 }}>{start} → {end} &nbsp;·&nbsp; {filteredDaily.length} days logged &nbsp;·&nbsp; {filteredLeads.length} leads</span>
        </div>
      </div>

      {/* KPI Cards */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))", gap:12, marginBottom:20 }}>
        {[
          {label:"DMs Sent",value:totalDMs,color:"#3b82f6",icon:"📤"},
          {label:"Replies",value:`${totalReplies} (${pct(totalReplies,totalDMs)}%)`,color:"#8b5cf6",icon:"💬"},
          {label:"Interested",value:`${totalInterested} (${pct(totalInterested,totalDMs)}%)`,color:"#f59e0b",icon:"⭐"},
          {label:"Booked",value:totalBooked,color:"#10b981",icon:"📅"},
          {label:"Closed",value:totalClosed,color:"#22c55e",icon:"✅"},
          {label:"Revenue",value:`${settings.currency}${totalRevenue.toLocaleString()}`,color:"#00d4ff",icon:"💰"},
          {label:"Lost Leads",value:totalLost,color:"#ef4444",icon:"❌"},
          {label:"Close Rate",value:`${pct(totalClosed,totalDMs)}%`,color:"#10b981",icon:"📈"},
        ].map((k,i)=>(
          <div key={i} style={{ background:"#0d1526", border:`1px solid ${k.color}22`, borderTop:`3px solid ${k.color}`, borderRadius:12, padding:"14px 16px" }}>
            <div style={{ fontSize:18, marginBottom:6 }}>{k.icon}</div>
            <div style={{ fontSize:20, fontWeight:700, color:k.color, fontFamily:"'Space Grotesk',sans-serif", lineHeight:1 }}>{k.value}</div>
            <div style={{ fontSize:11, color:"#64748b", marginTop:4 }}>{k.label}</div>
          </div>
        ))}
      </div>

      {/* Charts 2x2 */}
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:20 }}>
        <ChartCard title="DMs Sent Over Period" color="#3b82f6">
          <ResponsiveContainer width="100%" height={200}>
            <AreaChart data={chartData}><defs><linearGradient id="rdm" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/><stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/><Area type="monotone" dataKey="DMs" stroke="#3b82f6" fill="url(#rdm)" strokeWidth={2}/></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="Replies · Interested · Closed" color="#00d4ff">
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={chartData}><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/><Legend wrapperStyle={{fontSize:10}}/><Line type="monotone" dataKey="Replies" stroke="#8b5cf6" strokeWidth={2} dot={false}/><Line type="monotone" dataKey="Interested" stroke="#f59e0b" strokeWidth={2} dot={false}/><Line type="monotone" dataKey="Closed" stroke="#22c55e" strokeWidth={2} dot={false}/></LineChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="Revenue Growth" color="#22c55e">
          <ResponsiveContainer width="100%" height={200}>
            <AreaChart data={chartData}><defs><linearGradient id="rrev" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#22c55e" stopOpacity={0.3}/><stop offset="95%" stopColor="#22c55e" stopOpacity={0}/></linearGradient></defs><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="date" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}} formatter={(v)=>[`${settings.currency}${v}`,"Revenue"]}/><Area type="monotone" dataKey="Revenue" stroke="#22c55e" fill="url(#rrev)" strokeWidth={2}/></AreaChart>
          </ResponsiveContainer>
        </ChartCard>
        <ChartCard title="Script Performance (Leads vs Closed)" color="#f59e0b">
          <ResponsiveContainer width="100%" height={200}>
            <BarChart data={scriptBreakdown.length>0?scriptBreakdown:scripts.map(s=>({name:s.name,leads:0,closed:0}))}><CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/><XAxis dataKey="name" tick={{fill:"#64748b",fontSize:9}}/><YAxis tick={{fill:"#64748b",fontSize:9}}/><Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/><Bar dataKey="leads" fill="#3b82f6" radius={[4,4,0,0]} name="Leads"/><Bar dataKey="closed" fill="#22c55e" radius={[4,4,0,0]} name="Closed"/></BarChart>
          </ResponsiveContainer>
        </ChartCard>
      </div>

      {/* Script Breakdown Table */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:16, padding:20, marginBottom:20 }}>
        <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#00d4ff", fontSize:15, marginBottom:16 }}>📝 Script Breakdown — {label}</h3>
        <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
          <thead><tr style={{ borderBottom:"1px solid #1e3a5f" }}>
            {["Script","Leads","Interested","Closed","Revenue","Close Rate"].map(h=><th key={h} style={{ padding:"8px 12px", textAlign:"left", color:"#64748b", fontWeight:500 }}>{h}</th>)}
          </tr></thead>
          <tbody>{scriptBreakdown.length===0?(
            <tr><td colSpan={6} style={{ padding:20, textAlign:"center", color:"#64748b" }}>No script data for this period — make sure leads have a Script Used field set.</td></tr>
          ):scriptBreakdown.map((s,i)=>(
            <tr key={i} style={{ borderBottom:"1px solid #1e3a5f11" }}>
              <td style={{ padding:"10px 12px", color:"#fff", fontWeight:600 }}>{s.name}</td>
              <td style={{ padding:"10px 12px", color:"#3b82f6", fontWeight:600 }}>{s.leads}</td>
              <td style={{ padding:"10px 12px", color:"#f59e0b" }}>{s.interested}</td>
              <td style={{ padding:"10px 12px", color:"#22c55e", fontWeight:600 }}>{s.closed}</td>
              <td style={{ padding:"10px 12px", color:"#00d4ff", fontWeight:600 }}>{settings.currency}{s.revenue.toLocaleString()}</td>
              <td style={{ padding:"10px 12px" }}>
                <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                  <div style={{ flex:1, height:6, background:"#0a1929", borderRadius:3 }}>
                    <div style={{ height:"100%", width:`${s.leads>0?Math.min((s.closed/s.leads)*100,100):0}%`, background:"#22c55e", borderRadius:3 }}/>
                  </div>
                  <span style={{ color:"#22c55e", fontWeight:600, minWidth:42 }}>{s.leads>0?((s.closed/s.leads)*100).toFixed(1):0}%</span>
                </div>
              </td>
            </tr>
          ))}</tbody>
        </table>
      </div>

      {/* Leads Table */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:16, padding:20, marginBottom:20 }}>
        <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#fff", fontSize:15, marginBottom:16 }}>👥 Leads in Period — {filteredLeads.length} records</h3>
        <div style={{ overflowX:"auto" }}>
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
            <thead><tr style={{ borderBottom:"1px solid #1e3a5f" }}>
              {["Name","Business","Niche","City","Platform","Status","Temp","Score","Script","Date","Follow-Up","Phone"].map(h=><th key={h} style={{ padding:"8px 10px", textAlign:"left", color:"#64748b", fontWeight:500, whiteSpace:"nowrap" }}>{h}</th>)}
            </tr></thead>
            <tbody>{filteredLeads.length===0?(
              <tr><td colSpan={12} style={{ padding:20, textAlign:"center", color:"#64748b" }}>No leads contacted during this period.</td></tr>
            ):filteredLeads.map((l,i)=>(
              <tr key={l.id} style={{ borderBottom:"1px solid #1e3a5f11", background:i%2===0?"#0a192911":"transparent" }}>
                <td style={{ padding:"8px 10px", color:"#fff", fontWeight:500 }}>{l.name||"—"}</td>
                <td style={{ padding:"8px 10px", color:"#94a3b8" }}>{l.businessName||"—"}</td>
                <td style={{ padding:"8px 10px", color:"#64748b" }}>{l.niche}</td>
                <td style={{ padding:"8px 10px", color:"#64748b" }}>{l.city||"—"}</td>
                <td style={{ padding:"8px 10px", color:"#64748b" }}>{l.platform}</td>
                <td style={{ padding:"8px 10px" }}><span style={{ background:STATUS_COLORS[l.status]+"22", color:STATUS_COLORS[l.status], border:`1px solid ${STATUS_COLORS[l.status]}44`, borderRadius:10, padding:"2px 8px", fontSize:10, fontWeight:600 }}>{l.status}</span></td>
                <td style={{ padding:"8px 10px" }}><span style={{ color:TEMP_COLORS[l.temp], fontWeight:600, fontSize:11 }}>{l.temp==="Hot"?"🔥":l.temp==="Warm"?"⭐":"❄️"} {l.temp}</span></td>
                <td style={{ padding:"8px 10px" }}><span style={{ background:l.leadScore>=8?"#22c55e22":l.leadScore>=5?"#f59e0b22":"#64748b22", color:l.leadScore>=8?"#22c55e":l.leadScore>=5?"#f59e0b":"#64748b", borderRadius:6, padding:"2px 7px", fontWeight:700, fontSize:11 }}>{l.leadScore}/10</span></td>
                <td style={{ padding:"8px 10px", color:"#00d4ff", fontSize:11, fontWeight:500 }}>{l.scriptUsed||"—"}</td>
                <td style={{ padding:"8px 10px", color:"#64748b", fontSize:11 }}>{l.dateContacted}</td>
                <td style={{ padding:"8px 10px", color:l.nextFollowUp<=todayStr?"#ef4444":"#64748b", fontSize:11 }}>{l.nextFollowUp||"—"}</td>
                <td style={{ padding:"8px 10px", color:"#94a3b8", fontSize:11 }}>{l.phoneNumber||"—"}</td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      </div>

      {/* Week Comparison */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:16, padding:20, marginBottom:20 }}>
        <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#00d4ff", fontSize:15, marginBottom:16 }}>📊 This Week vs Last Week</h3>
        <table style={{ width:"100%", borderCollapse:"collapse", fontSize:13 }}>
          <thead><tr style={{ borderBottom:"1px solid #1e3a5f" }}><th style={{ padding:"8px 0", color:"#64748b", textAlign:"left" }}>Metric</th><th style={{ padding:"8px 0", color:"#64748b", textAlign:"center" }}>This Week</th><th style={{ padding:"8px 0", color:"#64748b", textAlign:"center" }}>Last Week</th><th style={{ padding:"8px 0", color:"#64748b", textAlign:"center" }}>Change</th></tr></thead>
          <tbody>{[
            ["DMs Sent",tw.dms,lw.dms],["Replies",tw.replies,lw.replies],["Interested",tw.interested,lw.interested],["Booked",tw.booked,lw.booked],["Deals Closed",tw.closed,lw.closed],
            ["Revenue",`${settings.currency}${(tw.closed*(settings.dealValue||500)).toLocaleString()}`,`${settings.currency}${(lw.closed*(settings.dealValue||500)).toLocaleString()}`],
            ["Reply Rate",`${pct(tw.replies,tw.dms)}%`,`${pct(lw.replies,lw.dms)}%`],["Close Rate",`${pct(tw.closed,tw.dms)}%`,`${pct(lw.closed,lw.dms)}%`],
          ].map(([lbl,a,b])=>{
            const numA=typeof a==="number"?a:0; const numB=typeof b==="number"?b:0;
            const d=diff(numA,numB); const up=parseFloat(d)>=0;
            return(<tr key={lbl} style={{ borderBottom:"1px solid #1e3a5f11" }}>
              <td style={{ padding:"8px 0", color:"#94a3b8" }}>{lbl}</td>
              <td style={{ padding:"8px 0", textAlign:"center", color:"#fff", fontWeight:600 }}>{a}</td>
              <td style={{ padding:"8px 0", textAlign:"center", color:"#64748b" }}>{b}</td>
              <td style={{ padding:"8px 0", textAlign:"center" }}><span style={{ color:up?"#22c55e":"#ef4444", fontWeight:600, fontSize:12 }}>{up?"▲":"▼"} {Math.abs(parseFloat(d))}%</span></td>
            </tr>);
          })}</tbody>
        </table>
      </div>

      {/* AI Summary */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:16, padding:20, marginBottom:20 }}>
        <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#00d4ff", fontSize:15, marginBottom:16 }}>🤖 AI Period Summary</h3>
        <div style={{ display:"flex", flexDirection:"column", gap:12 }}>
          {totalDMs>0&&<ReportBlock type="success" title="What Worked" body={`You sent ${totalDMs} DMs during ${label} with a ${pct(totalReplies,totalDMs)}% reply rate.${totalClosed>0?` You closed ${totalClosed} deal${totalClosed>1?"s":""} generating ${settings.currency}${totalRevenue.toLocaleString()} in revenue.`:""}`}/>}
          {totalLost>0&&<ReportBlock type="danger" title="Lost Revenue" body={`${totalLost} lead${totalLost>1?"s":""} marked Lost — potential ${settings.currency}${lostRevenue.toLocaleString()} in missed revenue. Review why they dropped off and sharpen your objection handling.`}/>}
          {totalInterested>totalClosed&&<ReportBlock type="warning" title="Conversion Gap" body={`You had ${totalInterested} interested leads but only closed ${totalClosed}. That's ${totalInterested-totalClosed} deals left on the table — follow up harder with your warm pipeline.`}/>}
          {bestNiche&&bestNiche.leads>0&&<ReportBlock type="success" title="Best Niche" body={`${bestNiche.niche} is your top niche this period at ${bestNiche.rate}% close rate with ${bestNiche.leads} total leads.`}/>}
          <ReportBlock type="info" title="Next Period Target" body={`Target ${Math.max(totalDMs+Math.ceil(totalDMs*0.1),(settings.targetDMs||30)*Math.max(filteredDaily.length,1))} total DMs next period (+10%). Convert your ${Math.max(totalInterested-totalClosed,0)} open interested leads before chasing new ones.`}/>
        </div>
      </div>

      {/* Growth Prediction */}
      <div style={{ background:"#0d1526", border:"1px solid #3b82f644", borderRadius:16, padding:20 }}>
        <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#3b82f6", fontSize:15, marginBottom:16 }}>🔮 Growth Prediction — Next Week</h3>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16 }}>
          {[["Expected DMs",expectedNextWeek.dms,"#3b82f6"],["Expected Hot Leads",expectedNextWeek.leads,"#f59e0b"],[`Expected Revenue`,`${settings.currency}${expectedNextWeek.revenue.toLocaleString()}`,"#22c55e"]].map(([l,v,c])=>(
            <div key={l} style={{ background:"#0a1929", borderRadius:12, padding:16, textAlign:"center" }}>
              <div style={{ fontSize:24, fontWeight:700, color:c, fontFamily:"'Space Grotesk',sans-serif" }}>{v}</div>
              <div style={{ fontSize:12, color:"#64748b", marginTop:4 }}>{l}</div>
              <div style={{ fontSize:10, color:"#94a3b8", marginTop:2 }}>Based on current trajectory (+10%)</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ReportBlock({ type, title, body }) {
  const cols = { success: { bg: "#052e16", border: "#22c55e", text: "#86efac", icon: "✅" }, danger: { bg: "#7f1d1d", border: "#ef4444", text: "#fca5a5", icon: "❌" }, warning: { bg: "#451a03", border: "#f59e0b", text: "#fcd34d", icon: "⚠️" }, info: { bg: "#0c1e3d", border: "#3b82f6", text: "#93c5fd", icon: "💡" } };
  const c = cols[type] || cols.info;
  return (
    <div style={{ background: c.bg, border: `1px solid ${c.border}44`, borderLeft: `3px solid ${c.border}`, borderRadius: 10, padding: 14 }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: c.text, marginBottom: 4 }}>{c.icon} {title}</div>
      <div style={{ fontSize: 13, color: c.text, opacity: 0.85, lineHeight: 1.6 }}>{body}</div>
    </div>
  );
}

/* ─── COLD CALLS ─── */
const CALL_STATUSES = ["Interested","Not Interested","Closed","Didn't Pick Up","Hung Up","Call Back Later"];
const CALL_STATUS_COLORS = { "Interested":"#10b981","Not Interested":"#64748b","Closed":"#22c55e","Didn't Pick Up":"#3b82f6","Hung Up":"#ef4444","Call Back Later":"#f59e0b" };
const CALL_TYPES = ["Cold Call","Warm Call"];

function ColdCalls({ leads, calls, saveCalls, settings }) {
  const [activeGroup, setActiveGroup] = useState(null);
  const [editCall, setEditCall] = useState(null);
  const [showForm, setShowForm] = useState(false);

  // Build groups: [type x niche]
  const niches = settings.niches || ["Cleaning","Construction"];
  const groups = [];
  CALL_TYPES.forEach(type => niches.forEach(niche => groups.push({ key:`${type}::${niche}`, type, niche, label:`${type} — ${niche}` })));

  // Every lead auto-appears in their niche group (cold call by default)
  const getCallsForGroup = (type, niche) => {
    const existing = calls.filter(c => c.type === type && c.niche === niche);
    // Merge leads that have no call record yet into cold call groups
    if (type === "Cold Call") {
      const existingLeadIds = new Set(existing.map(c => c.leadId).filter(Boolean));
      const leadsForNiche = leads.filter(l => l.niche === niche && !existingLeadIds.has(l.id));
      const autoAdded = leadsForNiche.map(l => ({ id: `auto_${l.id}`, leadId: l.id, type: "Cold Call", niche, name: l.name || "Unknown", businessName: l.businessName || "", phone: l.phoneNumber || "", status: "Didn't Pick Up", notes: "", dateAdded: l.dateContacted || today(), service: l.service || "", fee: l.fee || "" }));
      return [...existing, ...autoAdded];
    }
    return existing;
  };

  const blankCall = (type, niche) => ({ id: genId(), leadId: "", type, niche, name: "", businessName: "", phone: "", status: "Didn't Pick Up", notes: "", dateAdded: today(), service: settings.services?.[0] || "Ads", fee: settings.dealValue || 700 });

  const saveCall = () => {
    if (!editCall) return;
    const filtered = calls.filter(c => c.id !== editCall.id && !(c.id.startsWith("auto_") && c.leadId === editCall.leadId));
    saveCalls([...filtered, { ...editCall, id: editCall.id.startsWith("auto_") ? genId() : editCall.id }]);
    setShowForm(false);
  };
  const deleteCall = (id) => {
    if (id.startsWith("auto_")) return; // auto records disappear when real record added
    saveCalls(calls.filter(c => c.id !== id));
  };

  // Stats per group for AI insights
  const groupStats = groups.map(g => {
    const gc = getCallsForGroup(g.type, g.niche);
    const total = gc.length;
    const byStatus = {};
    CALL_STATUSES.forEach(s => { byStatus[s] = gc.filter(c => c.status === s).length; });
    const closedPct = total > 0 ? ((byStatus["Closed"]/total)*100).toFixed(1) : 0;
    const pickupPct = total > 0 ? (((total - byStatus["Didn't Pick Up"] - byStatus["Hung Up"])/total)*100).toFixed(1) : 0;
    return { ...g, total, byStatus, closedPct, pickupPct };
  });

  // Chart data: status breakdown across all groups
  const chartData = groupStats.map(g => ({
    name: `${g.type === "Cold Call" ? "❄️" : "🌡️"} ${g.niche}`,
    Interested: g.byStatus["Interested"] || 0,
    Closed: g.byStatus["Closed"] || 0,
    "Didn't Pick Up": g.byStatus["Didn't Pick Up"] || 0,
    "Hung Up": g.byStatus["Hung Up"] || 0,
    "Not Interested": g.byStatus["Not Interested"] || 0,
    "Call Back Later": g.byStatus["Call Back Later"] || 0,
  }));

  const activeG = groups.find(g => g.key === activeGroup) || groups[0];
  const activeCalls = activeGroup ? getCallsForGroup(activeG.type, activeG.niche) : [];

  // AI coach for cold calls
  const totalCalls = calls.length + leads.length;
  const closedCalls = calls.filter(c => c.status === "Closed").length;
  const hungUp = calls.filter(c => c.status === "Hung Up").length;
  const didntPick = calls.filter(c => c.status === "Didn't Pick Up").length;
  const aiInsights = [];
  if (hungUp > 3) aiInsights.push({ type:"warning", msg:`${hungUp} people hung up — try a shorter, more value-first opener. Lead with "Is this a bad time?" to reduce hang-ups.` });
  if (didntPick > 5) aiInsights.push({ type:"info", msg:`${didntPick} didn't pick up — try calling between 10am-12pm or 4pm-6pm when pick-up rates are highest.` });
  if (closedCalls > 0) aiInsights.push({ type:"success", msg:`You've closed ${closedCalls} deal${closedCalls>1?"s":""} on calls — that's ${settings.currency}${(closedCalls*(settings.dealValue||700)).toLocaleString()} in revenue from cold/warm calling!` });
  const interestedButNotClosed = calls.filter(c => c.status === "Interested").length;
  if (interestedButNotClosed > 0) aiInsights.push({ type:"danger", msg:`${interestedButNotClosed} leads marked Interested but not closed — call them back TODAY. Warm interest goes cold fast.` });
  if (aiInsights.length === 0) aiInsights.push({ type:"info", msg:"Start logging call outcomes to get AI insights on your best calling times, niches, and conversion rates." });

  return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:20 }}>
        <div>
          <h2 style={{ fontFamily:"'Space Grotesk',sans-serif", fontSize:18, fontWeight:700, color:"#fff" }}>📞 Cold & Warm Calls</h2>
          <p style={{ color:"#64748b", fontSize:12, marginTop:3 }}>All leads auto-appear here. Log each call outcome and notes.</p>
        </div>
      </div>

      {/* AI Insights */}
      <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:12, padding:16, marginBottom:20 }}>
        <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:12 }}>
          <span style={{ fontSize:16 }}>🤖</span>
          <span style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:600, fontSize:14, color:"#00d4ff" }}>AI Call Coach</span>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
          {aiInsights.map((m,i) => {
            const cols = { warning:{bg:"#451a03",border:"#f59e0b",text:"#fcd34d"}, danger:{bg:"#7f1d1d",border:"#ef4444",text:"#fca5a5"}, info:{bg:"#0c1e3d",border:"#3b82f6",text:"#93c5fd"}, success:{bg:"#052e16",border:"#22c55e",text:"#86efac"} };
            const c = cols[m.type]||cols.info;
            return <div key={i} style={{ background:c.bg, border:`1px solid ${c.border}44`, borderLeft:`3px solid ${c.border}`, borderRadius:8, padding:"10px 14px", fontSize:13, color:c.text }}>{m.msg}</div>;
          })}
        </div>
      </div>

      {/* KPI Row */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))", gap:12, marginBottom:20 }}>
        {[
          ["Total Calls",calls.length,"#3b82f6"],
          ["✅ Closed",closedCalls,"#22c55e"],
          ["⭐ Interested",interestedButNotClosed,"#f59e0b"],
          ["📵 No Answer",didntPick,"#64748b"],
          ["❌ Hung Up",hungUp,"#ef4444"],
          ["💰 Call Revenue",`${settings.currency}${(closedCalls*(settings.dealValue||700)).toLocaleString()}`, "#00d4ff"],
        ].map(([l,v,c])=>(
          <div key={l} style={{ background:"#0d1526", border:`1px solid ${c}22`, borderTop:`3px solid ${c}`, borderRadius:12, padding:"12px 14px" }}>
            <div style={{ fontSize:18, fontWeight:700, color:c, fontFamily:"'Space Grotesk',sans-serif" }}>{v}</div>
            <div style={{ fontSize:11, color:"#64748b", marginTop:3 }}>{l}</div>
          </div>
        ))}
      </div>

      {/* Charts Row */}
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:20 }}>
        <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:12, padding:16 }}>
          <div style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:600, fontSize:13, color:"#00d4ff", marginBottom:12 }}>📊 Call Outcomes by Group</div>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={chartData} margin={{top:0,right:0,bottom:30,left:0}}>
              <CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/>
              <XAxis dataKey="name" tick={{fill:"#64748b",fontSize:9}} angle={-25} textAnchor="end"/>
              <YAxis tick={{fill:"#64748b",fontSize:9}}/>
              <Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}}/>
              <Legend wrapperStyle={{fontSize:10,color:"#94a3b8"}}/>
              <Bar dataKey="Closed" fill="#22c55e" radius={[3,3,0,0]}/>
              <Bar dataKey="Interested" fill="#f59e0b" radius={[3,3,0,0]}/>
              <Bar dataKey="Didn't Pick Up" fill="#3b82f6" radius={[3,3,0,0]}/>
              <Bar dataKey="Hung Up" fill="#ef4444" radius={[3,3,0,0]}/>
              <Bar dataKey="Not Interested" fill="#64748b" radius={[3,3,0,0]}/>
              <Bar dataKey="Call Back Later" fill="#a78bfa" radius={[3,3,0,0]}/>
            </BarChart>
          </ResponsiveContainer>
        </div>
        <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:12, padding:16 }}>
          <div style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:600, fontSize:13, color:"#f59e0b", marginBottom:12 }}>🏆 Close Rate per Group</div>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={groupStats.map(g=>({name:g.label.replace("Cold Call","❄️").replace("Warm Call","🌡️"),closedPct:parseFloat(g.closedPct),pickupPct:parseFloat(g.pickupPct)}))} margin={{top:0,right:0,bottom:30,left:0}}>
              <CartesianGrid strokeDasharray="3 3" stroke="#1e3a5f"/>
              <XAxis dataKey="name" tick={{fill:"#64748b",fontSize:9}} angle={-20} textAnchor="end"/>
              <YAxis tick={{fill:"#64748b",fontSize:9}} unit="%"/>
              <Tooltip contentStyle={{background:"#0d1526",border:"1px solid #1e3a5f",borderRadius:8,color:"#e2e8f0",fontSize:11}} formatter={v=>[v+"%"]}/>
              <Legend wrapperStyle={{fontSize:10,color:"#94a3b8"}}/>
              <Bar dataKey="closedPct" name="Close %" fill="#22c55e" radius={[3,3,0,0]}/>
              <Bar dataKey="pickupPct" name="Pickup %" fill="#00d4ff" radius={[3,3,0,0]}/>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Group Tabs */}
      <div style={{ display:"flex", gap:8, flexWrap:"wrap", marginBottom:16 }}>
        {groups.map(g => {
          const cnt = getCallsForGroup(g.type,g.niche).length;
          const isCold = g.type === "Cold Call";
          return (
            <button key={g.key} onClick={()=>setActiveGroup(activeGroup===g.key?null:g.key)}
              style={{ background:activeGroup===g.key?(isCold?"#1e3a5f":"#451a03"):"#0d1526", color:activeGroup===g.key?(isCold?"#93c5fd":"#fcd34d"):"#64748b", border:`1px solid ${activeGroup===g.key?(isCold?"#3b82f6":"#f59e0b"):"#1e3a5f"}`, borderRadius:10, padding:"8px 16px", fontSize:12, fontWeight:600, display:"flex", alignItems:"center", gap:6 }}>
              {isCold?"❄️":"🌡️"} {g.label} <span style={{ background:"#0a1929", color:"#94a3b8", borderRadius:20, padding:"1px 7px", fontSize:10 }}>{cnt}</span>
            </button>
          );
        })}
      </div>

      {/* Active Group Call List */}
      {activeGroup && (
        <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:16, padding:20, marginBottom:20 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:16 }}>
            <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#fff", fontSize:15 }}>
              {activeG.type==="Cold Call"?"❄️":"🌡️"} {activeG.label} — {activeCalls.length} contacts
            </h3>
            <button onClick={()=>{setEditCall(blankCall(activeG.type,activeG.niche));setShowForm(true);}} style={{ background:"linear-gradient(135deg,#0066ff,#00d4ff)", color:"#000", border:"none", borderRadius:10, padding:"8px 16px", fontSize:12, fontWeight:700 }}>+ Add Call</button>
          </div>
          <div style={{ overflowX:"auto" }}>
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
              <thead><tr style={{ borderBottom:"1px solid #1e3a5f" }}>
                {["Name","Business","Phone","Service","Status","Notes","Date","Actions"].map(h=><th key={h} style={{ padding:"8px 10px", textAlign:"left", color:"#64748b", fontWeight:500, whiteSpace:"nowrap" }}>{h}</th>)}
              </tr></thead>
              <tbody>{activeCalls.length===0
                ? <tr><td colSpan={8} style={{ padding:20, textAlign:"center", color:"#64748b" }}>No calls yet. All your leads for this niche will appear here automatically.</td></tr>
                : activeCalls.map((c,i)=>(
                  <tr key={c.id} style={{ borderBottom:"1px solid #1e3a5f11", background:i%2===0?"#0d152611":"transparent" }}>
                    <td style={{ padding:"8px 10px", color:"#fff", fontWeight:500 }}>{c.name||"—"}</td>
                    <td style={{ padding:"8px 10px", color:"#94a3b8" }}>{c.businessName||"—"}</td>
                    <td style={{ padding:"8px 10px", color:"#64748b" }}>{c.phone||"—"}</td>
                    <td style={{ padding:"8px 10px" }}>{c.service?<span style={{ background:"#0c1e3d", color:"#00d4ff", border:"1px solid #00d4ff33", borderRadius:8, padding:"2px 8px", fontSize:10, fontWeight:600 }}>{c.service}</span>:<span style={{color:"#475569"}}>—</span>}</td>
                    <td style={{ padding:"8px 10px" }}>
                      <select value={c.status} onChange={e=>{
                        const updated = c.id.startsWith("auto_")
                          ? [...calls, {...c, id:genId(), status:e.target.value}]
                          : calls.map(x=>x.id===c.id?{...x,status:e.target.value}:x);
                        saveCalls(updated.filter(x=>!x.id.startsWith("auto_")));
                      }} style={{ background:CALL_STATUS_COLORS[c.status]+"22", color:CALL_STATUS_COLORS[c.status], border:`1px solid ${CALL_STATUS_COLORS[c.status]}44`, borderRadius:8, padding:"3px 8px", fontSize:11, fontWeight:600, width:"auto" }}>
                        {CALL_STATUSES.map(s=><option key={s} style={{background:"#0d1526",color:"#e2e8f0"}}>{s}</option>)}
                      </select>
                    </td>
                    <td style={{ padding:"8px 10px", color:"#64748b", fontSize:11, maxWidth:160 }}>{c.notes?<span title={c.notes}>{c.notes.slice(0,40)}{c.notes.length>40?"…":""}</span>:"—"}</td>
                    <td style={{ padding:"8px 10px", color:"#64748b", fontSize:11 }}>{c.dateAdded||"—"}</td>
                    <td style={{ padding:"8px 10px" }}>
                      <div style={{ display:"flex", gap:4 }}>
                        <button onClick={()=>{setEditCall({...c});setShowForm(true);}} style={{ background:"#1e3a5f", color:"#93c5fd", border:"none", borderRadius:5, padding:"4px 8px", fontSize:10 }}>Edit</button>
                        {!c.id.startsWith("auto_") && <button onClick={()=>deleteCall(c.id)} style={{ background:"#7f1d1d", color:"#fca5a5", border:"none", borderRadius:5, padding:"4px 8px", fontSize:10 }}>Del</button>}
                      </div>
                    </td>
                  </tr>
                ))
              }</tbody>
            </table>
          </div>
        </div>
      )}

      {/* Call Form Modal */}
      {showForm && editCall && (
        <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.85)", zIndex:200, display:"flex", alignItems:"center", justifyContent:"center", padding:20 }}>
          <div style={{ background:"#0d1526", border:"1px solid #1e3a5f", borderRadius:20, padding:28, width:"100%", maxWidth:500 }} className="fade-in">
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
              <h3 style={{ fontFamily:"'Space Grotesk',sans-serif", fontWeight:700, color:"#fff", fontSize:16 }}>📞 Call Record</h3>
              <button onClick={()=>setShowForm(false)} style={{ background:"none", border:"none", color:"#64748b", fontSize:22 }}>✕</button>
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
              <Field label="Name"><input value={editCall.name} onChange={e=>setEditCall(p=>({...p,name:e.target.value}))} placeholder="John Smith"/></Field>
              <Field label="Business"><input value={editCall.businessName} onChange={e=>setEditCall(p=>({...p,businessName:e.target.value}))} placeholder="Smith Cleaning"/></Field>
              <Field label="Phone"><input value={editCall.phone} onChange={e=>setEditCall(p=>({...p,phone:e.target.value}))} placeholder="+1 234 567 8900"/></Field>
              <Field label="Call Type"><select value={editCall.type} onChange={e=>setEditCall(p=>({...p,type:e.target.value}))}>{CALL_TYPES.map(t=><option key={t}>{t}</option>)}</select></Field>
              <Field label="Niche"><select value={editCall.niche} onChange={e=>setEditCall(p=>({...p,niche:e.target.value}))}>{(settings.niches||[]).map(n=><option key={n}>{n}</option>)}</select></Field>
              <Field label="Status"><select value={editCall.status} onChange={e=>setEditCall(p=>({...p,status:e.target.value}))} style={{ color:CALL_STATUS_COLORS[editCall.status], background:CALL_STATUS_COLORS[editCall.status]+"22" }}>{CALL_STATUSES.map(s=><option key={s} style={{background:"#0d1526",color:"#e2e8f0"}}>{s}</option>)}</select></Field>
              <Field label="Service"><select value={editCall.service||""} onChange={e=>setEditCall(p=>({...p,service:e.target.value}))}><option value="">— None —</option>{(settings.services||["Ads","Website"]).map(s=><option key={s}>{s}</option>)}</select></Field>
              <Field label={`Fee (${settings.currency||"$"})`}><input type="number" value={editCall.fee||""} onChange={e=>setEditCall(p=>({...p,fee:+e.target.value}))} placeholder={settings.dealValue||700}/></Field>
              <Field label="Date" style={{gridColumn:"span 2"}}><input type="date" value={editCall.dateAdded} onChange={e=>setEditCall(p=>({...p,dateAdded:e.target.value}))}/></Field>
            </div>
            <Field label="Notes — What did they say? What's the problem?" style={{marginTop:14}}>
              <textarea value={editCall.notes} onChange={e=>setEditCall(p=>({...p,notes:e.target.value}))} rows={3} placeholder="e.g. Said they're too busy right now, have a part-time cleaner, concerned about cost..."/>
            </Field>
            <div style={{ display:"flex", gap:10, marginTop:20 }}>
              <button onClick={saveCall} style={{ flex:1, background:"linear-gradient(135deg,#0066ff,#00d4ff)", color:"#000", border:"none", borderRadius:10, padding:13, fontSize:14, fontWeight:700 }}>Save Call Record</button>
              <button onClick={()=>setShowForm(false)} style={{ background:"#1e3a5f", color:"#94a3b8", border:"none", borderRadius:10, padding:"13px 20px" }}>Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── SETTINGS ─── */
function Settings({ settings, saveSettings, scripts, saveScripts }) {
  const [form, setForm] = useState({ ...settings });
  const [newNiche, setNewNiche] = useState("");
  const [newService, setNewService] = useState("");

  const save = () => saveSettings(form);
  const addNiche = () => { if (newNiche && !(form.niches||[]).includes(newNiche)) { setForm(p => ({ ...p, niches: [...(p.niches||[]), newNiche] })); setNewNiche(""); } };
  const removeNiche = (n) => setForm(p => ({ ...p, niches: p.niches.filter(x => x !== n) }));
  const addService = () => { if (newService && !(form.services||[]).includes(newService)) { setForm(p => ({ ...p, services: [...(p.services||[]), newService] })); setNewService(""); } };
  const removeService = (s) => setForm(p => ({ ...p, services: (p.services||[]).filter(x => x !== s) }));

  return (
    <div style={{ maxWidth: 700 }}>
      <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 700, color: "#fff", marginBottom: 20 }}>Settings</h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <SettingsCard title="Team">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Field label="Your Name"><input value={form.userName} onChange={e => setForm(p => ({ ...p, userName: e.target.value }))} placeholder="Ayan" /></Field>
            <Field label="Partner's Name"><input value={form.partnerName} onChange={e => setForm(p => ({ ...p, partnerName: e.target.value }))} placeholder="Rohan" /></Field>
          </div>
        </SettingsCard>

        <SettingsCard title="Targets & Revenue">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            <Field label="Daily DM Target (combined)"><input type="number" value={form.targetDMs} onChange={e => setForm(p => ({ ...p, targetDMs: +e.target.value }))} placeholder="90" /></Field>
            <Field label="Close Goal per Client"><input type="number" value={form.dealValue} onChange={e => setForm(p => ({ ...p, dealValue: +e.target.value }))} placeholder="700" /></Field>
            <Field label="Currency Symbol"><input value={form.currency} onChange={e => setForm(p => ({ ...p, currency: e.target.value }))} placeholder="$" /></Field>
          </div>
          <div style={{ background:"#0a1929", borderRadius:10, padding:12, marginTop:12, fontSize:12, color:"#64748b" }}>
            💡 Goal: <span style={{color:"#00d4ff",fontWeight:600}}>{form.targetDMs} DMs/day</span> between {form.userName} & {form.partnerName} · Close clients at <span style={{color:"#22c55e",fontWeight:600}}>{form.currency}{form.dealValue}</span> each
          </div>
        </SettingsCard>

        <SettingsCard title="Services (what you offer)">
          <div style={{ display: "flex", gap: 8, marginBottom: 12, flexWrap: "wrap" }}>
            {(form.services || []).map(s => (
              <span key={s} style={{ background: "#0c1e3d", color: "#00d4ff", border:"1px solid #00d4ff33", borderRadius: 20, padding: "4px 12px", fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}>
                {s}
                <button onClick={() => removeService(s)} style={{ background: "none", border: "none", color: "#ef4444", cursor: "pointer", fontSize: 14, padding: 0, lineHeight: 1 }}>×</button>
              </span>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <input value={newService} onChange={e => setNewService(e.target.value)} placeholder="Add service (e.g. SEO, Email Marketing)" onKeyDown={e => e.key === "Enter" && addService()} />
            <button onClick={addService} style={{ background: "#0c1e3d", color: "#00d4ff", border: "1px solid #00d4ff33", borderRadius: 8, padding: "8px 16px", fontSize: 13, whiteSpace: "nowrap" }}>Add</button>
          </div>
        </SettingsCard>

        <SettingsCard title="Niches">
          <div style={{ display: "flex", gap: 8, marginBottom: 12, flexWrap: "wrap" }}>
            {(form.niches || []).map(n => (
              <span key={n} style={{ background: "#1e3a5f", color: "#93c5fd", borderRadius: 20, padding: "4px 12px", fontSize: 12, display: "flex", alignItems: "center", gap: 6 }}>
                {n}
                <button onClick={() => removeNiche(n)} style={{ background: "none", border: "none", color: "#ef4444", cursor: "pointer", fontSize: 14, padding: 0, lineHeight: 1 }}>×</button>
              </span>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <input value={newNiche} onChange={e => setNewNiche(e.target.value)} placeholder="Add new niche (e.g. Restaurants)" onKeyDown={e => e.key === "Enter" && addNiche()} />
            <button onClick={addNiche} style={{ background: "#1e3a5f", color: "#93c5fd", border: "none", borderRadius: 8, padding: "8px 16px", fontSize: 13, whiteSpace: "nowrap" }}>Add</button>
          </div>
          <div style={{ fontSize:11, color:"#64748b", marginTop:10 }}>⚡ Adding a niche here automatically creates Cold Call & Warm Call groups for it.</div>
        </SettingsCard>

        <SettingsCard title="Data & Sync">
          <div style={{ background: "#052e16", border: "1px solid #22c55e44", borderRadius: 10, padding: 14, marginBottom: 14 }}>
            <div style={{ fontSize: 13, color: "#86efac", fontWeight: 600, marginBottom: 4 }}>✓ Live Sync Enabled</div>
            <div style={{ fontSize: 12, color: "#4ade80", opacity: 0.8 }}>All data is automatically shared between {form.userName} and {form.partnerName} in real-time.</div>
          </div>
          <div style={{ background: "#0c1e3d", border: "1px solid #3b82f644", borderRadius: 10, padding: 14 }}>
            <div style={{ fontSize: 13, color: "#93c5fd", fontWeight: 600, marginBottom: 4 }}>📂 Data Stored in Cloud</div>
            <div style={{ fontSize: 12, color: "#93c5fd", opacity: 0.8 }}>Your CRM data persists across sessions and devices. Saved automatically on every change.</div>
          </div>
        </SettingsCard>

        <button onClick={save} style={{ background: "linear-gradient(135deg, #0066ff, #00d4ff)", color: "#000", border: "none", borderRadius: 12, padding: "14px", fontSize: 15, fontWeight: 700, fontFamily: "'Space Grotesk', sans-serif", width: "100%" }}>
          Save All Settings
        </button>
      </div>
    </div>
  );
}

function SettingsCard({ title, children }) {
  return (
    <div style={{ background: "#0d1526", border: "1px solid #1e3a5f", borderRadius: 14, padding: 20 }}>
      <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: "#00d4ff", marginBottom: 16 }}>{title}</div>
      {children}
    </div>
  );
}

function Field({ label, children, style }) {
  return (
    <div style={style}>
      <label style={{ display: "block", fontSize: 11, color: "#64748b", fontWeight: 500, marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.5px" }}>{label}</label>
      {children}
    </div>
  );
}