/* Bottom sections — packages, work, testimonials, faq, cta, footer. */

/* ─────────────────────────────────────────────────────────────────
   PACKAGES
   ───────────────────────────────────────────────────────────────── */
const PACKS = [
  {
    name: "Basic",
    price: "R2,499",
    cadence: "once-off",
    desc: "Professional 5-page custom website — perfect for small businesses, startups and freelancers.",
    features: ["5 hand-coded pages", "Mobile responsive", "Basic on-page SEO", "Contact form + Google Maps", "SSL + Analytics setup", "1-year hosting"],
    cta: "Start with Basic",
    accent: false,
  },
  {
    name: "Business",
    price: "R5,999",
    cadence: "once-off",
    desc: "8 pages with custom UI/UX, AI chatbot, advanced SEO and a free .co.za domain.",
    features: ["Up to 8 custom pages", "AI chatbot integration", "Advanced SEO + keyword research", "Free .co.za domain", "Business email setup", "Analytics dashboard", "Priority support"],
    cta: "Most chosen",
    accent: true,
    badge: "Popular",
  },
  {
    name: "Premium",
    price: "R9,999",
    cadence: "once-off",
    desc: "12-page powerhouse with e-commerce, payments, bookings and business automation.",
    features: ["Up to 12 pages", "E-commerce + cart", "Yoco / PayFast / Ozow", "Custom AI workflows", "Booking system", "Order processing", "Full SEO suite"],
    cta: "Go Premium",
    accent: false,
  },
];

function Packages() {
  return (
    <section id="packages" className="relative py-24 md:py-32" style={{ background: "var(--bg-light-alt, #f8f8f8)" }}>
      <div className="max-w-7xl mx-auto px-6">
        <SectionHead label="Packages / 03" title="Three packages. Transparent pricing." sub="No hourly billing, no scope creep — flat once-off prices in Rand. Pay 50% on signature, 50% on launch." />

        <Stagger as="div" step={0.1} y={28} className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-5">
          {PACKS.map((p) => <PackCard key={p.name} p={p} />)}
        </Stagger>

        <Reveal y={20} delay={0.2}>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-2.5 text-[12px]" style={{ fontFamily: "'Roboto Mono', monospace", color: "var(--text-muted)" }}>
            <Check />  No monthly lock-in
            <span style={{ opacity: 0.5 }}>·</span>
            <Check />  Source code yours on launch
            <span style={{ opacity: 0.5 }}>·</span>
            <Check />  POPIA-compliant by default
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Check() {
  return (
    <span className="inline-flex items-center gap-1.5">
      <span className="inline-flex w-4 h-4 rounded-full" style={{ background: "var(--accent-dim, rgba(249,115,22,0.1))", color: "var(--accent)", placeItems: "center", display: "grid" }}>
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>
    </span>
  );
}

function PackCard({ p }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="relative p-8 md:p-9 flex flex-col"
      style={{
        background: p.accent ? "linear-gradient(180deg, #111 0%, #1a1110 100%)" : "#fff",
        color: p.accent ? "#fff" : "var(--text)",
        border: p.accent ? "1px solid rgba(249,115,22,0.4)" : "1px solid var(--border)",
        borderRadius: 22,
        boxShadow: p.accent
          ? `0 30px 60px -30px rgba(249,115,22,0.4), 0 0 0 1px rgba(249,115,22,${hover ? 0.6 : 0.3}) inset`
          : hover ? "0 30px 60px -30px rgba(0,0,0,0.12)" : "0 0 0 rgba(0,0,0,0)",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: `transform 0.5s ${EASE_OUT}, box-shadow 0.5s ease`,
        overflow: "hidden",
      }}
    >
      {p.accent && (
        <div aria-hidden style={{
          position: "absolute", top: -60, right: -60, width: 220, height: 220,
          borderRadius: "50%",
          background: "radial-gradient(circle, rgba(249,115,22,0.22), transparent 60%)",
        }} />
      )}
      {p.badge && (
        <span className="absolute top-5 right-5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10.5px] font-bold tracking-[0.1em] uppercase"
              style={{ background: "var(--accent)", color: "#fff", fontFamily: "'Roboto Mono', monospace" }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "#fff" }} />
          {p.badge}
        </span>
      )}
      <div className="relative">
        <div style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", color: p.accent ? "rgba(255,255,255,0.55)" : "var(--text-muted)" }}>
          {p.name}
        </div>
        <div className="mt-4 flex items-baseline gap-2">
          <span style={{ fontFamily: "'Crimson Text', Georgia, serif", fontSize: 56, lineHeight: 1, letterSpacing: "-0.025em" }}>{p.price}</span>
          <span style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 12, color: p.accent ? "rgba(255,255,255,0.55)" : "var(--text-muted)" }}>{p.cadence}</span>
        </div>
        <p className="mt-4" style={{ color: p.accent ? "rgba(255,255,255,0.65)" : "var(--text-secondary)", fontSize: 14.5, lineHeight: 1.55, maxWidth: 320 }}>
          {p.desc}
        </p>
        <hr className="my-6" style={{ border: 0, borderTop: `1px solid ${p.accent ? "rgba(255,255,255,0.1)" : "var(--border)"}` }} />
        <ul className="space-y-2.5">
          {p.features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5" style={{ fontSize: 14.5 }}>
              <span className="mt-0.5 inline-flex w-4 h-4 items-center justify-center rounded-full flex-shrink-0"
                    style={{ background: p.accent ? "rgba(249,115,22,0.2)" : "rgba(249,115,22,0.1)", color: "var(--accent)" }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <span style={{ color: p.accent ? "rgba(255,255,255,0.85)" : "var(--text)" }}>{f}</span>
            </li>
          ))}
        </ul>
      </div>
      <Magnetic strength={0.16} className="mt-8">
        <a
          href="#quote"
          className="relative inline-flex items-center justify-center gap-2 w-full rounded-full px-5 py-3.5 text-[12.5px] tracking-[0.08em] uppercase font-bold overflow-hidden"
          style={{
            background: p.accent ? "var(--accent)" : "transparent",
            color: p.accent ? "#fff" : "var(--text)",
            border: p.accent ? "none" : "1.5px solid rgba(0,0,0,0.1)",
            transition: `transform 0.35s ${EASE_OUT}, background 0.3s ease, color 0.3s ease, border-color 0.3s ease`,
          }}
          onMouseEnter={(e) => {
            if (!p.accent) { e.currentTarget.style.background = "var(--text)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "var(--text)"; }
          }}
          onMouseLeave={(e) => {
            if (!p.accent) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.borderColor = "rgba(0,0,0,0.1)"; }
          }}
        >
          {p.cta}
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </Magnetic>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────
   ADD-ONS — filterable service marketplace
   ───────────────────────────────────────────────────────────────── */
