import Link from 'next/link'
import { ArrowRight, CalendarDays, ChevronRight } from 'lucide-react'
import { Hero, ScrollAnimations, Shell } from '@/components/site'
import { djangoUrl, getSiteContent } from '@/lib/site-content'

const faqs = [
  ['How can I order fingerlings?', 'Email RG Fish Farming with the fish species, quantity, location and preferred date. Our team will confirm availability and the next steps.'],
  ['Do you provide fish-farm training?', 'Yes. Training covers pond preparation, stocking, feeding, water quality, fish health and harvesting. Contact us to arrange a session.'],
  ['Which fish do you raise?', 'We raise tilapia and African catfish for healthy fingerling production and responsible grow-out.'],
  ['What information should I send with my order?', 'Include the species, number of fingerlings, farm location, pond or tank type and preferred collection or delivery date.'],
  ['Can new fish farmers receive guidance?', 'Yes. We support beginners with practical guidance on farm setup, stocking, feeding routines and water management.'],
  ['How can I contact RG Fish Farming?', 'Email hello@rgfishfarming.com for fingerling orders, training and partnership enquiries.'],
]

const stats = [['7+', 'Years of experience'], ['2.5M', 'Fingerlings produced'], ['6+', 'Managed ponds'], ['98%', 'Survival rate']]
const partners = ['AquaCare', 'GreenHarbor', 'FarmLink', 'Blue Earth', 'Harvest Co-op']
const projectCardImages = ['/gallery/28.png', '/gallery/40.png', '/gallery/14.png']

