"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import FadeIn from "@/components/FadeIn";

const products = [
  {
    name: "UIT",
    tagline: "Institutional-grade stock screening for independent investors.",
    href: "/uit",
    badge: "Available Now",
    badgeColor: "#4ade80",
  },
  {
    name: "More Coming",
    tagline: "Additional tools are in development. Stay tuned.",
    href: "#",
    badge: "Soon",
    badgeColor: "#888888",
  },
];

export default function Home() {
  return (
    <>
      {/* ── Hero ─────────────────────────────────────────────────────────── */}
      <section className="relative min-h-screen flex flex-col items-center justify-center text-center px-6 overflow-hidden">
        {/* Background grid */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />
        {/* Radial glow */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background:
              "radial-gradient(ellipse 80% 50% at 50% 40%, rgba(255,255,255,0.04) 0%, transparent 70%)",
          }}
        />

        <div className="relative z-10 max-w-3xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          >
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-6"
              style={{ color: "#4ade80", letterSpacing: "0.2em" }}
            >
              Verimund Solutions
            </p>
          </motion.div>

          <motion.h1
            className="text-5xl md:text-7xl font-semibold leading-tight mb-6"
            style={{ letterSpacing: "-0.03em" }}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
          >
            Precision tools for{" "}
            <span style={{ color: "#888888" }}>serious investors.</span>
          </motion.h1>

          <motion.p
            className="text-base md:text-lg mb-10 max-w-xl mx-auto"
            style={{ color: "#888888", lineHeight: 1.7 }}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
          >
            Verimund Solutions builds finance-focused software that brings
            institutional-level analysis to independent investors.
          </motion.p>

          <motion.div
            className="flex flex-col sm:flex-row gap-3 justify-center"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
          >
            <Link
              href="/uit"
              className="px-6 py-3 text-sm font-medium rounded-sm transition-all duration-200"
              style={{ background: "#ffffff", color: "#000000" }}
              onMouseEnter={(e) => (e.currentTarget.style.background = "#e0e0e0")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "#ffffff")}
            >
              Explore UIT
            </Link>
            <Link
              href="/contact"
              className="px-6 py-3 text-sm font-medium rounded-sm border transition-all duration-200"
              style={{ border: "1px solid #222222", color: "#888888" }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = "#888888";
                e.currentTarget.style.color = "#ffffff";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = "#222222";
                e.currentTarget.style.color = "#888888";
              }}
            >
              Contact Us
            </Link>
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <motion.div
          className="absolute bottom-10 left-1/2 -translate-x-1/2"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
        >
          <motion.div
            className="w-px h-10 mx-auto"
            style={{ background: "linear-gradient(to bottom, #333333, transparent)" }}
            animate={{ scaleY: [1, 0.5, 1] }}
            transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
          />
        </motion.div>
      </section>

      {/* ── About ────────────────────────────────────────────────────────── */}
      <section className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
        <FadeIn>
          <div className="max-w-2xl mx-auto text-center">
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-5"
              style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
            >
              About
            </p>
            <p className="text-base md:text-lg leading-relaxed" style={{ color: "#888888" }}>
              We build software that makes institutional-grade financial analysis
              accessible — without a Bloomberg terminal. No account needed.
              Every product runs on a single license key, activated directly on your machine.
            </p>
          </div>
        </FadeIn>
      </section>

      {/* ── Products ─────────────────────────────────────────────────────── */}
      <section className="py-24 px-6 border-t" style={{ borderColor: "#111111" }}>
        <div className="max-w-5xl mx-auto">
          <FadeIn>
            <p
              className="text-xs font-semibold uppercase tracking-widest mb-12 text-center"
              style={{ color: "#3a3a3a", letterSpacing: "0.2em" }}
            >
              Products
            </p>
          </FadeIn>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            {products.map((p, i) => (
              <FadeIn key={p.name} delay={i * 0.1}>
                <Link
                  href={p.href}
                  className="block p-8 rounded-sm border transition-all duration-300"
                  style={{ border: "1px solid #222222", background: "#111111" }}
                  onMouseEnter={(e) => {
                    (e.currentTarget as HTMLElement).style.borderColor = "#333333";
                    (e.currentTarget as HTMLElement).style.background = "#181818";
                  }}
                  onMouseLeave={(e) => {
                    (e.currentTarget as HTMLElement).style.borderColor = "#222222";
                    (e.currentTarget as HTMLElement).style.background = "#111111";
                  }}
                >
                  <div className="flex items-start justify-between mb-4">
                    <h3 className="text-xl font-semibold">{p.name}</h3>
                    <span
                      className="text-xs px-2 py-0.5 rounded-full font-medium"
                      style={{
                        background: `${p.badgeColor}18`,
                        color: p.badgeColor,
                        border: `1px solid ${p.badgeColor}30`,
                      }}
                    >
                      {p.badge}
                    </span>
                  </div>
                  <p className="text-sm leading-relaxed" style={{ color: "#888888" }}>
                    {p.tagline}
                  </p>
                  {p.href !== "#" && (
                    <p className="mt-6 text-xs font-medium" style={{ color: "#3a3a3a" }}>
                      Learn more →
                    </p>
                  )}
                </Link>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}