import React from 'react'
import type { ReactElement } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import BaseButton from '../components/BaseButton'
import CardBox from '../components/CardBox'
import LayoutGuest from '../layouts/Guest'
import { getPageTitle } from '../config'

const metrics = [
  { value: '12+', label: 'aquaculture entities' },
  { value: '4', label: 'role-focused workspaces' },
  { value: 'CSV', label: 'import / export ready' },
]

const workflows = [
  'Ponds, species, batches, feeding, water quality, health, and harvests',
  'Marketplace listings, buyer orders, payment transactions, and shipment statuses',
  'Investor visibility, audit logs, REST API, webhooks, and email notifications',
]

export default function Starter() {
  return (
    <div className="min-h-screen bg-[#f6fbf9] text-slate-900">
      <Head>
        <title>{getPageTitle('Aquaculture Ops')}</title>
        <meta
          name="description"
          content="Modern multi-tenant aquaculture operations, marketplace, and investor visibility SaaS."
        />
      </Head>

      <header className="sticky top-0 z-20 border-b border-teal-900/10 bg-white/85 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="grid h-10 w-10 place-items-center rounded-2xl bg-teal-700 text-white shadow-lg shadow-teal-700/20">
              AQ
            </span>
            <span>Aquaculture Ops</span>
          </Link>
          <nav className="flex items-center gap-3 text-sm font-semibold">
            <Link className="hidden text-slate-600 transition hover:text-teal-700 sm:inline" href="/api-docs">
              REST API
            </Link>
            <Link className="hidden text-slate-600 transition hover:text-teal-700 sm:inline" href="/farm-ops">
              Farm Ops
            </Link>
            <BaseButton href="/login" label="Login" color="whiteDark" />
          </nav>
        </div>
      </header>

      <main>
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(20,184,166,0.22),_transparent_34%),radial-gradient(circle_at_85%_20%,_rgba(14,165,233,0.18),_transparent_30%)]" />
          <div className="relative mx-auto grid min-h-[calc(100vh-73px)] max-w-7xl gap-10 px-6 py-16 lg:grid-cols-[1.08fr_0.92fr] lg:items-center lg:py-24">
            <div>
              <p className="mb-5 inline-flex rounded-full bg-teal-100 px-4 py-2 text-xs font-black uppercase tracking-[0.24em] text-teal-800 ring-1 ring-teal-200">
                Multi-tenant farm operations + marketplace
              </p>
              <h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-tight text-slate-950 md:text-7xl">
                Run smarter fish farms from pond to paid order.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                A clean, data-first SaaS workspace for farmers, operators, buyers, investors, and admins — built around daily records, fulfillment statuses, auditability, and role-based access.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                <BaseButton href="/farm-ops" label="Open Farm Ops workflow" color="info" roundedFull />
                <BaseButton href="/login" label="Admin login" color="whiteDark" roundedFull />
              </div>
              <div className="mt-10 grid max-w-2xl grid-cols-3 gap-3">
                {metrics.map((metric) => (
                  <div key={metric.label} className="rounded-3xl bg-white/80 p-5 shadow-sm ring-1 ring-slate-200 backdrop-blur">
                    <div className="text-3xl font-black text-teal-700">{metric.value}</div>
                    <div className="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-500">{metric.label}</div>
                  </div>
                ))}
              </div>
            </div>

            <CardBox className="border-0 bg-slate-950 text-white shadow-2xl shadow-teal-900/20 ring-1 ring-slate-800">
              <div className="rounded-3xl bg-gradient-to-br from-teal-400/20 via-sky-400/10 to-transparent p-5 ring-1 ring-white/10">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <p className="text-sm text-cyan-200">Today’s command center</p>
                    <h2 className="mt-1 text-3xl font-black">Feed → Observe → Sell</h2>
                  </div>
                  <span className="rounded-full bg-emerald-400/20 px-3 py-1 text-xs font-bold text-emerald-200 ring-1 ring-emerald-300/20">
                    Live MVP slice
                  </span>
                </div>

                <div className="mt-6 space-y-3">
                  {workflows.map((workflow, index) => (
                    <div key={workflow} className="flex gap-4 rounded-2xl bg-white/10 p-4 ring-1 ring-white/10">
                      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-cyan-300 text-sm font-black text-slate-950">
                        {index + 1}
                      </span>
                      <p className="text-sm leading-6 text-slate-200">{workflow}</p>
                    </div>
                  ))}
                </div>

                <div className="mt-6 rounded-2xl bg-white p-4 text-slate-900">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-xs font-bold uppercase tracking-[0.2em] text-teal-700">First workflow</p>
                      <p className="mt-1 font-black">Quick feeding log with confirmation, latest list, and detail view.</p>
                    </div>
                    <BaseButton href="/farm-ops" label="Launch" color="info" small />
                  </div>
                </div>
              </div>
            </CardBox>
          </div>
        </section>
      </main>

      <footer className="border-t border-teal-900/10 bg-white px-6 py-6">
        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-3 text-sm text-slate-500 md:flex-row">
          <p>© 2026 Aquaculture Ops. Built for modern, multi-tenant farming teams.</p>
          <div className="flex gap-4">
            <Link className="hover:text-teal-700" href="/privacy-policy/">
              Privacy Policy
            </Link>
            <Link className="hover:text-teal-700" href="/login">
              Admin interface
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

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