import { useState, useEffect } from "react";
import { ArrowUpRight, Menu, X, ArrowRight, ExternalLink } from "lucide-react";
import basicxLogo from "@/imports/basicx-white-logo.png";
import imgCafe35 from "@/imports/Screenshot_2026-06-18_at_08.10.37.png";
import imgCafeCup from "@/imports/Screenshot_2026-06-18_at_08.11.25.png";
import imgInchFab from "@/imports/Screenshot_2026-06-18_at_08.11.02.png";
import imgMinhSang1 from "@/imports/Screenshot_2026-06-18_at_08.12.50.png";
import imgMinhSang2 from "@/imports/Screenshot_2026-06-18_at_08.13.05.png";

const NAV_LINKS = [
  { label: "Mission", href: "#mission" },
  { label: "Team", href: "#team" },
  { label: "Projects", href: "#projects" },
  { label: "Testimonial", href: "#testimonial" },
];

// PTech: seafood-tech company, no uploaded screenshot — use Unsplash
const PTECH_IMG = "https://images.unsplash.com/photo-1615485925600-97237c4fc1ec?w=900&h=500&fit=crop&auto=format";

const PROJECTS = [
  {
    name: "Café Trần Quang",
    url: "cafetranquang.com",
    href: "https://cafetranquang.com",
    category: "E-commerce · Brand",
    desc: "35 năm gìn giữ hương vị cà phê Việt — trải nghiệm số hóa di sản thương hiệu và thúc đẩy doanh số trực tiếp trên toàn quốc.",
    images: [imgCafeCup, imgCafe35],
  },
  {
    name: "Ptech Vietnam",
    url: "ptech.com.vn",
    href: "https://ptech.com.vn",
    category: "B2B · Aquaculture Tech",
    desc: "Nền tảng B2B cho ngành thuỷ hải sản — catalog sản phẩm chuyên sâu, tích hợp đặt hàng và quản lý đối tác phân phối toàn quốc.",
    images: [PTECH_IMG],
  },
  {
    name: "InchFab",
    url: "inchfab.com",
    href: "https://inchfab.com",
    category: "B2B · Semiconductor",
    desc: "Dịch vụ foundry bán dẫn trình bày với độ chính xác và uy quyền mà khách hàng kỹ thuật mong đợi — không nhiễu, chỉ thẩm quyền.",
    images: [imgInchFab],
  },
  {
    name: "Minh Sang Design",
    url: "minhsangdesign.com",
    href: "https://minhsangdesign.com",
    category: "Design Studio · Architecture",
    desc: "Kiến trúc nội thất nâng tầm editorial — portfolio platform thu hút khách hàng cao cấp và phản ánh đúng phong cách thiết kế của studio.",
    images: [imgMinhSang1, imgMinhSang2],
  },
];

const TEAM = [
  {
    name: "Nguyen Van Thanh",
    role: "CEO & Co-founder",
    value: "Visionary Clarity",
    desc: "Thanh translates complex market realities into a focused product vision. Every decision anchors to client outcomes — never internal politics.",
    photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop&auto=format",
    tagline: "Strategy becomes product",
  },
  {
    name: "Le Thi Minh",
    role: "CTO & Co-founder",
    value: "Technical Integrity",
    desc: "Minh builds systems that scale without drama. Her commitment to clean architecture means clients own their software, not rent it.",
    photo: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=500&fit=crop&auto=format",
    tagline: "Code built to last",
  },
  {
    name: "Pham Duc Khoa",
    role: "Head of Design",
    value: "Human-Centered Craft",
    desc: "Khoa starts every project with the person on the other side of the screen — empathy first, aesthetics second, always.",
    photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=500&fit=crop&auto=format",
    tagline: "People feel the difference",
  },
];

