/**
 * ============================================================
 *  ESTATE PLATFORM — Full Stack Frontend
 *  A real estate plot management system for Nigerian developers
 * ============================================================
 *
 *  ARCHITECTURE OVERVIEW
 *  ─────────────────────
 *  1. CONSTANTS & THEME         — Design tokens, colors, fonts
 *  2. MOCK DATA & STATE SEED    — Initial app state (replace with API calls in production)
 *  3. UTILITY FUNCTIONS         — Formatters, helpers, date utils
 *  4. CONTEXT (AppContext)      — Global state: auth, estates, plots, notifications
 *  5. HOOKS                     — useNotifications, usePaymentDue
 *  6. SHARED UI COMPONENTS      — Button, Badge, Modal, Input, Card, Table, etc.
 *  7. AUTH VIEWS                — Login screen
 *  8. PRIMARY DEVELOPER VIEWS
 *       8a. Dashboard           — KPIs, revenue summary, recent activity
 *       8b. Estate Manager      — Create/open estates, upload layout
 *       8c. Plot Grid           — Visual estate map (the "seat selector")
 *       8d. Payment Approvals   — Approve/reject payment submissions
 *       8e. Developer Accounts  — Create, disable, allocate plots to secondary devs
 *       8f. Sales Records       — Full transaction history
 *       8g. Notifications       — Payment due alerts, approvals
 *  9. SECONDARY DEVELOPER VIEWS
 *       9a. My Dashboard        — Their KPIs only
 *       9b. Estate Map          — View-only map + submit payments
 *       9c. My Sales            — Their own transaction history
 *       9d. Submit Payment      — Paystack / bank transfer flow
 *  10. APP SHELL               — Sidebar, TopBar, routing
 *  11. ROOT EXPORT             — <App />
 *
 *  PRODUCTION NOTES (for the developer inheriting this)
 *  ─────────────────────────────────────────────────────
 *  - Replace AppContext mock state with real API calls (e.g. Supabase, Firebase, or custom Node/Express backend)
 *  - Paystack integration: swap the mock handlePaystackPay() with the real Paystack Popup JS SDK
 *  - Auth: replace mock login with JWT-based auth (store token in httpOnly cookie, not localStorage)
 *  - Image uploads: hook up to Cloudinary or S3 for estate layout images
 *  - Notifications: connect to a real-time service (e.g. Pusher, Supabase Realtime, or WebSockets)
 *  - This file can be split into separate component files following the section numbers above
 */

import { useState, useContext, createContext, useCallback, useEffect, useRef } from "react";

// ============================================================
// SECTION 1: CONSTANTS & THEME
// ============================================================

const THEME = {
  // Core palette — warm earth tones evoke Nigerian soil, gold evokes prosperity
  bg:          "#F7F4EF",
  surface:     "#FFFFFF",
  surfaceAlt:  "#F0ECE5",
  border:      "#E4DDD3",
  borderDark:  "#C8BFB0",

  // Brand
  primary:     "#1C3A2B",   // Deep forest green
  primaryHov:  "#254D3A",
  gold:        "#C8923A",   // Warm gold accent
  goldLight:   "#F5E6D0",

  // Status colors
  available:   { bg: "#EAF5EE", text: "#1A6636", dot: "#2DB05A", border: "#B8DECA" },
  reserved:    { bg: "#FEF7E6", text: "#7A5200", dot: "#F0A500", border: "#F5D88A" },
  part_pay:    { bg: "#E8EFFE", text: "#1A3580", dot: "#3D6FE8", border: "#A8BEF5" },
  full_pay:    { bg: "#FDEAEA", text: "#8A1A1A", dot: "#D93030", border: "#F5AAAA" },
  pending:     { bg: "#FEF3E6", text: "#7A4200", dot: "#E87830", border: "#F5C8A0" },

  // Typography
  fontDisplay: "'Playfair Display', Georgia, serif",
  fontBody:    "'DM Sans', system-ui, sans-serif",
  fontMono:    "'DM Mono', 'Courier New', monospace",

  // Shadows
  shadowSm:  "0 1px 4px rgba(28,58,43,0.08)",
  shadowMd:  "0 4px 16px rgba(28,58,43,0.10)",
  shadowLg:  "0 12px 40px rgba(28,58,43,0.14)",
};

const PLOT_SIZE_CONFIG = {
  "180sqm":  { label: "180 m²",  baseColor: "#E8F0D8", borderColor: "#8AAA58" },
  "250sqm":  { label: "250 m²",  baseColor: "#D8EAF0", borderColor: "#5890AA" },
  "500sqm":  { label: "500 m²",  baseColor: "#EAD8F0", borderColor: "#9058AA" },
  "1000sqm": { label: "1,000 m²",baseColor: "#F0E4D8", borderColor: "#AA7058" },
};

const PAYMENT_METHODS = [
  { id: "paystack",      label: "Paystack (Card / USSD / Transfer)" },
  { id: "bank_transfer", label: "Direct Bank Transfer" },
];

const PAYMENT_PLAN_TYPES = [
  { id: "outright",    label: "Outright Payment" },
  { id: "6months",     label: "6-Month Installment" },
  { id: "12months",    label: "12-Month Installment" },
  { id: "24months",    label: "24-Month Installment" },
  { id: "custom",      label: "Custom Plan" },
];

const NAV_PRIMARY = [
  { id: "dashboard",    label: "Dashboard",       icon: "⬡" },
  { id: "estates",      label: "My Estates",      icon: "🏘" },
  { id: "approvals",    label: "Approvals",       icon: "✅", badge: "approvals" },
  { id: "developers",   label: "Developers",      icon: "👥" },
  { id: "sales",        label: "Sales Records",   icon: "📊" },
  { id: "notifications",label: "Notifications",   icon: "🔔", badge: "notifications" },
];

const NAV_SECONDARY = [
  { id: "sec_dashboard",label: "Dashboard",       icon: "⬡" },
  { id: "sec_estate",   label: "Estate Map",      icon: "🏘" },
  { id: "sec_sales",    label: "My Sales",        icon: "📊" },
  { id: "sec_notifications", label: "Alerts",     icon: "🔔", badge: "notifications" },
];


// ============================================================
// SECTION 2: MOCK DATA & STATE SEED
// ============================================================
// In production: fetch this from your API on login

const MOCK_PRIMARY_DEV = {
  id:          "primary_001",
  role:        "primary",
  name:        "Okafor Holdings Ltd",
  email:       "admin@okaforholdings.com",
  phone:       "+234 803 000 0001",
  logoInitial: "OH",
};

const MOCK_SECONDARY_DEVS = [
  { id: "sec_001", role: "secondary", name: "Apex Realty",     email: "apex@email.com",     phone: "+234 803 111 0001", color: "#C8923A", active: true,  passwordHash: "pass123", allocatedPlots: [] },
  { id: "sec_002", role: "secondary", name: "Greenfield Homes",email: "green@email.com",    phone: "+234 803 111 0002", color: "#2D8A5F", active: true,  passwordHash: "pass123", allocatedPlots: [] },
  { id: "sec_003", role: "secondary", name: "Lagos Prestige",  email: "prestige@email.com", phone: "+234 803 111 0003", color: "#3D6FE8", active: false, passwordHash: "pass123", allocatedPlots: [] },
  { id: "sec_004", role: "secondary", name: "Sunrise Plots",   email: "sunrise@email.com",  phone: "+234 803 111 0004", color: "#C83A6F", active: true,  passwordHash: "pass123", allocatedPlots: [] },
];

// Generate a realistic 12x14 estate grid
function generateEstateGrid(estateId) {
  const plots = [];
  let plotNum = 1;

  const layout = [
    // Each row: array of cell types. "R"=road, "A"=amenity, sizes=plot type
    ["R","R","R","R","R","R","R","R","R","R","R","R","R","R"],
    ["R","180sqm","180sqm","180sqm","180sqm","180sqm","R","180sqm","180sqm","180sqm","180sqm","180sqm","180sqm","R"],
    ["R","180sqm","180sqm","180sqm","180sqm","180sqm","R","180sqm","180sqm","180sqm","180sqm","180sqm","180sqm","R"],
    ["R","180sqm","180sqm","180sqm","180sqm","180sqm","R","180sqm","180sqm","180sqm","180sqm","180sqm","180sqm","R"],
    ["R","R","R","R","R","R","R","R","R","R","R","R","R","R"],
    ["R","250sqm","250sqm","250sqm","250sqm","250sqm","R","500sqm","500sqm","500sqm","500sqm","A","A","R"],
    ["R","250sqm","250sqm","250sqm","250sqm","250sqm","R","500sqm","500sqm","500sqm","500sqm","A","A","R"],
    ["R","250sqm","250sqm","250sqm","250sqm","250sqm","R","500sqm","500sqm","500sqm","500sqm","A","A","R"],
    ["R","R","R","R","R","R","R","R","R","R","R","R","R","R"],
    ["R","1000sqm","1000sqm","1000sqm","R","250sqm","250sqm","250sqm","250sqm","R","180sqm","180sqm","180sqm","R"],
    ["R","1000sqm","1000sqm","1000sqm","R","250sqm","250sqm","250sqm","250sqm","R","180sqm","180sqm","180sqm","R"],
    ["R","1000sqm","1000sqm","1000sqm","R","250sqm","250sqm","250sqm","250sqm","R","180sqm","180sqm","180sqm","R"],
    ["R","R","R","R","R","R","R","R","R","R","R","R","R","R"],
  ];

  layout.forEach((row, ri) => {
    row.forEach((cell, ci) => {
      if (cell === "R" || cell === "A") return;
      plots.push({
        id:            `${estateId}_P${String(plotNum).padStart(3,"0")}`,
        estateId,
        plotNumber:    plotNum++,
        row:           ri,
        col:           ci,
        size:          cell,
        status:        "available",   // available | reserved | part_pay | full_pay
        assignedDevId: null,          // which secondary dev "owns" this plot slot
        buyerName:     null,
        buyerPhone:    null,
        paymentPlan:   null,
        planStartDate: null,
        planEndDate:   null,
        totalPrice:    cell === "180sqm" ? 8500000
                     : cell === "250sqm" ? 12000000
                     : cell === "500sqm" ? 22000000
                     : 40000000,
        amountPaid:    0,
        transactions:  [],            // Array of payment records
      });
    });
  });

  return { layout, plots };
}

const { plots: seed_plots } = generateEstateGrid("est_001");

const MOCK_ESTATES = [
  {
    id:          "est_001",
    name:        "Palm Grove Estate",
    location:    "Lekki Phase 2, Lagos",
    totalHa:     10,
    status:      "active",
    layoutImage: null,   // URL to uploaded image in production
    createdAt:   "2024-01-15",
    plots:       seed_plots,
  },
];

const MOCK_NOTIFICATIONS_SEED = [
  {
    id:     "notif_001",
    type:   "payment_due",
    title:  "Payment Plan Expiring Soon",
    body:   "Buyer Chidi Okeke's 12-month plan on Plot P004 expires in 7 days.",
    plotId: "est_001_P004",
    read:   false,
    date:   new Date().toISOString(),
    for:    ["primary_001", "sec_001"],
  },
];

