/* 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://g.page/r/CaxiousCreativeStudio/review"
          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 a full year of hosting, SSL and analytics. After year one, hosting renews at a 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 });