import Image from "next/image";
import Link from "next/link";
import {
  ArrowRight,
  Bot,
  CalendarCheck,
  CheckCircle2,
  FileText,
  LockKeyhole,
  Mail,
  Search,
  ShieldCheck,
  Sparkles,
  UserCircle,
  Video,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/ui/logo";
import { HomeCarousel } from "@/components/features/home-carousel";

const features = [
  {
    icon: Bot,
    title: "Meeting bot recording",
    description: "Create a meeting session and allow the recording bot to join as a visible participant.",
  },
  {
    icon: FileText,
    title: "Meeting transcripts",
    description: "Review transcripts with speaker labels, timestamps, searchable text, and playback context.",
  },
  {
    icon: Sparkles,
    title: "AI summaries",
    description: "Turn meeting conversations into summaries, decisions, key points, and action items.",
  },
  {
    icon: CalendarCheck,
    title: "Calendar automation",
    description: "Optionally sync calendar events so the bot can prepare for scheduled meetings.",
  },
  {
    icon: Search,
    title: "Searchable meeting history",
    description: "Find previous meetings, notes, participants, transcripts, and follow-up tasks in one workspace.",
  },
  {
    icon: ShieldCheck,
    title: "Privacy controls",
    description: "Public Privacy Policy and Terms pages explain recording, data use, retention, and deletion.",
  },
];

const dataUse = [
  {
    icon: UserCircle,
    title: "Google account profile",
    data: "Name, email address, and basic profile details from Google sign-in.",
    purpose: "Used to authenticate you, identify your workspace account, and show the correct meeting notes.",
  },
  {
    icon: Mail,
    title: "Google email address",
    data: "Your email address provided during Google authentication.",
    purpose: "Used for account access, ownership checks, notifications, and support communication where enabled.",
  },
  {
    icon: CalendarCheck,
    title: "Calendar events, when enabled",
    data: "Read-only access to Google Calendar events through the calendar.readonly scope, including meeting titles, dates, times, participants, and conferencing links.",
    purpose: "Used solely to identify meetings you have chosen to record or transcribe, and to prepare the meeting bot for those calls. IIH Notetaker never modifies your Google Calendar.",
  },
  {
    icon: Video,
    title: "Meeting links and recordings",
    data: "Meeting URLs you provide, bot status, recordings, transcripts, summaries, and action items.",
    purpose: "Used to join supported meetings, create transcripts, generate summaries, and organize meeting history.",
  },
];

const workflow = [
  "Sign in with Google to create your account",
  "Create a meeting session or enable calendar automation",
  "Admit the bot into the meeting as a participant",
  "Review transcript, summary, decisions, and action items",
];

export default function Home() {
  return (
    <main className="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
      <header className="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <Link href="/" aria-label="IIH Notetaker home">
            <Logo />
          </Link>
          <nav className="hidden items-center gap-6 text-sm font-medium text-gray-600 dark:text-gray-400 md:flex">
            <a href="#features" className="hover:text-gray-900 dark:hover:text-gray-100">Features</a>
            <a href="#data-use" className="hover:text-gray-900 dark:hover:text-gray-100">Data use</a>
            <a href="#workflow" className="hover:text-gray-900 dark:hover:text-gray-100">Workflow</a>
            <Link href="/privacy-policy" className="hover:text-gray-900 dark:hover:text-gray-100">Privacy Policy</Link>
            <Link href="/terms-of-service" className="hover:text-gray-900 dark:hover:text-gray-100">Terms</Link>
          </nav>
          <Button asChild>
            <Link href="/login">
              Get started
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </header>

      <section className="relative overflow-hidden border-b border-gray-200 dark:border-gray-800">
        <div className="absolute inset-x-0 top-0 h-52 bg-blue-50 dark:bg-blue-950/20" />
        <div className="relative mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 md:py-16 lg:grid-cols-[0.94fr_1.06fr] lg:items-center lg:px-8">
          <div className="space-y-7">
            <div className="space-y-5">
              <h1 className="max-w-2xl text-4xl font-bold leading-tight text-gray-950 dark:text-white sm:text-5xl lg:text-6xl">
                IIH Notetaker
              </h1>
              <p className="max-w-xl text-base leading-7 text-gray-600 dark:text-gray-400 sm:text-lg">
                IIH Notetaker is a meeting productivity app that records supported online meetings, creates
                searchable transcripts, and generates AI summaries, decisions, and action items for authorized users.
              </p>
            </div>
            <div className="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm leading-6 text-blue-950 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-100">
              <p className="font-semibold">Why we request Google user data</p>
              <p className="mt-1">
                We use Google sign-in to verify your identity. If calendar automation is enabled, we use calendar
                event details through read-only Google Calendar access (calendar.readonly) only to identify meetings
                that you choose to record or transcribe. We never modify your Google Calendar.
              </p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row">
              <Button size="lg" asChild>
                <Link href="/login">
                  Sign in with Google
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <Link href="/privacy-policy">Read Privacy Policy</Link>
              </Button>
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Review our{" "}
              <Link href="/privacy-policy" className="font-medium text-gray-700 underline underline-offset-4 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">
                Privacy Policy
              </Link>
              {" "}and{" "}
              <Link href="/terms-of-service" className="font-medium text-gray-700 underline underline-offset-4 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">
                Terms of Service
              </Link>
              {" "}before signing in.
            </p>
          </div>

          <div className="relative">
            <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-900">
              <Image
                src="/landing-hero.png"
                alt="IIH Notetaker dashboard showing meeting transcripts and summaries"
                width={1280}
                height={768}
                priority
                className="aspect-[16/10] h-auto w-full object-cover"
              />
            </div>
            <div className="absolute -bottom-5 left-4 right-4 rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-gray-900 sm:left-8 sm:right-auto sm:w-80">
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-green-50 dark:bg-green-950">
                  <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
                </div>
                <div>
                  <p className="text-sm font-semibold">Summary ready</p>
                  <p className="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-400">
                    Decisions, key points, and action items are organized after the meeting ends.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="features" className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="max-w-3xl">
          <p className="text-sm font-semibold uppercase text-blue-600 dark:text-blue-400">What the app does</p>
          <h2 className="mt-2 text-3xl font-bold tracking-tight text-gray-950 dark:text-white">
            Meeting recording, transcription, summaries, and follow-up tracking
          </h2>
          <p className="mt-3 text-sm leading-6 text-gray-600 dark:text-gray-400">
            This page is visible without login and describes the actual product functionality before a user authorizes
            access with Google.
          </p>
        </div>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map(({ icon: Icon, title, description }) => (
            <div key={title} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-950">
                <Icon className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <h3 className="mt-4 text-base font-semibold">{title}</h3>
              <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">{description}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="data-use" className="bg-gray-50 py-16 dark:bg-gray-900/40">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-8 lg:grid-cols-[0.78fr_1.22fr] lg:items-start">
            <div className="space-y-4">
              <p className="text-sm font-semibold uppercase text-blue-600 dark:text-blue-400">Google and user data</p>
              <h2 className="text-3xl font-bold tracking-tight text-gray-950 dark:text-white">
                What data we request and why
              </h2>
              <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
                IIH Notetaker requests data only to authenticate users, identify meetings selected by the user, run the
                meeting recording workflow, and show transcripts or summaries back to authorized users.
              </p>
              <div className="rounded-xl border border-gray-200 bg-white p-4 text-sm leading-6 text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
                We do not sell Google user data or meeting content. Data handling details are available in the public
                Privacy Policy linked from this page.
              </div>
              <div className="rounded-xl border border-gray-200 bg-white p-4 text-sm leading-6 text-gray-600 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-400">
                IIH Notetaker's use and transfer of information received from Google APIs follows the Google API
                Services User Data Policy, including the Limited Use requirements.
              </div>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              {dataUse.map(({ icon: Icon, title, data, purpose }) => (
                <div key={title} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-950">
                  <div className="flex items-center gap-2">
                    <Icon className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                    <h3 className="text-sm font-semibold">{title}</h3>
                  </div>
                  <p className="mt-4 text-xs font-semibold uppercase text-gray-400">Data requested</p>
                  <p className="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">{data}</p>
                  <p className="mt-4 text-xs font-semibold uppercase text-gray-400">Purpose</p>
                  <p className="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">{purpose}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="workflow" className="mx-auto grid max-w-7xl gap-8 px-4 py-16 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:items-start lg:px-8">
        <div className="space-y-5">
          <p className="text-sm font-semibold uppercase text-blue-600 dark:text-blue-400">How it works</p>
          <h2 className="text-3xl font-bold tracking-tight text-gray-950 dark:text-white">
            From Google sign-in to meeting notes
          </h2>
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
            The workflow is transparent: users authorize access, choose or sync meetings, admit the bot, and receive
            transcripts and summaries.
          </p>
          <div className="space-y-3">
            {workflow.map((item, index) => (
              <div key={item} className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-800 dark:bg-gray-950">
                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
                  {index + 1}
                </span>
                <p className="text-sm font-medium">{item}</p>
              </div>
            ))}
          </div>
        </div>
        <HomeCarousel />
      </section>

      <section className="border-y border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/40">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-14 sm:px-6 lg:grid-cols-3 lg:px-8">
          {[
            {
              icon: LockKeyhole,
              title: "Access is authenticated",
              description: "Private meeting content is only available after user sign-in and authorization.",
            },
            {
              icon: Video,
              title: "Recording is transparent",
              description: "The bot joins as a meeting participant. Users are responsible for required participant notice and consent.",
            },
            {
              icon: ShieldCheck,
              title: "Policy pages are public",
              description: "Privacy Policy and Terms of Service are available before login and should match the OAuth consent screen links.",
            },
          ].map(({ icon: Icon, title, description }) => (
            <div key={title} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-950">
              <Icon className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              <h3 className="mt-4 text-base font-semibold">{title}</h3>
              <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">{description}</p>
            </div>
          ))}
        </div>
      </section>

      <footer className="mx-auto flex max-w-7xl flex-col gap-5 px-4 py-8 text-sm text-gray-500 dark:text-gray-400 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8">
        <Logo size={28} textClassName="font-semibold text-gray-900 dark:text-gray-100" />
        <div className="flex flex-wrap gap-4">
          <Link href="/privacy-policy" className="font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">
            Privacy Policy
          </Link>
          <Link href="/terms-of-service" className="hover:text-gray-900 dark:hover:text-gray-100">Terms of Service</Link>
          <Link href="/login" className="hover:text-gray-900 dark:hover:text-gray-100">Sign in</Link>
        </div>
      </footer>
    </main>
  );
}