const ADDON_GROUPS = [
  {
    category: "Essentials & Maintenance",
    items: [
      { name: "Website Hosting", price: "R100/mo · R850/yr", desc: "Reliable, high-speed hosting with 99.9% uptime, daily backups and SSL. First month free on annual plan." },
      { name: "Website Maintenance", price: "R250/mo", desc: "Monthly updates, security patches and performance monitoring to keep your site running perfectly." },
      { name: "Content Updates", price: "R150/ea", desc: "Text changes, image swaps, new sections or minor layout tweaks — handled within 24–48 hours." },
      { name: "Troubleshooting / Fix", price: "From R350", desc: "Diagnose and resolve bugs, broken layouts, form issues or unexpected site behaviour." },
      { name: "Extra Page", price: "R350/ea", desc: "Additional pages designed to match your existing site style, fully responsive and SEO-optimised." },
    ],
  },
  {
    category: "Integrations & Add-Ons",
    items: [
      { name: "Payment Gateway", price: "From R1,250", desc: "Accept credit cards, EFT and mobile payments with secure PayFast or Stripe integration." },
      { name: "Booking System", price: "From R1,250", desc: "Let customers book appointments or services online with automated confirmations." },
      { name: "WhatsApp Chat", price: "R200", desc: "Floating WhatsApp button so visitors can message you instantly from any page." },
      { name: "Business Email Setup", price: "R350", desc: "Professional email (info@yourdomain.co.za) configured on your devices and email client." },
      { name: "Advanced Contact Form", price: "R450", desc: "Multi-field forms with file uploads, conditional logic, email routing and spam protection." },
    ],
  },
  {
    category: "Design Services",
    items: [
      { name: "Social Media Content Pack", price: "R750/mo", desc: "20+ fully branded social posts per month for Instagram, Facebook and TikTok. Delivered within 5 business days.", badge: "Popular" },
      { name: "Logo Design", price: "R650", desc: "Custom logo with 3 concepts, 2 revision rounds. Delivered in PNG, SVG and PDF." },
      { name: "Flyer Design", price: "R250/ea", desc: "Eye-catching digital or print-ready flyer for events, promotions or marketing campaigns." },
      { name: "Social Media Post", price: "R150/ea", desc: "Single branded social graphic optimised for Instagram, Facebook or LinkedIn." },
      { name: "WhatsApp Catalogue", price: "R200/item", desc: "Product or service listings formatted for WhatsApp Business catalogue." },
    ],
  },
  {
    category: "SEO & Performance",
    items: [
      { name: "Advanced SEO Setup", price: "R1,500", desc: "Keyword research, on-page optimisation, meta tags, schema markup and local SEO setup." },
      { name: "AI Chatbot Setup", price: "R600", desc: "Custom AI assistant trained on your business info to handle FAQs and capture leads 24/7." },
      { name: "Speed Optimisation", price: "R400", desc: "Image compression, code minification, caching, lazy loading and CDN setup for fast load times." },
      { name: "Search Console & Sitemap", price: "R350", desc: "Google Search Console setup, XML sitemap and indexing verification for search visibility." },
    ],
  },
  {
    category: "Client Portals",
    items: [
      { name: "Essential Portal", price: "From R6,500", desc: "Secure client logins, document upload hub, basic project tracking and support ticket system.", badge: "Starter" },
      { name: "Advanced Portal", price: "From R12,500", desc: "Custom intake forms, automated email notifications, invoice management and online payment links.", badge: "Growing" },
      { name: "Enterprise Portal", price: "From R24,000+", desc: "Full API integrations, dynamic dashboards, real-time analytics, CRM sync and white-label branding.", badge: "Enterprise" },
    ],
  },
];

const ACCENT_MAP = { "Essentials & Maintenance": "#f97316", "Integrations & Add-Ons": "#1a73e8", "Design Services": "#10b981", "SEO & Performance": "#8b5cf6", "Client Portals": "#f97316" };

