import React, { useState } from "react";
import { motion } from "framer-motion";

// Clean rewrite: 3 short pages + Driver Portal, photo splash, posting left-aligned, 7 boxes beneath.

const NavButton = ({ label, active, onClick }) => (
  <button
    onClick={onClick}
    className={`px-4 py-2 rounded-2xl text-sm font-semibold transition shadow-sm border ${
      active
        ? "bg-amber-600 text-white border-amber-700"
        : "bg-[#FFF3E0]/80 backdrop-blur border-amber-200 hover:bg-white"
    }`}
  >
    {label}
  </button>
);

const HERO_IMG = "/mnt/data/IMG_6919.jpg"; // swap to another image path if you prefer

const PhotoHero = ({ src }) => (
  <img
    src={src}
    alt="Upland Transport truck"
    className="w-full max-h-[280px] object-contain rounded-2xl shadow-xl ring-1 ring-amber-300/40 bg-[#FFF3E0]"
  />
);

function PageShell({ children }) {
  return <div className="max-w-5xl mx-auto px-4 pb-16 pt-8">{children}</div>;
}

export default function UplandTransportSite() {
  const [page, setPage] = useState("home");
  const inputCls =
    "w-full px-3 py-2 rounded-xl border border-gray-300 bg-white/90 focus:outline-none focus:ring-2 focus:ring-amber-400";

  return (
    <div className="min-h-screen bg-gradient-to-b from-[#F3E7D3] to-[#D9B894] text-[#2B2A29]">
      {/* Top bar with the 3 choices + driver portal */}
      <header className="sticky top-0 z-20 bg-[rgba(255,244,228,0.8)] backdrop-blur border-b border-amber-200">
        <div className="max-w-5xl mx-auto flex items-center justify-between gap-3 px-4 py-3">
          <button onClick={() => setPage("home")} className="text-lg font-extrabold tracking-tight">Upland Transport</button>
          <nav className="flex flex-wrap items-center gap-2">
            <NavButton label="Contracts · Inquire · Learn" active={page === "contracts"} onClick={() => setPage("contracts")} />
            <NavButton label="Staff" active={page === "staff"} onClick={() => setPage("staff")} />
            <NavButton label="Contact" active={page === "contact"} onClick={() => setPage("contact")} />
            <span className="h-6 w-px bg-gray-300 hidden sm:block" />
            <NavButton label="Driver Portal" active={page === "driver"} onClick={() => setPage("driver")} />
          </nav>
        </div>
      </header>

      {/* Splash / Hero */}
      {page === "home" && (
        <section className="relative overflow-hidden">
          <div className="max-w-5xl mx-auto px-4">
            <div className="h-[46vh] md:h-[54vh] grid place-items-center">
              <div className="w-full">
                <motion.div
                  initial={{ x: 480, opacity: 0 }}
                  animate={{ x: 0, opacity: 1 }}
                  transition={{ type: "spring", stiffness: 70, damping: 14 }}
                  className="mx-auto max-w-3xl"
                >
                  <PhotoHero src={HERO_IMG} />
                </motion.div>
                <motion.h1
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.35 }}
                  className="text-center mt-6 text-4xl md:text-5xl font-extrabold tracking-tight"
                >
                  Upland Transport
                </motion.h1>
                <p className="text-center mt-3 text-base md:text-lg text-gray-700">
                  Heavy haul · Aggregate · Delivery — MT · WY · ID
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ROUTED PAGES */}
      {page === "contracts" && (
        <PageShell>
          <h2 className="text-2xl font-bold">Contracts · Inquire · Learn</h2>
          <div className="mt-4 space-y-4 leading-relaxed">
            <p>
              We move tough loads with simple rules: safety first, clear quotes, and reliable schedules. Our day cab handles regional heavy work. Our sleeper covers longer OTR lanes.
            </p>
            <p>
              Incident command intregration with clean paperwork
            </p>
            <p>
              What we pull: lowboy/step, flat, pallets, parts. Where we go: MT · WY · ID and approved permit routes.
            </p>
            <div className="grid md:grid-cols-3 gap-3 mt-6">
              <div className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
                <div className="font-semibold">Get a Quote</div>
                <p className="text-sm mt-1">Pickup, drop, weight, dimensions, timing.</p>
                <button onClick={() => setPage("contact")} className="mt-3 px-3 py-2 text-sm rounded-xl bg-amber-600 text-white font-semibold">Start</button>
              </div>
              <div className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
                <div className="font-semibold">Capabilities</div>
                <p className="text-sm mt-1">Heavy haul, hotshot, fire-camp logistics, shop + mobile mechanic.</p>
              </div>
              <div className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
                <div className="font-semibold">Paperwork</div>
                <p className="text-sm mt-1">ELD, insurance, permits, securement. Clean audits and straight talk.</p>
              </div>
            </div>
          </div>
        </PageShell>
      )}

      {page === "staff" && (
        <PageShell>
          <h2 className="text-2xl font-bold">Staff</h2>
          <div className="mt-4 grid md:grid-cols-2 gap-4">
            <section className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
              <div className="text-xs uppercase tracking-wide text-gray-600">Founder</div>
              <div className="text-sm font-semibold mb-2">Since 2025</div>
              <h3 className="font-semibold text-lg">Christopher Navoni</h3>
              <p className="mt-1">
                <a href="mailto:support@uplandtransport.com" className="underline">support@uplandtransport.com</a>
              </p>
              <p className="mt-1">
                Office: <a href="tel:+13074603737" className="underline">307-460-3737</a>
              </p>
              <p className="mt-1">
                Direct: <a href="tel:+14067508685" className="underline">406-750-8685</a>
              </p>
              <p className="mt-1">
                Fax: 419-557-8976
              </p>
            </section>
            <section className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
              <div className="text-xs uppercase tracking-wide text-gray-600">Founder</div>
              <div className="text-sm font-semibold mb-2">Since 2025</div>
              <h3 className="font-semibold text-lg">Russ P</h3>
              <p className="mt-1">
                <a href="mailto:ops@uplandtransport.com" className="underline">ops@uplandtransport.com</a>
              </p>
              <p className="mt-1">
                Office: <a href="tel:+13074603737" className="underline">307-460-3737</a>
              </p>
              <p className="mt-1 text-sm">Appointment Contact Only</p>
            </section>
          </div>
        </PageShell>
      )}

      {page === "contact" && (
        <PageShell>
          <h2 className="text-2xl font-bold">Contact · Mini Application</h2>
          <div className="mt-3 space-y-4">
            {/* Job posting — left-aligned, unaltered */}
            <section className="p-4 rounded-2xl border bg-[#FFF3E0]/85 text-left">
              <pre className="whitespace-pre-wrap text-sm leading-relaxed">{`

 
November 25th 2025:DRIVER NEEDED IMMEDIATELY (Wahpeton)

No attitude problem, we like a smooth work flow
Ability to drive stick
NO SERIOUS MOVING VIOLATIONS
Local job to Wahpeton ND
Will take the right person if they are looking for long term work all over the country

Helpful to have H2s Osha 10 and/or PEC.

Need not apply if you have a drinking problem.

Need not apply if you are unable to work less than 12 hours without a break

Good pay, weekly pay. 25% of earnings on the truck

Need someone committed to doing a good job and will take care of company equipment.
 `}</pre>
            </section>

            {/* 7 boxes below the posting */}
            <form
              onSubmit={(e) => {
                e.preventDefault();
                alert("Thanks! We’ll review and reach out.");
              }}
              className="grid md:grid-cols-2 gap-4 bg-[#FFF3E0]/85 p-4 rounded-2xl border"
            >
              <label className="flex flex-col text-sm">Full Name<input required className={inputCls} placeholder="Your name" /></label>
              <label className="flex flex-col text-sm">Phone<input required className={inputCls} placeholder="(xxx) xxx-xxxx" /></label>
              <label className="flex flex-col text-sm">Email<input required type="email" className={inputCls} placeholder="you@domain.com" /></label>
              <label className="flex flex-col text-sm">Job Interest?<select className={inputCls}><option>Yes</option><option>No</option></select></label>
              <label className="flex flex-col text-sm">Years Driving<input className={inputCls} type="number" min="0" placeholder="e.g., 3" /></label>
              <label className="flex flex-col text-sm">Certifications<input className={inputCls} placeholder="H2S, OSHA 10, PEC (if any)" /></label>
              <label className="flex flex-col text-sm md:col-span-2">Driving Record and Availability<textarea className={`${inputCls} h-24`} placeholder="Home location? Moving violations? Inquiry Details" /></label>
              <div className="md:col-span-2 flex items-center gap-3">
                <button className="px-4 py-2 rounded-2xl bg-amber-600 text-white font-semibold">Submit</button>
                <span className="text-xs text-gray-600">or call: (xxx) xxx-xxxx</span>
              </div>
            </form>
          </div>
        </PageShell>
      )}

      {page === "driver" && (
        <PageShell>
          <h2 className="text-2xl font-bold">Driver Portal</h2>
          <div className="mt-4 space-y-4">
            <p>Quick links for active drivers. Keep it simple, keep it moving.</p>
            <div className="grid md:grid-cols-2 gap-3">
              <a className="p-4 rounded-2xl border bg-[#FFF3E0]/80 hover:bg-white" href="#">Dispatch Board (coming soon)</a>
              <a className="p-4 rounded-2xl border bg-[#FFF3E0]/80 hover:bg-white" href="#">Upload Docs: W9 · COI · CDL</a>
              <a className="p-4 rounded-2xl border bg-[#FFF3E0]/80 hover:bg-white" href="#">Maintenance Requests</a>
              <a className="p-4 rounded-2xl border bg-[#FFF3E0]/80 hover:bg-white" href="#">Safety & Training</a>
            </div>
            <div className="p-4 rounded-2xl border bg-[#FFF3E0]/80">
              <h3 className="font-semibold">Sign In</h3>
              <form className="mt-2 grid md:grid-cols-2 gap-3">
                <input className={inputCls} placeholder="Email" />
                <input className={inputCls} type="password" placeholder="Password" />
                <button className="md:col-span-2 px-4 py-2 rounded-2xl bg-gray-900 text-white font-semibold">Sign In</button>
              </form>
            </div>
          </div>
        </PageShell>
      )}

      {/* Footer with quick-return to Home */}
      <footer className="border-t border-amber-200 mt-10">
        <div className="max-w-5xl mx-auto px-4 py-6 flex items-center justify-between text-sm">
          <button onClick={() => setPage("home")} className="text-gray-700 hover:text-gray-900">← Home</button>
          <div className="text-gray-600">© {new Date().getFullYear()} Upland Transport</div>
        </div>
      </footer>
    </div>
  );
}