const MOCK_PENDING_APPROVALS_SEED = [
  {
    id:            "appr_001",
    plotId:        "est_001_P007",
    estateId:      "est_001",
    submittedBy:   "sec_001",
    buyerName:     "Emeka Nwachukwu",
    buyerPhone:    "+234 803 222 0001",
    amount:        4250000,
    method:        "bank_transfer",
    paymentPlan:   "6months",
    planStartDate: "2025-05-01",
    planEndDate:   "2025-11-01",
    proofNote:     "Transfer made to GTBank account. Teller ref: GTB2025042200184",
    submittedAt:   new Date(Date.now() - 3600000).toISOString(),
    status:        "pending",   // pending | approved | rejected
  },
];


// ============================================================
// SECTION 3: UTILITY FUNCTIONS
// ============================================================

/** Format number as Nigerian Naira */
const formatNaira = (n) =>
  "₦" + Number(n || 0).toLocaleString("en-NG");

/** Format ISO date string to readable form */
const formatDate = (iso) => {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("en-NG", {
    day: "numeric", month: "short", year: "numeric",
  });
};

/** Calculate days remaining from today to a date string */
const daysUntil = (dateStr) => {
  if (!dateStr) return null;
  const diff = new Date(dateStr) - new Date();
  return Math.ceil(diff / (1000 * 60 * 60 * 24));
};

/** Truncate long strings with ellipsis */
const truncate = (str, len = 24) =>
  str && str.length > len ? str.slice(0, len) + "…" : str;

/** Get status config object from THEME */
const getStatusConfig = (status) => ({
  available: THEME.available,
  reserved:  THEME.reserved,
  part_pay:  THEME.part_pay,
  full_pay:  THEME.full_pay,
  pending:   THEME.pending,
}[status] || THEME.available);

/** Compute payment percentage */
const payPct = (plot) =>
  plot.totalPrice > 0
    ? Math.min(100, Math.round((plot.amountPaid / plot.totalPrice) * 100))
    : 0;

/** Get initials from a name */
const initials = (name = "") =>
  name.split(" ").slice(0, 2).map(w => w[0]).join("").toUpperCase();


// ============================================================
// SECTION 4: APP CONTEXT (Global State)
// ============================================================
// In production: replace setState calls with API mutations + optimistic updates

const AppContext = createContext(null);

function AppProvider({ children }) {
  // ── Auth ──────────────────────────────────────────────────
  const [currentUser,    setCurrentUser]    = useState(null);

  // ── Core Data ─────────────────────────────────────────────
  const [estates,        setEstates]        = useState(MOCK_ESTATES);
  const [developers,     setDevelopers]     = useState(MOCK_SECONDARY_DEVS);
  const [approvals,      setApprovals]      = useState(MOCK_PENDING_APPROVALS_SEED);
  const [notifications,  setNotifications]  = useState(MOCK_NOTIFICATIONS_SEED);

  // ── Navigation ────────────────────────────────────────────
  const [activePage,     setActivePage]     = useState("dashboard");
  const [activeEstateId, setActiveEstateId] = useState("est_001");

  // ── UI State ──────────────────────────────────────────────
  const [selectedPlot,   setSelectedPlot]   = useState(null);
  const [toast,          setToast]          = useState(null);

  // ─── Helpers: show a toast message ──────────────────────
  const showToast = useCallback((message, type = "success") => {
    setToast({ message, type, id: Date.now() });
    setTimeout(() => setToast(null), 3500);
  }, []);

  // ─── Auth Actions ─────────────────────────────────────────
  const login = useCallback((email, password) => {
    // Primary developer login
    if (email === MOCK_PRIMARY_DEV.email && password === "admin123") {
      setCurrentUser(MOCK_PRIMARY_DEV);
      setActivePage("dashboard");
      return true;
    }
    // Secondary developer login
    const dev = MOCK_SECONDARY_DEVS.find(
      d => d.email === email && d.passwordHash === password
    );
    if (dev) {
      if (!dev.active) return "disabled";
      setCurrentUser(dev);
      setActivePage("sec_dashboard");
      return true;
    }
    return false;
  }, []);

  const logout = useCallback(() => {
    setCurrentUser(null);
    setActivePage("dashboard");
    setSelectedPlot(null);
  }, []);

  // ─── Estate Actions ───────────────────────────────────────
  const createEstate = useCallback((estateData) => {
    const id = `est_${Date.now()}`;
    const { plots } = generateEstateGrid(id);
    const newEstate = {
      id,
      ...estateData,
      status:    "active",
      createdAt: new Date().toISOString().split("T")[0],
      plots,
    };
    setEstates(prev => [...prev, newEstate]);
    showToast(`Estate "${estateData.name}" created successfully!`);
    return id;
  }, [showToast]);

  const updatePlotPrice = useCallback((estateId, size, newPrice) => {
    setEstates(prev => prev.map(e => {
      if (e.id !== estateId) return e;
      return {
        ...e,
        plots: e.plots.map(p =>
          p.size === size ? { ...p, totalPrice: newPrice } : p
        ),
      };
    }));
    showToast("Plot prices updated.");
  }, [showToast]);

  // ─── Plot Actions ─────────────────────────────────────────

  /** Primary dev directly updates a plot (e.g. after approving payment) */
  const updatePlot = useCallback((estateId, plotId, changes) => {
    setEstates(prev => prev.map(e => {
      if (e.id !== estateId) return e;
      return {
        ...e,
        plots: e.plots.map(p =>
          p.id === plotId ? { ...p, ...changes } : p
        ),
      };
    }));
  }, []);

  // ─── Approval Actions ─────────────────────────────────────

  /** Secondary dev submits a payment for approval */
  const submitPaymentForApproval = useCallback((submission) => {
    const newApproval = {
      id:          `appr_${Date.now()}`,
      submittedAt: new Date().toISOString(),
      status:      "pending",
      ...submission,
    };
    setApprovals(prev => [...prev, newApproval]);
    // Also mark plot as "pending" visually
    updatePlot(submission.estateId, submission.plotId, { status: "reserved" });
    showToast("Payment submitted for approval.");
  }, [updatePlot, showToast]);

  /** Primary dev approves a pending payment */
  const approvePayment = useCallback((approvalId) => {
    const appr = approvals.find(a => a.id === approvalId);
    if (!appr) return;

    // Find current plot
    const estate = estates.find(e => e.id === appr.estateId);
    const plot   = estate?.plots.find(p => p.id === appr.plotId);
    if (!plot) return;

    const newAmountPaid = (plot.amountPaid || 0) + appr.amount;
    const newStatus     = newAmountPaid >= plot.totalPrice ? "full_pay" : "part_pay";

    const transaction = {
      id:          `txn_${Date.now()}`,
      approvalId:  appr.id,
      amount:      appr.amount,
      method:      appr.method,
      devId:       appr.submittedBy,
      date:        new Date().toISOString(),
      note:        appr.proofNote,
    };

    updatePlot(appr.estateId, appr.plotId, {
      status:        newStatus,
      buyerName:     appr.buyerName,
      buyerPhone:    appr.buyerPhone,
      paymentPlan:   appr.paymentPlan,
      planStartDate: appr.planStartDate,
      planEndDate:   appr.planEndDate,
      assignedDevId: appr.submittedBy,
      amountPaid:    newAmountPaid,
      transactions:  [...(plot.transactions || []), transaction],
    });

    setApprovals(prev =>
      prev.map(a => a.id === approvalId ? { ...a, status: "approved" } : a)
    );
    showToast("Payment approved ✓");
  }, [approvals, estates, updatePlot, showToast]);

  /** Primary dev rejects a pending payment */
  const rejectPayment = useCallback((approvalId, reason) => {
    setApprovals(prev =>
      prev.map(a => a.id === approvalId ? { ...a, status: "rejected", rejectReason: reason } : a)
    );
    const appr = approvals.find(a => a.id === approvalId);
    if (appr) updatePlot(appr.estateId, appr.plotId, { status: "available" });
    showToast("Payment rejected.", "error");
  }, [approvals, updatePlot, showToast]);

  // ─── Developer Account Actions ────────────────────────────

  /** Primary dev creates a new secondary developer account */
  const createDeveloper = useCallback((devData) => {
    const newDev = {
      id:             `sec_${Date.now()}`,
      role:           "secondary",
      active:         true,
      passwordHash:   devData.password,   // In production: hash this server-side
      allocatedPlots: devData.allocatedPlots || [],
      color:          devData.color || "#888888",
      ...devData,
    };
    setDevelopers(prev => [...prev, newDev]);
    showToast(`Account created for ${devData.name}`);
  }, [showToast]);

  /** Primary dev toggles a secondary dev's active status */
  const toggleDeveloperStatus = useCallback((devId) => {
    setDevelopers(prev =>
      prev.map(d => d.id === devId ? { ...d, active: !d.active } : d)
    );
  }, []);

  /** Primary dev allocates specific plots to a developer */
  const allocatePlots = useCallback((devId, plotIds) => {
    setDevelopers(prev =>
      prev.map(d => d.id === devId ? { ...d, allocatedPlots: plotIds } : d)
    );
    showToast("Plots allocated successfully.");
  }, [showToast]);

  // ─── Notification Actions ─────────────────────────────────
  const markNotifRead = useCallback((notifId) => {
    setNotifications(prev =>
      prev.map(n => n.id === notifId ? { ...n, read: true } : n)
    );
  }, []);

  // ─── Derived Values ───────────────────────────────────────
  const activeEstate    = estates.find(e => e.id === activeEstateId) || estates[0];
  const pendingCount    = approvals.filter(a => a.status === "pending").length;
  const unreadNotifCount = notifications.filter(n =>
    !n.read && (n.for?.includes(currentUser?.id))
  ).length;

  // ─── Context Value ────────────────────────────────────────
  const value = {
    // State
    currentUser, estates, developers, approvals, notifications,
    activePage, activeEstate, activeEstateId, selectedPlot, toast,
    pendingCount, unreadNotifCount,

    // Setters / Actions
    setActivePage, setActiveEstateId, setSelectedPlot,
    login, logout,
    createEstate, updatePlotPrice,
    updatePlot, submitPaymentForApproval, approvePayment, rejectPayment,
    createDeveloper, toggleDeveloperStatus, allocatePlots,
    markNotifRead, showToast,
  };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

/** Hook for easy context access */
const useApp = () => useContext(AppContext);


// ============================================================
// SECTION 5: HOOKS
// ============================================================

/** Check for plans expiring within 14 days and surface notifications */
function usePaymentDueChecker() {
  const { estates, notifications, setNotifications, currentUser } = useApp();

  useEffect(() => {
    if (!currentUser) return;
    estates.forEach(estate => {
      estate.plots.forEach(plot => {
        if (!plot.planEndDate || plot.status === "full_pay") return;
        const days = daysUntil(plot.planEndDate);
        if (days !== null && days <= 14 && days >= 0) {
          const existsAlready = notifications.some(n =>
            n.plotId === plot.id && n.type === "payment_due"
          );
          if (!existsAlready) {
            setNotifications(prev => [...prev, {
              id:     `notif_auto_${plot.id}`,
              type:   "payment_due",
              title:  "Payment Plan Expiring",
              body:   `${plot.buyerName || "A buyer"}'s plan on Plot ${plot.id} expires in ${days} day(s).`,
              plotId: plot.id,
              read:   false,
              date:   new Date().toISOString(),
              for:    ["primary_001", plot.assignedDevId].filter(Boolean),
            }]);
          }
        }
      });
    });
  }, [estates, currentUser]);
}


// ============================================================
// SECTION 6: SHARED UI COMPONENTS
// ============================================================

// ── Font Injector ─────────────────────────────────────────────
function FontLoader() {
  useEffect(() => {
    if (document.getElementById("estate-fonts")) return;
    const link = document.createElement("link");
    link.id   = "estate-fonts";
    link.rel  = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap";
    document.head.appendChild(link);
  }, []);
  return null;
}

// ── Toast Notification ────────────────────────────────────────
function Toast() {
  const { toast } = useApp();
  if (!toast) return null;
  return (
    <div style={{
      position: "fixed", bottom: 28, right: 28, zIndex: 9999,
      padding: "12px 20px",
      background: toast.type === "error" ? "#8A1A1A" : THEME.primary,
      color: "#fff",
      borderRadius: 10,
      fontFamily: THEME.fontBody, fontSize: 13, fontWeight: 500,
      boxShadow: THEME.shadowLg,
      animation: "slideUp 0.3s ease",
      display: "flex", alignItems: "center", gap: 8,
    }}>
      <span>{toast.type === "error" ? "✕" : "✓"}</span>
      {toast.message}
    </div>
  );
}

// ── Button ────────────────────────────────────────────────────
function Btn({ children, onClick, variant = "primary", size = "md", disabled, style: extraStyle }) {
  const variants = {
    primary:  { bg: THEME.primary,  color: "#fff",      border: "none" },
    gold:     { bg: THEME.gold,     color: "#fff",      border: "none" },
    outline:  { bg: "transparent",  color: THEME.primary, border: `1.5px solid ${THEME.primary}` },
    ghost:    { bg: "transparent",  color: THEME.primary, border: "none" },
    danger:   { bg: "#8A1A1A",      color: "#fff",      border: "none" },
  };
  const sizes = {
    sm: { padding: "6px 12px",  fontSize: 12 },
    md: { padding: "9px 18px",  fontSize: 13 },
    lg: { padding: "12px 24px", fontSize: 14 },
  };
  const v = variants[variant];
  const s = sizes[size];
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        ...v, ...s,
        borderRadius: 8, cursor: disabled ? "not-allowed" : "pointer",
        fontFamily: THEME.fontBody, fontWeight: 600,
        opacity: disabled ? 0.45 : 1,
        transition: "opacity 0.15s, transform 0.1s",
        display: "inline-flex", alignItems: "center", gap: 6,
        whiteSpace: "nowrap",
        ...extraStyle,
      }}
    >
      {children}
    </button>
  );
}