function AddOns() {
  const [active, setActive] = React.useState("Essentials & Maintenance");
  const group = ADDON_GROUPS.find(g => g.category === active) || ADDON_GROUPS[0];
  const accent = ACCENT_MAP[active] || "#f97316";
  return (
    <section id="add-ons" className="relative py-24 md:py-32" style={{ background: "var(--bg-light-alt, #f8f8f8)", borderTop: "1px solid var(--border)" }}>
      <div className="max-w-7xl mx-auto px-6">
        <SectionHead label="Essentials & Power-Ups" title="Add-On Services" sub="Supercharge your platform with additional features. Every add-on is transparently priced and delivered by the same team that built your site." />

        {/* Filter pills */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: "2rem", marginBottom: "2.5rem" }}>
          {ADDON_GROUPS.map(g => (
            <button key={g.category} onClick={() => setActive(g.category)} style={{ padding: "0.5rem 1.1rem", borderRadius: 9999, fontSize: 12, fontWeight: 700, letterSpacing: "0.07em", textTransform: "uppercase", border: "none", cursor: "pointer", transition: "all 0.2s", background: active === g.category ? accent : "var(--bg-card)", color: active === g.category ? "#fff" : "var(--text-muted)", boxShadow: active === g.category ? "none" : "0 0 0 1px var(--border)", fontFamily: "'Roboto Mono', monospace" }}>
              {g.category}
            </button>
          ))}
        </div>

        {/* Cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 260px), 1fr))", gap: "1rem" }}>
          {group.items.map((item, i) => (
            <Reveal key={item.name} y={20} delay={i * 0.05}>
              <div style={{ background: "var(--bg-card)", border: "1px solid var(--border)", borderRadius: 16, padding: "1.25rem", display: "flex", flexDirection: "column", gap: 8, transition: "box-shadow 0.2s, border-color 0.2s" }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.boxShadow = `0 8px 32px rgba(0,0,0,0.08)`; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.boxShadow = "none"; }}
              >
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
                  <h3 style={{ fontWeight: 700, fontSize: 15, color: "var(--text)", margin: 0, lineHeight: 1.3 }}>{item.name}</h3>
                  <span style={{ flexShrink: 0, fontSize: 10, fontWeight: 800, background: accent, color: "#fff", borderRadius: 9999, padding: "3px 9px", whiteSpace: "nowrap", letterSpacing: "0.02em" }}>{item.price}</span>
                </div>
                {item.badge && <span style={{ alignSelf: "flex-start", fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: accent, background: `${accent}18`, borderRadius: 9999, padding: "2px 8px" }}>{item.badge}</span>}
                <p style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.6, margin: 0, flex: 1 }}>{item.desc}</p>
                <a href={`https://wa.me/27623790118?text=Hi! I'm interested in ${encodeURIComponent(item.name)} (${item.price}).`} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700, color: accent, textDecoration: "none", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 4 }}>
                  Enquire on WhatsApp
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────────
   POS SYSTEMS — image gallery + pricing card
   ───────────────────────────────────────────────────────────────── */
const POS_FEATURES = [
  { title: "Multi-Device", desc: "iPad, tablet, mobile & desktop — no app install needed." },
  { title: "Real-Time Sync", desc: "Inventory & sales sync instantly across all branches." },
  { title: "Offline Mode", desc: "Keeps running without internet — syncs when reconnected." },
  { title: "Cloud Reports", desc: "Sales, stock and staff reports accessible from anywhere." },
  { title: "Hardware Included", desc: "Touch screen, receipt printer and card reader setup." },
  { title: "Staff Management", desc: "Roles, permissions and shift tracking built in." },
];

const POS_GALLERY = [
  { src: "images/pos (1).png", label: "POS Interface" },
  { src: "images/pos (2).png", label: "Dashboard" },
  { src: "images/pos (3).png", label: "Inventory" },
  { src: "images/pos (4).png", label: "Sales Tracking" },
  { src: "images/pos (5).png", label: "Reports" },
  { src: "images/pos (6).png", label: "Staff Mgmt" },
  { src: "images/pos (7).png", label: "Hardware Setup" },
];

/* ─────────────────────────────────────────────────────────────────
   AXIOUS SMART CHAT — WhatsApp Business API packages
   ───────────────────────────────────────────────────────────────── */
const SMART_CHAT_PLANS = [
  {
    name: "Starter",
    price: "R1,999",
    monthly: "+ R499/mo",
    desc: "Get on WhatsApp Business API fast. Chatbot handles FAQs, captures leads and books callbacks round the clock.",
    features: [
      "WhatsApp Business API setup & verification",
      "Custom chatbot (FAQ, lead capture, hours)",
      "250 conversations/month included",
      "1 WhatsApp business number",
      "Business profile optimisation",
      "Monthly analytics report",
    ],
    cta: "Get Started",
    accent: false,
  },
  {
    name: "Business",
    price: "R3,499",
    monthly: "+ R999/mo",
    desc: "AI-powered replies, broadcast campaigns and CRM sync — your team's WhatsApp sales engine.",
    features: [
      "Everything in Starter",
      "AI-powered smart replies (Gemini)",
      "1,000 conversations/month",
      "Broadcast campaigns (500 contacts/send)",
      "Google Sheets / CRM sync",
      "Multi-agent support (up to 3)",
      "Priority 8-hour support",
    ],
    cta: "Most Popular",
    accent: true,
    badge: "Popular",
  },
  {
    name: "Enterprise",
    price: "R5,999",
    monthly: "+ Custom/mo",
    desc: "Full automation — e-commerce, multi-department routing, unlimited conversations and a dedicated manager.",
    features: [
      "Everything in Business",
      "Unlimited conversations",
      "E-commerce integration (order tracking, cart recovery)",
      "Multi-department routing",
      "Custom API integrations",
      "Dedicated account manager",
      "Monthly strategy session",
    ],
    cta: "Talk to Us",
    accent: false,
  },
];

function SmartChatCard({ plan }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="relative p-8 flex flex-col"
      style={{
        background: plan.accent ? "linear-gradient(160deg,#0a2010 0%,#031408 100%)" : "rgba(255,255,255,0.04)",
        border: plan.accent ? "1px solid rgba(37,211,102,0.4)" : "1px solid rgba(255,255,255,0.08)",
        borderRadius: 22,
        boxShadow: plan.accent
          ? `0 30px 60px -30px rgba(37,211,102,0.35),0 0 0 1px rgba(37,211,102,${hover ? 0.5 : 0.3}) inset`
          : hover ? "0 20px 40px -20px rgba(0,0,0,0.5)" : "none",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: `transform 0.5s ${EASE_OUT},box-shadow 0.5s ease`,
        overflow: "hidden",
      }}
    >
      {plan.badge && (
        <span className="absolute top-5 right-5 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10.5px] font-bold tracking-[0.1em] uppercase"
              style={{ background: "#25D366", color: "#fff", fontFamily: "'Roboto Mono',monospace" }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "#fff" }} />
          {plan.badge}
        </span>
      )}
      <div>
        <div style={{ fontFamily: "'Roboto Mono',monospace", fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", color: plan.accent ? "rgba(255,255,255,0.5)" : "rgba(255,255,255,0.4)" }}>
          {plan.name}
        </div>
        <div className="mt-4 flex items-baseline gap-2 flex-wrap">
          <span style={{ fontFamily: "'Crimson Text',Georgia,serif", fontSize: 52, lineHeight: 1, letterSpacing: "-0.025em", color: "#fff" }}>{plan.price}</span>
          <span style={{ fontFamily: "'Roboto Mono',monospace", fontSize: 12, color: plan.accent ? "#25D366" : "rgba(255,255,255,0.4)" }}>{plan.monthly}</span>
        </div>
        <p className="mt-4" style={{ color: "rgba(255,255,255,0.6)", fontSize: 14.5, lineHeight: 1.55 }}>{plan.desc}</p>
        <hr className="my-6" style={{ border: 0, borderTop: "1px solid rgba(255,255,255,0.08)" }} />
        <ul className="space-y-2.5">
          {plan.features.map((f, i) => (
            <li key={i} className="flex items-start gap-2.5" style={{ fontSize: 14 }}>
              <span className="mt-0.5 inline-flex w-4 h-4 items-center justify-center rounded-full flex-shrink-0"
                    style={{ background: "rgba(37,211,102,0.15)", color: "#25D366" }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <span style={{ color: "rgba(255,255,255,0.75)" }}>{f}</span>
            </li>
          ))}
        </ul>
      </div>
      <Magnetic strength={0.16} className="mt-8">
        <a
          href={`https://wa.me/27623790118?text=Hi! I'm interested in Axious Smart Chat (${plan.name} plan).`}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-2 w-full rounded-full px-5 py-3.5 text-[12.5px] tracking-[0.08em] uppercase font-bold"
          style={{
            background: plan.accent ? "#25D366" : "rgba(255,255,255,0.08)",
            color: "#fff",
            border: plan.accent ? "none" : "1px solid rgba(255,255,255,0.12)",
            transition: `background 0.3s ease`,
          }}
          onMouseEnter={(e) => { if (!plan.accent) e.currentTarget.style.background = "#25D366"; }}
          onMouseLeave={(e) => { if (!plan.accent) e.currentTarget.style.background = "rgba(255,255,255,0.08)"; }}
        >
          {plan.cta}
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </Magnetic>
    </div>
  );
}

function SmartChat() {
  return (
    <section id="smart-chat" className="relative py-24 md:py-32" style={{ background: "#0d1117", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
      <div className="max-w-7xl mx-auto px-6">
        <Reveal y={14}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: "2rem" }}>
            <div style={{ width: 42, height: 42, borderRadius: 12, background: "#25D366", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
            </div>
            <div>
              <div style={{ fontFamily: "'Roboto Mono',monospace", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "#25D366" }}>WhatsApp Business API · New</div>
              <div style={{ fontFamily: "'Roboto Mono',monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.35)", marginTop: 2 }}>Services / 07</div>
            </div>
          </div>
        </Reveal>

        <Reveal y={20} delay={0.05}>
          <h2 style={{ fontFamily: "'Crimson Text',Georgia,serif", fontSize: "clamp(2rem,4.4vw,3.6rem)", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 400, color: "#fff", maxWidth: 760 }}>
            Axious Smart Chat.<br />
            <span style={{ color: "#25D366" }}>Your business, always on.</span>
          </h2>
        </Reveal>
        <BlurReveal delay={0.15} duration={0.8}>
          <p style={{ color: "rgba(255,255,255,0.55)", fontSize: "clamp(1rem,1.2vw,1.1rem)", lineHeight: 1.65, maxWidth: 580, marginTop: "1.25rem" }}>
            WhatsApp is where South Africans already talk. Now your business can reply 24/7, run broadcast campaigns and close leads automatically. We handle the API setup, bot build and ongoing management.
          </p>
        </BlurReveal>

        <Stagger as="div" step={0.1} y={28} className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-5">
          {SMART_CHAT_PLANS.map((plan) => (
            <SmartChatCard key={plan.name} plan={plan} />
          ))}
        </Stagger>

        <Reveal y={14} delay={0.2}>
          <p style={{ marginTop: "2rem", textAlign: "center", color: "rgba(255,255,255,0.3)", fontSize: 12.5, fontFamily: "'Roboto Mono',monospace", letterSpacing: "0.04em" }}>
            Setup fee is once-off. Monthly fee covers management & support. Meta conversation costs (~R0.10–R0.45 each) billed at cost.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function POSSystems() {
  const [lightbox, setLightbox] = React.useState(null);
  return (
    <section id="pos-systems" className="relative py-24 md:py-32" style={{ background: "var(--bg)", borderTop: "1px solid var(--border)" }}>
      <div className="max-w-7xl mx-auto px-6">
        <SectionHead label="Enterprise Grade" title="Custom Cloud-Based Point of Sale." sub="Run your entire business from anywhere. We build tailored cloud POS systems that integrate flawlessly with your operations and website." align="center" />

        {/* Main gallery */}
        <Reveal y={24}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "1rem", marginTop: "3rem" }}>
            {POS_GALLERY.slice(0, 2).map((img, i) => (
              <div key={i} onClick={() => setLightbox(img)} style={{ borderRadius: 16, overflow: "hidden", position: "relative", minHeight: 260, background: "#0a0a0a", border: "1px solid rgba(255,255,255,0.08)", cursor: "pointer" }}>
                <img src={img.src} alt={img.label} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.65))" }} />
                <div style={{ position: "absolute", bottom: "1rem", left: "1rem", background: "rgba(249,115,22,0.85)", borderRadius: 6, padding: "4px 10px" }}>
                  <span style={{ color: "#fff", fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em" }}>{img.label}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Thumbnail row */}
        <Reveal y={16} delay={0.1}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "0.75rem", marginTop: "0.75rem" }}>
            {POS_GALLERY.slice(2).map((img, i) => (
              <div key={i} onClick={() => setLightbox(img)} style={{ borderRadius: 12, overflow: "hidden", position: "relative", paddingBottom: "70%", background: "#111", border: "1px solid rgba(255,255,255,0.08)", cursor: "pointer" }}>
                <img src={img.src} alt={img.label} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7))" }} />
                <div style={{ position: "absolute", bottom: "0.5rem", left: "0.6rem" }}>
                  <span style={{ color: "rgba(255,255,255,0.9)", fontSize: 9, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em" }}>{img.label}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Pricing + features */}
        <Reveal y={20} delay={0.15}>
          <div style={{ marginTop: "2rem", borderRadius: 16, background: "var(--bg-card)", border: "1px solid var(--border)", padding: "2rem" }}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "2rem", alignItems: "start" }}>
              <div>
                <p style={{ color: "var(--accent)", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.12em", marginBottom: "0.75rem" }}>Complete Package</p>
                <div style={{ fontSize: 48, fontWeight: 800, color: "var(--text)", letterSpacing: "-0.04em", lineHeight: 1, fontFamily: "'Crimson Text', serif" }}>R 12,500</div>
                <p style={{ fontSize: 12, marginTop: 6, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--text-muted)" }}>Once-Off Investment</p>
                <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
                  {["Hardware — touch screen, receipt printer & card reader", "Setup — full system installation & configuration", "Support — remote & on-site technical assistance", "Training — staff onboarding & user manual included"].map((item, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                      <div style={{ width: 18, height: 18, borderRadius: "50%", background: "rgba(249,115,22,0.12)", border: "1px solid rgba(249,115,22,0.3)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}>
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M20 6 9 17l-5-5" stroke="#f97316" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </div>
                      <span style={{ fontSize: 14, color: "var(--text-secondary)" }}>{item}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div>
                <p style={{ color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.7, marginBottom: "1.25rem" }}>A complete business management solution — inventory, sales tracking, staff permissions and real-time reporting. Works on any device, no app install required.</p>
                <a href="https://wa.me/27623790118?text=Hi! I'm interested in the POS System Package." target="_blank" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "0.85rem 1.5rem", borderRadius: 9999, background: "#25D366", color: "#fff", fontWeight: 700, fontSize: 14, textDecoration: "none", marginBottom: 8 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
                  Send Enquiry on WhatsApp
                </a>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem", marginTop: "1.25rem" }}>
                  {POS_FEATURES.map((f, i) => (
                    <div key={i} style={{ padding: "0.875rem", borderRadius: 12, background: "var(--bg-light-alt, #f8f8f8)", border: "1px solid var(--border)" }}>
                      <div style={{ fontWeight: 700, fontSize: 13, color: "var(--text)", marginBottom: 3 }}>{f.title}</div>
                      <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.5 }}>{f.desc}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      {/* Lightbox */}
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{ position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.92)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <img src={lightbox.src} alt={lightbox.label} style={{ maxWidth: "90vw", maxHeight: "85vh", objectFit: "contain", borderRadius: 12, boxShadow: "0 12px 48px rgba(0,0,0,0.5)" }} />
          <button onClick={() => setLightbox(null)} style={{ position: "absolute", top: "1.5rem", right: "1.5rem", width: 40, height: 40, borderRadius: "50%", background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.2)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 18, lineHeight: 1 }}>×</button>
        </div>
      )}
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────────
   APP DEVELOPMENT — 3 flip cards (Android, iOS, Cloud)
   ───────────────────────────────────────────────────────────────── */
const APP_TYPES = [
  {
    label: "Android", platform: "Google Play", color: "#3DDC84", darkBg: "#061810",
    img: "images/ui-screens/android.jpg",
    title: "Android Apps", price: "From R24,999", timeline: "8–16 wks",
    desc: "Native Android applications built with Kotlin and Material Design 3. Optimised for performance across all devices.",
    features: ["Material Design 3 UI", "Google Play deployment", "Push notifications", "Biometric auth", "Offline-first architecture"],
  },
  {
    label: "iOS", platform: "App Store", color: "#007AFF", darkBg: "#02060f",
    img: "images/ui-screens/ios.jpg",
    title: "iOS Apps", price: "From R24,999", timeline: "8–16 wks",
    desc: "Beautiful iOS applications following Apple's Human Interface Guidelines. Built with Swift for iPhone and iPad.",
    features: ["Human Interface Guidelines", "App Store submission", "Face ID & Touch ID", "iCloud sync support", "Widgets & notifications"],
  },
  {
    label: "Cloud / Web", platform: "PWA · Web · SaaS", color: "#a855f7", darkBg: "#0c0717",
    img: "images/ui-screens/cloud.jpg",
    title: "Cloud-Based Apps", price: "From R18,999", timeline: "4–12 wks",
    desc: "Scalable web applications and SaaS platforms hosted in the cloud. Real-time dashboards, API integrations, custom admin panels.",
    features: ["Progressive Web App (PWA)", "Real-time data sync", "API & webhook integrations", "Auto-scaling infrastructure", "Custom admin dashboards"],
  },
];

function AppDev() {
  const [flipped, setFlipped] = React.useState([false, false, false]);
  const toggle = (i) => setFlipped(prev => prev.map((v, idx) => idx === i ? !v : v));
  return (
    <section id="app-dev" className="relative py-24 md:py-32" style={{ background: "var(--bg)", borderTop: "1px solid var(--border)" }}>
      <div className="max-w-7xl mx-auto px-6">
        <SectionHead label="Custom Software" title="App Development." sub="From concept to launch — native mobile apps and cloud platforms tailored to your business. Tap the platform badge to flip any card." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(268px, 1fr))", gap: "1.5rem", marginTop: "3rem" }}>
          {APP_TYPES.map((app, i) => (
            <Reveal key={app.label} y={28} delay={i * 0.1}>
              <div style={{ height: 480, perspective: 1200 }}>
                <div style={{ position: "relative", width: "100%", height: "100%", transformStyle: "preserve-3d", transition: "transform 0.65s cubic-bezier(0.4,0,0.2,1)", transform: flipped[i] ? "rotateY(180deg)" : "rotateY(0deg)" }}>

                  {/* FRONT */}
                  <div style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", borderRadius: 20, overflow: "hidden", background: "#fff", border: "1px solid var(--border)", display: "flex", flexDirection: "column" }}>
                    <div style={{ position: "relative", height: 210, overflow: "hidden", background: "#f0f0f0", flexShrink: 0 }}>
                      <img src={app.img} alt={app.title} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 55%)" }} />
                      <div style={{ position: "absolute", bottom: "0.875rem", left: "0.875rem" }}>
                        <span style={{ padding: "4px 10px", borderRadius: 9999, background: "rgba(255,255,255,0.92)", border: "1px solid rgba(0,0,0,0.08)", color: "#111", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "'Roboto Mono', monospace" }}>{app.label}</span>
                      </div>
                      <button onClick={() => toggle(i)} title={`Explore ${app.label} details`} style={{ position: "absolute", top: "0.875rem", right: "0.875rem", width: 48, height: 48, borderRadius: "50%", background: app.color, border: "2px solid rgba(255,255,255,0.35)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", zIndex: 10, outline: "none", color: "#fff", fontWeight: 800, fontSize: 18 }}>
                        ↩
                      </button>
                    </div>
                    <div style={{ padding: "1.25rem", flex: 1, display: "flex", flexDirection: "column" }}>
                      <div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "'Roboto Mono', monospace", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>{app.platform}</div>
                      <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--text)", fontFamily: "'Crimson Text', serif", margin: "0 0 8px", letterSpacing: "-0.02em" }}>{app.title}</h3>
                      <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.6, flex: 1, margin: "0 0 1rem" }}>{app.desc}</p>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <div>
                          <div style={{ fontSize: 20, fontWeight: 800, color: app.color, fontFamily: "'Crimson Text', serif" }}>{app.price}</div>
                          <div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "'Roboto Mono', monospace" }}>{app.timeline}</div>
                        </div>
                        <a href="https://wa.me/27623790118" target="_blank" rel="noopener noreferrer" style={{ padding: "8px 16px", borderRadius: 9999, background: app.color, color: "#fff", fontSize: 12, fontWeight: 700, textDecoration: "none", letterSpacing: "0.06em", textTransform: "uppercase" }}>Enquire</a>
                      </div>
                    </div>
                  </div>

                  {/* BACK */}
                  <div style={{ position: "absolute", inset: 0, backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", transform: "rotateY(180deg)", borderRadius: 20, overflow: "hidden", background: app.darkBg, border: `1px solid ${app.color}33`, display: "flex", flexDirection: "column", padding: "2rem" }}>
                    <button onClick={() => toggle(i)} style={{ alignSelf: "flex-end", background: "rgba(255,255,255,0.1)", border: "none", color: "#fff", borderRadius: "50%", width: 32, height: 32, cursor: "pointer", fontSize: 16, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "1rem" }}>×</button>
                    <div style={{ fontSize: 11, color: app.color, fontFamily: "'Roboto Mono', monospace", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>{app.platform}</div>
                    <h3 style={{ fontSize: 24, fontWeight: 800, color: "#fff", fontFamily: "'Crimson Text', serif", margin: "0 0 1rem" }}>{app.title}</h3>
                    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                      {app.features.map((f, fi) => (
                        <li key={fi} style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                          <span style={{ width: 6, height: 6, borderRadius: "50%", background: app.color, flexShrink: 0, marginTop: 6 }} />
                          <span style={{ fontSize: 14, color: "rgba(255,255,255,0.8)", lineHeight: 1.5 }}>{f}</span>
                        </li>
                      ))}
                    </ul>
                    <a href="https://wa.me/27623790118" target="_blank" rel="noopener noreferrer" style={{ display: "block", textAlign: "center", padding: "10px 20px", borderRadius: 9999, background: app.color, color: "#fff", fontSize: 12, fontWeight: 700, textDecoration: "none", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: "1.5rem" }}>Start a Project</a>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────────
   WORK SHOWCASE — full portfolio grid with category filter.
   ───────────────────────────────────────────────────────────────── */
const PROJECTS = [
  { name: "NGST Civils",              domain: "ngstcivils.co.za",               category: "Renovations",   desc: "Civil engineering & construction"      },
  { name: "Alpha5 Renovations",       domain: "alpha5renovations.co.za",        category: "Renovations",   desc: "Premium renovation services"           },
  { name: "Tour de Control",          domain: "tourdecontrolrenovations.co.za", category: "Renovations",   desc: "Renovation project management"         },
  { name: "Prime Legacy Empire",      domain: "primelegacyempire.co.za",        category: "Renovations",   desc: "Construction & legacy building",        logo: "https://primelegacyempire.co.za/images/primelegacyconstructionlogo.png" },
  { name: "FPS Woodworks",            domain: "fpswoodworks.co.za",             category: "Services",      desc: "Custom woodwork & carpentry"           },
  { name: "Axious Spaces",            domain: "axiousspaces.co.za",             category: "Services",      desc: "Space solutions & property"            },
  { name: "Blessing Plumbers",        domain: "blessingplumbers.co.za",         category: "Services",      desc: "Residential & commercial plumbing"     },
  { name: "DSC Flooring",             domain: "dscflooring.co.za",              category: "Services",      desc: "Flooring installation & supplies",      thumb: "images/portfolio-sites/www.dscflooring.co.za.png" },
  { name: "Chaplin Logistics",        domain: "chaplinlogistics.com",           category: "Services",      desc: "Logistics & freight solutions",         thumb: "images/portfolio-sites/www.chaplinlogistics.com.png" },
  { name: "Jeep Cape Xplorer",        domain: "jeepcapexplorer.capetown",       category: "Services",      desc: "Adventure & 4x4 Cape experiences",      thumb: "images/portfolio-sites/www.jeepcapexplorer.capetown.png" },
  { name: "Karoo Line",               domain: "karooline.co.za",                category: "Services",      desc: "Bus transport Cape Town to Upington",   logo: "https://karooline.co.za/images/Karoo%20Line%20logo.svg" },
  { name: "TopDown Car Rentals",      domain: "topdown.co.za",                  category: "Services",      desc: "Premium car rental & experiences",      logo: "https://topdown.co.za/images/topdown.png" },
  { name: "Intellinet Wireless",      domain: "intellinetwireless.co.za",       category: "Tech",          desc: "Wireless internet solutions"           },
  { name: "ST Connect",               domain: "stconnect.co.za",                category: "Tech",          desc: "Better internet for everyone",          logo: "https://stconnect.co.za/images/cropped-LogoMakr-2Iq6rE.png" },
  { name: "Bolo Refrigeration",       domain: "bolorefridgeration.co.za",       category: "Refrigeration", desc: "Commercial refrigeration solutions"     },
  { name: "Dewpoint Repairs",         domain: "dewpointrepairs.co.za",          category: "Refrigeration", desc: "Appliance & HVAC repair services"      },
  { name: "FrostFlow Refrigerations", domain: "frostflowrefridgerations.co.za", category: "Refrigeration", desc: "Industrial cooling systems"            },
  { name: "TF Refrigerations",        domain: "tfrefridgerations.co.za",        category: "Refrigeration", desc: "Refrigeration maintenance & install"   },
  { name: "Havok Live",               domain: "havoklive.com",                  category: "Media",         desc: "Live events & entertainment",           thumb: "images/portfolio-sites/www.havoklive.com.png" },
  { name: "Vannexo Media",            domain: "vannexomedia.co.za",             category: "Media",         desc: "Creative media & content agency",       thumb: "images/portfolio-sites/www.vannexomedia.co.za.webp" },
];

const WORK_CATS = ["All", "Renovations", "Services", "Tech", "Refrigeration", "Media"];

function Work() {
  const [active, setActive] = useState("All");
  const filtered = active === "All" ? PROJECTS : PROJECTS.filter(p => p.category === active);
  return (
    <section id="work" className="relative py-24 md:py-32">
      <div className="max-w-7xl mx-auto px-6">
        <SectionHead label="Our work / 04" title={`${PROJECTS.length} sites built across South Africa.`} sub="Every project is hand-coded from scratch — no templates, no page builders." />
        <Reveal y={16} delay={0.1}>
          <div className="mt-8 flex flex-wrap gap-2">
            {WORK_CATS.map(cat => {
              const count = cat === "All" ? PROJECTS.length : PROJECTS.filter(p => p.category === cat).length;
              const isActive = active === cat;
              return (
                <button
                  key={cat}
                  onClick={() => setActive(cat)}
                  style={{
                    padding: "6px 16px",
                    borderRadius: 999,
                    border: `1.5px solid ${isActive ? "var(--accent)" : "var(--border)"}`,
                    background: isActive ? "var(--accent)" : "transparent",
                    color: isActive ? "#fff" : "var(--text)",
                    fontFamily: "'Roboto Mono', monospace",
                    fontSize: 11,
                    fontWeight: 700,
                    letterSpacing: "0.08em",
                    textTransform: "uppercase",
                    cursor: "pointer",
                    transition: "all 0.2s ease",
                  }}
                >
                  {cat} <span style={{ opacity: 0.7 }}>({count})</span>
                </button>
              );
            })}
          </div>
        </Reveal>
        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {filtered.map((p) => <WorkCard key={p.domain} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function WorkCard({ p }) {
  const [hover, setHover] = useState(false);
  const hasScreenshot = p.thumb || (!p.logo);
  const img = p.thumb || `images/portfolio-sites/www.${p.domain}.webp`;
  return (
    <TiltCard strength={6}>
    <Reveal y={32}>
      <a
        href={`https://${p.domain}`}
        target="_blank"
        rel="noopener noreferrer"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        className="group block relative overflow-hidden"
        style={{
          borderRadius: 22,
          border: "1px solid var(--border)",
          background: "#fafafa",
          aspectRatio: "4/3",
          transition: "border-color 0.4s ease, box-shadow 0.4s ease",
          borderColor: hover ? "rgba(249,115,22,0.4)" : "var(--border)",
          boxShadow: hover ? "0 30px 60px -30px rgba(0,0,0,0.18)" : "none",
        }}
      >
        {hasScreenshot ? (
          <div
            style={{
              position: "absolute", inset: 0,
              backgroundImage: `url(${img})`,
              backgroundSize: "cover",
              backgroundPosition: "top center",
              transform: hover ? "scale(1.045)" : "scale(1)",
              transition: `transform 1.4s ${EASE_OUT}`,
            }}
          />
        ) : (
          <div style={{
            position: "absolute", inset: 0,
            background: "#f4f4f4",
            display: "flex", alignItems: "center", justifyContent: "center",
            padding: 36,
          }}>
            <img
              src={p.logo}
              alt={p.name}
              loading="lazy"
              decoding="async"
              style={{
                maxWidth: "68%", maxHeight: "52%", objectFit: "contain",
                transform: hover ? "scale(1.06)" : "scale(1)",
                transition: `transform 1.4s ${EASE_OUT}`,
              }}
            />
          </div>
        )}
        <div
          style={{
            position: "absolute", inset: 0,
            background: hover
              ? "linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.72) 100%)"
              : "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.58) 100%)",
            transition: "background 0.6s ease",
          }}
        />
        <div className="absolute top-4 left-4 right-4 flex items-center justify-between">
          <span className="px-2.5 py-1 rounded-full text-[10px] font-bold tracking-[0.1em] uppercase"
            style={{ background: "rgba(255,255,255,0.92)", color: "var(--text)", fontFamily: "'Roboto Mono', monospace" }}>
            {p.category} · {p.desc}
          </span>
          <span className="inline-flex w-8 h-8 rounded-full items-center justify-center"
            style={{
              background: "rgba(255,255,255,0.95)",
              color: "var(--text)",
              transform: hover ? "rotate(-45deg) scale(1.05)" : "rotate(0)",
              transition: `transform 0.5s ${EASE_OUT}`,
            }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </div>
        <div className="absolute bottom-4 left-4 right-4 text-white">
          <div style={{ fontFamily: "'Crimson Text', Georgia, serif", fontSize: 26, lineHeight: 1.05, letterSpacing: "-0.02em" }}>
            {p.name}
          </div>
          <div className="mt-1" style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.8)" }}>
            <span style={{ color: "#f97316" }}>↗</span> {p.domain}
          </div>
        </div>
      </a>
    </Reveal>
    </TiltCard>
  );
}

/* ─────────────────────────────────────────────────────────────────
   TESTIMONIALS — two-row marquee, opposing directions.
   ───────────────────────────────────────────────────────────────── */
const QUOTES = [
  { q: "Great and best website creators — my website is the best, if not the greatest in the world. It makes my life and my customers' lives easier.", name: "Frans Dube", role: "Client · Google review" },
  { q: "Great services from the team. The process was fast — keep up the good work.", name: "King George", role: "Client · Google review" },
  { q: "Creativity unlimited. I am speechless.", name: "Bothwell Hlavano", role: "Client · Google review" },
  { q: "Excellent service and a highly professional team. Would definitely recommend!", name: "ST Connect", role: "Client · Google review" },
  { q: "Very happy with the results. Great attention to detail and support throughout the process.", name: "Thanda Mehlo", role: "Client · Google review" },
  { q: "Outstanding website. Professional, modern and responsive — truly represents our brand. Communication was excellent.", name: "NGST Civils", role: "Client · Google review" },
];

function Testimonials() {
  return (
    <section className="relative py-24 md:py-32 overflow-hidden" style={{ background: "var(--bg-light-alt, #f8f8f8)" }}>
      <div className="max-w-7xl mx-auto px-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6">
        <SectionHead label="Reviews / 05" title="The studio our clients keep recommending." align="left" />
        <a
          href="https://share.google/0LzkuBI6Z0dLNuAIM"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2.5 flex-shrink-0 px-5 py-3 rounded-full text-sm font-semibold"
          style={{ background: "#fff", border: "1.5px solid #dadce0", color: "#3c4043", textDecoration: "none", boxShadow: "0 1px 4px rgba(0,0,0,0.08)", whiteSpace: "nowrap" }}
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Review us on Google
        </a>
      </div>

      <div className="mt-14 space-y-5">
        <QuoteRow quotes={QUOTES.slice(0, 3)} reverse={false} />
        <QuoteRow quotes={QUOTES.slice(3, 6)} reverse={true} />
      </div>
    </section>
  );
}

function QuoteRow({ quotes, reverse }) {
  const doubled = [...quotes, ...quotes];
  return (
    <div className="relative overflow-hidden" style={{
      maskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
      WebkitMaskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
    }}>
      <div
        style={{
          display: "flex",
          gap: 20,
          whiteSpace: "normal",
          animation: prefersReducedMotion() ? "none" : `${reverse ? "ax-marquee-rev" : "ax-marquee"} 60s linear infinite`,
        }}
      >
        {doubled.map((q, i) => (
          <article key={i} className="flex-shrink-0 p-7 md:p-8" style={{
            width: 440, background: "#fff", borderRadius: 18, border: "1px solid var(--border)",
          }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <Stars n={5} />
              <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
                <span style={{ fontSize: 11, fontWeight: 600, color: "#5f6368", fontFamily: "'Roboto Mono', monospace", letterSpacing: "0.04em" }}>Google</span>
              </div>
            </div>
            <p className="mt-4" style={{ fontFamily: "'Crimson Text', Georgia, serif", fontSize: 21, lineHeight: 1.4, letterSpacing: "-0.01em" }}>
              "{q.q}"
            </p>
            <div className="mt-5 flex items-center gap-3">
              <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--accent-dim, rgba(249,115,22,0.1))", color: "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 14 }}>
                {q.name[0]}
              </div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 600 }}>{q.name}</div>
                <div style={{ fontSize: 11.5, color: "var(--text-muted)", fontFamily: "'Roboto Mono', monospace", letterSpacing: "0.04em" }}>{q.role}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────
   FAQ — accordion with subtle reveal
   ───────────────────────────────────────────────────────────────── */
const FAQS = [
  { q: "How much does a website cost in Cape Town?", a: "Website costs in Cape Town range from R2,499 for a basic 5-page site to R9,999+ for premium e-commerce. Our packages: Basic at R2,499, Business at R5,999, Premium at R9,999 — all include mobile-responsive design, SEO, SSL and hosting setup." },
  { q: "How much does a website cost in South Africa in 2026?", a: "In 2026, website prices in South Africa typically range from R2,000 to R50,000+ depending on complexity. A basic business site costs R2,499–R5,999, a custom site with AI features costs R5,999–R9,999, and a full e-commerce build costs R9,999–R25,000." },
  { q: "How long does a project usually take?", a: "Starter sites ship in 1–2 weeks. Business packs with AI and bookings take 2–3 weeks. Premium builds with e-commerce or a portal land in 3–4 weeks. All timelines include design, development, testing and SEO setup." },
  { q: "Do you use WordPress or website templates?", a: "No. Every Axious website is 100% custom-coded from scratch using React. No WordPress, Wix, Squarespace or page builders. This means faster loading speeds, better security, higher SEO rankings and complete design freedom." },
  { q: "What is the best web design company in Cape Town?", a: "Axious Creative Studio is rated 5 stars on Google and Facebook. We specialise in custom-coded websites (no WordPress), AI chatbot integration, e-commerce, POS systems and client portals — packages from R2,499 with transparent pricing and no hidden fees." },
  { q: "Do you offer SEO services in Cape Town?", a: "Yes. Every website includes basic on-page SEO. Our Business and Premium packages include advanced SEO with keyword research, on-page optimisation, technical SEO, local SEO for Cape Town suburbs, schema markup, Google Business Profile setup and monthly reporting." },
  { q: "Can you build an e-commerce website with Yoco or PayFast?", a: "Absolutely. Our Premium Package (R9,999) includes full e-commerce with South African payment gateway integration — Yoco, PayFast, Peach Payments or Ozow. Features include product catalogues, shopping cart, automated order processing and inventory management." },
  { q: "Do you work with clients outside Cape Town?", a: "Yes — we serve all of South Africa. Johannesburg, Pretoria, Durban, Port Elizabeth, Bloemfontein and beyond. Everything happens via WhatsApp, email and your client portal. No travel needed." },
  { q: "What is a client portal and how much does it cost?", a: "A client portal is a secure, branded dashboard where your clients can track project progress, view invoices, download documents, make payments and communicate with your team. Axious offers portals from R6,500 (Basic) to R24,000+ (Enterprise)." },
  { q: "Do you offer website maintenance and hosting?", a: "Yes — every package ships with 1 month free hosting, SSL and analytics. After that, hosting renews at an affordable flat rate with no surprises. We also offer monthly maintenance plans including content updates, security patches and priority WhatsApp support." },
  { q: "What does the AI chatbot actually do?", a: "It answers FAQs, captures leads, books meetings and routes hot enquiries to WhatsApp — all trained on your own content and tone. Included in our Business Package and above, or as a R1,500 add-on." },
  { q: "Do you offer POS systems in Cape Town?", a: "Yes. We provide complete cloud-based POS system setup from R12,500 including hardware, software integration, inventory management, sales reporting, staff training and ongoing support. Ideal for restaurants, retail stores, salons and service businesses." },
  { q: "What makes Axious different from other web designers in Cape Town?", a: "Three things: (1) Every site is 100% hand-coded — no WordPress, no templates. Faster speeds, better SEO. (2) We include cutting-edge features like AI chatbots, automated quote systems and client portals. (3) Transparent pricing — no hidden fees, ever." },
  { q: "Can I pay for my website in instalments?", a: "Yes. A 50% deposit secures your project, with the balance due on completion. We accept credit cards, debit cards, EFT and Yoco payments. No interest charged on payment plans." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="relative py-24 md:py-32">
      <div className="max-w-5xl mx-auto px-6">
        <SectionHead label="FAQ / 06" title="Answers to the things we get asked daily." />
        <div className="mt-12 divide-y" style={{ borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
          {FAQS.map((f, i) => (
            <FAQItem key={f.q} f={f} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ f, isOpen, onToggle }) {
  const aref = useRef(null);
  return (
    <Reveal y={12}>
      <div style={{ borderBottom: "1px solid var(--border)" }}>
        <button
          onClick={onToggle}
          className="w-full text-left flex items-center justify-between gap-6 py-6 group"
          style={{ background: "transparent", border: "none", cursor: "pointer" }}
        >
          <span style={{ fontFamily: "'Crimson Text', Georgia, serif", fontSize: "clamp(1.15rem, 1.6vw, 1.4rem)", letterSpacing: "-0.01em", color: isOpen ? "var(--accent)" : "var(--text)", transition: "color 0.3s ease" }}>
            {f.q}
          </span>
          <span
            className="inline-flex w-8 h-8 rounded-full items-center justify-center flex-shrink-0"
            style={{
              background: isOpen ? "var(--accent)" : "rgba(0,0,0,0.04)",
              color: isOpen ? "#fff" : "var(--text)",
              transition: `all 0.4s ${EASE_OUT}`,
              transform: isOpen ? "rotate(45deg)" : "rotate(0)",
            }}
          >
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg>
          </span>
        </button>
        <div
          ref={aref}
          style={{
            maxHeight: isOpen ? (aref.current ? aref.current.scrollHeight : 200) : 0,
            overflow: "hidden",
            transition: `max-height 0.5s ${EASE_OUT}, opacity 0.4s ease`,
            opacity: isOpen ? 1 : 0,
          }}
        >
          <p className="pb-6 pr-10" style={{ color: "var(--text-secondary)", fontSize: 15.5, lineHeight: 1.7, maxWidth: 720 }}>
            {f.a}
          </p>
        </div>
      </div>
    </Reveal>
  );
}

/* ─────────────────────────────────────────────────────────────────
   CTA — full-bleed dark slab with animated gradient + magnetic button.
   ───────────────────────────────────────────────────────────────── */
function CTA() {
  return (
    <section id="quote" className="relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-6">
        <div
          className="relative overflow-hidden rounded-[28px] p-10 md:p-20 my-16"
          style={{
            background: "linear-gradient(135deg, #0b0b0c 0%, #1c0e07 60%, #2a1408 100%)",
            color: "#fff",
          }}
        >
          {/* moving glow */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(circle at 20% 20%, rgba(249,115,22,0.35), transparent 40%), radial-gradient(circle at 80% 70%, rgba(249,115,22,0.18), transparent 50%)",
            animation: prefersReducedMotion() ? "none" : "ax-shift 18s ease-in-out infinite alternate",
          }} />
          {/* grain */}
          <div aria-hidden style={{
            position: "absolute", inset: 0, opacity: 0.6, mixBlendMode: "overlay",
            backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }} />

          <div className="relative max-w-3xl">
            <Reveal y={20}>
              <div style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>
                <span style={{ color: "var(--accent)" }}>◆</span>&nbsp; Let's build something
              </div>
            </Reveal>
            <Reveal y={28} delay={0.1}>
              <h2 className="mt-6" style={{ fontFamily: "'Crimson Text', Georgia, serif", fontSize: "clamp(2.4rem, 6vw, 5rem)", lineHeight: 1, letterSpacing: "-0.03em", fontWeight: 400 }}>
                Your competitor's site<br />is loading slowly right now.
              </h2>
            </Reveal>
            <Reveal y={20} delay={0.22}>
              <p className="mt-7 max-w-xl" style={{ color: "rgba(255,255,255,0.7)", fontSize: 18, lineHeight: 1.55 }}>
                Get a clean, hand-coded site that loads in under a second — with a quote in your inbox in 2 minutes.
              </p>
            </Reveal>
            <Reveal y={20} delay={0.32}>
              <div className="mt-9 flex flex-col sm:flex-row gap-3 items-start sm:items-center">
                <Magnetic strength={0.22}>
                  <a
                    href="#chat"
                    className="inline-flex items-center gap-2 rounded-full px-6 py-4 text-[13px] tracking-[0.08em] uppercase font-bold"
                    style={{
                      background: "#fff",
                      color: "#111",
                      boxShadow: "0 18px 40px -18px rgba(255,255,255,0.6)",
                      transition: `transform 0.35s ${EASE_OUT}`,
                    }}
                  >
                    Start the conversation
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </a>
                </Magnetic>
                <a
                  href="https://wa.me/27623790118"
                  className="inline-flex items-center gap-2 rounded-full px-5 py-4 text-[13px] tracking-[0.08em] uppercase font-bold"
                  style={{
                    color: "#fff",
                    border: "1.5px solid rgba(255,255,255,0.2)",
                    transition: "background 0.3s ease, border-color 0.3s ease",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.4)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)"; }}
                >
                  WhatsApp Elvis
                </a>
              </div>
            </Reveal>
            <Reveal y={16} delay={0.42}>
              <div className="mt-8 flex items-center gap-5 text-[11.5px]" style={{ fontFamily: "'Roboto Mono', monospace", color: "rgba(255,255,255,0.45)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                <span>2-minute quote</span>
                <span>·</span>
                <span>No obligation</span>
                <span>·</span>
                <span>Reply in &lt;1 hour</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="relative pt-16 pb-10" style={{ borderTop: "1px solid var(--border)" }}>
      <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-12 gap-8">
        <div className="col-span-2 md:col-span-5">
          <div className="flex items-center gap-2.5">
            <Lockup size="lg" />
          </div>
          <p className="mt-5 max-w-sm" style={{ color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.6 }}>
            A Cape Town studio. We hand-code premium websites, AI chatbots, POS systems and client portals for South African businesses — no WordPress, no templates.
          </p>
          <div className="mt-6 flex items-center gap-3">
            <FooterIcon label="Facebook" href="https://www.facebook.com/p/Axious-Creative-Studio-61584651391554/" />
            <FooterIcon label="WhatsApp" href="https://wa.me/27623790118" />
            <FooterIcon label="TikTok" href="https://www.tiktok.com/@axiouscreativestudio" />
            <FooterIcon label="X / Twitter" href="https://x.com/axious_studio" />
          </div>
        </div>
        <div className="md:col-span-2">
          <FooterCol title="Studio" links={[
            { label: "Services", href: "#services" },
            { label: "Process", href: "#process" },
            { label: "Work", href: "#work" },
            { label: "About", href: "#about" },
          ]} />
        </div>
        <div className="md:col-span-2">
          <FooterCol title="Help" links={[
            { label: "Packages", href: "#packages" },
            { label: "FAQ", href: "#faq" },
            { label: "Client portal", href: "login.html" },
            { label: "Pay invoice", href: "login.html" },
          ]} />
        </div>
        <div className="md:col-span-3">
          <div style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>Get in touch</div>
          <ul className="mt-5 space-y-3" style={{ fontSize: 14.5, color: "var(--text)" }}>
            <li>design@axiouscreativestudio.co.za</li>
            <li>+27 62 379 0118</li>
            <li>Cape Town · Western Cape</li>
          </ul>
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-6 mt-14 pt-7 flex flex-col md:flex-row items-start md:items-center justify-between gap-4" style={{ borderTop: "1px solid var(--border)" }}>
        <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>© 2026 Axious Creative Studio (Pty) Ltd. All rights reserved.</div>
        <div className="flex items-center gap-5" style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>
          <a href="privacy-policy.html" style={{ color: "inherit" }}>Privacy</a>
          <a href="terms.html" style={{ color: "inherit" }}>Terms</a>
          <a href="popia-website-checklist.html" style={{ color: "inherit" }}>POPIA</a>
        </div>
      </div>
      {/* giant brand SVG — black logo */}
      <div className="max-w-7xl mx-auto px-6 mt-10 overflow-hidden">
        <Reveal y={20}>
          <img
            src="images/logo-black.svg"
            alt=""
            aria-hidden
            draggable={false}
            style={{ height: "clamp(4rem, 14vw, 10rem)", width: "auto", opacity: 0.08, userSelect: "none", pointerEvents: "none" }}
          />
        </Reveal>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>{title}</div>
      <ul className="mt-5 space-y-3">
        {links.map((l) => {
          const label = typeof l === "string" ? l : l.label;
          const href  = typeof l === "string" ? "#"  : l.href;
          return (
            <li key={label}>
              <a href={href} className="group inline-flex items-center gap-1.5" style={{ fontSize: 14.5, color: "var(--text)", transition: "color 0.25s ease" }}
                 onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text)"; }}>
                {label}
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" style={{ opacity: 0.4 }}><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

function FooterIcon({ label, href = "#" }) {
  const icons = {
    Facebook: <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>,
    WhatsApp: <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>,
    TikTok:   <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.11 8.11 0 004.77 1.52V6.76a4.85 4.85 0 01-1-.07z"/></svg>,
    "X / Twitter": <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.84L1.254 2.25H8.08l4.259 5.63L18.244 2.25zM17.08 20.01h1.834L6.98 4.129H5.014L17.08 20.01z"/></svg>,
  };
  return (
    <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
       aria-label={label} className="inline-flex w-9 h-9 rounded-full items-center justify-center"
       style={{ border: "1px solid var(--border)", color: "var(--text)", transition: "all 0.3s ease" }}
       onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "var(--accent)"; }}
       onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.borderColor = "var(--border)"; }}>
      {icons[label] || <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="4"/></svg>}
    </a>
  );
}

Object.assign(window, { Packages, PackCard, SmartChat, SmartChatCard, Work, WorkCard, Testimonials, QuoteRow, FAQ, FAQItem, CTA, Footer });