"use client";

import Image from "next/image";
import { Check, Smartphone } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

export function AgentAppPromo() {
  const { t } = useTranslation();

  const bullets = [
    t("agentAppPromo.bullet1"),
    t("agentAppPromo.bullet2"),
    t("agentAppPromo.bullet3"),
    t("agentAppPromo.bullet4"),
  ];

  return (
    <section className="section relative overflow-hidden bg-slate-50/50 dark:bg-white/[0.02]">
      <Container>
        <div className="grid items-center gap-14 lg:grid-cols-2 lg:gap-20">
          {/* Phone mockup */}
          <Reveal className="relative order-2 flex justify-center lg:order-1">
            <div
              aria-hidden
              className="absolute -inset-12 -z-10 rounded-full bg-gradient-to-br from-brand-500/15 via-accent-500/10 to-transparent blur-3xl"
            />
            <PhoneMockup />
          </Reveal>

          {/* Copy */}
          <div className="order-1 lg:order-2">
            <Reveal>
              <span className="eyebrow">
                <Smartphone className="h-3.5 w-3.5" />
                {t("agentAppPromo.eyebrow")}
              </span>
            </Reveal>
            <Reveal delay={0.05} className="mt-4">
              <h2 className="text-balance text-display-md tracking-tight text-slate-900 dark:text-white sm:text-display-lg">
                {t("agentAppPromo.title")}
              </h2>
            </Reveal>
            <Reveal delay={0.1} className="mt-5">
              <p className="text-pretty text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
                {t("agentAppPromo.subtitle")}
              </p>
            </Reveal>

            <ul className="mt-8 space-y-3">
              {bullets.map((bullet) => (
                <li key={bullet} className="flex items-center gap-3">
                  <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-accent-100 text-accent-700 dark:bg-accent-500/15 dark:text-accent-300">
                    <Check className="h-3.5 w-3.5" strokeWidth={3} />
                  </span>
                  <span className="text-base text-slate-700 dark:text-slate-200">{bullet}</span>
                </li>
              ))}
            </ul>

            <Reveal delay={0.2} className="mt-9 flex flex-wrap items-center gap-3">
              <a href="#" className="transition-transform duration-200 ease-snappy hover:-translate-y-0.5">
                <Image src="/store-apple.svg" alt={t("agentAppPromo.appStore")} width={120} height={40} className="h-12 w-auto" />
              </a>
              <a href="#" className="transition-transform duration-200 ease-snappy hover:-translate-y-0.5">
                <Image src="/store-google-play.svg" alt={t("agentAppPromo.googlePlay")} width={120} height={40} className="h-12 w-auto" />
              </a>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
}

function PhoneMockup() {
  return (
    <div className="relative w-[280px] sm:w-[300px]" aria-hidden>
      <Image
        src="/iphone.webp"
        alt=""
        width={371}
        height={673}
        priority
        className="h-auto w-full drop-shadow-elevated"
      />
    </div>
  );
}