import React, { useMemo, useState } from "react";

const contactInfo = {
  phone: "513-254-7521",
  email: "notary@crucialskillstraining.com",
  website: "www.crucialskillstraining.com",
  address: "10979 Reed Hartman Hwy, Suite 303, Cincinnati, OH 45242",
};

const pricingCards = [
  {
    title: "Office Visit",
    subtitle: "Client comes to my office",
    price: "$5",
    priceNote: "notarization fee \(service minimums may apply\)",
    details: [
      "Best for quick documents",
      "Scheduled appointments available",
      "Located in Cincinnati, OH",
      "Great for affidavits, POAs, vehicle documents, and forms",
    ],
    button: "Schedule Office Visit",
    featured: false,
  },
  {
    title: "Mobile Notary",
    subtitle: "I travel to your location",
    price: "Starts at $50",
    priceNote: "travel fee + notarization",
    details: [
      "Homes, offices, schools, and public meeting locations",
      "Convenient for busy schedules",
      "Travel fee quoted before appointment",
      "Evening and weekend availability may be available",
    ],
    button: "Book Mobile Notary",
    featured: true,
  },
  {
    title: "Hospital / Facility Visit",
    subtitle: "Hospitals, nursing homes, assisted living",
    price: "Starts at $85",
    priceNote: "travel fee + notarization",
    details: [
      "Ideal for POA and healthcare documents",
      "Patient must be alert, aware, and willing",
      "Witnesses may be needed depending on the document",
      "Flexible scheduling for urgent needs",
    ],
    button: "Request Facility Visit",
    featured: false,
  },
];

const addOns = [
  ["After-hours appointment", "+$25"],
  ["Weekend appointment", "+$25"],
  ["Same-day / rush request", "+$40 and up"],
  ["Additional travel distance", "Custom quote"],
];

const vehicleServices = [
  "Vehicle title transfers",
  "Bill of sale",
  "Odometer statements",
  "Lien release documents",
  "Affidavits for lost titles",
  "DMV Power of Attorney documents",
];

const documentTypeFees = {
  general: 0,
  vehicle: 5,
  poa: 10,
  healthcare: 10,
  business: 10,
};

function calculateQuote({ appointmentType, distance, documentType, notarizations, afterHours, weekend, rush }) {
  const notarizationFee = notarizations * 5;
  const documentFee = documentTypeFees[documentType] || 0;

  let travelFee = 0;
  if (appointmentType === "mobile") {
    travelFee = distance <= 10 ? 50 : distance <= 20 ? 75 : 100;
  }
  if (appointmentType === "facility") {
    travelFee = distance <= 10 ? 85 : distance <= 20 ? 110 : 135;
  }

  const afterHoursFee = afterHours ? 25 : 0;
  const weekendFee = weekend ? 25 : 0;
  const rushFee = rush ? 40 : 0;

  return notarizationFee + documentFee + travelFee + afterHoursFee + weekendFee + rushFee;
}

function runPricingPageTests() {
  console.assert(contactInfo.phone === "513-254-7521", "Phone number should match provided phone.");
  console.assert(pricingCards.length === 3, "There should be three main pricing cards.");
  console.assert(pricingCards.some((card) => card.title === "Mobile Notary"), "Mobile pricing should be included.");
  console.assert(pricingCards.some((card) => card.price.includes("$85")), "Hospital/facility pricing should start at $85.");
  console.assert(vehicleServices.includes("Lien release documents"), "Lien release documents should be included.");
  console.assert(calculateQuote({ appointmentType: "office", distance: 0, documentType: "general", notarizations: 1, afterHours: false, weekend: false, rush: false }) === 5, "Office quote should start at $5.");
  console.assert(calculateQuote({ appointmentType: "mobile", distance: 10, documentType: "general", notarizations: 1, afterHours: false, weekend: false, rush: false }) === 55, "Mobile quote should start at $55 including one notarization.");
  console.assert(calculateQuote({ appointmentType: "facility", distance: 10, documentType: "general", notarizations: 1, afterHours: false, weekend: false, rush: false }) === 90, "Facility quote should start at $90 including one notarization.");
}

runPricingPageTests();

function Button({ children, href = "#contact", variant = "primary" }) {
  const styles = {
    primary: "bg-yellow-500 text-blue-950 hover:bg-yellow-400",
    dark: "bg-blue-950 text-white hover:bg-blue-900",
    light: "bg-white text-blue-950 hover:bg-blue-50",
    outline: "border border-white text-white hover:bg-white hover:text-blue-950",
  };

  return (
    <a href={href} className={`inline-flex items-center justify-center rounded-2xl px-6 py-3 font-bold transition ${styles[variant]}`}>
      {children}
    </a>
  );
}

