"use client";

import { useMemo, useState } from "react";
import { Phone, Mail, MapPin, ChevronRight, BarChart3, Tractor, Sprout, MessageCircle, CheckCircle2, Menu, X } from "lucide-react";

"use client";

import { useMemo, useState } from "react";
import {
  Phone,
  Mail,
  MapPin,
  ChevronRight,
  Calculator,
  Sprout,
  Tractor,
  MessageCircle,
  CheckCircle2,
  Menu,
  X,
  BarChart3,
  Wallet,
} from "lucide-react";

export default function AgriPlanSAWebsite() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [form, setForm] = useState({
    name: "",
    phone: "",
    farm: "",
    message: "",
  });

  const whatsappNumber = "27646537535";
  const email = "agriplansa1@gmail.com";
  const location = "Balmoral, Mpumalanga";

  const whatsappMessage = useMemo(() => {
    const text = `Hi AgriPlan SA,%0A%0AMy name is ${form.name || "[Your Name]"}.%0APhone: ${form.phone || "[Your Number]"}%0AFarm details: ${form.farm || "[Farm details]"}%0A%0AMessage:%0A${form.message || "I would like help with farm financial planning and crop planning."}`;
    return `https://wa.me/${whatsappNumber}?text=${text}`;
  }, [form]);

  const mailtoLink = useMemo(() => {
    const subject = encodeURIComponent("New enquiry from AgriPlan SA website");
    const body = encodeURIComponent(
      `Name: ${form.name || ""}
Phone: ${form.phone || ""}
Farm: ${form.farm || ""}

Message:
${form.message || ""}`
    );
    return `mailto:${email}?subject=${subject}&body=${body}`;
  }, [form]);

  const services = [
    {
      title: "Farm Financial Planning",
      description:
        "We help farmers understand budgets, costs, expected income, and where real profit can be improved.",
      icon: Wallet,
    },
    {
      title: "Crop Planning",
      description:
        "We guide farmers on what to plant, how much to plant, and how to structure production for better returns.",
      icon: Sprout,
    },
    {
      title: "Profitability Analysis",
      description:
        "We compare options and identify the farming strategy that gives the strongest profit potential.",
      icon: BarChart3,
    },
    {
      title: "Whole Farm Planning",
      description:
        "We look at land, equipment, livestock, infrastructure, and production goals to build one practical plan.",
      icon: Tractor,
    },
  ];

  const benefits = [
    "Know what to plant and how much to plant",
    "Improve budgeting and cash flow planning",
    "Reduce costly production mistakes",
    "Make better profit-focused decisions",
  ];

  const process = [
    {
      step: "01",
      title: "Send your farm details",
      text: "Tell us about your land, machinery, livestock, irrigation, and production goals.",
    },
    {
      step: "02",
      title: "We analyse your farm",
      text: "AgriPlan SA evaluates your resources, financial position, and production opportunities.",
    },
    {
      step: "03",
      title: "Receive your plan",
      text: "You get a practical farm plan focused on smarter decisions and stronger profitability.",
    },
  ];

  const trustPoints = [
    "Professional farm planning",
    "South African farming focus",
    "Profit-driven recommendations",
    "Direct WhatsApp support",
  ];

  return (
    <div className="min-h-screen bg-white text-slate-900">
      <a
        href={whatsappMessage}
        target="_blank"
        rel="noreferrer"
        className="fixed bottom-5 right-5 z-50 inline-flex items-center gap-2 rounded-full bg-green-600 px-5 py-3 text-sm font-bold text-white shadow-2xl transition hover:scale-[1.02] hover:bg-green-700"
      >
        <MessageCircle className="h-5 w-5" />
        WhatsApp Us
      </a>

      <header className="sticky top-0 z-40 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-6">
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-green-700 via-green-600 to-lime-400 text-white shadow-lg">
              <Calculator className="h-6 w-6" />
            </div>
            <div>
              <div className="text-xl font-black tracking-tight text-green-900 md:text-2xl">AgriPlan SA</div>
              <div className="text-xs font-medium uppercase tracking-[0.22em] text-slate-500">
                Turning Farms Into Profit
              </div>
            </div>
          </div>

          <nav className="hidden items-center gap-8 md:flex">
            <a href="#home" className="text-sm font-semibold text-slate-700 hover:text-green-800">Home</a>
            <a href="#services" className="text-sm font-semibold text-slate-700 hover:text-green-800">Services</a>
            <a href="#process" className="text-sm font-semibold text-slate-700 hover:text-green-800">Process</a>
            <a href="#contact" className="text-sm font-semibold text-slate-700 hover:text-green-800">Contact</a>
          </nav>

          <div className="hidden md:block">
            <a
              href="#contact"
              className="rounded-full bg-green-800 px-5 py-3 text-sm font-bold text-white shadow-lg transition hover:bg-green-900"
            >
              Get Free Analysis
            </a>
          </div>

          <button
            onClick={() => setMenuOpen(!menuOpen)}
            className="rounded-xl border border-slate-200 p-2 md:hidden"
            aria-label="Toggle menu"
          >
            {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>

        {menuOpen && (
          <div className="border-t border-slate-200 bg-white px-5 py-4 md:hidden">
            <div className="flex flex-col gap-4">
              <a href="#home" onClick={() => setMenuOpen(false)} className="font-semibold text-slate-700">Home</a>
              <a href="#services" onClick={() => setMenuOpen(false)} className="font-semibold text-slate-700">Services</a>
              <a href="#process" onClick={() => setMenuOpen(false)} className="font-semibold text-slate-700">Process</a>
              <a href="#contact" onClick={() => setMenuOpen(false)} className="font-semibold text-slate-700">Contact</a>
            </div>
          </div>
        )}
      </header>

      <section
        id="home"
        className="relative overflow-hidden bg-[linear-gradient(110deg,rgba(20,83,45,0.92),rgba(21,128,61,0.75)),url('https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center"
      >
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(163,230,53,0.25),transparent_30%)]" />
        <div className="relative mx-auto grid max-w-7xl gap-10 px-5 py-20 md:grid-cols-2 md:px-6 md:py-28">
          <div className="self-center text-white">
            <div className="inline-flex rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
              Financial Planning • Crop Planning • Profit Strategy
            </div>
            <h1 className="mt-6 max-w-3xl text-5xl font-black leading-tight md:text-7xl">
              Increase your farm profit with <span className="text-lime-300">smart planning</span>
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-green-50 md:text-xl">
              AgriPlan SA helps South African farmers make better decisions through professional financial planning, crop planning, and farm profitability analysis.
            </p>

            <div className="mt-8 grid gap-3 sm:grid-cols-2">
              {benefits.map((item) => (
                <div key={item} className="flex items-start gap-3 rounded-2xl bg-white/10 p-4 backdrop-blur">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 text-lime-300" />
                  <span className="text-sm font-medium text-white">{item}</span>
                </div>
              ))}
            </div>

            <div className="mt-10 flex flex-wrap gap-4">
              <a
                href="#contact"
                className="inline-flex items-center gap-2 rounded-full bg-lime-400 px-7 py-3 text-base font-extrabold text-green-950 shadow-2xl transition hover:scale-[1.02]"
              >
                Get Free Farm Analysis
                <ChevronRight className="h-5 w-5" />
              </a>
              <a
                href={whatsappMessage}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-2 rounded-full border border-white/30 px-7 py-3 text-base font-bold text-white transition hover:bg-white/10"
              >
                Message on WhatsApp
              </a>
            </div>
          </div>

          <div className="flex items-center justify-center">
            <div className="w-full max-w-lg rounded-[2rem] bg-white/95 p-8 shadow-2xl ring-1 ring-black/5">
              <div className="rounded-3xl bg-gradient-to-br from-green-900 to-green-700 p-6 text-white shadow-xl">
                <div className="text-sm font-semibold uppercase tracking-[0.2em] text-lime-300">Why choose AgriPlan SA</div>
                <h2 className="mt-3 text-3xl font-black">A practical plan, not guesswork</h2>
                <p className="mt-4 text-sm leading-7 text-green-50">
                  We help farmers understand what to plant, how much to plant, how to budget, and how to improve farm profitability with confidence.
                </p>
              </div>

              <div className="mt-6 grid gap-4">
                {trustPoints.map((item) => (
                  <div key={item} className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm font-semibold text-slate-700">
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="services" className="mx-auto max-w-7xl px-5 py-20 md:px-6">
        <div className="max-w-3xl">
          <div className="text-sm font-bold uppercase tracking-[0.22em] text-green-700">Our Services</div>
          <h2 className="mt-3 text-4xl font-black tracking-tight text-slate-900 md:text-5xl">
            Professional farm planning built to improve your bottom line
          </h2>
          <p className="mt-5 text-lg leading-8 text-slate-600">
            We work with farmers who want better planning, stronger profit margins, and more confidence in their farming decisions.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {services.map((service) => {
            const Icon = service.icon;
            return (
              <div
                key={service.title}
                className="group rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-2xl"
              >
                <div className="inline-flex rounded-2xl bg-green-50 p-4 text-green-800">
                  <Icon className="h-8 w-8" />
                </div>
                <h3 className="mt-6 text-2xl font-black text-slate-900">{service.title}</h3>
                <p className="mt-4 text-base leading-7 text-slate-600">{service.description}</p>
              </div>
            );
          })}
        </div>
      </section>

      <section className="bg-slate-50 py-20">
        <div className="mx-auto grid max-w-7xl items-center gap-12 px-5 md:grid-cols-2 md:px-6">
          <div className="overflow-hidden rounded-[2rem] shadow-2xl">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80"
              alt="Farm fields and planning"
              className="h-full w-full object-cover"
            />
          </div>

          <div>
            <div className="text-sm font-bold uppercase tracking-[0.22em] text-green-700">About AgriPlan SA</div>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">Helping farmers plan better and farm smarter</h2>
            <p className="mt-6 text-lg leading-8 text-slate-600">
              AgriPlan SA is based in Balmoral, Mpumalanga, and focuses on helping farmers improve profitability through better financial planning, crop planning, and practical production strategies.
            </p>
            <p className="mt-4 text-lg leading-8 text-slate-600">
              We look at your farm as a whole — land, equipment, available resources, production options, and financial goals — to build a plan that works for your operation.
            </p>
          </div>
        </div>
      </section>

      <section id="process" className="mx-auto max-w-7xl px-5 py-20 md:px-6">
        <div className="rounded-[2.5rem] bg-gradient-to-r from-green-900 via-green-800 to-green-700 px-8 py-12 text-white shadow-2xl md:px-12 md:py-16">
          <div className="max-w-3xl">
            <div className="text-sm font-bold uppercase tracking-[0.22em] text-lime-300">How it works</div>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">A simple process focused on better results</h2>
          </div>

          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {process.map((item) => (
              <div key={item.step} className="rounded-[2rem] bg-white/10 p-6 backdrop-blur-sm">
                <div className="text-sm font-black tracking-[0.18em] text-lime-300">STEP {item.step}</div>
                <h3 className="mt-3 text-2xl font-black">{item.title}</h3>
                <p className="mt-4 text-sm leading-7 text-green-50">{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-slate-50 py-20">
        <div className="mx-auto max-w-7xl px-5 md:px-6">
          <div className="rounded-[2rem] bg-white p-10 shadow-sm">
            <div className="text-sm font-bold uppercase tracking-[0.22em] text-green-700">Why planning matters</div>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">Stop guessing. Start planning.</h2>
            <p className="mt-6 max-w-4xl text-lg leading-8 text-slate-600">
              Many farmers lose money because of poor planning, weak budgeting, and decisions made too late. AgriPlan SA helps you make the right decisions before planting, before spending, and before risk becomes loss.
            </p>
          </div>
        </div>
      </section>

      <section id="contact" className="relative overflow-hidden bg-[linear-gradient(115deg,rgba(20,83,45,0.96),rgba(21,128,61,0.82)),url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center py-20 text-white">
        <div className="mx-auto grid max-w-7xl gap-10 px-5 md:grid-cols-2 md:px-6">
          <div>
            <div className="text-sm font-bold uppercase tracking-[0.22em] text-lime-300">Contact us</div>
            <h2 className="mt-3 text-4xl font-black tracking-tight md:text-5xl">Get your free farm analysis</h2>
            <p className="mt-6 max-w-xl text-lg leading-8 text-green-50">
              Send your details and let AgriPlan SA help you plan better, farm smarter, and improve your profitability.
            </p>

            <div className="mt-8 space-y-4 text-base font-medium">
              <div className="flex items-center gap-3">
                <Phone className="h-5 w-5 text-lime-300" />
                <span>064 653 7535</span>
              </div>
              <div className="flex items-center gap-3">
                <Mail className="h-5 w-5 text-lime-300" />
                <span>{email}</span>
              </div>
              <div className="flex items-center gap-3">
                <MapPin className="h-5 w-5 text-lime-300" />
                <span>{location}</span>
              </div>
            </div>

            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href={whatsappMessage}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-2 rounded-full bg-lime-400 px-6 py-3 font-black text-green-950 shadow-2xl transition hover:scale-[1.02]"
              >
                <MessageCircle className="h-5 w-5" />
                WhatsApp Now
              </a>
              <a
                href={mailtoLink}
                className="inline-flex items-center gap-2 rounded-full border border-white/30 px-6 py-3 font-bold text-white transition hover:bg-white/10"
              >
                <Mail className="h-5 w-5" />
                Email Us
              </a>
            </div>
          </div>

          <div className="rounded-[2rem] bg-white p-8 text-slate-900 shadow-2xl ring-1 ring-black/5">
            <div className="text-sm font-bold uppercase tracking-[0.2em] text-green-700">Enquiry form</div>
            <h3 className="mt-3 text-3xl font-black">Tell us about your farm</h3>
            <p className="mt-3 text-sm leading-7 text-slate-600">
              Fill in your details and choose whether to contact us by email or WhatsApp.
            </p>

            <div className="mt-6 grid gap-4">
              <input
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                placeholder="Your name"
                className="rounded-2xl border border-slate-300 px-4 py-3 outline-none ring-green-700 transition focus:ring-2"
              />
              <input
                value={form.phone}
                onChange={(e) => setForm({ ...form, phone: e.target.value })}
                placeholder="Phone number"
                className="rounded-2xl border border-slate-300 px-4 py-3 outline-none ring-green-700 transition focus:ring-2"
              />
              <input
                value={form.farm}
                onChange={(e) => setForm({ ...form, farm: e.target.value })}
                placeholder="Farm size / location"
                className="rounded-2xl border border-slate-300 px-4 py-3 outline-none ring-green-700 transition focus:ring-2"
              />
              <textarea
                value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                placeholder="Tell us about your crops, finances, goals, or challenges"
                className="min-h-[140px] rounded-2xl border border-slate-300 px-4 py-3 outline-none ring-green-700 transition focus:ring-2"
              />

              <div className="grid gap-3 sm:grid-cols-2">
                <a
                  href={mailtoLink}
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-green-800 px-5 py-3 text-sm font-black text-white shadow-lg transition hover:bg-green-900"
                >
                  <Mail className="h-4 w-4" />
                  Send by Email
                </a>
                <a
                  href={whatsappMessage}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-lime-400 px-5 py-3 text-sm font-black text-green-950 shadow-lg transition hover:scale-[1.01]"
                >
                  <MessageCircle className="h-4 w-4" />
                  Send by WhatsApp
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-slate-200 bg-white py-8">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-5 text-center text-sm text-slate-600 md:flex-row md:px-6 md:text-left">
          <div>
            <span className="font-black text-green-900">AgriPlan SA</span> — Farm Planning & Financial Planning for South African Farmers
          </div>
          <div>Based in Balmoral, Mpumalanga • WhatsApp: 064 653 7535</div>
        </div>
      </footer>
    </div>
  );
}