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

/* ─── Google Fonts injected once ─── */
const FontLink = () => (
  <style>{`@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&display=swap');`}</style>
);

/* ─── Design tokens ─── */
const T = {
  black:    "#07080d",
  deep:     "#0d0f18",
  panel:    "#121420",
  card:     "#161825",
  border:   "#1e2235",
  accent:   "#e8401c",
  amber:    "#f5a623",
  teal:     "#00c2a8",
  text:     "#dde0ee",
  muted:    "#5a5f7a",
  success:  "#22c55e",
};

/* ─── Inline styles helpers ─── */
const css = (obj) => obj;

/* ══════════════════════════════════════════════
   DATA
══════════════════════════════════════════════ */
const features = [
  {
    icon: "🚗",
    title: "Vehicle Inventory",
    desc: "Real-time tracking of every vehicle across all lots — stock levels, VINs, specs, pricing, and photos in one place.",
    tag: "Core Module",
    color: T.accent,
  },
  {
    icon: "📊",
    title: "Sales Pipeline",
    desc: "Manage leads, test drives, negotiations and closings. Full CRM built for dealerships with commission tracking.",
    tag: "Sales",
    color: T.amber,
  },
  {
    icon: "🔧",
    title: "Service & Repairs",
    desc: "Workshop scheduling, job cards, parts requisition and technician assignment all from a single dashboard.",
    tag: "Workshop",
    color: T.teal,
  },
  {
    icon: "📦",
    title: "Parts Management",
    desc: "Smart parts inventory with auto-reorder thresholds, supplier management and compatibility cross-references.",
    tag: "Inventory",
    color: "#a855f7",
  },
  {
    icon: "💰",
    title: "Finance & F&I",
    desc: "Loan applications, insurance products, warranty upsells and deal structuring — integrated with major lenders.",
    tag: "Finance",
    color: T.success,
  },
  {
    icon: "📈",
    title: "Analytics & Reports",
    desc: "Live KPI dashboards, profit margins per unit, sales-rep leaderboards and exportable board-level reports.",
    tag: "Insights",
    color: "#38bdf8",
  },
];

const inventorySamples = [
  { make: "Toyota", model: "Camry XSE", year: 2024, price: "₹28,50,000", km: "0 km", status: "Available", color: "#e8401c", badge: "New" },
  { make: "Hyundai", model: "Creta SX+", year: 2023, price: "₹18,90,000", km: "12,400 km", status: "Available", color: T.success, badge: "Used" },
  { make: "Mahindra", model: "Thar 4×4", year: 2024, price: "₹16,20,000", km: "0 km", status: "Reserved", color: T.amber, badge: "New" },
  { make: "Maruti", model: "Brezza ZXi", year: 2023, price: "₹13,45,000", km: "8,200 km", status: "Available", color: T.success, badge: "Used" },
  { make: "Kia", model: "Seltos HTX", year: 2024, price: "₹19,80,000", km: "0 km", status: "Available", color: T.accent, badge: "New" },
  { make: "Tata", model: "Nexon EV MAX", year: 2024, price: "₹22,00,000", km: "0 km", status: "Sold", color: T.muted, badge: "EV" },
];

const stats = [
  { num: "12,000+", label: "Vehicles Managed" },
  { num: "340+",    label: "Dealerships" },
  { num: "98.6%",   label: "Uptime SLA" },
  { num: "₹2,400Cr", label: "Inventory Value Tracked" },
];

const testimonials = [
  {
    quote: "AllInOne DMS transformed how we manage our 3 showrooms. Inventory updates are instant, and the pipeline view is a game-changer.",
    name: "Rajesh Sharma",
    role: "GM, Sharma Motors — Bhiwani",
    avatar: "RS",
  },
  {
    quote: "Before this, we had Excel sheets everywhere. Now everything — sales, service, finance — lives in one place. Our team loves it.",
    name: "Priya Verma",
    role: "Dealer Principal, Verma Auto Group",
    avatar: "PV",
  },
  {
    quote: "The vehicle inventory module alone saved us 4 hours a day. Stock-outs haven't happened since we switched.",
    name: "Anil Kapoor",
    role: "Operations Head, Capital Cars Delhi",
    avatar: "AK",
  },
];

/* ══════════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════════ */

function CarIcon({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="white">
      <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
    </svg>
  );
}