function PricingCard({ card }) {
  return (
    <article className={`relative rounded-[2rem] border p-8 shadow-sm transition hover:-translate-y-1 hover:shadow-xl ${card.featured ? "border-yellow-400 bg-blue-950 text-white" : "border-slate-200 bg-white text-slate-900"}`}>
      {card.featured && <div className="absolute -top-4 left-8 rounded-full bg-yellow-500 px-4 py-2 text-sm font-bold text-blue-950 shadow">Most Popular</div>}
      <p className={`mb-2 text-sm font-semibold uppercase tracking-[0.2em] ${card.featured ? "text-yellow-300" : "text-blue-900"}`}>{card.subtitle}</p>
      <h3 className="mb-5 font-serif text-3xl font-bold">{card.title}</h3>
      <div className="mb-6">
        <p className={`text-4xl font-black ${card.featured ? "text-white" : "text-blue-950"}`}>{card.price}</p>
        <p className={`mt-2 text-sm ${card.featured ? "text-blue-100" : "text-slate-500"}`}>{card.priceNote}</p>
      </div>
      <ul className={`mb-8 space-y-3 text-sm ${card.featured ? "text-blue-50" : "text-slate-600"}`}>
        {card.details.map((detail) => <li key={detail}>✓ {detail}</li>)}
      </ul>
      <Button variant={card.featured ? "primary" : "dark"}>{card.button}</Button>
    </article>
  );
}