const TESTIMONIALS = [
  {
    quote: "BasicX didn't just build a website — they understood our 35-year story and turned it into a digital experience our customers keep coming back to.",
    author: "Trần Quang Vinh",
    company: "Café Trần Quang",
  },
  {
    quote: "The team treated our product like it was their own. Technical depth and attention to detail during delivery were unlike anything we had experienced before.",
    author: "Minh Sang",
    company: "Minh Sang Design Studio",
  },
  {
    quote: "Delivered on time, full transparency, and the result spoke for itself. Our qualified leads doubled in the first quarter after launch.",
    author: "K. Nguyen",
    company: "InchFab",
  },
];

function useScrolled(threshold = 40) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > threshold);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, [threshold]);
  return scrolled;
}

function useSectionActive() {
  const [active, setActive] = useState("mission");
  useEffect(() => {
    const ids = NAV_LINKS.map((l) => l.href.slice(1));
    const obs: IntersectionObserver[] = [];
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (!el) return;
      const o = new IntersectionObserver(
        ([e]) => { if (e.isIntersecting) setActive(id); },
        { rootMargin: "-40% 0px -55% 0px" }
      );
      o.observe(el);
      obs.push(o);
    });
    return () => obs.forEach((o) => o.disconnect());
  }, []);
  return active;
}