/* ── Header ── */
function Header({ onLogin }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const navLinks = ["Features", "Inventory", "Pricing", "About"];

  return (
    <header style={css({
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      transition: "all .3s",
      background: scrolled ? "rgba(7,8,13,.92)" : "transparent",
      backdropFilter: scrolled ? "blur(18px)" : "none",
      borderBottom: scrolled ? `1px solid ${T.border}` : "1px solid transparent",
    })}>
      <div style={css({ maxWidth: 1200, margin: "0 auto", padding: "0 24px", height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" })}>
        {/* Logo */}
        <div style={css({ display: "flex", alignItems: "center", gap: 10 })}>
          <div style={css({ width: 38, height: 38, background: T.accent, borderRadius: 8, display: "grid", placeItems: "center", flexShrink: 0 })}>
            <CarIcon size={22} />
          </div>
          <span style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, letterSpacing: 2, color: T.text, lineHeight: 1 })}>
            AllInOne<span style={{ color: T.accent }}> DMS</span>
          </span>
        </div>

        {/* Desktop nav */}
        <nav style={css({ display: "flex", gap: 32, alignItems: "center" })} className="desktop-nav">
          {navLinks.map(l => (
            <a key={l} href={`#${l.toLowerCase()}`} style={css({ color: T.muted, fontSize: 14, fontFamily: "'Syne', sans-serif", fontWeight: 600, textDecoration: "none", letterSpacing: .5, transition: "color .2s" })}
              onMouseEnter={e => e.target.style.color = T.text}
              onMouseLeave={e => e.target.style.color = T.muted}>
              {l}
            </a>
          ))}
        </nav>

        {/* CTA */}
        <div style={css({ display: "flex", gap: 10, alignItems: "center" })}>
          <button onClick={onLogin} style={css({
            padding: "9px 22px", background: "transparent", border: `1px solid ${T.border}`,
            borderRadius: 8, color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 600,
            fontSize: 13, cursor: "pointer", transition: "all .2s",
          })}
            onMouseEnter={e => { e.target.style.borderColor = T.accent; e.target.style.color = T.accent; }}
            onMouseLeave={e => { e.target.style.borderColor = T.border; e.target.style.color = T.text; }}>
            Login
          </button>
          <button style={css({
            padding: "9px 22px", background: T.accent, border: "none",
            borderRadius: 8, color: "white", fontFamily: "'Syne', sans-serif",
            fontWeight: 700, fontSize: 13, cursor: "pointer", transition: "all .2s",
          })}
            onMouseEnter={e => { e.target.style.background = "#c93315"; e.target.style.transform = "translateY(-1px)"; }}
            onMouseLeave={e => { e.target.style.background = T.accent; e.target.style.transform = ""; }}>
            Get Demo
          </button>
          {/* Hamburger */}
          <button onClick={() => setMenuOpen(o => !o)} style={css({ display: "none", background: "none", border: "none", cursor: "pointer", color: T.text, fontSize: 22, padding: 4 })} className="hamburger">
            {menuOpen ? "✕" : "☰"}
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={css({ background: T.deep, borderTop: `1px solid ${T.border}`, padding: "16px 24px 20px" })}>
          {navLinks.map(l => (
            <a key={l} href={`#${l.toLowerCase()}`} onClick={() => setMenuOpen(false)}
              style={css({ display: "block", padding: "10px 0", color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 600, fontSize: 15, textDecoration: "none", borderBottom: `1px solid ${T.border}` })}>
              {l}
            </a>
          ))}
          <div style={css({ display: "flex", gap: 10, marginTop: 16 })}>
            <button onClick={() => { setMenuOpen(false); onLogin(); }} style={css({ flex: 1, padding: "10px", background: "transparent", border: `1px solid ${T.border}`, borderRadius: 8, color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 600, fontSize: 14, cursor: "pointer" })}>Login</button>
            <button style={css({ flex: 1, padding: "10px", background: T.accent, border: "none", borderRadius: 8, color: "white", fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 14, cursor: "pointer" })}>Get Demo</button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 768px) {
          .desktop-nav { display: none !important; }
          .hamburger { display: block !important; }
        }
      `}</style>
    </header>
  );
}

/* ── Hero ── */
function Hero({ onLogin }) {
  return (
    <section style={css({ minHeight: "100vh", display: "flex", alignItems: "center", position: "relative", overflow: "hidden", paddingTop: 68 })}>
      {/* BG grid */}
      <div style={css({ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(232,64,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(232,64,28,.05) 1px,transparent 1px)`, backgroundSize: "48px 48px", pointerEvents: "none" })} />
      {/* Glow orbs */}
      <div style={css({ position: "absolute", top: -100, left: -150, width: 550, height: 550, borderRadius: "50%", background: "rgba(232,64,28,.15)", filter: "blur(130px)", pointerEvents: "none" })} />
      <div style={css({ position: "absolute", bottom: -80, right: -100, width: 400, height: 400, borderRadius: "50%", background: "rgba(245,166,35,.10)", filter: "blur(110px)", pointerEvents: "none" })} />

      <div style={css({ maxWidth: 1200, margin: "0 auto", padding: "80px 24px", width: "100%", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" })} className="hero-grid">

        {/* Left copy */}
        <div>
          <div style={css({ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(232,64,28,.1)", border: `1px solid rgba(232,64,28,.25)`, borderRadius: 100, padding: "6px 14px", marginBottom: 24 })}>
            <span style={css({ width: 7, height: 7, borderRadius: "50%", background: T.accent, boxShadow: `0 0 8px ${T.accent}`, animation: "pulse 2s infinite" })} />
            <span style={css({ fontSize: 12, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 600, letterSpacing: 1 })}>LIVE PLATFORM — allinonedms.com</span>
          </div>

          <h1 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(48px, 7vw, 88px)", lineHeight: .95, letterSpacing: 1, marginBottom: 24, color: T.text })}>
            THE COMPLETE<br />
            <span style={{ color: T.accent }}>DEALER</span><br />
            MANAGEMENT<br />
            SYSTEM
          </h1>

          <p style={css({ fontSize: 16, color: T.muted, lineHeight: 1.7, marginBottom: 36, maxWidth: 480, fontFamily: "'Syne', sans-serif" })}>
            AllInOne DMS unifies your vehicle inventory, sales pipeline, service workshop, parts store, and F&amp;I — all on one powerful platform built for modern Indian dealerships.
          </p>

          <div style={css({ display: "flex", gap: 12, flexWrap: "wrap" })}>
            <button style={css({
              padding: "14px 32px", background: T.accent, border: "none", borderRadius: 10,
              color: "white", fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2,
              cursor: "pointer", transition: "all .2s",
            })}
              onMouseEnter={e => { e.target.style.transform = "translateY(-2px)"; e.target.style.boxShadow = `0 8px 28px rgba(232,64,28,.4)`; }}
              onMouseLeave={e => { e.target.style.transform = ""; e.target.style.boxShadow = ""; }}>
              START FREE TRIAL
            </button>
            <button onClick={onLogin} style={css({
              padding: "14px 32px", background: "transparent", border: `1px solid ${T.border}`,
              borderRadius: 10, color: T.text, fontFamily: "'Bebas Neue', sans-serif", fontSize: 20,
              letterSpacing: 2, cursor: "pointer", transition: "all .2s",
            })}
              onMouseEnter={e => { e.target.style.borderColor = T.accent; e.target.style.color = T.accent; }}
              onMouseLeave={e => { e.target.style.borderColor = T.border; e.target.style.color = T.text; }}>
              DEALER LOGIN →
            </button>
          </div>

          {/* trust badges */}
          <div style={css({ display: "flex", gap: 20, marginTop: 36, flexWrap: "wrap" })}>
            {["ISO 27001 Certified", "SOC 2 Compliant", "GDPR Ready"].map(b => (
              <span key={b} style={css({ fontSize: 11.5, color: T.muted, fontFamily: "'Syne', sans-serif", display: "flex", alignItems: "center", gap: 5 })}>
                <span style={{ color: T.success }}>✓</span> {b}
              </span>
            ))}
          </div>
        </div>

        {/* Right — floating dashboard mockup */}
        <div style={css({ position: "relative" })} className="hero-right">
          <DashboardMockup />
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
        @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
        @media(max-width:900px){ .hero-grid{grid-template-columns:1fr !important;} .hero-right{display:none !important;} }
      `}</style>
    </section>
  );
}

/* ── Dashboard Mockup ── */
function DashboardMockup() {
  return (
    <div style={css({ animation: "float 5s ease-in-out infinite", filter: "drop-shadow(0 30px 60px rgba(232,64,28,.2))" })}>
      <div style={css({ background: T.panel, border: `1px solid ${T.border}`, borderRadius: 16, overflow: "hidden", fontSize: 12 })}>
        {/* Topbar */}
        <div style={css({ background: T.card, padding: "12px 16px", display: "flex", alignItems: "center", gap: 10, borderBottom: `1px solid ${T.border}` })}>
          <div style={css({ display: "flex", gap: 6 })}>
            {["#ff5f57","#febc2e","#28c840"].map(c => <div key={c} style={{ width: 10, height: 10, borderRadius: "50%", background: c }} />)}
          </div>
          <div style={css({ flex: 1, background: T.panel, borderRadius: 6, padding: "4px 10px", color: T.muted, fontSize: 11 })}>allinonedms.com/dashboard</div>
        </div>
        {/* Content */}
        <div style={css({ padding: 16 })}>
          {/* Mini stats */}
          <div style={css({ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginBottom: 14 })}>
            {[["847", "In Stock", T.accent], ["124", "Sold/Mo", T.success], ["32", "Pending", T.amber]].map(([n, l, c]) => (
              <div key={l} style={css({ background: T.card, border: `1px solid ${T.border}`, borderRadius: 8, padding: "10px 8px", textAlign: "center" })}>
                <div style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, color: c, letterSpacing: 1 })}>{n}</div>
                <div style={css({ fontSize: 9, color: T.muted, marginTop: 2, fontFamily: "'Syne', sans-serif", textTransform: "uppercase", letterSpacing: .5 })}>{l}</div>
              </div>
            ))}
          </div>
          {/* Mini inventory rows */}
          {[
            ["2024 Toyota Camry", "₹28.5L", T.accent, "New"],
            ["2023 Hyundai Creta", "₹18.9L", T.success, "Used"],
            ["2024 Mahindra Thar", "₹16.2L", T.amber, "Reserved"],
          ].map(([name, price, c, status]) => (
            <div key={name} style={css({ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "8px 10px", background: T.card, borderRadius: 7, marginBottom: 6, border: `1px solid ${T.border}` })}>
              <div style={css({ display: "flex", alignItems: "center", gap: 8 })}>
                <div style={css({ width: 28, height: 28, borderRadius: 6, background: `${c}22`, display: "grid", placeItems: "center", fontSize: 13 })}>🚗</div>
                <div>
                  <div style={css({ color: T.text, fontSize: 11, fontFamily: "'Syne', sans-serif", fontWeight: 600 })}>{name}</div>
                  <div style={css({ color: T.muted, fontSize: 9 })}>{price}</div>
                </div>
              </div>
              <span style={css({ fontSize: 9, padding: "2px 7px", borderRadius: 100, background: `${c}22`, color: c, fontFamily: "'Syne', sans-serif", fontWeight: 700 })}>{status}</span>
            </div>
          ))}
          {/* Mini bar chart */}
          <div style={css({ marginTop: 12, background: T.card, border: `1px solid ${T.border}`, borderRadius: 8, padding: "10px 12px" })}>
            <div style={css({ fontSize: 10, color: T.muted, fontFamily: "'Syne', sans-serif", marginBottom: 8 })}>MONTHLY SALES TREND</div>
            <div style={css({ display: "flex", alignItems: "flex-end", gap: 5, height: 36 })}>
              {[45, 62, 55, 78, 90, 84, 95, 88, 100, 92, 110, 124].map((v, i) => (
                <div key={i} style={css({ flex: 1, background: i === 11 ? T.accent : `${T.accent}44`, borderRadius: "3px 3px 0 0", height: `${v}%`, transition: "height .3s" })} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Stats ── */
function StatsBar() {
  return (
    <section style={css({ background: T.card, borderTop: `1px solid ${T.border}`, borderBottom: `1px solid ${T.border}` })}>
      <div style={css({ maxWidth: 1200, margin: "0 auto", padding: "0 24px", display: "grid", gridTemplateColumns: "repeat(4,1fr)" })} className="stats-grid">
        {stats.map(({ num, label }, i) => (
          <div key={i} style={css({ padding: "32px 20px", textAlign: "center", borderRight: i < 3 ? `1px solid ${T.border}` : "none" })} className="stat-item">
            <div style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 40, color: T.accent, letterSpacing: 1, lineHeight: 1 })}>{num}</div>
            <div style={css({ fontSize: 12, color: T.muted, fontFamily: "'Syne', sans-serif", textTransform: "uppercase", letterSpacing: 1, marginTop: 4 })}>{label}</div>
          </div>
        ))}
      </div>
      <style>{`@media(max-width:640px){ .stats-grid{grid-template-columns:repeat(2,1fr) !important;} .stat-item{border-right:none !important; border-bottom:1px solid ${T.border};} }`}</style>
    </section>
  );
}

/* ── Features ── */
function Features() {
  return (
    <section id="features" style={css({ padding: "100px 24px", maxWidth: 1200, margin: "0 auto" })}>
      <div style={css({ textAlign: "center", marginBottom: 64 })}>
        <div style={css({ fontSize: 11, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", marginBottom: 12 })}>EVERYTHING YOU NEED</div>
        <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(36px, 5vw, 60px)", color: T.text, letterSpacing: 1, lineHeight: 1, marginBottom: 16 })}>
          ONE PLATFORM.<br /><span style={{ color: T.accent }}>EVERY FUNCTION.</span>
        </h2>
        <p style={css({ fontSize: 15, color: T.muted, fontFamily: "'Syne', sans-serif", maxWidth: 520, margin: "0 auto", lineHeight: 1.7 })}>
          From the moment a vehicle arrives on your lot to the day it drives off — and everything in between.
        </p>
      </div>

      <div style={css({ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 })} className="features-grid">
        {features.map((f, i) => (
          <div key={i} style={css({
            background: T.card, border: `1px solid ${T.border}`, borderRadius: 14, padding: "28px 24px",
            transition: "all .25s", cursor: "default", position: "relative", overflow: "hidden",
          })}
            onMouseEnter={e => { e.currentTarget.style.borderColor = f.color; e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = `0 12px 32px ${f.color}22`; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = T.border; e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}>
            <div style={css({ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: f.color, opacity: 0.6 })} />
            <div style={css({ width: 46, height: 46, background: `${f.color}18`, borderRadius: 10, display: "grid", placeItems: "center", fontSize: 22, marginBottom: 16 })}>{f.icon}</div>
            <div style={css({ fontSize: 10, color: f.color, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 1.5, textTransform: "uppercase", marginBottom: 8 })}>{f.tag}</div>
            <h3 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, color: T.text, letterSpacing: 1, marginBottom: 10 })}>{f.title}</h3>
            <p style={css({ fontSize: 13.5, color: T.muted, fontFamily: "'Syne', sans-serif", lineHeight: 1.65 })}>{f.desc}</p>
          </div>
        ))}
      </div>
      <style>{`@media(max-width:900px){ .features-grid{grid-template-columns:repeat(2,1fr) !important;} } @media(max-width:560px){ .features-grid{grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
}

/* ── Inventory Section ── */
function InventorySection() {
  const [filter, setFilter] = useState("All");
  const filters = ["All", "New", "Used", "EV", "Reserved"];
  const filtered = filter === "All" ? inventorySamples : inventorySamples.filter(v => v.badge === filter);

  return (
    <section id="inventory" style={css({ padding: "80px 24px", background: T.deep, borderTop: `1px solid ${T.border}`, borderBottom: `1px solid ${T.border}` })}>
      <div style={css({ maxWidth: 1200, margin: "0 auto" })}>
        <div style={css({ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 20 })}>
          <div>
            <div style={css({ fontSize: 11, color: T.teal, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", marginBottom: 10 })}>LIVE PREVIEW</div>
            <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(32px, 4vw, 52px)", color: T.text, letterSpacing: 1, lineHeight: 1 })}>
              VEHICLE INVENTORY<br /><span style={{ color: T.teal }}>MANAGEMENT</span>
            </h2>
          </div>
          {/* Filter pills */}
          <div style={css({ display: "flex", gap: 8, flexWrap: "wrap" })}>
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} style={css({
                padding: "7px 16px", borderRadius: 100, border: `1px solid ${filter === f ? T.teal : T.border}`,
                background: filter === f ? `${T.teal}18` : "transparent",
                color: filter === f ? T.teal : T.muted,
                fontFamily: "'Syne', sans-serif", fontWeight: 600, fontSize: 12, cursor: "pointer",
                transition: "all .2s",
              })}>
                {f}
              </button>
            ))}
          </div>
        </div>

        {/* Table header */}
        <div style={css({ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 12, padding: "10px 16px", borderBottom: `1px solid ${T.border}`, marginBottom: 4 })} className="inv-table">
          {["Vehicle", "Year", "Price", "Mileage", "Status"].map(h => (
            <div key={h} style={css({ fontSize: 10, color: T.muted, fontFamily: "'Syne', sans-serif", fontWeight: 700, textTransform: "uppercase", letterSpacing: 1 })}>{h}</div>
          ))}
        </div>

        {filtered.map((v, i) => (
          <div key={i} style={css({
            display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 12,
            padding: "14px 16px", borderBottom: `1px solid ${T.border}`, borderRadius: 8,
            transition: "background .2s", cursor: "pointer", alignItems: "center",
          })} className="inv-row inv-table"
            onMouseEnter={e => e.currentTarget.style.background = T.card}
            onMouseLeave={e => e.currentTarget.style.background = ""}>
            <div style={css({ display: "flex", alignItems: "center", gap: 10 })}>
              <div style={css({ width: 36, height: 36, borderRadius: 8, background: `${v.color}18`, display: "grid", placeItems: "center", fontSize: 16, flexShrink: 0 })}>🚗</div>
              <div>
                <div style={css({ color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 14 })}>{v.make} {v.model}</div>
                <span style={css({ fontSize: 10, padding: "1px 7px", borderRadius: 100, background: `${v.color}22`, color: v.color, fontFamily: "'Syne', sans-serif", fontWeight: 700 })}>{v.badge}</span>
              </div>
            </div>
            <div style={css({ color: T.muted, fontFamily: "'Syne', sans-serif", fontSize: 13 })}>{v.year}</div>
            <div style={css({ color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 600, fontSize: 13 })}>{v.price}</div>
            <div style={css({ color: T.muted, fontFamily: "'Syne', sans-serif", fontSize: 13 })}>{v.km}</div>
            <div>
              <span style={css({
                fontSize: 11, padding: "4px 10px", borderRadius: 100, fontFamily: "'Syne', sans-serif", fontWeight: 700,
                background: v.status === "Available" ? `${T.success}18` : v.status === "Reserved" ? `${T.amber}18` : `${T.muted}18`,
                color: v.status === "Available" ? T.success : v.status === "Reserved" ? T.amber : T.muted,
              })}>{v.status}</span>
            </div>
          </div>
        ))}

        {/* CTA below table */}
        <div style={css({ marginTop: 28, padding: "20px 24px", background: T.card, border: `1px solid ${T.border}`, borderRadius: 12, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 })}>
          <div>
            <div style={css({ color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 15, marginBottom: 4 })}>Showing sample inventory preview</div>
            <div style={css({ color: T.muted, fontSize: 13, fontFamily: "'Syne', sans-serif" })}>Your full inventory syncs live across all lots and devices after login.</div>
          </div>
          <div style={css({ display: "flex", gap: 8 })}>
            <span style={css({ width: 8, height: 8, borderRadius: "50%", background: T.success, boxShadow: `0 0 8px ${T.success}`, animation: "pulse 2s infinite", marginTop: 6, flexShrink: 0 })} />
            <span style={css({ fontSize: 12, color: "#7acea0", fontFamily: "'Syne', sans-serif" })}>Live sync active — last updated 2 min ago</span>
          </div>
        </div>
      </div>
      <style>{`@media(max-width:700px){ .inv-table{grid-template-columns:2fr 1fr 1fr !important;} .inv-row>div:nth-child(3),.inv-row>div:nth-child(4){ display:none; } }`}</style>
    </section>
  );
}

/* ── How It Works ── */
function HowItWorks() {
  const steps = [
    { num: "01", title: "Onboard Your Dealership", desc: "Set up your lots, teams, roles and vehicle catalog in under 30 minutes with guided onboarding.", color: T.accent },
    { num: "02", title: "Import Your Inventory", desc: "Bulk import existing stock via CSV, scan VINs, or connect directly to OEM inventory feeds.", color: T.amber },
    { num: "03", title: "Go Live", desc: "Your team logs in, assigns vehicles, processes deals and runs reports — from day one.", color: T.teal },
  ];
  return (
    <section style={css({ padding: "100px 24px", maxWidth: 1200, margin: "0 auto" })}>
      <div style={css({ textAlign: "center", marginBottom: 64 })}>
        <div style={css({ fontSize: 11, color: T.amber, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", marginBottom: 12 })}>GET STARTED IN MINUTES</div>
        <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(34px, 5vw, 58px)", color: T.text, letterSpacing: 1, lineHeight: 1 })}>
          HOW IT <span style={{ color: T.amber }}>WORKS</span>
        </h2>
      </div>
      <div style={css({ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, position: "relative" })} className="steps-grid">
        {steps.map((s, i) => (
          <div key={i} style={css({ background: T.card, border: `1px solid ${T.border}`, borderRadius: 16, padding: "36px 28px", position: "relative", overflow: "hidden" })}>
            <div style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 80, color: `${s.color}12`, position: "absolute", top: -12, right: 16, lineHeight: 1, pointerEvents: "none" })}>{s.num}</div>
            <div style={css({ width: 44, height: 44, background: `${s.color}18`, borderRadius: 10, display: "grid", placeItems: "center", marginBottom: 16 })}>
              <span style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, color: s.color })}>{s.num}</span>
            </div>
            <h3 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, color: T.text, letterSpacing: .5, marginBottom: 10 })}>{s.title}</h3>
            <p style={css({ fontSize: 13.5, color: T.muted, fontFamily: "'Syne', sans-serif", lineHeight: 1.65 })}>{s.desc}</p>
          </div>
        ))}
      </div>
      <style>{`@media(max-width:700px){ .steps-grid{grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
}

/* ── Testimonials ── */
function Testimonials() {
  return (
    <section style={css({ padding: "80px 24px", background: T.deep, borderTop: `1px solid ${T.border}` })}>
      <div style={css({ maxWidth: 1200, margin: "0 auto" })}>
        <div style={css({ textAlign: "center", marginBottom: 56 })}>
          <div style={css({ fontSize: 11, color: "#a855f7", fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", marginBottom: 12 })}>TRUSTED BY DEALERS</div>
          <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(34px, 5vw, 56px)", color: T.text, letterSpacing: 1 })}>
            WHAT DEALERS <span style={{ color: "#a855f7" }}>SAY</span>
          </h2>
        </div>
        <div style={css({ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 })} className="testi-grid">
          {testimonials.map((t, i) => (
            <div key={i} style={css({ background: T.card, border: `1px solid ${T.border}`, borderRadius: 14, padding: "28px 24px" })}>
              <div style={css({ fontSize: 28, color: "#a855f7", fontFamily: "Georgia, serif", lineHeight: 1, marginBottom: 12 })}>"</div>
              <p style={css({ fontSize: 14, color: T.text, fontFamily: "'Syne', sans-serif", lineHeight: 1.7, marginBottom: 20 })}>{t.quote}</p>
              <div style={css({ display: "flex", alignItems: "center", gap: 12 })}>
                <div style={css({ width: 40, height: 40, borderRadius: "50%", background: `#a855f718`, border: `1px solid #a855f744`, display: "grid", placeItems: "center", color: "#a855f7", fontFamily: "'Bebas Neue', sans-serif", fontSize: 15, flexShrink: 0 })}>{t.avatar}</div>
                <div>
                  <div style={css({ color: T.text, fontFamily: "'Syne', sans-serif", fontWeight: 700, fontSize: 13 })}>{t.name}</div>
                  <div style={css({ color: T.muted, fontSize: 11, fontFamily: "'Syne', sans-serif" })}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media(max-width:900px){ .testi-grid{grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
}

/* ── CTA Banner ── */
function CTABanner({ onLogin }) {
  return (
    <section style={css({ padding: "80px 24px" })}>
      <div style={css({ maxWidth: 900, margin: "0 auto", background: `linear-gradient(135deg, ${T.card} 0%, rgba(232,64,28,.08) 100%)`, border: `1px solid ${T.border}`, borderRadius: 20, padding: "56px 40px", textAlign: "center", position: "relative", overflow: "hidden" })}>
        <div style={css({ position: "absolute", top: -60, right: -60, width: 240, height: 240, borderRadius: "50%", background: `rgba(232,64,28,.08)`, filter: "blur(60px)", pointerEvents: "none" })} />
        <div style={css({ fontSize: 11, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 3, textTransform: "uppercase", marginBottom: 16 })}>READY TO TRANSFORM YOUR DEALERSHIP?</div>
        <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(36px, 5vw, 64px)", color: T.text, letterSpacing: 1, lineHeight: 1, marginBottom: 16 })}>
          JOIN 340+ DEALERS<br /><span style={{ color: T.accent }}>ON ALLINONEDMS.COM</span>
        </h2>
        <p style={css({ fontSize: 15, color: T.muted, fontFamily: "'Syne', sans-serif", marginBottom: 36, maxWidth: 500, margin: "0 auto 36px" })}>
          Start your 14-day free trial. No credit card required. Full access to all modules.
        </p>
        <div style={css({ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" })}>
          <button style={css({ padding: "14px 36px", background: T.accent, border: "none", borderRadius: 10, color: "white", fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2, cursor: "pointer" })}>
            START FREE TRIAL
          </button>
          <button onClick={onLogin} style={css({ padding: "14px 36px", background: "transparent", border: `1px solid ${T.border}`, borderRadius: 10, color: T.text, fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2, cursor: "pointer" })}>
            EXISTING DEALER LOGIN
          </button>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ── */
function Footer() {
  return (
    <footer style={css({ background: T.card, borderTop: `1px solid ${T.border}`, padding: "48px 24px 28px" })}>
      <div style={css({ maxWidth: 1200, margin: "0 auto" })}>
        <div style={css({ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 40, marginBottom: 40 })} className="footer-grid">
          <div>
            <div style={css({ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 })}>
              <div style={css({ width: 34, height: 34, background: T.accent, borderRadius: 7, display: "grid", placeItems: "center" })}>
                <CarIcon size={20} />
              </div>
              <span style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2, color: T.text })}>AllInOne<span style={{ color: T.accent }}> DMS</span></span>
            </div>
            <p style={css({ fontSize: 13, color: T.muted, fontFamily: "'Syne', sans-serif", lineHeight: 1.7, maxWidth: 280 })}>
              The complete dealer management system for modern Indian dealerships. Built for scale, designed for simplicity.
            </p>
            <div style={css({ marginTop: 16, fontSize: 12, color: T.muted, fontFamily: "'Syne', sans-serif" })}>allinonedms.com</div>
          </div>
          {[
            { title: "Product", links: ["Features", "Pricing", "Changelog", "Roadmap"] },
            { title: "Company", links: ["About", "Careers", "Blog", "Press"] },
            { title: "Support", links: ["Documentation", "Help Center", "Contact", "Status"] },
          ].map(col => (
            <div key={col.title}>
              <div style={css({ fontSize: 11, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 2, textTransform: "uppercase", marginBottom: 16 })}>{col.title}</div>
              {col.links.map(l => (
                <a key={l} href="#" style={css({ display: "block", color: T.muted, fontFamily: "'Syne', sans-serif", fontSize: 13, textDecoration: "none", marginBottom: 10, transition: "color .2s" })}
                  onMouseEnter={e => e.target.style.color = T.text}
                  onMouseLeave={e => e.target.style.color = T.muted}>{l}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={css({ borderTop: `1px solid ${T.border}`, paddingTop: 20, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 })}>
          <div style={css({ fontSize: 12, color: T.muted, fontFamily: "'Syne', sans-serif" })}>© 2026 allinonedms.com — All rights reserved.</div>
          <div style={css({ display: "flex", gap: 20 })}>
            {["Privacy Policy", "Terms of Service", "Cookie Policy"].map(l => (
              <a key={l} href="#" style={css({ fontSize: 12, color: T.muted, textDecoration: "none", fontFamily: "'Syne', sans-serif" })}>{l}</a>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media(max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr !important;} } @media(max-width:480px){ .footer-grid{grid-template-columns:1fr !important;} }`}</style>
    </footer>
  );
}

/* ── Login Modal ── */
function LoginModal({ onClose }) {
  const [role, setRole] = useState(0);
  const [status, setStatus] = useState("idle");
  const roles = ["Dealer Admin", "Sales Rep", "Manager"];

  const handleLogin = () => {
    setStatus("loading");
    setTimeout(() => setStatus("success"), 1400);
    setTimeout(() => { setStatus("idle"); }, 4000);
  };

  return (
    <div style={css({ position: "fixed", inset: 0, zIndex: 999, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 })}
      onClick={onClose}>
      <div style={css({ position: "absolute", inset: 0, background: "rgba(7,8,13,.88)", backdropFilter: "blur(10px)" })} />
      <div style={css({ background: T.panel, border: `1px solid ${T.border}`, borderRadius: 18, padding: "36px 32px", width: "100%", maxWidth: 420, position: "relative", zIndex: 1, animation: "fadeUp .3s ease" })}
        onClick={e => e.stopPropagation()}>
        <button onClick={onClose} style={css({ position: "absolute", top: 16, right: 16, background: "none", border: "none", color: T.muted, fontSize: 20, cursor: "pointer", lineHeight: 1 })}>✕</button>

        <div style={css({ display: "flex", alignItems: "center", gap: 10, marginBottom: 24 })}>
          <div style={css({ width: 34, height: 34, background: T.accent, borderRadius: 7, display: "grid", placeItems: "center" })}>
            <CarIcon size={20} />
          </div>
          <span style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2, color: T.text })}>AllInOne<span style={{ color: T.accent }}> DMS</span></span>
        </div>

        <div style={css({ fontSize: 10, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 700, letterSpacing: 2, textTransform: "uppercase", marginBottom: 6 })}>allinonedms.com · Dealer Portal</div>
        <h2 style={css({ fontFamily: "'Bebas Neue', sans-serif", fontSize: 36, color: T.text, letterSpacing: 1, marginBottom: 4, lineHeight: 1 })}>Welcome <span style={{ color: T.accent }}>Back.</span></h2>
        <p style={css({ fontSize: 13, color: T.muted, fontFamily: "'Syne', sans-serif", marginBottom: 24 })}>Sign in to manage your vehicle inventory & dealership.</p>

        {/* Role tabs */}
        <div style={css({ display: "flex", background: T.card, border: `1px solid ${T.border}`, borderRadius: 10, padding: 4, gap: 4, marginBottom: 22 })}>
          {roles.map((r, i) => (
            <button key={r} onClick={() => setRole(i)} style={css({
              flex: 1, padding: "8px 4px", border: "none", borderRadius: 7, cursor: "pointer",
              background: role === i ? T.accent : "transparent",
              color: role === i ? "white" : T.muted,
              fontFamily: "'Syne', sans-serif", fontWeight: 600, fontSize: 12, transition: "all .2s",
            })}>{r}</button>
          ))}
        </div>

        {/* Email */}
        <div style={css({ marginBottom: 16 })}>
          <label style={css({ display: "block", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: 1, color: T.muted, fontFamily: "'Syne', sans-serif", marginBottom: 7 })}>Email Address</label>
          <input type="email" placeholder="you@allinonedms.com" style={css({ width: "100%", padding: "12px 14px", background: T.card, border: `1px solid ${T.border}`, borderRadius: 9, color: T.text, fontFamily: "'Syne', sans-serif", fontSize: 14, outline: "none", boxSizing: "border-box" })} />
        </div>

        {/* Password */}
        <div style={css({ marginBottom: 14 })}>
          <label style={css({ display: "block", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: 1, color: T.muted, fontFamily: "'Syne', sans-serif", marginBottom: 7 })}>Password</label>
          <input type="password" placeholder="Enter your password" style={css({ width: "100%", padding: "12px 14px", background: T.card, border: `1px solid ${T.border}`, borderRadius: 9, color: T.text, fontFamily: "'Syne', sans-serif", fontSize: 14, outline: "none", boxSizing: "border-box" })} />
        </div>

        <div style={css({ display: "flex", justifyContent: "flex-end", marginBottom: 20 })}>
          <a href="#" style={css({ fontSize: 12, color: T.accent, fontFamily: "'Syne', sans-serif", fontWeight: 600, textDecoration: "none" })}>Forgot password?</a>
        </div>

        <button onClick={handleLogin} style={css({
          width: "100%", padding: "14px", border: "none", borderRadius: 10, cursor: "pointer",
          fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 2,
          background: status === "success" ? T.success : T.accent,
          color: "white", transition: "background .3s",
        })}>
          {status === "loading" ? "AUTHENTICATING..." : status === "success" ? "✓ ACCESS GRANTED" : "ACCESS DASHBOARD"}
        </button>

        {/* Live inventory badge */}
        <div style={css({ marginTop: 18, padding: "12px 14px", background: "rgba(34,197,94,.06)", border: `1px solid rgba(34,197,94,.2)`, borderRadius: 10, display: "flex", alignItems: "center", gap: 10 })}>
          <span style={css({ width: 8, height: 8, borderRadius: "50%", background: T.success, boxShadow: `0 0 8px ${T.success}`, flexShrink: 0, animation: "pulse 2s infinite" })} />
          <span style={css({ fontSize: 12, color: "#7acea0", fontFamily: "'Syne', sans-serif" })}><strong style={{ color: T.success }}>Live Inventory Sync</strong> — 847 vehicles, last sync 2 min ago</span>
        </div>
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════
   ROOT APP
══════════════════════════════════════════════ */
export default function App() {
  const [showLogin, setShowLogin] = useState(false);

  return (
    <div style={css({ background: T.black, minHeight: "100vh", color: T.text })}>
      <FontLink />
      <style>{`
        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { background: ${T.black}; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: ${T.black}; }
        ::-webkit-scrollbar-thumb { background: ${T.border}; border-radius: 3px; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
      `}</style>

      <Header onLogin={() => setShowLogin(true)} />
      <Hero onLogin={() => setShowLogin(true)} />
      <StatsBar />
      <Features />
      <InventorySection />
      <HowItWorks />
      <Testimonials />
      <CTABanner onLogin={() => setShowLogin(true)} />
      <Footer />

      {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
    </div>
  );
}