import { mdiArrowRight, mdiCheckCircleOutline, mdiLogin, mdiShieldCheckOutline, mdiStarCircleOutline } from '@mdi/js';
import Head from 'next/head';
import Link from 'next/link';
import React, { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { subscriptionPlans, trialDays } from '../subscriptionPlans';

const metrics = [
  ['7 days', 'default review delay'],
  ['5 sources', 'Stripe, Square, PayPal, Shopify, WooCommerce'],
  ['4 states', 'pending, sent, clicked, reviewed'],
];

const steps = [
  ['Capture', 'Receive Stripe, Square, PayPal, Shopify, or WooCommerce webhooks as soon as checkout happens.'],
  ['Schedule', 'Create the customer, transaction, and review request automatically with your preferred delay.'],
  ['Track', 'Follow pending, sent, clicked, and reviewed requests from one workspace.'],
];

const features = [
  'Business review links and templates',
  'Webhook-created customers and transactions',
  'Readable queue with message preview',
  'Admin CRUD and API docs still available',
];

export default function Starter() {
  return (
    <div className="min-h-screen bg-[#F7F8FC] text-slate-950">
      <Head>
        <title>{getPageTitle('Review Flow')}</title>
        <meta
          name="description"
          content="Review Flow helps businesses queue and track review requests after customer purchases or visits."
        />
      </Head>

      <header className="sticky top-0 z-20 border-b border-white/70 bg-white/80 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <Link href="/" className="flex items-center gap-3 font-black tracking-tight">
            <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#101828] text-white shadow-lg shadow-indigo-950/20">
              ★
            </span>
            <span className="text-xl">Review Flow</span>
          </Link>
          <nav className="flex items-center gap-3">
            <BaseButton href="/#pricing" label="Pricing" color="whiteDark" />
            <BaseButton href="/login" icon={mdiLogin} label="Login" color="whiteDark" />
            <BaseButton href="/reviewflow" icon={mdiArrowRight} label="Admin interface" color="info" />
          </nav>
        </div>
      </header>

      <main>
        <section className="relative isolate overflow-hidden px-6 py-20 md:py-28">
          <div className="absolute left-1/2 top-0 -z-10 h-[640px] w-[920px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_center,#7C3AED_0%,#10B981_38%,transparent_68%)] opacity-20 blur-3xl" />
          <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
            <div>
              <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-bold text-emerald-700">
                <span className="h-2 w-2 rounded-full bg-emerald-500" />
                Review automation for modern local businesses
              </div>
              <h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-tight text-slate-950 md:text-7xl">
                Ask at the perfect moment. Earn more five-star reviews.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                Review Flow turns Stripe, Square, PayPal, Shopify, and WooCommerce webhooks into scheduled review requests with a clean queue, message preview, and admin controls already wired into your app.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <BaseButton href="/reviewflow" icon={mdiStarCircleOutline} label="Open Review Flow" color="info" className="shadow-xl shadow-indigo-600/20" />
                <BaseButton href="/login" icon={mdiShieldCheckOutline} label="Login to admin" color="whiteDark" />
              </div>
              <div className="mt-10 grid max-w-2xl gap-3 sm:grid-cols-3">
                {metrics.map(([value, label]) => (
                  <div key={label} className="rounded-3xl border border-white bg-white/80 p-5 shadow-xl shadow-slate-200/60">
                    <p className="text-3xl font-black text-slate-950">{value}</p>
                    <p className="mt-1 text-sm text-slate-500">{label}</p>
                  </div>
                ))}
              </div>
            </div>

            <CardBox className="border-0 bg-white/90 shadow-2xl shadow-indigo-950/10 ring-1 ring-slate-200/70" cardBoxClassName="p-0">
              <div className="rounded-t-3xl bg-[#101828] p-5 text-white">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-bold uppercase tracking-[0.25em] text-emerald-300">Live workflow</p>
                    <h2 className="mt-2 text-2xl font-black">Review request queued</h2>
                  </div>
                  <span className="rounded-full bg-emerald-400/20 px-3 py-1 text-sm font-bold text-emerald-200 ring-1 ring-emerald-300/30">
                    pending
                  </span>
                </div>
              </div>
              <div className="space-y-5 p-6">
                <div className="rounded-3xl bg-slate-50 p-5">
                  <p className="text-xs font-black uppercase tracking-[0.25em] text-slate-400">Customer</p>
                  <p className="mt-2 text-lg font-black">Maya Chen</p>
                  <p className="text-slate-500">maya@example.com</p>
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  <div className="rounded-3xl bg-indigo-50 p-5 text-indigo-950">
                    <p className="text-sm font-bold text-indigo-500">Scheduled</p>
                    <p className="text-2xl font-black">+7 days</p>
                  </div>
                  <div className="rounded-3xl bg-emerald-50 p-5 text-emerald-950">
                    <p className="text-sm font-bold text-emerald-600">Destination</p>
                    <p className="text-2xl font-black">Google</p>
                  </div>
                </div>
                <div className="rounded-3xl border border-dashed border-slate-200 p-5">
                  <p className="font-black">How was your experience with Review Flow Studio?</p>
                  <p className="mt-2 text-sm leading-6 text-slate-500">
                    Hi Maya, thank you for choosing us. We would love to hear about your experience.
                  </p>
                </div>
              </div>
            </CardBox>
          </div>
        </section>

        <section className="px-6 pb-20">
          <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-3">
            {steps.map(([title, copy], index) => (
              <div key={title} className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50">
                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-lg font-black text-white">
                  {index + 1}
                </div>
                <h3 className="text-2xl font-black">{title}</h3>
                <p className="mt-3 leading-7 text-slate-600">{copy}</p>
              </div>
            ))}
          </div>
        </section>

        <section id="pricing" className="px-6 pb-20">
          <div className="mx-auto max-w-7xl">
            <div className="mx-auto max-w-3xl text-center">
              <p className="text-sm font-black uppercase tracking-[0.3em] text-emerald-600">Simple pricing</p>
              <h2 className="mt-4 text-4xl font-black tracking-tight text-slate-950 md:text-5xl">Choose Starter or Pro.</h2>
              <p className="mt-5 text-lg leading-8 text-slate-600">
                Every plan starts with a {trialDays}-day free trial. Starter covers the core review workflow. Pro adds the advanced automation and reputation marketing tools growing teams need.
              </p>
            </div>

            <div className="mt-12 grid gap-6 lg:grid-cols-2">
              {subscriptionPlans.map((plan) => {
                const isPro = plan.id === 'pro';

                return (
                  <CardBox
                    key={plan.id}
                    className={`relative overflow-hidden border-0 bg-white shadow-2xl ${
                      isPro ? 'shadow-indigo-950/20 ring-2 ring-indigo-600' : 'shadow-slate-200/70 ring-1 ring-slate-200'
                    }`}
                    cardBoxClassName="p-0"
                  >
                    {plan.highlight && (
                      <div className="absolute right-6 top-6 rounded-full bg-indigo-600 px-4 py-1 text-sm font-black text-white shadow-lg shadow-indigo-600/30">
                        {plan.highlight}
                      </div>
                    )}
                    <div className="p-8">
                      <p className="text-sm font-black uppercase tracking-[0.3em] text-slate-400">Review Flow</p>
                      <h3 className="mt-3 text-3xl font-black text-slate-950">{plan.name}</h3>
                      <p className="mt-3 min-h-[56px] leading-7 text-slate-600">{plan.tagline}</p>

                      <div className="mt-8 flex items-end gap-2">
                        <span className="text-5xl font-black tracking-tight text-slate-950">${plan.priceMonthly}</span>
                        <span className="pb-2 font-bold text-slate-500">/month</span>
                      </div>
                      <p className="mt-2 text-sm font-bold text-emerald-600">{plan.trialDays}-day free trial included</p>

                      <div className="mt-8 grid gap-3 rounded-3xl bg-slate-50 p-5 sm:grid-cols-2">
                        <div>
                          <p className="text-2xl font-black text-slate-950">{plan.limits.monthlyReviewRequests.toLocaleString()}</p>
                          <p className="text-sm text-slate-500">review requests/month</p>
                        </div>
                        <div>
                          <p className="text-2xl font-black text-slate-950">{plan.limits.businesses}</p>
                          <p className="text-sm text-slate-500">businesses/locations</p>
                        </div>
                        <div>
                          <p className="text-2xl font-black text-slate-950">{plan.limits.teamMembers}</p>
                          <p className="text-sm text-slate-500">team members</p>
                        </div>
                        <div>
                          <p className="text-2xl font-black text-slate-950">{plan.limits.paymentConnectors}</p>
                          <p className="text-sm text-slate-500">payment connectors</p>
                        </div>
                      </div>

                      <BaseButton
                        href={`/register?plan=${plan.id}`}
                        icon={mdiArrowRight}
                        label={plan.ctaLabel}
                        color={isPro ? 'info' : 'whiteDark'}
                        className="mt-8 w-full shadow-xl shadow-indigo-600/10"
                      />
                    </div>

                    <div className={isPro ? 'bg-indigo-950 p-8 text-white' : 'bg-slate-950 p-8 text-white'}>
                      <p className="mb-5 text-sm font-black uppercase tracking-[0.25em] text-emerald-300">Included features</p>
                      <div className="grid gap-3">
                        {plan.features.map((feature) => (
                          <div key={feature} className="flex items-start gap-3">
                            <span className="mt-1 text-emerald-300">
                              <svg className="h-5 w-5" viewBox="0 0 24 24">
                                <path fill="currentColor" d={mdiCheckCircleOutline} />
                              </svg>
                            </span>
                            <span className="font-semibold text-slate-100">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </CardBox>
                );
              })}
            </div>
          </div>
        </section>

        <section className="bg-[#101828] px-6 py-20 text-white">
          <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
            <div>
              <p className="text-sm font-black uppercase tracking-[0.3em] text-emerald-300">First MVP slice</p>
              <h2 className="mt-4 text-4xl font-black tracking-tight md:text-5xl">A complete thin workflow, not just a screen.</h2>
              <p className="mt-5 leading-8 text-slate-300">
                The admin workspace lets a user connect payment webhooks, receive events, create transactions and customers, queue review requests, browse recent activity, and inspect the generated message.
              </p>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              {features.map((feature) => (
                <div key={feature} className="flex items-start gap-3 rounded-3xl bg-white/10 p-5 ring-1 ring-white/10">
                  <span className="mt-1 text-emerald-300"><svg className="h-5 w-5" viewBox="0 0 24 24"><path fill="currentColor" d={mdiCheckCircleOutline} /></svg></span>
                  <span className="font-semibold text-slate-100">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-white px-6 py-8">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
          <p>© 2026 Review Flow. All rights reserved.</p>
          <div className="flex gap-5">
            <Link href="/privacy-policy/" className="hover:text-slate-950">Privacy Policy</Link>
            <Link href="/terms-of-use/" className="hover:text-slate-950">Terms of Use</Link>
            <Link href="/login" className="font-bold text-slate-950">Login</Link>
          </div>
        </div>
      </footer>
    </div>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
