export default function JTBAssetGroupPortfolio() {
  const services = [
    {
      title: "Digital Asset Management",
      desc: "Structured management of digital brands, platforms, and online assets with a focus on clarity, consistency, and long-term value.",
    },
    {
      title: "Web Development",
      desc: "Custom websites and landing pages built for performance, credibility, and conversion across desktop and mobile.",
    },
    {
      title: "Brand Positioning",
      desc: "Sharper messaging, refined digital presentation, and premium online experiences designed to elevate perception.",
    },
  ];

  const projects = [
    {
      name: "Premium Brand Presence",
      type: "Brand / Web",
      desc: "A refined digital rollout focused on stronger visual identity, premium presentation, and clear brand architecture.",
    },
    {
      name: "High-Performance Landing Experience",
      type: "Development",
      desc: "Conversion-minded layout system with a clean narrative flow, fast load times, and polished UI interactions.",
    },
    {
      name: "Digital Growth Framework",
      type: "Strategy / Assets",
      desc: "A scalable content and asset structure designed to support marketing activity, campaigns, and future expansion.",
    },
  ];

  return (
    <div className="min-h-screen bg-[#0c0d10] text-white selection:bg-lime-300 selection:text-black">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-24 left-[-10%] h-80 w-80 rounded-full bg-lime-300/10 blur-3xl" />
        <div className="absolute top-[30%] right-[-8%] h-96 w-96 rounded-full bg-lime-200/5 blur-3xl" />
      </div>

      <main className="relative mx-auto max-w-7xl px-6 py-8 md:px-10 lg:px-12">
        <header className="mb-20 flex items-center justify-between border-b border-white/10 pb-6">
          <div>
            <div className="text-xs uppercase tracking-[0.35em] text-lime-300/80">
              JTB Asset Group
            </div>
            <div className="mt-2 text-sm text-white/55">Digital assets, built to perform</div>
          </div>

          <nav className="hidden gap-8 text-sm text-white/70 md:flex">
            <a href="#services" className="transition hover:text-lime-300">Services</a>
            <a href="#projects" className="transition hover:text-lime-300">Projects</a>
            <a href="#about" className="transition hover:text-lime-300">About</a>
            <a href="#contact" className="transition hover:text-lime-300">Contact</a>
          </nav>
        </header>

        <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
          <div>
            <div className="mb-5 inline-flex items-center rounded-full border border-lime-300/25 bg-lime-300/8 px-4 py-2 text-xs uppercase tracking-[0.25em] text-lime-300">
              Boutique digital management & development
            </div>

            <h1 className="max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.04em] text-white md:text-7xl lg:text-[96px]">
              Digital assets <span className="text-lime-300">built with intent</span>.
            </h1>

            <p className="mt-8 max-w-2xl text-lg leading-8 text-white/70 md:text-xl">
              JTB Asset Group creates premium digital experiences across brand, web, and online asset development — designed to feel sharp, modern, and commercially effective.
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <a
                href="#contact"
                className="rounded-2xl bg-lime-300 px-6 py-3 text-sm font-medium text-black transition hover:scale-[1.02]"
              >
                Start a project
              </a>
              <a
                href="#projects"
                className="rounded-2xl border border-white/15 px-6 py-3 text-sm font-medium text-white/85 transition hover:border-lime-300/50 hover:text-lime-300"
              >
                View work
              </a>
            </div>
          </div>

          <div className="grid gap-4">
            <div className="rounded-[28px] border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur">
              <div className="text-xs uppercase tracking-[0.25em] text-white/45">Lead</div>
              <div className="mt-4 text-4xl font-semibold tracking-[-0.04em]">Joel Borserio</div>
              <div className="mt-2 text-white/65">Managing Director</div>
              <div className="mt-8 h-px w-full bg-white/10" />
              <div className="mt-6 grid grid-cols-2 gap-4 text-sm text-white/75">
                <div>
                  <div className="text-white/40">Phone</div>
                  <div className="mt-1">0431 816 101</div>
                </div>
                <div>
                  <div className="text-white/40">Website</div>
                  <div className="mt-1">jtbassetgroup.com</div>
                </div>
              </div>
            </div>

            <div className="rounded-[28px] border border-lime-300/20 bg-lime-300/8 p-6 text-sm text-white/75">
              Focused on polished execution, premium positioning, and practical digital outcomes.
            </div>
          </div>
        </section>

        <section className="mt-24 grid gap-6 md:grid-cols-3">
          {[
            ["01", "Modern web builds"],
            ["02", "Premium brand presentation"],
            ["03", "Performance-led digital assets"],
          ].map(([num, label]) => (
            <div key={num} className="rounded-[28px] border border-white/10 bg-white/[0.03] p-6">
              <div className="text-sm text-lime-300">{num}</div>
              <div className="mt-10 text-2xl font-medium tracking-[-0.03em] text-white">
                {label}
              </div>
            </div>
          ))}
        </section>

        <section id="services" className="mt-28">
          <div className="mb-10 flex items-end justify-between gap-6">
            <div>
              <div className="text-xs uppercase tracking-[0.28em] text-lime-300/80">Services</div>
              <h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em] md:text-5xl">
                Built for brands that value clarity.
              </h2>
            </div>
            <p className="hidden max-w-md text-right text-white/55 md:block">
              Strategic digital support tailored to businesses that want to look sharper and perform better online.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            {services.map((service) => (
              <div
                key={service.title}
                className="group rounded-[30px] border border-white/10 bg-white/[0.03] p-7 transition hover:-translate-y-1 hover:border-lime-300/30 hover:bg-white/[0.05]"
              >
                <div className="text-sm uppercase tracking-[0.22em] text-white/35">Service</div>
                <h3 className="mt-10 text-2xl font-semibold tracking-[-0.03em] text-white">
                  {service.title}
                </h3>
                <p className="mt-4 text-base leading-7 text-white/65">{service.desc}</p>
              </div>
            ))}
          </div>
        </section>

        <section id="projects" className="mt-28">
          <div className="mb-10">
            <div className="text-xs uppercase tracking-[0.28em] text-lime-300/80">Selected Work</div>
            <h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em] md:text-5xl">
              Original work, premium feel.
            </h2>
          </div>

          <div className="grid gap-6 lg:grid-cols-3">
            {projects.map((project, index) => (
              <div
                key={project.name}
                className="overflow-hidden rounded-[30px] border border-white/10 bg-[#13151a]"
              >
                <div className="h-48 bg-gradient-to-br from-lime-300/25 via-white/5 to-transparent" />
                <div className="p-7">
                  <div className="text-sm text-lime-300/90">0{index + 1} — {project.type}</div>
                  <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">{project.name}</h3>
                  <p className="mt-4 leading-7 text-white/65">{project.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section id="about" className="mt-28 grid gap-8 rounded-[36px] border border-white/10 bg-white/[0.03] p-8 md:grid-cols-[0.9fr_1.1fr] md:p-10">
          <div>
            <div className="text-xs uppercase tracking-[0.28em] text-lime-300/80">About</div>
            <h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em] md:text-5xl">
              A boutique approach to digital presence.
            </h2>
          </div>
          <div className="space-y-5 text-lg leading-8 text-white/68">
            <p>
              JTB Asset Group works with businesses that want more than a basic online presence. The focus is on high-quality presentation, structured digital assets, and modern web experiences that support growth.
            </p>
            <p>
              Every build is approached with intention — balancing premium visual identity with real-world usability, performance, and flexibility.
            </p>
          </div>
        </section>

        <section id="contact" className="mt-28 mb-10 rounded-[36px] border border-lime-300/20 bg-lime-300 px-8 py-10 text-black md:px-10 md:py-12">
          <div className="grid gap-8 md:grid-cols-[1.3fr_0.7fr] md:items-end">
            <div>
              <div className="text-xs uppercase tracking-[0.28em] text-black/65">Contact</div>
              <h2 className="mt-3 max-w-3xl text-3xl font-semibold tracking-[-0.04em] md:text-5xl">
                Ready to refine your digital presence?
              </h2>
              <p className="mt-5 max-w-2xl text-base leading-7 text-black/75 md:text-lg">
                Enquiries, collaborations, and project discussions are welcome. Let’s build something sharp, strategic, and commercially strong.
              </p>
            </div>

            <div className="space-y-3 text-base md:text-right">
              <div><span className="font-semibold">Phone:</span> 0431 816 101</div>
              <div><span className="font-semibold">Web:</span> jtbassetgroup.com</div>
              <div><span className="font-semibold">Email:</span> hello@jtbassetgroup.com</div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}