export default function CoachHiggyHomepage() {
  const pillars = [
    {
      title: "Believe",
      description:
        "Start with conviction. Believe that growth is possible, that systems can be improved, and that meaningful work begins with faith and vision.",
    },
    {
      title: "Focus",
      description:
        "Cut through noise. Focus on what matters most, build practical solutions, and put energy into the work that actually moves people forward.",
    },
    {
      title: "Don’t Quit",
      description:
        "Stay with it. Progress comes through consistency, resilience, and the willingness to keep building when things get difficult.",
    },
  ];

  const lanes = [
    {
      title: "Education",
      description:
        "Computer science, STEAM, AI-assisted learning, and systems that help students and schools move forward with purpose.",
      items: ["Curriculum design", "Student-centered innovation", "3D printing and hands-on learning"],
    },
    {
      title: "Software",
      description:
        "Practical tools for schools, communities, and small businesses—built to solve real problems without unnecessary complexity.",
      items: ["Business tools", "Community apps", "Communication systems"],
    },
    {
      title: "Message",
      description:
        "Podcast conversations, faith-centered ideas, and leadership content built around growth, perseverance, and meaningful influence.",
      items: ["Podcasting", "Faith and leadership", "Encouraging content"],
    },
  ];

  const featured = [
    {
      name: "411 Yard Sale Platform",
      text: "A digital system built to help vendors, visitors, and local businesses connect through one of the South’s biggest yard sale events.",
    },
    {
      name: "Small Business Software",
      text: "Simple local-business tools like texting systems, scheduling workflows, and communication platforms designed to save time and create momentum.",
    },
    {
      name: "School Innovation Projects",
      text: "Programs and systems that connect creativity, computer science, engineering, and discovery in ways students can actually feel and use.",
    },
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(250,204,21,0.2),transparent_35%),radial-gradient(circle_at_left,rgba(34,197,94,0.14),transparent_30%)]" />
        <div className="relative mx-auto max-w-6xl px-6 py-24 md:py-32">
          <div className="max-w-4xl">
            <p className="mb-4 inline-flex rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-1 text-sm text-amber-200">
              BFQ
            </p>
            <h1 className="text-5xl font-bold tracking-tight text-white md:text-7xl">
              Believe. Focus. Don’t Quit.
            </h1>
            <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-300 md:text-2xl">
              A framework for building, leading, teaching, and moving forward.
            </p>
            <p className="mt-4 max-w-3xl text-lg leading-8 text-slate-400">
              Coach Higgy is where ideas, systems, faith, software, and meaningful work come together
              around one simple challenge: believe, focus, and don’t quit.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href="#framework"
                className="rounded-2xl bg-amber-400 px-6 py-3 font-semibold text-slate-950 shadow-lg shadow-amber-500/20 transition hover:scale-[1.02]"
              >
                Explore BFQ
              </a>
              <a
                href="#projects"
                className="rounded-2xl border border-white/15 bg-white/5 px-6 py-3 font-semibold text-white transition hover:bg-white/10"
              >
                See the Work
              </a>
            </div>
          </div>
        </div>
      </section>

      <section id="framework" className="mx-auto max-w-6xl px-6 py-20">
        <div className="mb-10 max-w-3xl">
          <h2 className="text-3xl font-bold md:text-4xl">The BFQ framework</h2>
          <p className="mt-4 text-lg text-slate-300">
            BFQ is more than a slogan. It is a practical framework for how to think, how to build,
            and how to keep moving when the road gets hard.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
              className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-xl shadow-black/20"
            >
              <h3 className="text-3xl font-semibold text-amber-200">{pillar.title}</h3>
              <p className="mt-4 leading-8 text-slate-300">{pillar.description}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="border-y border-white/10 bg-slate-900/60">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <div className="mb-10 max-w-3xl">
            <h2 className="text-3xl font-bold md:text-4xl">How BFQ shows up in the work</h2>
            <p className="mt-4 text-lg text-slate-300">
              The same idea runs through everything here—teaching, technology, leadership,
              communication, and systems that create real momentum.
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {lanes.map((lane) => (
              <div key={lane.title} className="rounded-3xl border border-white/10 bg-slate-950/70 p-6">
                <h3 className="text-2xl font-semibold">{lane.title}</h3>
                <p className="mt-3 leading-7 text-slate-300">{lane.description}</p>
                <ul className="mt-5 space-y-2 text-sm text-slate-200">
                  {lane.items.map((item) => (
                    <li key={item} className="flex items-start gap-2">
                      <span className="mt-1 h-2 w-2 rounded-full bg-amber-300" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="projects" className="mx-auto max-w-6xl px-6 py-20">
        <div className="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div className="max-w-2xl">
            <h2 className="text-3xl font-bold md:text-4xl">Featured projects</h2>
            <p className="mt-4 text-lg text-slate-300">
              These projects show what BFQ looks like in action—practical systems, clear direction,
              and work built to help people move forward.
            </p>
          </div>
          <div className="rounded-2xl border border-emerald-400/20 bg-emerald-400/10 px-4 py-2 text-sm text-emerald-200">
            Built with purpose
          </div>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {featured.map((project) => (
            <div key={project.name} className="rounded-3xl border border-white/10 bg-white/5 p-6">
              <h3 className="text-2xl font-semibold">{project.name}</h3>
              <p className="mt-4 leading-7 text-slate-300">{project.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="border-t border-white/10 bg-slate-900/60">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <div className="grid gap-8 md:grid-cols-[1.1fr,0.9fr]">
            <div className="rounded-3xl border border-white/10 bg-white/5 p-8">
              <h2 className="text-3xl font-bold">About Coach Higgy</h2>
              <p className="mt-4 text-lg leading-8 text-slate-300">
                Coach Higgy is a builder, teacher, communicator, and system thinker. The mission is
                simple: create work that is useful, meaningful, and capable of helping people take
                the next step forward.
              </p>
              <p className="mt-4 text-lg leading-8 text-slate-300">
                Whether the setting is a classroom, a local business, a podcast conversation, or a
                software idea, the heartbeat is the same—believe, focus, and don’t quit.
              </p>
            </div>
            <div className="rounded-3xl border border-amber-400/20 bg-amber-400/10 p-8">
              <h2 className="text-3xl font-bold text-amber-100">Work With Me</h2>
              <div className="mt-6 space-y-5 text-amber-50">
                <div>
                  <h3 className="text-xl font-semibold">For Schools</h3>
                  <p className="mt-1 text-amber-50/85">
                    Curriculum, innovation, STEAM systems, and student-centered educational tools.
                  </p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold">For Small Businesses</h3>
                  <p className="mt-1 text-amber-50/85">
                    Simple software and communication systems that save time and create traction.
                  </p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold">For Speaking / Media</h3>
                  <p className="mt-1 text-amber-50/85">
                    Podcast interviews, practical leadership conversations, and message-driven
                    content.
                  </p>
                </div>
              </div>
              <div className="mt-8 rounded-2xl bg-slate-950/40 p-5 text-sm text-amber-50/90">
                Next step: add your real contact form, podcast links, and featured project buttons.
              </div>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-white/10 bg-slate-950">
        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-10 text-sm text-slate-400 md:flex-row md:items-center md:justify-between">
          <p>© {new Date().getFullYear()} BFQ / Coach Higgy</p>
          <p>Believe. Focus. Don’t Quit.</p>
        </div>
      </footer>
    </div>
  );
}