// ── Text Input ────────────────────────────────────────────────
function Input({ label, value, onChange, type = "text", placeholder, required, style: extraStyle }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4, ...extraStyle }}>
      {label && (
        <label style={{
          fontSize: 11, fontWeight: 600, color: "#666",
          fontFamily: THEME.fontBody, textTransform: "uppercase", letterSpacing: 0.4,
        }}>
          {label}{required && <span style={{ color: "#E84A4A" }}> *</span>}
        </label>
      )}
      <input
        type={type} value={value} onChange={onChange}
        placeholder={placeholder}
        style={{
          padding: "9px 12px", border: `1.5px solid ${THEME.border}`,
          borderRadius: 8, fontFamily: THEME.fontBody, fontSize: 13,
          color: THEME.primary, background: THEME.surface,
          outline: "none", width: "100%", boxSizing: "border-box",
          transition: "border-color 0.15s",
        }}
        onFocus={e => e.target.style.borderColor = THEME.gold}
        onBlur={e  => e.target.style.borderColor = THEME.border}
      />
    </div>
  );
}

// ── Select ────────────────────────────────────────────────────
function Select({ label, value, onChange, options, required }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {label && (
        <label style={{
          fontSize: 11, fontWeight: 600, color: "#666",
          fontFamily: THEME.fontBody, textTransform: "uppercase", letterSpacing: 0.4,
        }}>
          {label}{required && <span style={{ color: "#E84A4A" }}> *</span>}
        </label>
      )}
      <select
        value={value} onChange={onChange}
        style={{
          padding: "9px 12px", border: `1.5px solid ${THEME.border}`,
          borderRadius: 8, fontFamily: THEME.fontBody, fontSize: 13,
          color: THEME.primary, background: THEME.surface,
          outline: "none", cursor: "pointer", width: "100%",
        }}
      >
        {options.map(opt => (
          <option key={opt.value} value={opt.value}>{opt.label}</option>
        ))}
      </select>
    </div>
  );
}

// ── Modal ─────────────────────────────────────────────────────
function Modal({ title, onClose, children, width = 520 }) {
  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(28,58,43,0.45)",
      zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, backdropFilter: "blur(2px)",
    }}>
      <div style={{
        background: THEME.surface, borderRadius: 14,
        width: "100%", maxWidth: width, maxHeight: "90vh",
        overflow: "hidden", display: "flex", flexDirection: "column",
        boxShadow: THEME.shadowLg,
      }}>
        {/* Modal Header */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "18px 24px", borderBottom: `1px solid ${THEME.border}`,
        }}>
          <h3 style={{
            margin: 0, fontFamily: THEME.fontDisplay,
            fontSize: 18, color: THEME.primary,
          }}>{title}</h3>
          <button onClick={onClose} style={{
            background: "none", border: "none", cursor: "pointer",
            fontSize: 20, color: "#999", lineHeight: 1, padding: 4,
          }}>✕</button>
        </div>
        {/* Modal Body */}
        <div style={{ padding: "20px 24px", overflowY: "auto" }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ── Card ──────────────────────────────────────────────────────
function Card({ children, style: extraStyle }) {
  return (
    <div style={{
      background: THEME.surface, borderRadius: 12,
      border: `1px solid ${THEME.border}`, padding: "20px 22px",
      boxShadow: THEME.shadowSm,
      ...extraStyle,
    }}>
      {children}
    </div>
  );
}

// ── KPI Stat Card ─────────────────────────────────────────────
function StatCard({ label, value, sub, color }) {
  return (
    <Card style={{ textAlign: "center", padding: "18px 16px" }}>
      <div style={{
        fontFamily: THEME.fontDisplay, fontSize: 26, fontWeight: 700,
        color: color || THEME.primary, lineHeight: 1, marginBottom: 4,
      }}>{value}</div>
      <div style={{ fontFamily: THEME.fontBody, fontSize: 12, fontWeight: 600, color: "#777" }}>
        {label}
      </div>
      {sub && (
        <div style={{ fontFamily: THEME.fontMono, fontSize: 10, color: "#aaa", marginTop: 4 }}>
          {sub}
        </div>
      )}
    </Card>
  );
}

// ── Status Badge ──────────────────────────────────────────────
function StatusBadge({ status, label }) {
  const cfg = getStatusConfig(status);
  const labels = {
    available: "Available", reserved: "Reserved",
    part_pay: "Part Payment", full_pay: "Fully Sold", pending: "Pending",
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      padding: "3px 9px", borderRadius: 99, fontSize: 11, fontWeight: 600,
      background: cfg.bg, color: cfg.text, border: `1px solid ${cfg.border}`,
      fontFamily: THEME.fontBody, whiteSpace: "nowrap",
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: cfg.dot, flexShrink: 0 }} />
      {label || labels[status] || status}
    </span>
  );
}

// ── Developer Avatar Badge ─────────────────────────────────────
function DevAvatar({ dev, size = 28 }) {
  if (!dev) return null;
  return (
    <span title={dev.name} style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: size, height: size, borderRadius: "50%",
      background: dev.color || THEME.gold, color: "#fff",
      fontFamily: THEME.fontMono, fontWeight: 700,
      fontSize: Math.max(8, size * 0.35), flexShrink: 0,
      border: "2px solid rgba(255,255,255,0.5)",
    }}>
      {initials(dev.name)}
    </span>
  );
}

// ── Payment Progress Bar ──────────────────────────────────────
function PayBar({ plot }) {
  const pct = payPct(plot);
  const color = pct === 100 ? THEME.full_pay.dot : pct > 0 ? THEME.part_pay.dot : THEME.available.dot;
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "#888", marginBottom: 3 }}>
        <span>{formatNaira(plot.amountPaid)}</span>
        <span>{pct}%</span>
      </div>
      <div style={{ height: 5, background: THEME.surfaceAlt, borderRadius: 99, overflow: "hidden" }}>
        <div style={{
          height: "100%", width: `${pct}%`, borderRadius: 99,
          background: color, transition: "width 0.4s ease",
        }} />
      </div>
    </div>
  );
}

// ── Section Header ────────────────────────────────────────────
function SectionHeader({ title, subtitle, action }) {
  return (
    <div style={{
      display: "flex", alignItems: "flex-start",
      justifyContent: "space-between", marginBottom: 20,
    }}>
      <div>
        <h2 style={{
          margin: 0, fontFamily: THEME.fontDisplay,
          fontSize: 22, color: THEME.primary, fontWeight: 700,
        }}>{title}</h2>
        {subtitle && (
          <p style={{ margin: "4px 0 0", color: "#888", fontSize: 13, fontFamily: THEME.fontBody }}>
            {subtitle}
          </p>
        )}
      </div>
      {action}
    </div>
  );
}

// ── Empty State ───────────────────────────────────────────────
function EmptyState({ icon = "📭", message }) {
  return (
    <div style={{
      textAlign: "center", padding: "48px 24px",
      color: "#bbb", fontFamily: THEME.fontBody, fontSize: 14,
    }}>
      <div style={{ fontSize: 36, marginBottom: 10 }}>{icon}</div>
      {message}
    </div>
  );
}


// ============================================================
// SECTION 7: AUTH — LOGIN SCREEN
// ============================================================

