export default function BHTInteractiveLandingPage() {
  const stages = [
    {
      number: "01",
      title: "Learn",
      description:
        "Concise, visually engaging lessons that teach the core clinical concepts without overwhelming the learner.",
    },
    {
      number: "02",
      title: "See It Modeled",
      description:
        "Watch realistic therapist-client interactions that demonstrate how concepts show up in actual clinical work.",
    },
    {
      number: "03",
      title: "Rehearse",
      description:
        "Strengthen understanding through repeated concept rehearsal with varied prompts that build generalization, not rote memorization.",
    },
    {
      number: "04",
      title: "Test",
      description:
        "Validate knowledge and reinforce confidence with focused assessments that close the learning loop.",
    },
  ];

  const audiences = [
    {
      title: "For Interns",
      points: [
        "Build confidence between sessions",
        "Move from theory to clinical application",
        "Learn in digestible, focused modules",
      ],
    },
    {
      title: "For New Clinicians",
      points: [
        "Continue developing skills after supervision ends",
        "Strengthen core clinical practice with structured support",
        "Sharpen clinical judgment through repeated rehearsal",
        "Build confidence independently between sessions",
      ],
    },
    {
      title: "For Organizations",
      points: [
        "Standardize professional development",
        "Reduce repetitive training burden on supervisors",
        "Create a more prepared workforce",
      ],
    },
  ];

  const differentiators = [
    "Not supervision — structured professional development",
    "Designed for overwhelmed, undertrained early-career clinicians",
    "Built around concept mastery, modeling, rehearsal, and assessment",
    "Short, game-like modules that keep learning engaging and practical",
    "Created by a licensed clinician, educator, and training systems thinker",
  ];

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      <section className="relative overflow-hidden border-b border-gray-200 bg-white">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(249,115,22,0.10),transparent_30%),radial-gradient(circle_at_top_left,rgba(107,114,128,0.08),transparent_25%)]" />
        <div className="relative mx-auto max-w-7xl px-6 py-20 lg:px-8 lg:py-28">
          <div className="grid items-center gap-12 lg:grid-cols-2">
            <div>
              <div className="mb-8">
                <img
                  src="/logo.png"
                  alt="BHT Interactive Logo"
                  className="h-16 w-auto"
                />
              </div>
              <h1 className="max-w-2xl text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
                Gain confidence in your clinical skills.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-gray-600">
                BHT (Behavioral Health Training) Interactive is a structured professional development platform for behavioral health interns and clinicians who need a clearer path from theory to confident clinical application. When supervision ends, your development doesn’t have to—continue strengthening core clinical skills with structured support between sessions.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <a
                  href="#waitlist"
                  className="rounded-2xl bg-[#F47C20] px-6 py-3 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-[#d96e1c]"
                >
                  Join the Interest List
                </a>
                <a
                  href="#how-it-works"
                  className="rounded-2xl border border-gray-300 bg-white px-6 py-3 text-center text-sm font-semibold text-gray-700 transition hover:border-gray-400 hover:bg-gray-50"
                >
                  See How It Works
                </a>
              </div>
              <div className="mt-10 grid max-w-xl grid-cols-1 gap-4 sm:grid-cols-3">
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                  <div className="text-sm font-semibold text-gray-900">Short, Game-Like Modules</div>
                  <div className="mt-1 text-sm text-gray-600">Short, game-like modules designed for busy clinicians</div>
                </div>
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                  <div className="text-sm font-semibold text-gray-900">Structured Rehearsal</div>
                  <div className="mt-1 text-sm text-gray-600">Repeat concepts with variation</div>
                </div>
                <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                  <div className="text-sm font-semibold text-gray-900">Professional Development</div>
                  <div className="mt-1 text-sm text-gray-600">Not supervision, not passive CEUs</div>
                </div>
              </div>
            </div>

            <div className="relative">
              {/* Noodle Guy (tie) */}
              <img
                src="/noodle-tie.png"
                alt="Learner"
                className="absolute right-0 bottom-0 h-64 w-auto"
              />

              <div className="rounded-[2rem] border border-gray-200 bg-white p-4 shadow-xl shadow-gray-200/60">
                <div className="rounded-[1.5rem] border border-gray-100 bg-gray-50 p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-[#F47C20]">Module Preview</p>
                      <h2 className="mt-1 text-2xl font-semibold text-gray-900">Clinical Risk Assessment</h2>
                    </div>
                    <div className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-gray-500 shadow-sm">
                      ~ 1 hour
                    </div>
                  </div>

                  <div className="mt-6 space-y-4">
                    {stages.map((stage) => (
                      <div
                        key={stage.number}
                        className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
                      >
                        <div className="flex items-start gap-4">
                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#F47C20] text-sm font-bold text-white">
                            {stage.number}
                          </div>
                          <div>
                            <h3 className="text-base font-semibold text-gray-900">{stage.title}</h3>
                            <p className="mt-1 text-sm leading-6 text-gray-600">{stage.description}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8" id="problem">
        <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#F47C20]">
              The Gap
            </p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              Graduate training teaches theory. Supervision reviews cases. The core skill-building layer is still missing.
            </h2>
          </div>
          <div className="rounded-3xl border border-gray-200 bg-white p-8 shadow-sm">
            <p className="text-base leading-8 text-gray-600">
              Many behavioral health interns and new clinicians are seeing real clients while still craving more conceptual clarity, practical modeling, and repeated rehearsal of core clinical skills. BHT Interactive fills that gap with a structured learning system built for real-world professional development. It is not a replacement for clinical supervision, but a complementary tool that allows interns to strengthen core clinical practice between sessions.
            </p>
          </div>
        </div>
      </section>

      <section className="border-y border-gray-200 bg-white" id="how-it-works">
        <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="max-w-3xl">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#F47C20]">
              How It Works
            </p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              A four-stage learning model designed for real clinical growth.
            </h2>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            {stages.map((stage) => (
              <div
                key={stage.number}
                className="rounded-3xl border border-gray-200 bg-gray-50 p-6"
              >
                <div className="text-sm font-semibold text-[#F47C20]">Stage {stage.number}</div>
                <h3 className="mt-3 text-2xl font-semibold text-gray-900">{stage.title}</h3>
                <p className="mt-3 text-sm leading-7 text-gray-600">{stage.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
        <div className="grid gap-6 lg:grid-cols-3">
          {audiences.map((group) => (
            <div key={group.title} className="rounded-3xl border border-gray-200 bg-white p-8 shadow-sm">
              <h3 className="text-xl font-semibold text-gray-900">{group.title}</h3>
              <ul className="mt-5 space-y-3 text-sm leading-7 text-gray-600">
                {group.points.map((point) => (
                  <li key={point} className="flex items-start gap-3">
                    <span className="mt-2 h-2 w-2 rounded-full bg-[#F47C20]" />
                    <span>{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-gray-900 text-white">
        <div className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-gray-300">
                Why BHT Interactive
              </p>
              <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
                Built for busy interns and clinicians who want to strengthen their clinical skills.
              </h2>
              <div className="mt-8 grid gap-4">
                {differentiators.map((item) => (
                  <div key={item} className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm leading-7 text-gray-300">
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 backdrop-blur">
              <p className="text-sm font-semibold uppercase tracking-[0.2em] text-gray-300">
                Future Vision
              </p>
              <h3 className="mt-4 text-2xl font-semibold">From MVP to scalable training system</h3>
              <p className="mt-4 text-sm leading-7 text-gray-300">
                Launch with targeted modules for early-career clinicians. Expand into organizational packages, advanced professional development tracks, and customizable enterprise training solutions.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-6 py-20 lg:px-8" id="waitlist">
        <div className="rounded-[2rem] border border-gray-200 bg-white p-8 shadow-sm sm:p-10">
          <div className="text-center">
            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#F47C20]">
              Stay Connected
            </p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              Be the first to hear when BHT Interactive launches.
            </h2>
            <p className="mt-4 text-base leading-8 text-gray-600">
              Join the early interest list for updates, pilot opportunities, and previews of the first professional development modules.
            </p>
          </div>

          <form className="mx-auto mt-8 grid max-w-2xl gap-4 sm:grid-cols-[1fr_auto]">
            <input
              type="email"
              placeholder="Enter your email"
              className="rounded-2xl border border-gray-300 px-5 py-3 text-sm text-gray-900 outline-none ring-0 placeholder:text-gray-400 focus:border-gray-500"
            />
            <button
              type="button"
              className="rounded-2xl bg-[#F47C20] px-6 py-3 text-sm font-semibold text-white transition hover:bg-[#d96e1c]"
            >
              Join the List
            </button>
          </form>
        </div>
      </section>

      <footer className="bg-gray-100 border-t border-gray-200">
        <div className="mx-auto max-w-7xl px-6 py-10 lg:px-8 text-center">
          <p className="text-sm text-gray-600">
            BHT Interactive — Behavioral Health Training Interactive, Inc.
          </p>
          <p className="mt-2 text-xs text-gray-500">
            Structured professional development for behavioral health clinicians.
          </p>
          <p className="mt-2 text-xs text-gray-500">
            Contact: <a href="mailto:info@BHTinteractive.com" className="underline hover:text-[#F47C20]">info@BHTinteractive.com</a>
          </p>
        </div>
      </footer>

    </div>
  );
}