export default async function Home() {
  const content = await getSiteContent()
  const { projects, news } = content

  return <Shell settings={content.settings}>
    <ScrollAnimations />
    <Hero />
    <section data-reveal="up" className="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-[.8fr_1.2fr] lg:px-8 lg:py-32">
      <div><p className="eyebrow">The RG approach</p><h2 className="mt-5 font-display text-5xl leading-tight tracking-tight sm:text-6xl">A farm built around <span className="text-[var(--teal)]">care.</span></h2></div>
      <div>
        <p className="text-xl leading-8 text-[var(--ink-soft)]">Water quality · Fish health · Responsible production</p>
        <div className="mt-10 grid gap-6 border-t border-[var(--line)] pt-7 sm:grid-cols-2">
          <div className="group relative overflow-hidden rounded-3xl border border-[var(--aqua)] bg-gradient-to-br from-[var(--mist)] to-white p-6 shadow-sm transition duration-500 hover:-translate-y-2 hover:border-[var(--teal)] hover:shadow-xl">
            <span className="absolute -right-10 -top-10 size-28 rounded-full bg-[var(--underwater-light)]/20 transition duration-500 group-hover:scale-125" aria-hidden="true" />
            <p className="relative font-display text-2xl font-semibold text-[var(--navy)]">Start your own fish farm</p>
            <a href={content.settings.links.fingerlingOrder || djangoUrl('/requests/fingerlings/')} className="relative mt-6 inline-flex rounded-full border border-[var(--teal)]/30 bg-gradient-to-r from-[var(--mist)] to-[var(--aqua)] px-6 py-3 text-sm font-bold text-[var(--navy)] shadow-md transition duration-300 hover:scale-105 hover:from-[var(--teal)] hover:to-[var(--navy)] hover:text-white hover:shadow-xl active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--teal)] focus-visible:ring-offset-2">Order fingerlings now</a>
          </div>
          <div className="group relative overflow-hidden rounded-3xl border border-[var(--teal)]/25 bg-[var(--navy)] p-6 shadow-sm transition duration-500 hover:-translate-y-2 hover:border-[var(--aqua)]/60 hover:shadow-xl">
            <span className="absolute -bottom-12 -right-8 size-32 rounded-full bg-[var(--aqua)]/15 transition duration-500 group-hover:scale-125" aria-hidden="true" />
            <p className="relative font-display text-2xl font-semibold text-white">Fish-farm process training</p>
            <a href={content.settings.links.trainingRequest || djangoUrl('/requests/training/')} className="relative mt-6 inline-flex rounded-full border border-[var(--aqua)] bg-transparent px-6 py-3 text-sm font-bold text-[var(--aqua)] shadow-md transition duration-300 hover:scale-105 hover:bg-[var(--aqua)] hover:text-[var(--navy)] hover:shadow-xl active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aqua)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--navy)]">Contact us</a>
          </div>
        </div>
      </div>
    </section>
    <section data-reveal="fade" className="bg-[var(--navy)] text-white"><div className="mx-auto grid max-w-7xl grid-cols-2 sm:grid-cols-4">{stats.map(([number, label]) => <div key={label} className="border-r border-white/10 p-8 lg:p-12"><p className="font-display text-5xl text-[var(--aqua)]">{number}</p><p className="mt-2 text-sm text-white/55">{label}</p></div>)}</div></section>
    <section data-reveal="up" className="mx-auto max-w-7xl px-5 py-24 lg:px-8 lg:py-32"><div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-end"><div><p className="eyebrow">Projects & impact</p><h2 className="mt-5 max-w-2xl font-display text-5xl tracking-tight sm:text-7xl">Growing more than <span className="text-[var(--teal)]">fish.</span></h2></div><Link href="/projects" className="inline-flex items-center gap-2 text-sm font-bold text-[var(--teal)]">View all projects <ArrowRight size={16} /></Link></div><div className="mt-12 grid gap-6 md:grid-cols-3">{projects.map((project, index) => <article key={project.slug} className="group overflow-hidden rounded-3xl border border-[var(--line)] bg-white transition-transform duration-500 hover:-translate-y-2"><img src={projectCardImages[index % projectCardImages.length]} alt={project.title} className="h-52 w-full object-cover transition duration-500 group-hover:scale-105" /><div className="p-6"><p className="eyebrow">{project.category}</p><h3 className="mt-3 font-display text-2xl">{project.title}</h3><p className="mt-3 text-sm leading-6 text-[var(--ink-soft)]">{project.summary}</p><Link href={project.url} className="mt-6 inline-flex items-center gap-2 text-sm font-bold text-[var(--teal)]">Explore <ChevronRight size={15} /></Link></div></article>)}</div></section>
    <section data-reveal="left" className="bg-[var(--mist)]"><div className="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-[.8fr_1.2fr] lg:px-8 lg:py-28"><div><p className="eyebrow">News & announcements</p><h2 className="mt-5 font-display text-5xl tracking-tight sm:text-6xl">What&apos;s happening at <span className="text-[var(--teal)]">RG.</span></h2><p className="mt-6 max-w-md leading-7 text-[var(--ink-soft)]">Ponds · People · Partnerships</p><Link href="/news" className="mt-8 inline-flex items-center gap-2 rounded-full bg-[var(--teal)] px-5 py-3 text-sm font-bold text-white">Read all news <ArrowRight size={16} /></Link></div><div className="divide-y divide-[var(--line)] rounded-3xl bg-white px-6">{news.map((item) => <Link href={item.url} key={item.slug} className="group flex gap-5 py-6"><CalendarDays className="mt-1 text-[var(--teal)]" size={19} /><div className="flex-1"><div className="flex flex-wrap gap-3 text-xs font-semibold text-[var(--teal)]"><span>{item.category}</span><span className="text-[var(--ink-soft)]">{item.date}</span>{item.isNew && <span className="news-pulse rounded-full bg-[#c8473f] px-2 py-0.5 text-white">New</span>}</div><h3 className="mt-2 font-display text-xl leading-snug group-hover:text-[var(--teal)]">{item.title}</h3></div><ChevronRight className="mt-2 text-[var(--ink-soft)]" size={18} /></Link>)}</div></div></section>
    <section data-reveal="zoom" className="overflow-hidden border-y border-[var(--line)] bg-white py-16 lg:py-20">
      <div className="partner-marquee" aria-label="Our partners">
        <div className="partner-marquee-track">
          {[0, 1].map((copy) => <div key={copy} className="partner-logo-group" aria-hidden={copy === 1}>{partners.map((partner) => <span key={`${copy}-${partner}`} className="partner-logo">{partner}</span>)}</div>)}
        </div>
      </div>
    </section>
    <section data-reveal="up" className="bg-gradient-to-b from-[var(--paper)] to-[var(--mist)]">
      <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[.6fr_1.4fr] lg:px-8 lg:py-28">
        <div>
          <p className="eyebrow">Support</p>
          <h2 className="mt-5 font-display text-5xl leading-none tracking-tight text-[var(--navy)] sm:text-6xl">Questions <span className="text-[var(--teal)]">&amp; answers.</span></h2>
        </div>
        <div className="overflow-hidden rounded-3xl border border-[var(--line)] bg-white shadow-sm">
          {faqs.map(([question, answer], index) => <details key={question} open={index === 0} className="group border-b border-[var(--line)] last:border-b-0">
            <summary className="flex cursor-pointer list-none items-center gap-4 px-5 py-6 transition-colors hover:bg-[var(--mist)]/60 sm:px-7 [&::-webkit-details-marker]:hidden">
              <span className="font-display text-sm font-bold text-[var(--teal)]">{String(index + 1).padStart(2, '0')}</span>
              <span className="flex-1 font-display text-xl font-semibold text-[var(--navy)] sm:text-2xl">{question}</span>
              <span aria-hidden="true" className="grid size-9 place-items-center rounded-full border border-[var(--line)] text-xl text-[var(--teal)] transition duration-300 group-open:rotate-45 group-open:border-[var(--teal)] group-open:bg-[var(--teal)] group-open:text-white">+</span>
            </summary>
            <p className="px-5 pb-7 pl-[4.5rem] text-sm leading-7 text-[var(--ink-soft)] sm:px-7 sm:pl-[5.25rem]">{answer}</p>
          </details>)}
        </div>
      </div>
    </section>
  </Shell>
}

export const metadata = { title: 'RG Fish Farming | Better Fish Farming in Tanzania' }
void metadata