function QuoteEstimator() {
  const [appointmentType, setAppointmentType] = useState("mobile");
  const [distance, setDistance] = useState(10);
  const [documentType, setDocumentType] = useState("general");
  const [notarizations, setNotarizations] = useState(1);
  const [afterHours, setAfterHours] = useState(false);
  const [weekend, setWeekend] = useState(false);
  const [rush, setRush] = useState(false);

  const quote = useMemo(() => calculateQuote({ appointmentType, distance, documentType, notarizations, afterHours, weekend, rush }), [appointmentType, distance, documentType, notarizations, afterHours, weekend, rush]);

  const quoteSummary = `Estimated quote: $${quote}. Appointment type: ${appointmentType}. Document type: ${documentType}. Number of notarizations: ${notarizations}. Distance: ${appointmentType === "office" ? 0 : distance} miles.`;

  return (
    <section id="quote-estimator" className="bg-white py-20">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-10 text-center">
          <p className="font-bold uppercase tracking-[0.25em] text-blue-900">Instant Quote Estimator</p>
          <h2 className="mt-3 font-serif text-4xl font-bold text-blue-950">Get an Estimated Notary Quote</h2>
          <p className="mx-auto mt-4 max-w-2xl text-slate-600">Customers can plug in appointment details to see an estimated price before requesting an appointment.</p>
        </div>

        <div className="grid gap-8 rounded-[2rem] bg-slate-100 p-6 lg:grid-cols-2 lg:p-10">
          <div className="space-y-5">
            <label className="block">
              <span className="mb-2 block font-bold text-blue-950">Appointment Type</span>
              <select value={appointmentType} onChange={(event) => setAppointmentType(event.target.value)} className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3">
                <option value="office">Office Visit</option>
                <option value="mobile">Mobile Notary</option>
                <option value="facility">Hospital / Nursing Home / Facility</option>
              </select>
            </label>

            <label className="block">
              <span className="mb-2 block font-bold text-blue-950">Document Type</span>
              <select value={documentType} onChange={(event) => setDocumentType(event.target.value)} className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3">
                <option value="general">General Notarization</option>
                <option value="vehicle">Vehicle Document</option>
                <option value="poa">Power of Attorney</option>
                <option value="healthcare">Healthcare Document</option>
                <option value="business">Business Document</option>
              </select>
            </label>

            <label className="block">
              <span className="mb-2 block font-bold text-blue-950">Number of Notarizations</span>
              <input type="number" min="1" max="20" value={notarizations} onChange={(event) => setNotarizations(Math.max(1, Number(event.target.value) || 1))} className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3" />
            </label>

            <label className="block">
              <span className="mb-2 block font-bold text-blue-950">Estimated Travel Distance: {appointmentType === "office" ? 0 : distance} miles</span>
              <input type="range" min="0" max="30" value={distance} onChange={(event) => setDistance(Number(event.target.value))} className="w-full" disabled={appointmentType === "office"} />
              {appointmentType === "office" && <p className="mt-2 text-sm text-slate-500">Travel distance does not apply for office visits.</p>}
            </label>

            <div className="grid gap-3 sm:grid-cols-3">
              <label className="flex items-center gap-2 rounded-xl bg-white p-4 font-semibold text-slate-700"><input type="checkbox" checked={afterHours} onChange={(event) => setAfterHours(event.target.checked)} />After Hours</label>
              <label className="flex items-center gap-2 rounded-xl bg-white p-4 font-semibold text-slate-700"><input type="checkbox" checked={weekend} onChange={(event) => setWeekend(event.target.checked)} />Weekend</label>
              <label className="flex items-center gap-2 rounded-xl bg-white p-4 font-semibold text-slate-700"><input type="checkbox" checked={rush} onChange={(event) => setRush(event.target.checked)} />Same-Day Rush</label>
            </div>
          </div>

          <div className="rounded-[2rem] bg-blue-950 p-8 text-white shadow-xl">
            <p className="font-bold uppercase tracking-[0.25em] text-yellow-400">Estimated Total</p>
            <p className="my-5 text-6xl font-black text-white">${quote}</p>
            <p className="mb-6 text-blue-100">This is an estimate only. Final pricing may vary based on exact location, document requirements, number of signers, wait time, parking, and special circumstances.</p>
            <div className="space-y-3 rounded-2xl bg-white/10 p-5 text-sm text-blue-50">
              <p><strong>Base notarization:</strong> ${notarizations * 5}</p>
              <p><strong>Appointment:</strong> {appointmentType === "office" ? "Office Visit" : appointmentType === "mobile" ? "Mobile Notary" : "Hospital / Facility Visit"}</p>
              <p><strong>Document type:</strong> {documentType}</p>
              <p><strong>Add-ons:</strong> {afterHours || weekend || rush ? "Selected" : "None"}</p>
            </div>
            <a href={`mailto:${contactInfo.email}?subject=Notary Quote Request&body=${encodeURIComponent(quoteSummary)}`} className="mt-6 inline-flex w-full items-center justify-center rounded-2xl bg-yellow-500 px-6 py-3 font-bold text-blue-950 transition hover:bg-yellow-400">Request This Quote</a>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function NotaryPricingLandingPage() {
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.3em] text-blue-900">Crucial Skills Training Center</p>
            <h1 className="font-serif text-2xl font-bold text-blue-950">Mobile Notary Services</h1>
          </div>
          <nav className="hidden gap-6 text-sm font-semibold text-slate-700 md:flex">
            <a href="#quote-estimator" className="hover:text-blue-950">Quote</a>
            <a href="#pricing" className="hover:text-blue-950">Pricing</a>
            <a href="#vehicle" className="hover:text-blue-950">Vehicle Docs</a>
            <a href="#prepare" className="hover:text-blue-950">Prepare</a>
            <a href="#contact" className="hover:text-blue-950">Contact</a>
          </nav>
          <Button href={`tel:${contactInfo.phone}`} variant="dark">Call Now</Button>
        </div>
      </header>

      <section className="bg-gradient-to-br from-blue-950 via-blue-900 to-slate-900 text-white">
        <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-2">
          <div>
            <p className="mb-4 font-bold uppercase tracking-[0.25em] text-yellow-400">Transparent Pricing</p>
            <h2 className="mb-6 font-serif text-5xl font-bold leading-tight md:text-6xl">Professional Notary Services With Clear, Upfront Rates</h2>
            <p className="mb-8 max-w-xl text-lg text-blue-100">Choose an office visit, mobile appointment, or facility visit. Travel fees are quoted and agreed upon before your appointment.</p>
            <div className="flex flex-col gap-4 sm:flex-row">
              <Button href="#quote-estimator">Get Instant Quote</Button>
              <Button href="#contact" variant="outline">Request Appointment</Button>
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/20 bg-white/10 p-8 shadow-2xl backdrop-blur">
            <div className="rounded-[1.5rem] bg-white p-8 text-blue-950">
              <p className="mb-2 text-sm font-bold uppercase tracking-[0.25em] text-blue-900">Quick Quote</p>
              <h3 className="mb-6 font-serif text-3xl font-bold">Pricing Snapshot</h3>
              <div className="space-y-4">
                <div className="flex justify-between gap-4 border-b border-slate-200 pb-3"><span>Office visit</span><strong>$5 notarization fee</strong></div>
                <div className="flex justify-between gap-4 border-b border-slate-200 pb-3"><span>Mobile notary</span><strong>Starts at $50</strong></div>
                <div className="flex justify-between gap-4 border-b border-slate-200 pb-3"><span>Hospital / facility</span><strong>Starts at $85</strong></div>
                <div className="rounded-2xl bg-blue-50 p-4 text-sm text-slate-700">Final quote depends on location, timing, number of documents, and appointment needs.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <QuoteEstimator />

      <section id="pricing" className="py-20">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-14 text-center">
            <p className="font-bold uppercase tracking-[0.25em] text-blue-900">Pricing Options</p>
            <h2 className="mt-3 font-serif text-4xl font-bold text-blue-950">Choose the Appointment That Works Best for You</h2>
            <p className="mx-auto mt-4 max-w-2xl text-slate-600">Rates are simple, professional, and easy to understand. Travel and convenience fees are discussed before your appointment.</p>
          </div>
          <div className="grid gap-6 lg:grid-cols-3">{pricingCards.map((card) => <PricingCard key={card.title} card={card} />)}</div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid gap-8 rounded-[2rem] bg-slate-100 p-8 lg:grid-cols-2 lg:p-10">
            <div>
              <p className="font-bold uppercase tracking-[0.25em] text-blue-900">Possible Add-Ons</p>
              <h2 className="mt-3 font-serif text-3xl font-bold text-blue-950">Additional Fees May Apply</h2>
              <p className="mt-4 text-slate-600">Add-ons help cover appointments outside normal hours, urgent requests, or longer travel distances.</p>
            </div>
            <div className="space-y-3">{addOns.map(([label, price]) => <div key={label} className="flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm"><span className="font-medium text-slate-700">{label}</span><strong className="text-blue-950">{price}</strong></div>)}</div>
          </div>
        </div>
      </section>

      <section id="vehicle" className="bg-blue-950 py-20 text-white">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-6 lg:grid-cols-2">
          <div>
            <p className="font-bold uppercase tracking-[0.25em] text-yellow-400">Vehicle Document Notarization</p>
            <h2 className="mb-6 mt-3 font-serif text-4xl font-bold">Need a Title or Vehicle Document Notarized?</h2>
            <p className="mb-6 text-blue-100">I can notarize completed vehicle-related documents when notarization is required. I do not provide legal advice or prepare legal documents.</p>
            <Button href="#contact">Schedule Vehicle Notary</Button>
          </div>
          <div className="rounded-[2rem] bg-white p-8 text-blue-950 shadow-2xl">
            <h3 className="mb-5 font-serif text-2xl font-bold">Common Vehicle Documents</h3>
            <div className="grid gap-3 sm:grid-cols-2">{vehicleServices.map((item) => <div key={item} className="rounded-2xl bg-blue-50 p-4 text-sm font-semibold text-slate-700">✓ {item}</div>)}</div>
          </div>
        </div>
      </section>

      <section id="prepare" className="bg-white py-20">
        <div className="mx-auto max-w-6xl px-6 text-center">
          <p className="font-bold uppercase tracking-[0.25em] text-blue-900">Before Your Appointment</p>
          <h2 className="mb-10 mt-3 font-serif text-4xl font-bold text-blue-950">What To Have Ready</h2>
          <div className="grid gap-6 md:grid-cols-4">
            {[["1", "Valid Photo ID", "Government-issued identification is required."], ["2", "Unsigned Documents", "Wait to sign until you are with the notary when required."], ["3", "All Signers Present", "Each signer must personally appear before the notary."], ["4", "Witnesses If Needed", "Some documents may require neutral witnesses."]].map(([number, title, text]) => <article key={number} className="rounded-3xl border border-slate-200 bg-slate-50 p-6"><div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500 font-black text-blue-950">{number}</div><h3 className="mb-2 font-bold text-blue-950">{title}</h3><p className="text-sm text-slate-600">{text}</p></article>)}
          </div>
        </div>
      </section>

      <section id="contact" className="bg-slate-100 py-20">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-6 lg:grid-cols-2">
          <div>
            <p className="font-bold uppercase tracking-[0.25em] text-blue-900">Schedule Today</p>
            <h2 className="mb-5 mt-3 font-serif text-4xl font-bold text-blue-950">Book Your Notary Appointment</h2>
            <p className="mb-8 text-slate-600">Call, text, or email to request an office visit, mobile appointment, or facility visit.</p>
            <div className="space-y-4 text-slate-700">
              <p><strong>Phone:</strong> {contactInfo.phone}</p>
              <p><strong>Email:</strong> {contactInfo.email}</p>
              <p><strong>Website:</strong> {contactInfo.website}</p>
              <p><strong>Office:</strong> {contactInfo.address}</p>
            </div>
          </div>
          <div className="rounded-[2rem] bg-white p-8 shadow-xl">
            <h3 className="mb-5 font-serif text-2xl font-bold text-blue-950">Request a Quote</h3>
            <div className="space-y-4">
              <div className="rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-slate-400">Name</div>
              <div className="rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-slate-400">Phone Number</div>
              <div className="rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-slate-400">Office, Mobile, or Facility Visit?</div>
              <div className="rounded-xl border border-slate-200 bg-slate-100 px-4 py-8 text-slate-400">Message / Location / Document Type</div>
              <Button variant="dark">Submit Request</Button>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-blue-950 py-8 text-white">
        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-4 px-6 text-sm md:flex-row">
          <p>© Crucial Skills Training Center — Mobile Notary Services</p>
          <p>{contactInfo.website}</p>
        </div>
      </footer>
    </div>
  );
}