import React from "react";
import { Menu, Search, PlayCircle, Podcast, BookOpen, Calendar, HandHeart, ShoppingBag, ChevronRight, Youtube, Facebook, Instagram, Mail, Phone, MapPin } from "lucide-react";

// --- Simple data mapped from existing JHM content ---
const sermons = [
  {
    title: "5 Questions to Ask Yourself During Life's Trials",
    date: "Jul 8, 2023",
    href: "https://jasonhaleministries.org/media/",
    tag: "Teaching",
  },
  {
    title: "RECEIVE THE MERCY OF GOD!!!",
    date: "YouTube",
    href: "https://www.youtube.com/@JasonHaleMinistries",
    tag: "Video",
  },
  {
    title: "DON'T BE UNFAIR WITH GOD!!!",
    date: "YouTube",
    href: "https://www.youtube.com/@JasonHaleMinistries",
    tag: "Video",
  },
];

const devotions = [
  {
    title: "DO IT WELL",
    href: "https://jasonhaleministries.org/devotions",
  },
  {
    title: "Mirror Your Giving",
    href: "https://jasonhaleministries.org/devotions",
  },
  {
    title: "If you feel like you've been traveling...",
    href: "https://jasonhaleministries.org/devotions",
  },
];

const prayers = [
  { title: "Confession of Favor", href: "https://jasonhaleministries.org/prayers" },
  { title: "Peaceful Sleep", href: "https://jasonhaleministries.org/peaceful-sleep" },
  { title: "Provision & Increase", href: "https://jasonhaleministries.org/prayers" },
];

const events = [
  { date: "Sep 22", title: "Citywide Prayer Night", location: "Chicago, IL", href: "#" },
  { date: "Oct 12", title: "Discipleship Intensive", location: "Oak Park, IL", href: "#" },
  { date: "Nov 03", title: "Leaders & Pastors Roundtable", location: "Naperville, IL", href: "#" },
];