function ProjectCard({ p }: { p: typeof PROJECTS[0] }) {
  const [imgIdx, setImgIdx] = useState(0);
  const dual = p.images.length > 1;

  return (
    <div
      className="rounded-2xl overflow-hidden flex flex-col"
      style={{ background: "#141c30", border: "1px solid rgba(255,255,255,0.07)" }}
    >
      {/* Image area — fixed aspect ratio */}
      <div className="relative overflow-hidden" style={{ aspectRatio: "16/9" }}>
        {dual ? (
          <div className="flex h-full">
            {p.images.map((src, i) => (
              <div key={i} className="flex-1 overflow-hidden relative">
                <img src={src} alt={`${p.name} ${i + 1}`} className="w-full h-full object-cover object-top" />
                {i < p.images.length - 1 && (
                  <div className="absolute inset-y-0 right-0 w-px" style={{ background: "rgba(255,255,255,0.12)" }} />
                )}
              </div>
            ))}
          </div>
        ) : (
          <img src={p.images[0]} alt={p.name} className="w-full h-full object-cover object-top" />
        )}

        {/* Overlay gradient */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{ background: "linear-gradient(to top, rgba(20,28,48,0.7) 0%, transparent 50%)" }}
        />

        {/* Category */}
        <div
          className="absolute bottom-3 left-4 px-3 py-1 rounded-full text-xs"
          style={{
            background: "rgba(10,14,28,0.8)",
            color: "rgba(200,210,240,0.75)",
            border: "1px solid rgba(255,255,255,0.1)",
            fontFamily: "'Outfit', sans-serif",
            backdropFilter: "blur(8px)",
          }}
        >
          {p.category}
        </div>

        {/* Dual image dots */}
        {dual && (
          <div className="absolute bottom-3 right-4 text-xs" style={{ color: "rgba(200,210,240,0.5)", fontFamily: "'Outfit', sans-serif" }}>
            {p.images.length} views
          </div>
        )}
      </div>

      {/* Card body */}
      <div className="p-6 flex flex-col gap-3 flex-1">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h3
              className="text-base font-bold leading-snug mb-0.5"
              style={{ fontFamily: "'Outfit', sans-serif", color: "#dce4f7" }}
            >
              {p.name}
            </h3>
            <a
              href={p.href}
              target="_blank"
              rel="noopener noreferrer"
              className="text-xs flex items-center gap-1 hover:underline"
              style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}
            >
              {p.url} <ExternalLink size={10} />
            </a>
          </div>
          <a
            href={p.href}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all hover:scale-110"
            style={{ background: "rgba(0,71,255,0.15)", border: "1px solid rgba(0,71,255,0.3)" }}
          >
            <ArrowUpRight size={14} style={{ color: "#4d7eff" }} />
          </a>
        </div>
        <p className="text-sm leading-relaxed" style={{ color: "rgba(180,192,225,0.75)" }}>
          {p.desc}
        </p>
      </div>
    </div>
  );
}

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const scrolled = useScrolled();
  const active = useSectionActive();

  const scrollTo = (href: string) => {
    setMenuOpen(false);
    document.querySelector(href)?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div className="min-h-screen" style={{ background: "#0c1020", color: "#dce4f7", fontFamily: "'Inter', sans-serif" }}>

      {/* ── NAV ─────────────────────────────────────────── */}
      <nav
        className="fixed top-0 left-0 right-0 z-50 transition-all duration-500"
        style={{
          background: scrolled ? "rgba(12,16,32,0.92)" : "transparent",
          backdropFilter: scrolled ? "blur(18px)" : "none",
          borderBottom: scrolled ? "1px solid rgba(255,255,255,0.06)" : "none",
        }}
      >
        <div className="max-w-7xl mx-auto px-6 lg:px-10 flex items-center justify-between h-16 md:h-20">
          <button onClick={() => scrollTo("#mission")}>
            <img src={basicxLogo} alt="BasicX" className="h-6 object-contain" style={{ filter: "brightness(0) invert(1)" }} />
          </button>

          <ul className="hidden md:flex items-center gap-8">
            {NAV_LINKS.map((l) => {
              const isActive = active === l.href.slice(1);
              return (
                <li key={l.label}>
                  <button
                    onClick={() => scrollTo(l.href)}
                    className="text-sm transition-colors duration-200"
                    style={{
                      fontFamily: "'Outfit', sans-serif",
                      fontWeight: isActive ? 600 : 400,
                      color: isActive ? "#4d7eff" : "rgba(200,210,240,0.6)",
                    }}
                  >
                    {l.label}
                  </button>
                </li>
              );
            })}
          </ul>

          <div className="flex items-center gap-3">
            <a
              href="mailto:hello@basicx.vn"
              className="hidden md:flex items-center gap-2 text-sm font-medium px-5 py-2.5 rounded-full transition-opacity hover:opacity-85"
              style={{ background: "#0047ff", color: "#fff", fontFamily: "'Outfit', sans-serif" }}
            >
              Get in touch
            </a>
            <button
              className="md:hidden p-2"
              style={{ color: "rgba(200,210,240,0.7)" }}
              onClick={() => setMenuOpen(!menuOpen)}
            >
              {menuOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>

        {menuOpen && (
          <div className="md:hidden px-6 pb-6 pt-2 flex flex-col gap-3" style={{ background: "rgba(12,16,32,0.97)" }}>
            {NAV_LINKS.map((l) => (
              <button
                key={l.label}
                onClick={() => scrollTo(l.href)}
                className="text-left text-base py-2.5 border-b"
                style={{ color: "rgba(200,210,240,0.8)", borderColor: "rgba(255,255,255,0.06)", fontFamily: "'Outfit', sans-serif" }}
              >
                {l.label}
              </button>
            ))}
            <a
              href="mailto:hello@basicx.vn"
              className="mt-2 text-sm font-medium px-5 py-3 rounded-full text-center"
              style={{ background: "#0047ff", color: "#fff", fontFamily: "'Outfit', sans-serif" }}
            >
              Get in touch
            </a>
          </div>
        )}
      </nav>

      {/* ── HERO / MISSION ──────────────────────────────── */}
      <section id="mission" className="relative min-h-screen flex flex-col justify-center overflow-hidden" style={{ background: "#0a0e20" }}>
        {/* Grid texture */}
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: "linear-gradient(rgba(0,71,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,71,255,0.07) 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />
        {/* Blue left accent */}
        <div
          className="absolute top-0 left-0 h-full"
          style={{
            width: "40%",
            background: "linear-gradient(135deg, rgba(0,71,255,0.25) 0%, transparent 55%)",
            clipPath: "polygon(0 0, 60% 0, 28% 100%, 0 100%)",
          }}
        />
        {/* Right vignette */}
        <div className="absolute inset-0" style={{ background: "radial-gradient(ellipse at 75% 50%, transparent 25%, rgba(10,14,32,0.8) 75%)" }} />

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-10 pt-32 pb-24">
          <div className="max-w-3xl">
            {/* Badge */}
            <span
              className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-8 text-xs tracking-widest uppercase"
              style={{ border: "1px solid rgba(77,126,255,0.35)", color: "#6699ff", background: "rgba(0,71,255,0.08)", fontFamily: "'Outfit', sans-serif" }}
            >
              Product & Technology Partner
            </span>

            {/* Headline */}
            <h1
              className="text-5xl md:text-7xl lg:text-[5.5rem] leading-none mb-6"
              style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 800, letterSpacing: "-0.03em", color: "#eef1fb" }}
            >
              We build products
              <br />
              <span style={{ color: "#0047ff" }}>people love.</span>
            </h1>

            <p className="text-lg md:text-xl max-w-xl mb-10 leading-relaxed" style={{ color: "rgba(180,192,225,0.8)" }}>
              BasicX is a product and technology studio. We partner with founders and businesses
              to design, build, and grow digital products — with more than a decade of experience
              across product thinking, engineering, and UX.
            </p>

            <div className="flex flex-wrap gap-4">
              <button
                onClick={() => scrollTo("#projects")}
                className="flex items-center gap-2 px-7 py-3.5 rounded-full text-sm font-semibold transition-all hover:opacity-90"
                style={{ background: "#0047ff", color: "#fff", fontFamily: "'Outfit', sans-serif" }}
              >
                See our work <ArrowRight size={15} />
              </button>
              <button
                onClick={() => scrollTo("#team")}
                className="flex items-center gap-2 px-7 py-3.5 rounded-full text-sm font-semibold"
                style={{ border: "1px solid rgba(255,255,255,0.13)", color: "rgba(220,228,247,0.85)", fontFamily: "'Outfit', sans-serif" }}
              >
                Meet the team
              </button>
            </div>
          </div>

          {/* Stats */}
          <div
            className="mt-20 pt-10 border-t grid grid-cols-2 md:grid-cols-4 gap-8"
            style={{ borderColor: "rgba(255,255,255,0.07)" }}
          >
            {[
              { n: "10+", label: "Years experience" },
              { n: "100%", label: "Ownership mindset" },
              { n: "4", label: "Industries" },
              { n: "∞", label: "Long-term partnerships" },
            ].map((s) => (
              <div key={s.label}>
                <div className="text-3xl md:text-4xl font-black mb-1" style={{ fontFamily: "'Outfit', sans-serif", color: "#0047ff" }}>
                  {s.n}
                </div>
                <div className="text-sm" style={{ color: "rgba(180,192,225,0.6)" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Scroll pulse */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-30">
          <div className="w-px h-10 animate-pulse" style={{ background: "#0047ff" }} />
          <span className="text-[10px] tracking-widest uppercase" style={{ color: "rgba(180,192,225,0.6)", fontFamily: "'Outfit', sans-serif" }}>scroll</span>
        </div>
      </section>

      {/* ── TEAM ────────────────────────────────────────── */}
      <section id="team" className="py-24 lg:py-36" style={{ background: "#0c1020" }}>
        <div className="max-w-7xl mx-auto px-6 lg:px-10">
          {/* Label */}
          <div className="flex items-center gap-3 mb-5">
            <div className="w-8 h-px" style={{ background: "#0047ff" }} />
            <span className="text-xs tracking-widest uppercase" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>Our Team</span>
          </div>

          <div className="grid lg:grid-cols-2 gap-6 mb-14">
            <h2
              className="text-4xl md:text-5xl leading-tight"
              style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 800, letterSpacing: "-0.03em", color: "#eef1fb" }}
            >
              People make<br />
              <span style={{ color: "#0047ff" }}>the difference</span>
            </h2>
            <div className="flex items-end">
              <p className="text-base leading-relaxed" style={{ color: "rgba(180,192,225,0.75)" }}>
                We combine product thinking, technical expertise, and real-world experience to build
                solutions that deliver real value. More than a development team — we act as your
                long-term product partner.
              </p>
            </div>
          </div>

          {/* Cards */}
          <div className="grid md:grid-cols-3 gap-6">
            {TEAM.map((m) => (
              <div
                key={m.name}
                className="group rounded-2xl overflow-hidden"
                style={{ background: "#141c30", border: "1px solid rgba(255,255,255,0.07)" }}
              >
                <div className="relative overflow-hidden" style={{ height: 260 }}>
                  <img
                    src={m.photo}
                    alt={m.name}
                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  <div
                    className="absolute inset-0"
                    style={{ background: "linear-gradient(to top, rgba(20,28,48,1) 0%, rgba(20,28,48,0.2) 55%, transparent 100%)" }}
                  />
                  <span
                    className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold"
                    style={{ background: "#0047ff", color: "#fff", fontFamily: "'Outfit', sans-serif" }}
                  >
                    {m.value}
                  </span>
                </div>

                <div className="p-6">
                  <div className="text-xs tracking-widest uppercase mb-1" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>
                    {m.role}
                  </div>
                  <h3 className="text-lg font-bold mb-3" style={{ fontFamily: "'Outfit', sans-serif", color: "#eef1fb" }}>
                    {m.name}
                  </h3>
                  <p className="text-sm leading-relaxed mb-4" style={{ color: "rgba(180,192,225,0.7)" }}>
                    {m.desc}
                  </p>
                  <div className="text-xs font-semibold" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>
                    → {m.tagline}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Values strip */}
          <div
            className="mt-10 rounded-2xl p-8 md:p-10 grid md:grid-cols-3 gap-8"
            style={{ background: "#111828", border: "1px solid rgba(255,255,255,0.06)" }}
          >
            {[
              { icon: "100%", title: "Full commitment", body: "We treat your product as if it were our own — full skin in the game, every sprint, every decision." },
              { icon: "+10", title: "Built on trust", body: "Over a decade delivering with responsibility. We don't disappear after go-live." },
              { icon: "🏆", title: "We care deeply", body: "Your product's success is our reputation. We measure ourselves by your outcomes, not billable hours." },
            ].map((v) => (
              <div key={v.title} className="flex gap-4">
                <div
                  className="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center text-base font-black"
                  style={{ background: "rgba(0,71,255,0.12)", color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}
                >
                  {v.icon}
                </div>
                <div>
                  <div className="font-semibold mb-1 text-sm" style={{ fontFamily: "'Outfit', sans-serif", color: "#dce4f7" }}>
                    {v.title}
                  </div>
                  <p className="text-sm leading-relaxed" style={{ color: "rgba(180,192,225,0.65)" }}>{v.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PROJECTS ────────────────────────────────────── */}
      <section id="projects" className="py-24 lg:py-36" style={{ background: "#0a0e1e" }}>
        <div className="max-w-7xl mx-auto px-6 lg:px-10">
          <div className="flex items-center gap-3 mb-5">
            <div className="w-8 h-px" style={{ background: "#0047ff" }} />
            <span className="text-xs tracking-widest uppercase" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>Selected Work</span>
          </div>

          <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
            <h2
              className="text-4xl md:text-5xl leading-tight"
              style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 800, letterSpacing: "-0.03em", color: "#eef1fb" }}
            >
              Projects we're<br />proud of
            </h2>
            <p className="max-w-xs text-sm leading-relaxed" style={{ color: "rgba(180,192,225,0.65)" }}>
              From Vietnamese coffee heritage to semiconductor foundry — we go deep into each domain.
            </p>
          </div>

          {/* Aligned 2×2 grid */}
          <div className="grid md:grid-cols-2 gap-6">
            {PROJECTS.map((p) => (
              <ProjectCard key={p.url} p={p} />
            ))}
          </div>
        </div>
      </section>

      {/* ── TESTIMONIAL ─────────────────────────────────── */}
      <section id="testimonial" className="py-24 lg:py-36" style={{ background: "#0c1020" }}>
        <div className="max-w-7xl mx-auto px-6 lg:px-10">
          <div className="flex items-center gap-3 mb-5">
            <div className="w-8 h-px" style={{ background: "#0047ff" }} />
            <span className="text-xs tracking-widest uppercase" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>Testimonials</span>
          </div>

          <h2
            className="text-4xl md:text-5xl font-bold mb-14 leading-tight"
            style={{ fontFamily: "'Outfit', sans-serif", letterSpacing: "-0.03em", color: "#eef1fb" }}
          >
            What clients say
          </h2>

          <div className="grid md:grid-cols-3 gap-6">
            {TESTIMONIALS.map((t) => (
              <div
                key={t.author}
                className="rounded-2xl p-8 flex flex-col"
                style={{ background: "#141c30", border: "1px solid rgba(255,255,255,0.07)" }}
              >
                <div
                  className="text-6xl font-black leading-none mb-4"
                  style={{ color: "#0047ff", fontFamily: "'Outfit', sans-serif", lineHeight: 0.9 }}
                >
                  "
                </div>
                <p className="text-sm leading-relaxed flex-1 mb-8" style={{ color: "rgba(200,212,240,0.82)" }}>
                  {t.quote}
                </p>
                <div>
                  <div className="font-semibold text-sm" style={{ fontFamily: "'Outfit', sans-serif", color: "#dce4f7" }}>
                    {t.author}
                  </div>
                  <div className="text-xs mt-0.5" style={{ color: "#4d7eff", fontFamily: "'Outfit', sans-serif" }}>
                    {t.company}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA BANNER ──────────────────────────────────── */}
      <section className="py-16" style={{ background: "#0a0e1e" }}>
        <div className="max-w-7xl mx-auto px-6 lg:px-10">
          <div
            className="rounded-3xl px-10 md:px-16 py-14 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden"
            style={{ background: "#0047ff" }}
          >
            <div
              className="absolute inset-0 opacity-[0.07]"
              style={{ backgroundImage: "linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)", backgroundSize: "40px 40px" }}
            />
            <div className="relative">
              <h2 className="text-3xl md:text-4xl font-bold mb-2" style={{ fontFamily: "'Outfit', sans-serif", color: "#fff" }}>
                Ready to build something real?
              </h2>
              <p style={{ color: "rgba(255,255,255,0.72)" }}>
                Let's talk about your product — no pressure, no template proposals.
              </p>
            </div>
            <a
              href="mailto:hello@basicx.vn"
              className="relative flex-shrink-0 flex items-center gap-2 px-8 py-4 rounded-full font-semibold text-sm transition-opacity hover:opacity-90"
              style={{ background: "#fff", color: "#0047ff", fontFamily: "'Outfit', sans-serif" }}
            >
              Start a conversation <ArrowRight size={15} />
            </a>
          </div>
        </div>
      </section>

      {/* ── FOOTER ──────────────────────────────────────── */}
      <footer className="py-10 border-t" style={{ background: "#080c1a", borderColor: "rgba(255,255,255,0.06)" }}>
        <div className="max-w-7xl mx-auto px-6 lg:px-10 flex flex-col md:flex-row items-center justify-between gap-5">
          <img src={basicxLogo} alt="BasicX" className="h-5 object-contain" style={{ filter: "brightness(0) invert(1)", opacity: 0.6 }} />
          <div className="flex flex-wrap gap-6 text-xs" style={{ color: "rgba(180,192,225,0.5)", fontFamily: "'Outfit', sans-serif" }}>
            {NAV_LINKS.map((l) => (
              <button key={l.label} onClick={() => scrollTo(l.href)} className="hover:text-white transition-colors">
                {l.label}
              </button>
            ))}
          </div>
          <div className="text-xs" style={{ color: "rgba(180,192,225,0.4)", fontFamily: "'Outfit', sans-serif" }}>
            © {new Date().getFullYear()} BasicX. Product & Technology Partner.
          </div>
        </div>
      </footer>
    </div>
  );
}