import type { Metadata } from "next";
import PageHero from "@/components/PageHero";
import Section from "@/components/Section";
import Card from "@/components/Card";
import HUDPreviewSVG from "@/components/HUDPreviewSVG";
import CTASection from "@/components/CTASection";
import Button from "@/components/Button";
import { PRODUCT_NAME } from "@/lib/constants";

export const metadata: Metadata = {
    title: "Produto",
    description: `Descobre o ${PRODUCT_NAME}: óculos AR com HUD minimalista para métricas de corrida em tempo real.`,
};

export default function ProdutoPage() {
    return (
        <>
            <PageHero
                title={`Conhece o ${PRODUCT_NAME}`}
                description="Um display heads-up desenhado especificamente para corrida de alta performance. Leve, discreto e construído para não interromper o teu fluxo."
            >
                <Button href="/contactos" trackEvent="produto_pedir_demo">
                    Pedir demo
                </Button>
            </PageHero>

            <Section muted>
                <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
                    O que vês no HUD
                </h2>
                <div className="grid md:grid-cols-2 gap-10">
                    <div>
                        <HUDPreviewSVG variant="pace" />
                        <h3 className="text-xl font-bold mt-6 mb-2">Modo Pacing</h3>
                        <p className="text-muted-foreground">
                            Ritmo atual, ritmo-alvo, delta e splits. Tudo o que precisas para executar uma estratégia de prova perfeita.
                        </p>
                    </div>
                    <div>
                        <HUDPreviewSVG variant="power" />
                        <h3 className="text-xl font-bold mt-6 mb-2">Modo Potência</h3>
                        <p className="text-muted-foreground">
                            Watts instantâneos, zona de treino e potência média. Gestão de esforço baseada em dados objetivos.
                        </p>
                    </div>
                </div>
            </Section>

            <Section>
                <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">
                    Características principais
                </h2>
                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    {[
                        {
                            title: "Display não-intrusivo",
                            desc: "HUD monocromático posicionado no canto do campo de visão. Vês os dados sem perder foco na estrada.",
                        },
                        {
                            title: "Ultra-leve",
                            desc: "Módulo HUD com menos de 30g. Desenhado para ser esquecido durante o uso.",
                        },
                        {
                            title: "Resistente",
                            desc: "Proteção contra suor, chuva e poeira. Construído para treinos em qualquer condição.",
                        },
                        {
                            title: "Autonomia prolongada",
                            desc: "Mais de 8 horas de utilização contínua. Suficiente para ultramaratonas.",
                        },
                        {
                            title: "Compatível com sensores",
                            desc: "Ligação a sensores de frequência cardíaca, potência e cadência via Bluetooth/ANT+.",
                        },
                        {
                            title: "Personalizável",
                            desc: "Escolhe as métricas que queres ver, o layout e os alertas. Configuração via app companion.",
                        },
                    ].map((feature, i) => (
                        <Card key={i}>
                            <h3 className="text-lg font-bold mb-2">{feature.title}</h3>
                            <p className="text-sm text-muted-foreground leading-relaxed">
                                {feature.desc}
                            </p>
                        </Card>
                    ))}
                </div>
            </Section>

            <CTASection />
        </>
    );
}