export default function JHM_AWMI_Home() {
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      {/* Top utility bar */}
      <div className="bg-slate-900 text-slate-100 text-xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <span className="hidden sm:inline-flex items-center gap-1"><MapPin size={14}/> Oak Park, IL</span>
            <a className="underline underline-offset-2 opacity-90 hover:opacity-100" href="https://jasonhaleministries.org/booking">Booking</a>
            <a className="underline underline-offset-2 opacity-90 hover:opacity-100" href="https://jasonhaleministries.org/contact">Contact</a>
          </div>
          <div className="flex items-center gap-3">
            <a className="hover:opacity-80" href="https://www.youtube.com/@JasonHaleMinistries" aria-label="YouTube"><Youtube size={16}/></a>
            <a className="hover:opacity-80" href="https://linktr.ee/jasonhaleministries" aria-label="Instagram"><Instagram size={16}/></a>
            <a className="hover:opacity-80" href="https://linktr.ee/jasonhaleministries" aria-label="Facebook"><Facebook size={16}/></a>
            <a className="px-2 py-1 rounded bg-amber-400 text-slate-900 font-semibold" href="https://jasonhaleministries.org/give">Give</a>
          </div>
        </div>
      </div>

      {/* Header & Primary Nav (awmi-style) */}
      <header className="bg-white sticky top-0 z-40 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="h-16 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <button className="lg:hidden p-2 rounded hover:bg-slate-100" aria-label="Open Menu"><Menu/></button>
              <a href="/" className="font-extrabold tracking-tight text-xl">Jason Hale Ministries</a>
            </div>
            <nav className="hidden lg:flex items-center gap-6 text-sm font-medium">
              <a className="hover:text-amber-600" href="#watch">Watch</a>
              <a className="hover:text-amber-600" href="#listen">Listen</a>
              <a className="hover:text-amber-600" href="#read">Read</a>
              <a className="hover:text-amber-600" href="#events">Events</a>
              <a className="hover:text-amber-600" href="https://jasonhaleministries.org/receive-jesus">Know Jesus</a>
              <a className="hover:text-amber-600" href="https://jasonhaleministries.org/give">Give</a>
              <a className="hover:text-amber-600" href="https://jasonhaleministries.org/booking">Booking</a>
              <a className="hover:text-amber-600" href="https://jasonhaleministries.org/contact">Contact</a>
            </nav>
            <button className="p-2 rounded hover:bg-slate-100" aria-label="Search"><Search/></button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 grid lg:grid-cols-2 gap-10 items-center">
          <div>
            <p className="uppercase tracking-[0.3em] text-amber-300/90 text-xs mb-3">Discipleship • Prayer • Fasting • The Word</p>
            <h1 className="text-3xl sm:text-5xl font-extrabold leading-tight">Impacting a Generation for Christ</h1>
            <p className="mt-4 text-slate-200 max-w-prose">Practical Bible teaching to help you know Jesus, walk in wisdom, and steward your calling with excellence.</p>
            <div className="mt-6 flex flex-wrap gap-3">
              <a href="#watch" className="inline-flex items-center gap-2 rounded-xl bg-amber-400 text-slate-900 px-4 py-2 font-semibold shadow hover:translate-y-[-1px] transition"><PlayCircle/> Watch</a>
              <a href="#read" className="inline-flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2 font-semibold hover:bg-white/20 transition"><BookOpen/> Read</a>
              <a href="https://jasonhaleministries.org/give" className="inline-flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2 font-semibold hover:bg-white/20 transition"><HandHeart/> Give</a>
            </div>
          </div>
          <div className="bg-white/5 rounded-3xl p-4 lg:p-6 border border-white/10 shadow-xl">
            <div className="aspect-video w-full rounded-2xl bg-black/30 grid place-items-center">
              <div className="text-center">
                <PlayCircle className="mx-auto mb-3" size={42}/>
                <p className="text-sm text-slate-300">Featured Message</p>
                <a href="https://www.youtube.com/@JasonHaleMinistries" className="mt-1 inline-block font-semibold underline underline-offset-4">Watch on YouTube</a>
              </div>
            </div>
            <div className="mt-4 flex items-center justify-between">
              <div>
                <p className="text-xs uppercase tracking-widest text-amber-300/80">Now Playing</p>
                <p className="font-semibold">Latest Teaching</p>
              </div>
              <a href="#watch" className="inline-flex items-center gap-1 text-amber-300 hover:text-amber-200">Browse <ChevronRight/></a>
            </div>
          </div>
        </div>
      </section>

      {/* Watch / Listen / Read quick hubs */}
      <section id="watch" className="py-10 sm:py-14">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-3 gap-6">
            <div className="rounded-3xl bg-white shadow-sm border p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold">Watch</h3>
                <PlayCircle/>
              </div>
              <p className="mt-2 text-sm text-slate-600">Messages, conferences, and broadcasts.</p>
              <ul className="mt-4 space-y-3">
                {sermons.map((s) => (
                  <li key={s.title} className="group flex items-start gap-3">
                    <span className="mt-1 inline-block h-2 w-2 rounded-full bg-amber-400"/>
                    <a className="font-medium group-hover:underline" href={s.href} target="_blank" rel="noreferrer">{s.title}</a>
                    <span className="ml-auto text-xs text-slate-500">{s.tag}</span>
                  </li>
                ))}
              </ul>
              <a className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-amber-700 hover:text-amber-900" href="https://www.youtube.com/@JasonHaleMinistries" target="_blank" rel="noreferrer">All videos <ChevronRight size={18}/></a>
            </div>

            <div id="listen" className="rounded-3xl bg-white shadow-sm border p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold">Listen</h3>
                <Podcast/>
              </div>
              <p className="mt-2 text-sm text-slate-600">Audio teachings and podcast feed.</p>
              <div className="mt-4 grid grid-cols-2 gap-3">
                <a className="rounded-xl border p-3 hover:bg-slate-50" href="https://jasonhaleministries.org/media/" target="_blank" rel="noreferrer">Teaching Library</a>
                <a className="rounded-xl border p-3 hover:bg-slate-50" href="https://channelstore.roku.com/details/12149863b0983ca7120612dea9402bd0%3Ab190c15187a0828ccc61eab791978259/jason-hale-ministries" target="_blank" rel="noreferrer">Roku Channel</a>
              </div>
              <a className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-amber-700 hover:text-amber-900" href="https://jasonhaleministries.org/media/">Browse audio <ChevronRight size={18}/></a>
            </div>

            <div id="read" className="rounded-3xl bg-white shadow-sm border p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-xl font-bold">Read</h3>
                <BookOpen/>
              </div>
              <p className="mt-2 text-sm text-slate-600">Devotions, prayers, and resources.</p>
              <ul className="mt-4 space-y-3">
                {devotions.map((d) => (
                  <li key={d.title} className="group flex items-start gap-3">
                    <span className="mt-1 inline-block h-2 w-2 rounded-full bg-emerald-400"/>
                    <a className="font-medium group-hover:underline" href={d.href} target="_blank" rel="noreferrer">{d.title}</a>
                  </li>
                ))}
              </ul>
              <a className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-amber-700 hover:text-amber-900" href="https://jasonhaleministries.org/devotions">All devotions <ChevronRight size={18}/></a>
            </div>
          </div>
        </div>
      </section>

      {/* Prayers + Give CTA */}
      <section className="py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 rounded-3xl bg-white shadow-sm border p-6">
            <h3 className="text-xl font-bold mb-2">Pray God’s Word</h3>
            <p className="text-sm text-slate-600">Prayers you can speak aloud over your life and family.</p>
            <div className="mt-4 grid sm:grid-cols-3 gap-3">
              {prayers.map((p) => (
                <a key={p.title} href={p.href} target="_blank" rel="noreferrer" className="rounded-xl border p-3 hover:bg-slate-50 flex items-center justify-between">
                  <span className="font-medium">{p.title}</span>
                  <ChevronRight size={18} className="text-slate-400"/>
                </a>
              ))}
            </div>
          </div>
          <div className="rounded-3xl bg-gradient-to-br from-amber-400 to-amber-300 text-slate-900 p-6 shadow-sm border border-amber-200">
            <h3 className="text-xl font-extrabold">Partner With the Gospel</h3>
            <p className="text-sm mt-2">Your generosity helps us teach the Word, disciple believers, and reach people with the love of Jesus.</p>
            <a href="https://jasonhaleministries.org/give" className="mt-4 inline-flex items-center gap-2 bg-slate-900 text-white rounded-xl px-4 py-2 font-semibold hover:bg-slate-800"><HandHeart/> Give Now</a>
          </div>
        </div>
      </section>

      {/* Events */}
      <section id="events" className="py-10 sm:py-14">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-2xl font-extrabold">Upcoming Events</h3>
            <a className="text-sm font-semibold text-amber-700 hover:text-amber-900" href="#">All events</a>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {events.map((e) => (
              <a key={e.title} href={e.href} className="rounded-3xl bg-white border shadow-sm p-6 hover:shadow-md transition">
                <div className="text-amber-700 font-extrabold text-2xl">{e.date}</div>
                <div className="mt-2 font-bold text-lg">{e.title}</div>
                <div className="mt-1 text-sm text-slate-600 flex items-center gap-2"><MapPin size={16}/>{e.location}</div>
                <div className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-amber-700">Details <ChevronRight size={18}/></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Store / Resources promo */}
      <section className="pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-3xl border bg-white shadow-sm p-6 flex flex-col md:flex-row items-center gap-6">
            <div className="flex-1">
              <h3 className="text-2xl font-extrabold flex items-center gap-2"><ShoppingBag/> Resources & Books</h3>
              <p className="mt-2 text-sm text-slate-600 max-w-prose">Get teachings and practical tools to help you steward your calling—books, audio, downloads, and more.</p>
              <div className="mt-4 flex gap-3">
                <a href="#" className="inline-flex items-center gap-2 rounded-xl bg-amber-400 text-slate-900 px-4 py-2 font-semibold shadow hover:translate-y-[-1px] transition"><ShoppingBag/> Visit Store</a>
                <a href="https://jasonhaleministries.org/receive-jesus" className="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2 font-semibold border hover:bg-slate-50"><BookOpen/> Start With Jesus</a>
              </div>
            </div>
            <div className="w-full md:w-72 h-40 rounded-2xl bg-gradient-to-br from-amber-200 to-amber-400" />
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 grid md:grid-cols-4 gap-8">
          <div>
            <h4 className="font-extrabold text-white">Jason Hale Ministries</h4>
            <p className="mt-2 text-sm text-slate-400">Father • Speaker • Author • Lover of God • Servant of His Kingdom</p>
            <div className="mt-4 flex items-center gap-3">
              <a className="hover:opacity-80" href="mailto:Giving@JasonHaleMinistries.com" aria-label="Email"><Mail size={18}/></a>
              <a className="hover:opacity-80" href="tel:+1" aria-label="Phone"><Phone size={18}/></a>
              <a className="hover:opacity-80" href="https://www.youtube.com/@JasonHaleMinistries" aria-label="YouTube"><Youtube size={18}/></a>
            </div>
          </div>
          <div>
            <h5 className="font-bold text-white">Ministry</h5>
            <ul className="mt-3 space-y-2 text-sm">
              <li><a className="hover:underline" href="https://jasonhaleministries.org/receive-jesus">Receive Jesus</a></li>
              <li><a className="hover:underline" href="https://jasonhaleministries.org/devotions">Devotions</a></li>
              <li><a className="hover:underline" href="https://jasonhaleministries.org/prayers">Prayers</a></li>
              <li><a className="hover:underline" href="https://jasonhaleministries.org/media/">Media</a></li>
            </ul>
          </div>
          <div>
            <h5 className="font-bold text-white">Connect</h5>
            <ul className="mt-3 space-y-2 text-sm">
              <li><a className="hover:underline" href="https://jasonhaleministries.org/booking">Booking</a></li>
              <li><a className="hover:underline" href="https://jasonhaleministries.org/contact">Contact</a></li>
              <li><a className="hover:underline" href="https://jasonhaleministries.org/give">Give</a></li>
              <li><a className="hover:underline" href="https://linktr.ee/jasonhaleministries">Social Links</a></li>
            </ul>
          </div>
          <div>
            <h5 className="font-bold text-white">Visit</h5>
            <p className="mt-3 text-sm text-slate-400">805 Lake Street, Suite 374<br/>Oak Park, IL 60301</p>
          </div>
        </div>
        <div className="border-t border-white/10 py-4 text-center text-xs text-slate-400">© {new Date().getFullYear()} Jason Hale Ministries. All rights reserved.</div>
      </footer>
    </div>
  );
}