"use client";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { PhoneMockup } from "./PhoneMockup";
import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";
import { APP_FEATURES } from "./lib/content";

/** Mobile app showcase: device mockup beside a grid of app capabilities. */
export function AppFeaturesSection() {
  const { t } = useTranslation();

  return (
    <Section id="mobile-app" className="bg-background">
      <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
        <div className="flex justify-center lg:order-last">
          <PhoneMockup />
        </div>

        <div className="flex flex-col gap-8">
          <SectionHeading
            align="start"
            eyebrow={t("home.app.eyebrow")}
            title={t("home.app.title")}
            subtitle={t("home.app.subtitle")}
          />

          <div className="grid gap-3 sm:grid-cols-2">
            {APP_FEATURES.map(({ key, icon: Icon }) => (
              <div
                key={key}
                className="flex items-center gap-3 rounded-2xl border border-border bg-white p-3.5 shadow-xs"
              >
                <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-accent text-primary-blue">
                  <Icon className="size-5" />
                </span>
                <Typography as="span" variant="body" className="font-medium">
                  {t(`home.app.features.${key}`)}
                </Typography>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}