function LoginScreen() {
  const { login } = useApp();
  const [email,   setEmail]   = useState("");
  const [password,setPassword]= useState("");
  const [error,   setError]   = useState("");
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    if (!email || !password) { setError("Please fill in all fields."); return; }
    setLoading(true);
    setTimeout(() => {
      const result = login(email, password);
      setLoading(false);
      if (result === "disabled")   setError("This account has been disabled. Contact the primary developer.");
      else if (result === false)   setError("Invalid email or password.");
    }, 600);
  };

  return (
    <div style={{
      minHeight: "100vh", display: "flex",
      background: `linear-gradient(135deg, ${THEME.primary} 0%, #0F2019 60%, #1C3A2B 100%)`,
    }}>
      {/* Left — Branding Panel */}
      <div style={{
        flex: 1, display: "flex", flexDirection: "column",
        justifyContent: "center", padding: "60px 80px",
        borderRight: "1px solid rgba(255,255,255,0.08)",
      }}>
        <div style={{ marginBottom: 48 }}>
          <div style={{
            fontFamily: THEME.fontDisplay, fontSize: 13, color: THEME.gold,
            letterSpacing: 3, textTransform: "uppercase", marginBottom: 16,
          }}>
            Estate Platform
          </div>
          <h1 style={{
            fontFamily: THEME.fontDisplay, fontSize: 44, color: "#fff",
            margin: 0, fontWeight: 700, lineHeight: 1.15,
          }}>
            Okafor<br />Holdings Ltd
          </h1>
          <p style={{
            fontFamily: THEME.fontBody, color: "rgba(255,255,255,0.5)",
            fontSize: 15, marginTop: 16, lineHeight: 1.7, maxWidth: 340,
          }}>
            Manage your estates, track plot sales, and coordinate your
            developer network — all in one place.
          </p>
        </div>

        {/* Feature bullets */}
        {[
          "Visual estate map with real-time plot status",
          "Secondary developer account management",
          "Payment approval workflow",
          "Automatic payment plan reminders",
        ].map(f => (
          <div key={f} style={{
            display: "flex", alignItems: "center", gap: 10,
            marginBottom: 10, color: "rgba(255,255,255,0.65)",
            fontFamily: THEME.fontBody, fontSize: 13,
          }}>
            <span style={{ color: THEME.gold, fontSize: 16 }}>✓</span>
            {f}
          </div>
        ))}
      </div>

      {/* Right — Login Form */}
      <div style={{
        width: 420, display: "flex", alignItems: "center",
        justifyContent: "center", padding: "40px 40px",
      }}>
        <div style={{
          background: THEME.surface, borderRadius: 16,
          padding: "36px 32px", width: "100%",
          boxShadow: "0 24px 64px rgba(0,0,0,0.4)",
        }}>
          <h2 style={{
            fontFamily: THEME.fontDisplay, fontSize: 22,
            color: THEME.primary, margin: "0 0 6px",
          }}>Sign In</h2>
          <p style={{
            fontFamily: THEME.fontBody, fontSize: 12, color: "#999", margin: "0 0 24px",
          }}>
            Primary: admin@okaforholdings.com / admin123<br />
            Secondary: apex@email.com / pass123
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Input label="Email Address" type="email" value={email}
              onChange={e => setEmail(e.target.value)} placeholder="you@example.com" />
            <Input label="Password" type="password" value={password}
              onChange={e => setPassword(e.target.value)} placeholder="••••••••" />
          </div>

          {error && (
            <div style={{
              marginTop: 12, padding: "10px 12px",
              background: "#FDEAEA", color: "#8A1A1A",
              borderRadius: 8, fontSize: 12, fontFamily: THEME.fontBody,
            }}>{error}</div>
          )}

          <Btn
            onClick={handleLogin} disabled={loading}
            style={{ marginTop: 20, width: "100%", justifyContent: "center" }}
          >
            {loading ? "Signing in…" : "Sign In →"}
          </Btn>
        </div>
      </div>
    </div>
  );
}


// ============================================================
// SECTION 8a: PRIMARY DEV — DASHBOARD
// ============================================================

function PrimaryDashboard() {
  const { estates, developers, approvals, pendingCount } = useApp();

  // Aggregate across all estates
  const allPlots     = estates.flatMap(e => e.plots);
  const totalPlots   = allPlots.length;
  const soldFull     = allPlots.filter(p => p.status === "full_pay").length;
  const partPaid     = allPlots.filter(p => p.status === "part_pay").length;
  const available    = allPlots.filter(p => p.status === "available").length;
  const totalRevenue = allPlots.reduce((s, p) => s + p.amountPaid, 0);
  const totalValue   = allPlots.reduce((s, p) => s + p.totalPrice, 0);
  const activeDev    = developers.filter(d => d.active).length;

  // Recent transactions across all plots
  const recentTxns = allPlots
    .flatMap(p => (p.transactions || []).map(t => ({ ...t, plotId: p.id, plotSize: p.size })))
    .sort((a, b) => new Date(b.date) - new Date(a.date))
    .slice(0, 6);

  return (
    <div>
      <SectionHeader
        title="Dashboard"
        subtitle="Overview of all estates and activity"
      />

      {/* KPI Row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 12, marginBottom: 24 }}>
        <StatCard label="Total Plots"    value={totalPlots} />
        <StatCard label="Fully Sold"     value={soldFull}   color={THEME.full_pay.dot} />
        <StatCard label="Part Payment"   value={partPaid}   color={THEME.part_pay.dot} />
        <StatCard label="Available"      value={available}  color={THEME.available.dot} />
        <StatCard label="Pending Approval" value={pendingCount} color={THEME.gold} />
        <StatCard label="Active Devs"    value={activeDev}  />
      </div>

      {/* Revenue Card */}
      <Card style={{ marginBottom: 24 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <div>
            <div style={{ fontFamily: THEME.fontDisplay, fontSize: 28, color: THEME.primary, fontWeight: 700 }}>
              {formatNaira(totalRevenue)}
            </div>
            <div style={{ fontSize: 12, color: "#888", fontFamily: THEME.fontBody, marginTop: 2 }}>
              Total revenue collected of {formatNaira(totalValue)} total value
            </div>
          </div>
          <div style={{ fontSize: 28, fontWeight: 700, color: THEME.gold, fontFamily: THEME.fontMono }}>
            {totalValue > 0 ? Math.round((totalRevenue / totalValue) * 100) : 0}%
          </div>
        </div>
        {/* Revenue bar */}
        <div style={{ height: 8, background: THEME.surfaceAlt, borderRadius: 99, overflow: "hidden" }}>
          <div style={{
            height: "100%", borderRadius: 99, background: THEME.gold,
            width: totalValue > 0 ? `${(totalRevenue / totalValue) * 100}%` : "0%",
            transition: "width 0.6s ease",
          }} />
        </div>
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {/* Recent Transactions */}
        <Card>
          <h4 style={{ margin: "0 0 16px", fontFamily: THEME.fontDisplay, fontSize: 15, color: THEME.primary }}>
            Recent Transactions
          </h4>
          {recentTxns.length === 0
            ? <EmptyState icon="💸" message="No transactions yet" />
            : recentTxns.map(txn => (
              <div key={txn.id} style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                padding: "9px 0", borderBottom: `1px solid ${THEME.border}`,
              }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary, fontFamily: THEME.fontBody }}>
                    {formatNaira(txn.amount)}
                  </div>
                  <div style={{ fontSize: 11, color: "#888" }}>
                    {txn.plotId} · {formatDate(txn.date)}
                  </div>
                </div>
                <StatusBadge status="full_pay" label={txn.method === "paystack" ? "Paystack" : "Bank"} />
              </div>
            ))}
        </Card>

        {/* Developer Performance */}
        <Card>
          <h4 style={{ margin: "0 0 16px", fontFamily: THEME.fontDisplay, fontSize: 15, color: THEME.primary }}>
            Developer Performance
          </h4>
          {developers.map(dev => {
            const devPlots   = allPlots.filter(p => p.assignedDevId === dev.id);
            const devRevenue = devPlots.reduce((s, p) => s + p.amountPaid, 0);
            return (
              <div key={dev.id} style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "9px 0", borderBottom: `1px solid ${THEME.border}`,
              }}>
                <DevAvatar dev={dev} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>{dev.name}</div>
                  <div style={{ fontSize: 11, color: "#888" }}>{devPlots.length} plots</div>
                </div>
                <div style={{ fontFamily: THEME.fontMono, fontSize: 12, color: THEME.primary, fontWeight: 700 }}>
                  {formatNaira(devRevenue)}
                </div>
                {!dev.active && (
                  <StatusBadge status="pending" label="Disabled" />
                )}
              </div>
            );
          })}
        </Card>
      </div>
    </div>
  );
}


// ============================================================
// SECTION 8b: PRIMARY DEV — ESTATE MANAGER
// ============================================================

function EstateManager() {
  const { estates, createEstate, setActivePage, setActiveEstateId, updatePlotPrice } = useApp();
  const [showCreate, setShowCreate]   = useState(false);
  const [showPrices, setShowPrices]   = useState(false);
  const [editEstate, setEditEstate]   = useState(null);

  // New estate form state
  const [form, setForm] = useState({
    name: "", location: "", totalHa: "", layoutImage: null,
  });

  // Price editor state
  const [prices, setPrices] = useState({
    "180sqm": 8500000, "250sqm": 12000000,
    "500sqm": 22000000, "1000sqm": 40000000,
  });

  const handleCreateEstate = () => {
    if (!form.name || !form.location) return;
    const id = createEstate({ ...form, totalHa: Number(form.totalHa) });
    setShowCreate(false);
    setForm({ name: "", location: "", totalHa: "", layoutImage: null });
  };

  const handleLayoutUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const url = URL.createObjectURL(file);
    setForm(f => ({ ...f, layoutImage: url }));
  };

  const handleSavePrices = () => {
    Object.entries(prices).forEach(([size, price]) => {
      updatePlotPrice(editEstate.id, size, Number(price));
    });
    setShowPrices(false);
  };

  return (
    <div>
      <SectionHeader
        title="My Estates"
        subtitle="Create and manage your estate projects"
        action={
          <Btn onClick={() => setShowCreate(true)} variant="gold">
            + Open New Estate
          </Btn>
        }
      />

      {/* Estate Cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px,1fr))", gap: 16 }}>
        {estates.map(estate => {
          const plots     = estate.plots;
          const sold      = plots.filter(p => p.status === "full_pay").length;
          const available = plots.filter(p => p.status === "available").length;
          const revenue   = plots.reduce((s, p) => s + p.amountPaid, 0);

          return (
            <Card key={estate.id} style={{ position: "relative", overflow: "hidden" }}>
              {/* Gold top bar */}
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: THEME.gold }} />

              {/* Layout Image Preview */}
              {estate.layoutImage && (
                <div style={{
                  height: 130, background: THEME.surfaceAlt,
                  borderRadius: 8, overflow: "hidden", marginBottom: 14,
                }}>
                  <img src={estate.layoutImage} alt="layout"
                    style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
              {!estate.layoutImage && (
                <div style={{
                  height: 100, background: THEME.surfaceAlt, borderRadius: 8,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  marginBottom: 14, color: "#bbb", fontSize: 13,
                }}>
                  🗺 No layout uploaded
                </div>
              )}

              <div style={{ marginBottom: 10 }}>
                <div style={{ fontFamily: THEME.fontDisplay, fontSize: 17, fontWeight: 700, color: THEME.primary }}>
                  {estate.name}
                </div>
                <div style={{ fontSize: 12, color: "#888", marginTop: 2 }}>{estate.location}</div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 14 }}>
                {[
                  { l: "Total Plots", v: plots.length },
                  { l: "Sold",        v: sold },
                  { l: "Available",   v: available },
                ].map(s => (
                  <div key={s.l} style={{
                    textAlign: "center", background: THEME.surfaceAlt,
                    borderRadius: 8, padding: "8px 4px",
                  }}>
                    <div style={{ fontFamily: THEME.fontMono, fontWeight: 700, fontSize: 17, color: THEME.primary }}>{s.v}</div>
                    <div style={{ fontSize: 9, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.3 }}>{s.l}</div>
                  </div>
                ))}
              </div>

              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: "#888", marginBottom: 4 }}>Revenue: <b style={{ color: THEME.primary }}>{formatNaira(revenue)}</b></div>
              </div>

              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <Btn size="sm" onClick={() => { setActiveEstateId(estate.id); setActivePage("plot_grid"); }}>
                  View Map
                </Btn>
                <Btn size="sm" variant="outline" onClick={() => { setEditEstate(estate); setShowPrices(true); }}>
                  Edit Prices
                </Btn>
              </div>
            </Card>
          );
        })}
      </div>

      {/* ── Modal: Create Estate ── */}
      {showCreate && (
        <Modal title="Open New Estate" onClose={() => setShowCreate(false)}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Input label="Estate Name" value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
              placeholder="e.g. Palm Grove Estate" required />
            <Input label="Location" value={form.location}
              onChange={e => setForm(f => ({ ...f, location: e.target.value }))}
              placeholder="e.g. Lekki Phase 2, Lagos" required />
            <Input label="Total Hectares" type="number" value={form.totalHa}
              onChange={e => setForm(f => ({ ...f, totalHa: e.target.value }))}
              placeholder="e.g. 10" />

            {/* Layout Upload */}
            <div>
              <label style={{
                fontSize: 11, fontWeight: 600, color: "#666",
                textTransform: "uppercase", letterSpacing: 0.4, display: "block", marginBottom: 6,
              }}>Estate Layout Image</label>
              <label style={{
                display: "flex", alignItems: "center", justifyContent: "center",
                gap: 8, padding: "24px 16px",
                border: `2px dashed ${THEME.border}`, borderRadius: 10,
                cursor: "pointer", color: "#999", fontSize: 13,
                fontFamily: THEME.fontBody, transition: "border-color 0.15s",
              }}>
                <input type="file" accept="image/*" onChange={handleLayoutUpload} style={{ display: "none" }} />
                {form.layoutImage
                  ? <img src={form.layoutImage} alt="preview" style={{ maxHeight: 120, borderRadius: 6 }} />
                  : <span>📁 Click to upload layout image (PNG, JPG)</span>
                }
              </label>
            </div>

            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8 }}>
              <Btn variant="outline" onClick={() => setShowCreate(false)}>Cancel</Btn>
              <Btn variant="gold" onClick={handleCreateEstate}>Create Estate</Btn>
            </div>
          </div>
        </Modal>
      )}

      {/* ── Modal: Edit Plot Prices ── */}
      {showPrices && editEstate && (
        <Modal title={`Edit Plot Prices — ${editEstate.name}`} onClose={() => setShowPrices(false)}>
          <p style={{ fontSize: 13, color: "#888", margin: "0 0 16px", fontFamily: THEME.fontBody }}>
            Changing prices here updates all <b>available</b> plots of that size.
            Plots with active payments are not affected.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {Object.entries(PLOT_SIZE_CONFIG).map(([size, cfg]) => (
              <div key={size} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{
                  width: 80, fontSize: 12, fontWeight: 600,
                  color: THEME.primary, fontFamily: THEME.fontBody,
                }}>{cfg.label}</span>
                <Input
                  type="number"
                  value={prices[size]}
                  onChange={e => setPrices(p => ({ ...p, [size]: e.target.value }))}
                  placeholder="Price in ₦"
                  style={{ flex: 1 }}
                />
                <span style={{ fontSize: 12, color: "#888", width: 100, fontFamily: THEME.fontMono }}>
                  {formatNaira(prices[size])}
                </span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 20 }}>
            <Btn variant="outline" onClick={() => setShowPrices(false)}>Cancel</Btn>
            <Btn variant="gold" onClick={handleSavePrices}>Save Prices</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}


// ============================================================
// SECTION 8c: PLOT GRID — Visual Estate Map
//             Used by both primary and secondary devs
// ============================================================

function PlotGrid({ readOnly = false }) {
  const { activeEstate, developers, currentUser, selectedPlot, setSelectedPlot, submitPaymentForApproval } = useApp();
  const [showPayModal, setShowPayModal] = useState(false);

  if (!activeEstate) return <EmptyState message="No estate selected." />;

  const plots    = activeEstate.plots;
  const layout   = activeEstate.plots; // we re-derive the grid from stored row/col

  // For secondary devs: only show allocated plots if allocation is set
  const myDev = developers.find(d => d.id === currentUser?.id);
  const myAllocated = myDev?.allocatedPlots || [];
  const hasAllocation = myAllocated.length > 0;

  // Row range for grid
  const maxRow = Math.max(...plots.map(p => p.row));
  const maxCol = Math.max(...plots.map(p => p.col));

  // Build lookup: [row][col] → plot
  const plotMap = {};
  plots.forEach(p => {
    if (!plotMap[p.row]) plotMap[p.row] = {};
    plotMap[p.row][p.col] = p;
  });

  // Road/amenity rows and cols (hardcoded to match layout generation)
  const ROAD_ROWS  = new Set([0, 4, 8, 12]);
  const isRoadCol  = (ri, ci) => {
    if (ci === 0 || ci === maxCol) return true;
    if (ri >= 1 && ri <= 3  && ci === 6) return true;
    if (ri >= 5 && ri <= 7  && ci === 6) return true;
    if (ri >= 9 && ri <= 11 && (ci === 4 || ci === 9)) return true;
    return false;
  };
  const isAmenity  = (ri, ci) => ri >= 5 && ri <= 7 && ci >= 11 && ci <= 12;

  return (
    <div>
      <SectionHeader
        title={activeEstate.name}
        subtitle={activeEstate.location}
      />

      {/* Legend */}
      <div style={{
        display: "flex", gap: 16, flexWrap: "wrap",
        alignItems: "center", marginBottom: 16,
        padding: "10px 14px", background: THEME.surface,
        borderRadius: 8, border: `1px solid ${THEME.border}`,
      }}>
        {["available","reserved","part_pay","full_pay"].map(s => {
          const cfg = getStatusConfig(s);
          const lbl = { available:"Available", reserved:"Reserved", part_pay:"Part Payment", full_pay:"Fully Sold" }[s];
          return (
            <div key={s} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "#666" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: cfg.dot }} />
              {lbl}
            </div>
          );
        })}
        <div style={{ marginLeft: "auto", fontSize: 11, color: "#888", fontFamily: THEME.fontMono }}>
          Click a plot to {readOnly ? "view details" : "submit payment"}
        </div>
      </div>

      {/* Scrollable Grid */}
      <div style={{ overflowX: "auto", overflowY: "auto", maxHeight: "65vh" }}>
        <div style={{
          display: "inline-block",
          background: "#B8B0A4", padding: 4, borderRadius: 8,
          gap: 3,
        }}>
          {Array.from({ length: maxRow + 1 }).map((_, ri) => (
            <div key={ri} style={{ display: "flex", gap: 3, marginBottom: 3 }}>
              {Array.from({ length: maxCol + 1 }).map((_, ci) => {

                // Road cell
                if (ROAD_ROWS.has(ri) || isRoadCol(ri, ci)) {
                  return (
                    <div key={ci} style={{
                      width: ROAD_ROWS.has(ri) ? undefined : 10,
                      height: ROAD_ROWS.has(ri) ? 9 : 36,
                      flex: ROAD_ROWS.has(ri) ? 1 : undefined,
                      background: "#9A9088", borderRadius: 2,
                      minWidth: ROAD_ROWS.has(ri) ? 10 : undefined,
                    }} />
                  );
                }

                // Amenity
                if (isAmenity(ri, ci)) {
                  return (
                    <div key={ci} style={{
                      width: 48, height: 44,
                      background: PLOT_SIZE_CONFIG["250sqm"].baseColor,
                      border: `1.5px dashed #8AAA58`,
                      borderRadius: 3, display: "flex",
                      alignItems: "center", justifyContent: "center",
                      fontSize: 8, color: "#5A7040",
                      fontFamily: THEME.fontMono,
                    }}>🌳</div>
                  );
                }

                // Plot cell
                const plot = plotMap[ri]?.[ci];
                if (!plot) return <div key={ci} style={{ width: 44, height: 36 }} />;

                const isSelected = selectedPlot?.id === plot.id;
                const isDimmed   = hasAllocation && !myAllocated.includes(plot.id);
                const dev        = developers.find(d => d.id === plot.assignedDevId);
                const cfg        = getStatusConfig(plot.status);
                const sizeW      = plot.size === "1000sqm" ? 70 : plot.size === "500sqm" ? 56 : plot.size === "250sqm" ? 50 : 42;
                const sizeH      = plot.size === "1000sqm" ? 62 : plot.size === "500sqm" ? 50 : plot.size === "250sqm" ? 44 : 36;

                return (
                  <div
                    key={ci}
                    onClick={() => {
                      setSelectedPlot(plot);
                      if (!readOnly && currentUser?.role === "secondary") setShowPayModal(true);
                    }}
                    title={`${plot.id} · ${PLOT_SIZE_CONFIG[plot.size]?.label} · ${formatNaira(plot.totalPrice)}`}
                    style={{
                      width: sizeW, height: sizeH, flexShrink: 0,
                      background: isSelected ? THEME.gold : cfg.bg,
                      border: `1.5px solid ${isSelected ? THEME.gold : cfg.border}`,
                      borderRadius: 3, cursor: "pointer",
                      display: "flex", flexDirection: "column",
                      alignItems: "center", justifyContent: "center", gap: 2,
                      opacity: isDimmed ? 0.35 : 1,
                      boxShadow: isSelected ? `0 0 0 3px ${THEME.gold}50, ${THEME.shadowSm}` : THEME.shadowSm,
                      transform: isSelected ? "scale(1.06)" : "scale(1)",
                      transition: "all 0.15s ease", zIndex: isSelected ? 5 : 1, position: "relative",
                    }}
                  >
                    <span style={{
                      fontSize: 7, fontFamily: THEME.fontMono, fontWeight: 600,
                      color: isSelected ? "#fff" : THEME.primary, lineHeight: 1,
                    }}>{plot.plotNumber}</span>
                    {dev && <DevAvatar dev={dev} size={14} />}
                    {plot.status !== "available" && (
                      <span style={{
                        position: "absolute", bottom: 2, right: 2,
                        width: 5, height: 5, borderRadius: "50%",
                        background: cfg.dot,
                      }} />
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>

      {/* ── Detail Side Panel ── */}
      {selectedPlot && (
        <PlotDetailPanel
          plot={selectedPlot}
          readOnly={readOnly}
          onClose={() => { setSelectedPlot(null); setShowPayModal(false); }}
          onSubmitPayment={() => setShowPayModal(true)}
        />
      )}

      {/* ── Submit Payment Modal (secondary dev) ── */}
      {showPayModal && selectedPlot && currentUser?.role === "secondary" && (
        <SubmitPaymentModal
          plot={selectedPlot}
          onClose={() => setShowPayModal(false)}
          onSubmit={(data) => {
            submitPaymentForApproval({
              plotId:    selectedPlot.id,
              estateId:  selectedPlot.estateId,
              submittedBy: currentUser.id,
              ...data,
            });
            setShowPayModal(false);
            setSelectedPlot(null);
          }}
        />
      )}
    </div>
  );
}

// ── Plot Detail Side Panel ────────────────────────────────────
function PlotDetailPanel({ plot, onClose, readOnly, onSubmitPayment }) {
  const { developers, currentUser } = useApp();
  const dev = developers.find(d => d.id === plot.assignedDevId);
  const pct = payPct(plot);

  return (
    <div style={{
      position: "fixed", right: 0, top: 0, bottom: 0, width: 320,
      background: THEME.surface, borderLeft: `1px solid ${THEME.border}`,
      zIndex: 200, boxShadow: "-8px 0 32px rgba(28,58,43,0.10)",
      display: "flex", flexDirection: "column", fontFamily: THEME.fontBody,
    }}>
      {/* Header */}
      <div style={{
        padding: "18px 20px", borderBottom: `1px solid ${THEME.border}`,
        display: "flex", alignItems: "flex-start", justifyContent: "space-between",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span style={{ fontFamily: THEME.fontDisplay, fontSize: 18, fontWeight: 700, color: THEME.primary }}>
              Plot {plot.plotNumber}
            </span>
            <StatusBadge status={plot.status} />
          </div>
          <div style={{ fontSize: 12, color: "#888" }}>
            {PLOT_SIZE_CONFIG[plot.size]?.label} · {plot.id}
          </div>
        </div>
        <button onClick={onClose} style={{
          background: "none", border: "none", cursor: "pointer",
          fontSize: 18, color: "#999", lineHeight: 1,
        }}>✕</button>
      </div>

      {/* Body */}
      <div style={{ flex: 1, overflowY: "auto", padding: "18px 20px" }}>
        {/* Price & Payment */}
        <div style={{
          background: THEME.surfaceAlt, borderRadius: 10,
          padding: "14px 16px", marginBottom: 16,
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4 }}>Total Price</div>
              <div style={{ fontFamily: THEME.fontMono, fontWeight: 700, fontSize: 16, color: THEME.primary }}>
                {formatNaira(plot.totalPrice)}
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4 }}>Balance</div>
              <div style={{ fontFamily: THEME.fontMono, fontWeight: 700, fontSize: 16, color: THEME.full_pay.text }}>
                {formatNaira(plot.totalPrice - plot.amountPaid)}
              </div>
            </div>
          </div>
          <PayBar plot={plot} />
        </div>

        {/* Buyer Info */}
        {plot.buyerName && (
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 8 }}>Buyer</div>
            <div style={{ fontSize: 14, fontWeight: 600, color: THEME.primary }}>{plot.buyerName}</div>
            {plot.buyerPhone && <div style={{ fontSize: 12, color: "#888" }}>{plot.buyerPhone}</div>}
          </div>
        )}

        {/* Developer */}
        {dev && (
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 12px", background: THEME.surfaceAlt,
            borderRadius: 8, marginBottom: 14,
          }}>
            <DevAvatar dev={dev} />
            <div>
              <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4 }}>Assigned Developer</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>{dev.name}</div>
            </div>
          </div>
        )}

        {/* Payment Plan */}
        {plot.paymentPlan && (
          <div style={{ marginBottom: 14 }}>
            <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 6 }}>Payment Plan</div>
            <div style={{ fontSize: 13, color: THEME.primary }}>
              {PAYMENT_PLAN_TYPES.find(p => p.id === plot.paymentPlan)?.label || plot.paymentPlan}
            </div>
            {plot.planEndDate && (
              <div style={{
                marginTop: 4, fontSize: 11,
                color: daysUntil(plot.planEndDate) <= 14 ? "#E84A4A" : "#888",
              }}>
                Ends: {formatDate(plot.planEndDate)}
                {daysUntil(plot.planEndDate) !== null && daysUntil(plot.planEndDate) >= 0 && (
                  <b> ({daysUntil(plot.planEndDate)} days left)</b>
                )}
              </div>
            )}
          </div>
        )}

        {/* Transaction History */}
        {plot.transactions?.length > 0 && (
          <div>
            <div style={{ fontSize: 10, color: "#888", textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 8 }}>
              Payment History
            </div>
            {plot.transactions.map(txn => (
              <div key={txn.id} style={{
                padding: "9px 0", borderBottom: `1px solid ${THEME.border}`,
                display: "flex", justifyContent: "space-between",
              }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>{formatNaira(txn.amount)}</div>
                  <div style={{ fontSize: 11, color: "#888" }}>{formatDate(txn.date)} · {txn.method}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Footer CTA — secondary dev only */}
      {!readOnly && currentUser?.role === "secondary" && plot.status !== "full_pay" && (
        <div style={{ padding: "14px 20px", borderTop: `1px solid ${THEME.border}` }}>
          <Btn variant="gold" onClick={onSubmitPayment} style={{ width: "100%", justifyContent: "center" }}>
            Submit Payment
          </Btn>
        </div>
      )}
    </div>
  );
}


// ============================================================
// SECTION 9d: SUBMIT PAYMENT MODAL
//             Used by secondary devs to submit payment for approval
// ============================================================

function SubmitPaymentModal({ plot, onClose, onSubmit }) {
  const [form, setForm] = useState({
    buyerName:     "",
    buyerPhone:    "",
    amount:        "",
    method:        "bank_transfer",
    paymentPlan:   "outright",
    planStartDate: new Date().toISOString().split("T")[0],
    planEndDate:   "",
    proofNote:     "",
  });

  const balance = plot.totalPrice - plot.amountPaid;

  const handlePay = () => {
    if (!form.buyerName || !form.amount) return;
    if (form.method === "paystack") {
      // In production: initialize Paystack popup here, then call onSubmit in the callback
      alert("Paystack integration: In production, the Paystack popup opens here. Proceeding as submitted.");
    }
    onSubmit({
      ...form,
      amount: Number(form.amount),
    });
  };

  return (
    <Modal title={`Submit Payment — Plot ${plot.plotNumber}`} onClose={onClose} width={480}>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {/* Plot summary */}
        <div style={{
          padding: "10px 14px", background: THEME.surfaceAlt,
          borderRadius: 8, display: "flex", justifyContent: "space-between",
          marginBottom: 4,
        }}>
          <span style={{ fontSize: 12, color: "#888" }}>Balance to pay</span>
          <span style={{ fontFamily: THEME.fontMono, fontWeight: 700, fontSize: 14, color: THEME.primary }}>
            {formatNaira(balance)}
          </span>
        </div>

        <Input label="Buyer Full Name" required value={form.buyerName}
          onChange={e => setForm(f => ({ ...f, buyerName: e.target.value }))}
          placeholder="e.g. Chidi Okonkwo" />
        <Input label="Buyer Phone" value={form.buyerPhone}
          onChange={e => setForm(f => ({ ...f, buyerPhone: e.target.value }))}
          placeholder="+234 803 000 0000" />
        <Input label="Amount Being Paid (₦)" type="number" required value={form.amount}
          onChange={e => setForm(f => ({ ...f, amount: e.target.value }))}
          placeholder="e.g. 4250000" />

        <Select label="Payment Method" value={form.method}
          onChange={e => setForm(f => ({ ...f, method: e.target.value }))}
          options={PAYMENT_METHODS.map(m => ({ value: m.id, label: m.label }))} />

        <Select label="Payment Plan" value={form.paymentPlan}
          onChange={e => setForm(f => ({ ...f, paymentPlan: e.target.value }))}
          options={PAYMENT_PLAN_TYPES.map(p => ({ value: p.id, label: p.label }))} />

        {form.paymentPlan !== "outright" && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <Input label="Plan Start Date" type="date" value={form.planStartDate}
              onChange={e => setForm(f => ({ ...f, planStartDate: e.target.value }))} />
            <Input label="Plan End Date" type="date" value={form.planEndDate}
              onChange={e => setForm(f => ({ ...f, planEndDate: e.target.value }))} />
          </div>
        )}

        <div>
          <label style={{
            fontSize: 11, fontWeight: 600, color: "#666",
            textTransform: "uppercase", letterSpacing: 0.4, display: "block", marginBottom: 6,
          }}>Proof / Note</label>
          <textarea
            value={form.proofNote}
            onChange={e => setForm(f => ({ ...f, proofNote: e.target.value }))}
            placeholder="Transfer reference, teller number, or any notes for the primary developer..."
            rows={3}
            style={{
              width: "100%", padding: "9px 12px",
              border: `1.5px solid ${THEME.border}`, borderRadius: 8,
              fontFamily: THEME.fontBody, fontSize: 13, color: THEME.primary,
              background: THEME.surface, resize: "vertical", boxSizing: "border-box",
              outline: "none",
            }}
          />
        </div>

        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
          <Btn variant="outline" onClick={onClose}>Cancel</Btn>
          <Btn variant="gold" onClick={handlePay}>Submit for Approval</Btn>
        </div>
      </div>
    </Modal>
  );
}


// ============================================================
// SECTION 8d: PRIMARY DEV — PAYMENT APPROVALS
// ============================================================

function PaymentApprovals() {
  const { approvals, estates, developers, approvePayment, rejectPayment } = useApp();
  const [rejectId,    setRejectId]    = useState(null);
  const [rejectNote,  setRejectNote]  = useState("");
  const [filterStatus, setFilterStatus] = useState("pending");

  const filtered = approvals.filter(a => filterStatus === "all" || a.status === filterStatus);

  const getPlot = (estateId, plotId) =>
    estates.find(e => e.id === estateId)?.plots.find(p => p.id === plotId);

  return (
    <div>
      <SectionHeader
        title="Payment Approvals"
        subtitle="Review and approve payment submissions from your developers"
      />

      {/* Filter Tabs */}
      <div style={{ display: "flex", gap: 4, marginBottom: 20 }}>
        {["pending","approved","rejected","all"].map(f => (
          <button key={f} onClick={() => setFilterStatus(f)} style={{
            padding: "7px 14px", borderRadius: 8, cursor: "pointer",
            fontFamily: THEME.fontBody, fontSize: 12, fontWeight: 600,
            border: "none",
            background: filterStatus === f ? THEME.primary : THEME.surfaceAlt,
            color:      filterStatus === f ? "#fff" : "#888",
            textTransform: "capitalize",
          }}>{f}</button>
        ))}
      </div>

      {filtered.length === 0 && <EmptyState icon="✅" message={`No ${filterStatus} approvals`} />}

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {filtered.map(appr => {
          const plot = getPlot(appr.estateId, appr.plotId);
          const dev  = developers.find(d => d.id === appr.submittedBy);

          return (
            <Card key={appr.id} style={{
              borderLeft: `4px solid ${
                appr.status === "approved" ? THEME.available.dot
                : appr.status === "rejected" ? THEME.full_pay.dot
                : THEME.gold
              }`,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{ flex: 1 }}>
                  {/* Top row */}
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                    <span style={{ fontFamily: THEME.fontDisplay, fontSize: 16, fontWeight: 700, color: THEME.primary }}>
                      {formatNaira(appr.amount)}
                    </span>
                    <StatusBadge
                      status={appr.status === "approved" ? "full_pay" : appr.status === "rejected" ? "reserved" : "pending"}
                      label={appr.status.charAt(0).toUpperCase() + appr.status.slice(1)}
                    />
                  </div>

                  {/* Details grid */}
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Plot</div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>
                        #{plot?.plotNumber || "?"} — {PLOT_SIZE_CONFIG[plot?.size]?.label || ""}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Buyer</div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>{appr.buyerName}</div>
                      <div style={{ fontSize: 11, color: "#888" }}>{appr.buyerPhone}</div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Developer</div>
                      <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
                        {dev && <DevAvatar dev={dev} size={20} />}
                        <span style={{ fontSize: 12, color: THEME.primary }}>{dev?.name || "—"}</span>
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Method</div>
                      <div style={{ fontSize: 12, color: THEME.primary }}>
                        {PAYMENT_METHODS.find(m => m.id === appr.method)?.label || appr.method}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Payment Plan</div>
                      <div style={{ fontSize: 12, color: THEME.primary }}>
                        {PAYMENT_PLAN_TYPES.find(p => p.id === appr.paymentPlan)?.label || appr.paymentPlan}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Submitted</div>
                      <div style={{ fontSize: 12, color: THEME.primary }}>{formatDate(appr.submittedAt)}</div>
                    </div>
                  </div>

                  {/* Proof note */}
                  {appr.proofNote && (
                    <div style={{
                      marginTop: 10, padding: "8px 12px",
                      background: THEME.surfaceAlt, borderRadius: 6,
                      fontSize: 12, color: "#666", fontStyle: "italic",
                    }}>
                      "{appr.proofNote}"
                    </div>
                  )}

                  {/* Reject reason */}
                  {appr.rejectReason && (
                    <div style={{
                      marginTop: 8, padding: "6px 10px",
                      background: "#FDEAEA", borderRadius: 6,
                      fontSize: 11, color: "#8A1A1A",
                    }}>
                      Rejected: {appr.rejectReason}
                    </div>
                  )}
                </div>

                {/* Action Buttons */}
                {appr.status === "pending" && (
                  <div style={{ display: "flex", gap: 8, flexDirection: "column", marginLeft: 16 }}>
                    <Btn size="sm" variant="primary" onClick={() => approvePayment(appr.id)}>
                      ✓ Approve
                    </Btn>
                    <Btn size="sm" variant="danger" onClick={() => setRejectId(appr.id)}>
                      ✕ Reject
                    </Btn>
                  </div>
                )}
              </div>
            </Card>
          );
        })}
      </div>

      {/* ── Reject Modal ── */}
      {rejectId && (
        <Modal title="Reject Payment" onClose={() => setRejectId(null)} width={400}>
          <p style={{ fontSize: 13, color: "#888", margin: "0 0 12px" }}>
            Please provide a reason. The developer will be notified.
          </p>
          <Input label="Reason for rejection" value={rejectNote}
            onChange={e => setRejectNote(e.target.value)}
            placeholder="e.g. Transfer proof not matching, wrong amount..." />
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 16 }}>
            <Btn variant="outline" onClick={() => setRejectId(null)}>Cancel</Btn>
            <Btn variant="danger" onClick={() => {
              rejectPayment(rejectId, rejectNote);
              setRejectId(null);
              setRejectNote("");
            }}>Confirm Rejection</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}


// ============================================================
// SECTION 8e: PRIMARY DEV — DEVELOPER ACCOUNTS
// ============================================================

function DeveloperAccounts() {
  const { developers, estates, createDeveloper, toggleDeveloperStatus, allocatePlots, activeEstate } = useApp();
  const [showCreate,  setShowCreate]  = useState(false);
  const [allocDev,    setAllocDev]    = useState(null);
  const [selectedIds, setSelectedIds] = useState([]);

  // New developer form
  const [form, setForm] = useState({
    name: "", email: "", phone: "", password: "",
    color: "#C8923A",
  });

  const allPlots = activeEstate?.plots.filter(p => p.status === "available") || [];

  const handleCreate = () => {
    if (!form.name || !form.email || !form.password) return;
    createDeveloper(form);
    setShowCreate(false);
    setForm({ name: "", email: "", phone: "", password: "", color: "#C8923A" });
  };

  const handleAllocate = () => {
    allocatePlots(allocDev.id, selectedIds);
    setAllocDev(null);
    setSelectedIds([]);
  };

  const openAllocate = (dev) => {
    setAllocDev(dev);
    setSelectedIds(dev.allocatedPlots || []);
  };

  const togglePlotSelect = (plotId) => {
    setSelectedIds(prev =>
      prev.includes(plotId) ? prev.filter(i => i !== plotId) : [...prev, plotId]
    );
  };

  return (
    <div>
      <SectionHeader
        title="Developer Accounts"
        subtitle="Create and manage your secondary developer team"
        action={<Btn variant="gold" onClick={() => setShowCreate(true)}>+ Add Developer</Btn>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px,1fr))", gap: 14 }}>
        {developers.map(dev => {
          const devPlots   = estates.flatMap(e => e.plots).filter(p => p.assignedDevId === dev.id);
          const devRevenue = devPlots.reduce((s, p) => s + p.amountPaid, 0);
          const isActive   = dev.active;

          return (
            <Card key={dev.id} style={{
              opacity: isActive ? 1 : 0.65,
              borderTop: `3px solid ${dev.color}`,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <DevAvatar dev={dev} size={40} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: THEME.primary }}>{dev.name}</div>
                  <div style={{ fontSize: 11, color: "#888" }}>{dev.email}</div>
                </div>
                <StatusBadge
                  status={isActive ? "available" : "pending"}
                  label={isActive ? "Active" : "Disabled"}
                />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 12 }}>
                {[
                  { l: "Plots Sold", v: devPlots.filter(p => p.status === "full_pay").length },
                  { l: "Active",     v: devPlots.filter(p => p.status === "part_pay").length },
                  { l: "Allocated",  v: (dev.allocatedPlots || []).length },
                ].map(s => (
                  <div key={s.l} style={{ textAlign: "center", background: THEME.surfaceAlt, borderRadius: 8, padding: "7px 4px" }}>
                    <div style={{ fontFamily: THEME.fontMono, fontWeight: 700, fontSize: 16, color: THEME.primary }}>{s.v}</div>
                    <div style={{ fontSize: 9, color: "#aaa", textTransform: "uppercase" }}>{s.l}</div>
                  </div>
                ))}
              </div>

              <div style={{ fontSize: 12, color: "#888", marginBottom: 12 }}>
                Revenue: <b style={{ color: THEME.primary, fontFamily: THEME.fontMono }}>{formatNaira(devRevenue)}</b>
              </div>

              <div style={{ display: "flex", gap: 8 }}>
                <Btn size="sm" variant="outline" onClick={() => openAllocate(dev)}>
                  Allocate Plots
                </Btn>
                <Btn
                  size="sm"
                  variant={isActive ? "danger" : "outline"}
                  onClick={() => toggleDeveloperStatus(dev.id)}
                >
                  {isActive ? "Disable" : "Enable"}
                </Btn>
              </div>
            </Card>
          );
        })}
      </div>

      {/* ── Modal: Create Developer ── */}
      {showCreate && (
        <Modal title="Create Developer Account" onClose={() => setShowCreate(false)}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Input label="Full Name / Company" required value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
              placeholder="e.g. Apex Realty Ltd" />
            <Input label="Email" type="email" required value={form.email}
              onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
              placeholder="developer@email.com" />
            <Input label="Phone" value={form.phone}
              onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
              placeholder="+234 803 000 0000" />
            <Input label="Temporary Password" type="password" required value={form.password}
              onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
              placeholder="They'll use this to log in" />
            <div>
              <label style={{
                fontSize: 11, fontWeight: 600, color: "#666",
                textTransform: "uppercase", letterSpacing: 0.4, display: "block", marginBottom: 6,
              }}>Avatar Color</label>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {["#C8923A","#2D8A5F","#3D6FE8","#C83A6F","#8A3AC8","#3AAEC8"].map(c => (
                  <div key={c} onClick={() => setForm(f => ({ ...f, color: c }))} style={{
                    width: 28, height: 28, borderRadius: "50%", background: c,
                    cursor: "pointer", border: form.color === c ? "3px solid #1A1A2E" : "3px solid transparent",
                    transition: "border 0.15s",
                  }} />
                ))}
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8 }}>
              <Btn variant="outline" onClick={() => setShowCreate(false)}>Cancel</Btn>
              <Btn variant="gold" onClick={handleCreate}>Create Account</Btn>
            </div>
          </div>
        </Modal>
      )}

      {/* ── Modal: Allocate Plots ── */}
      {allocDev && (
        <Modal title={`Allocate Plots to ${allocDev.name}`} onClose={() => setAllocDev(null)} width={560}>
          <p style={{ fontSize: 13, color: "#888", margin: "0 0 14px" }}>
            Select available plots to assign exclusively to this developer.
            Leave empty to give them access to all plots.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, maxHeight: 260, overflowY: "auto", marginBottom: 16 }}>
            {allPlots.map(p => (
              <div
                key={p.id}
                onClick={() => togglePlotSelect(p.id)}
                style={{
                  padding: "5px 10px", borderRadius: 6, cursor: "pointer",
                  fontFamily: THEME.fontMono, fontSize: 11,
                  border: `1.5px solid ${selectedIds.includes(p.id) ? THEME.gold : THEME.border}`,
                  background: selectedIds.includes(p.id) ? THEME.goldLight : THEME.surfaceAlt,
                  color: selectedIds.includes(p.id) ? THEME.gold : "#666",
                  transition: "all 0.12s",
                }}
              >
                #{p.plotNumber} {PLOT_SIZE_CONFIG[p.size]?.label}
              </div>
            ))}
          </div>
          <div style={{ fontSize: 12, color: "#888", marginBottom: 12 }}>
            {selectedIds.length} plot(s) selected
          </div>
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
            <Btn variant="ghost" onClick={() => setSelectedIds([])}>Clear All</Btn>
            <Btn variant="outline" onClick={() => setAllocDev(null)}>Cancel</Btn>
            <Btn variant="gold" onClick={handleAllocate}>Save Allocation</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}


// ============================================================
// SECTION 8f: SALES RECORDS
//             Primary dev sees all; secondary dev sees their own
// ============================================================

function SalesRecords({ devFilter }) {
  const { estates, developers, currentUser } = useApp();

  // Build flat list of all transactions with enriched data
  const allTxns = estates.flatMap(estate =>
    estate.plots.flatMap(plot =>
      (plot.transactions || []).map(txn => ({
        ...txn,
        estateId:   estate.id,
        estateName: estate.name,
        plotId:     plot.id,
        plotNum:    plot.plotNumber,
        plotSize:   plot.size,
        buyerName:  plot.buyerName,
        buyerPhone: plot.buyerPhone,
        plotStatus: plot.status,
        totalPrice: plot.totalPrice,
        amountPaid: plot.amountPaid,
        payPlan:    plot.paymentPlan,
        planEnd:    plot.planEndDate,
        dev:        developers.find(d => d.id === txn.devId),
      }))
    )
  );

  // Filter by developer if secondary or if a filter is passed
  const filterDevId = devFilter || (currentUser?.role === "secondary" ? currentUser.id : null);
  const txns = filterDevId
    ? allTxns.filter(t => t.devId === filterDevId)
    : allTxns;

  const sorted = [...txns].sort((a, b) => new Date(b.date) - new Date(a.date));
  const totalRevenue = sorted.reduce((s, t) => s + t.amount, 0);

  return (
    <div>
      <SectionHeader
        title="Sales Records"
        subtitle={filterDevId ? "Your transactions only" : "All transactions across all developers"}
      />

      {/* Summary bar */}
      <Card style={{ marginBottom: 20, display: "flex", gap: 32 }}>
        <div>
          <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Total Collected</div>
          <div style={{ fontFamily: THEME.fontDisplay, fontSize: 24, fontWeight: 700, color: THEME.primary }}>
            {formatNaira(totalRevenue)}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, color: "#aaa", textTransform: "uppercase", letterSpacing: 0.4 }}>Transactions</div>
          <div style={{ fontFamily: THEME.fontDisplay, fontSize: 24, fontWeight: 700, color: THEME.primary }}>
            {sorted.length}
          </div>
        </div>
      </Card>

      {sorted.length === 0 && <EmptyState icon="📊" message="No transactions yet" />}

      {/* Table */}
      {sorted.length > 0 && (
        <Card style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: THEME.fontBody }}>
              <thead>
                <tr style={{ background: THEME.surfaceAlt }}>
                  {["Date","Plot","Size","Estate","Buyer","Amount","Method","Plan","Status","Developer"].map(h => (
                    <th key={h} style={{
                      padding: "10px 14px", textAlign: "left",
                      fontFamily: THEME.fontBody, fontSize: 10, fontWeight: 700,
                      color: "#888", textTransform: "uppercase", letterSpacing: 0.4,
                      borderBottom: `1px solid ${THEME.border}`, whiteSpace: "nowrap",
                    }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {sorted.map((txn, i) => (
                  <tr key={txn.id} style={{
                    background: i % 2 === 0 ? THEME.surface : THEME.surfaceAlt,
                    borderBottom: `1px solid ${THEME.border}`,
                  }}>
                    <td style={tdS}>{formatDate(txn.date)}</td>
                    <td style={{ ...tdS, fontFamily: THEME.fontMono, fontWeight: 600 }}>#{txn.plotNum}</td>
                    <td style={tdS}>{PLOT_SIZE_CONFIG[txn.plotSize]?.label}</td>
                    <td style={tdS}>{truncate(txn.estateName, 18)}</td>
                    <td style={tdS}>{txn.buyerName || "—"}</td>
                    <td style={{ ...tdS, fontFamily: THEME.fontMono, fontWeight: 700, color: THEME.primary }}>
                      {formatNaira(txn.amount)}
                    </td>
                    <td style={tdS}>{txn.method === "paystack" ? "Paystack" : "Bank"}</td>
                    <td style={tdS}>
                      {PAYMENT_PLAN_TYPES.find(p => p.id === txn.payPlan)?.label || "—"}
                    </td>
                    <td style={tdS}><StatusBadge status={txn.plotStatus} /></td>
                    <td style={tdS}>
                      {txn.dev
                        ? <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
                            <DevAvatar dev={txn.dev} size={18} />
                            <span style={{ fontSize: 11 }}>{txn.dev.name}</span>
                          </span>
                        : "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}
    </div>
  );
}

const tdS = {
  padding: "10px 14px", fontSize: 12,
  color: "#444", whiteSpace: "nowrap",
};


// ============================================================
// SECTION 8g / 9d: NOTIFICATIONS
// ============================================================

function NotificationsPage() {
  const { notifications, currentUser, markNotifRead } = useApp();

  const mine = notifications.filter(n =>
    !n.for || n.for.includes(currentUser?.id)
  );

  return (
    <div>
      <SectionHeader title="Notifications" subtitle="Payment reminders and system alerts" />

      {mine.length === 0 && <EmptyState icon="🔔" message="You're all caught up!" />}

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {mine.map(n => (
          <Card key={n.id} style={{
            borderLeft: `4px solid ${n.read ? THEME.border : THEME.gold}`,
            opacity: n.read ? 0.65 : 1,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: THEME.primary, marginBottom: 4 }}>
                  {n.title}
                </div>
                <div style={{ fontSize: 13, color: "#666", marginBottom: 6 }}>{n.body}</div>
                <div style={{ fontSize: 11, color: "#aaa", fontFamily: THEME.fontMono }}>
                  {formatDate(n.date)}
                </div>
              </div>
              {!n.read && (
                <Btn size="sm" variant="ghost" onClick={() => markNotifRead(n.id)}>
                  Mark read
                </Btn>
              )}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}


// ============================================================
// SECTION 9a: SECONDARY DEV — DASHBOARD
// ============================================================

function SecondaryDashboard() {
  const { currentUser, estates, developers } = useApp();
  const dev = developers.find(d => d.id === currentUser?.id);

  const allPlots    = estates.flatMap(e => e.plots);
  const myPlots     = allPlots.filter(p => p.assignedDevId === currentUser?.id);
  const myRevenue   = myPlots.reduce((s, p) => s + p.amountPaid, 0);
  const myFullSold  = myPlots.filter(p => p.status === "full_pay").length;
  const myPartPaid  = myPlots.filter(p => p.status === "part_pay").length;

  const myTxns = myPlots
    .flatMap(p => (p.transactions || []).map(t => ({ ...t, plotNum: p.plotNumber, plotSize: p.size })))
    .sort((a, b) => new Date(b.date) - new Date(a.date));

  // Plans expiring in 14 days
  const expiringSoon = myPlots.filter(p => {
    const d = daysUntil(p.planEndDate);
    return d !== null && d <= 14 && d >= 0;
  });

  return (
    <div>
      <SectionHeader
        title={`Welcome, ${currentUser?.name}`}
        subtitle="Your sales dashboard"
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, marginBottom: 24 }}>
        <StatCard label="My Plots"      value={myPlots.length} />
        <StatCard label="Fully Sold"    value={myFullSold}   color={THEME.full_pay.dot} />
        <StatCard label="Part Payment"  value={myPartPaid}   color={THEME.part_pay.dot} />
        <StatCard label="Revenue"       value={formatNaira(myRevenue)} color={THEME.gold} />
      </div>

      {expiringSoon.length > 0 && (
        <Card style={{ marginBottom: 20, borderLeft: `4px solid ${THEME.gold}` }}>
          <div style={{ fontWeight: 700, fontSize: 14, color: THEME.primary, marginBottom: 8 }}>
            ⚠️ {expiringSoon.length} payment plan(s) expiring soon
          </div>
          {expiringSoon.map(p => (
            <div key={p.id} style={{ fontSize: 12, color: "#666", marginBottom: 4 }}>
              Plot #{p.plotNumber} — {p.buyerName} — {daysUntil(p.planEndDate)} day(s) left
            </div>
          ))}
        </Card>
      )}

      <Card>
        <h4 style={{ margin: "0 0 14px", fontFamily: THEME.fontDisplay, fontSize: 15, color: THEME.primary }}>
          My Recent Transactions
        </h4>
        {myTxns.length === 0 && <EmptyState icon="💸" message="No transactions yet" />}
        {myTxns.slice(0, 8).map(txn => (
          <div key={txn.id} style={{
            display: "flex", justifyContent: "space-between",
            padding: "9px 0", borderBottom: `1px solid ${THEME.border}`,
          }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: THEME.primary }}>
                {formatNaira(txn.amount)}
              </div>
              <div style={{ fontSize: 11, color: "#888" }}>
                Plot #{txn.plotNum} · {formatDate(txn.date)}
              </div>
            </div>
            <StatusBadge status="full_pay" label={txn.method === "paystack" ? "Paystack" : "Bank"} />
          </div>
        ))}
      </Card>
    </div>
  );
}


// ============================================================
// SECTION 10: APP SHELL — Sidebar, TopBar, Routing
// ============================================================

function Sidebar({ navItems }) {
  const { activePage, setActivePage, currentUser, logout, pendingCount, unreadNotifCount } = useApp();

  return (
    <div style={{
      width: 220, background: THEME.primary,
      display: "flex", flexDirection: "column",
      height: "100vh", position: "fixed", left: 0, top: 0,
      zIndex: 100, boxShadow: "2px 0 16px rgba(0,0,0,0.12)",
    }}>
      {/* Logo */}
      <div style={{
        padding: "22px 20px 18px",
        borderBottom: "1px solid rgba(255,255,255,0.08)",
      }}>
        <div style={{
          fontFamily: THEME.fontDisplay, fontSize: 14, color: THEME.gold,
          letterSpacing: 1, textTransform: "uppercase", marginBottom: 2,
        }}>Estate Platform</div>
        <div style={{
          fontFamily: THEME.fontBody, fontSize: 12,
          color: "rgba(255,255,255,0.45)",
        }}>{currentUser?.name}</div>
      </div>

      {/* Nav Items */}
      <nav style={{ flex: 1, padding: "12px 10px", overflowY: "auto" }}>
        {navItems.map(item => {
          const isActive = activePage === item.id;
          const badge = item.badge === "approvals" ? pendingCount
                      : item.badge === "notifications" ? unreadNotifCount
                      : 0;
          return (
            <button
              key={item.id}
              onClick={() => setActivePage(item.id)}
              style={{
                width: "100%", display: "flex", alignItems: "center",
                gap: 10, padding: "9px 12px", borderRadius: 8,
                background: isActive ? "rgba(200,146,58,0.18)" : "transparent",
                border: "none", cursor: "pointer",
                color: isActive ? THEME.gold : "rgba(255,255,255,0.65)",
                fontFamily: THEME.fontBody, fontSize: 13, fontWeight: isActive ? 600 : 400,
                marginBottom: 2, textAlign: "left",
                transition: "all 0.15s",
                borderLeft: isActive ? `3px solid ${THEME.gold}` : "3px solid transparent",
              }}
            >
              <span style={{ fontSize: 15, width: 18, textAlign: "center" }}>{item.icon}</span>
              <span style={{ flex: 1 }}>{item.label}</span>
              {badge > 0 && (
                <span style={{
                  background: THEME.gold, color: "#fff",
                  borderRadius: 99, fontSize: 10, fontWeight: 700,
                  padding: "1px 6px", fontFamily: THEME.fontMono,
                }}>{badge}</span>
              )}
            </button>
          );
        })}
      </nav>

      {/* Logout */}
      <div style={{ padding: "12px 10px", borderTop: "1px solid rgba(255,255,255,0.08)" }}>
        <button onClick={logout} style={{
          width: "100%", padding: "9px 12px", borderRadius: 8,
          background: "transparent", border: "none", cursor: "pointer",
          color: "rgba(255,255,255,0.45)", fontFamily: THEME.fontBody,
          fontSize: 13, textAlign: "left", display: "flex", gap: 10, alignItems: "center",
        }}>
          <span>↩</span> Sign Out
        </button>
      </div>
    </div>
  );
}

function MainContent({ children }) {
  return (
    <div style={{
      marginLeft: 220,
      minHeight: "100vh",
      background: THEME.bg,
      padding: "28px 32px",
      fontFamily: THEME.fontBody,
    }}>
      {children}
    </div>
  );
}


// ============================================================
// SECTION 11: ROOT — App Entry Point
// ============================================================

function AppInner() {
  const { currentUser, activePage, setActivePage, activeEstateId, setActiveEstateId, estates } = useApp();

  // Inject fonts & run payment due checker
  usePaymentDueChecker();

  if (!currentUser) return <LoginScreen />;

  const isPrimary = currentUser.role === "primary";
  const navItems  = isPrimary ? NAV_PRIMARY : NAV_SECONDARY;

  // ── Page Router ───────────────────────────────────────────
  const renderPage = () => {
    if (isPrimary) {
      switch (activePage) {
        case "dashboard":     return <PrimaryDashboard />;
        case "estates":       return <EstateManager />;
        case "plot_grid":     return <PlotGrid readOnly={false} />;
        case "approvals":     return <PaymentApprovals />;
        case "developers":    return <DeveloperAccounts />;
        case "sales":         return <SalesRecords />;
        case "notifications": return <NotificationsPage />;
        default:              return <PrimaryDashboard />;
      }
    } else {
      switch (activePage) {
        case "sec_dashboard":     return <SecondaryDashboard />;
        case "sec_estate":        return <PlotGrid readOnly={false} />;
        case "sec_sales":         return <SalesRecords devFilter={currentUser.id} />;
        case "sec_notifications": return <NotificationsPage />;
        default:                  return <SecondaryDashboard />;
      }
    }
  };

  return (
    <div style={{ display: "flex" }}>
      <Sidebar navItems={navItems} />
      <MainContent>
        {renderPage()}
      </MainContent>
      <Toast />
    </div>
  );
}

export default function App() {
  return (
    <AppProvider>
      <FontLoader />
      <style>{`
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: ${THEME.bg}; }
        @keyframes slideUp {
          from { transform: translateY(20px); opacity: 0; }
          to   { transform: translateY(0);    opacity: 1; }
        }
        ::-webkit-scrollbar       { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #C8BFB0; border-radius: 99px; }
        button:hover { opacity: 0.88; }
      `}</style>
      <AppInner />
    </AppProvider>
  );
}