import React from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "./ui/button.js";
import EconomicProjections from "./EconomicProjections.js";

/* simple pill-style label */
const Chip = ({ label }) => (
  <span
    className="
      inline-flex items-center text-sm px-3 py-1
      rounded-full bg-gray-100 text-gray-700
      border border-gray-300
    "
  >
    {label}
    <span className="ml-1 text-xs text-green-600">✓ in Career Coach</span>
  </span>
);

export default function EnhancingLanding({ userProfile }) {
  const navigate = useNavigate();
  const socCode   = userProfile?.socCode;
  const stateName = userProfile?.state;

  return (
    <div className="min-h-screen bg-gray-50 py-8 px-4">
      <div className="max-w-4xl mx-auto space-y-10">

        {/* 📌 Current status */}
        <section className="bg-white shadow rounded-lg p-6">
          <h2 className="text-2xl font-semibold mb-4">
            📌 Your Current Status &amp; Next Steps
          </h2>
          <p className="text-gray-600 mb-4">
            Evaluate where you are in your career and discover upcoming milestones with our AI&nbsp;recommendations.
          </p>

          <EconomicProjections socCode={socCode} stateName={stateName} />

          <div className="mt-4">
            <Button onClick={() => navigate("/career-roadmap")}>
              Open Career Coach
            </Button>
          </div>
        </section>

        {/* 🚀 How do I get there */}
        <section className="bg-white shadow rounded-lg p-6">
          <h2 className="text-2xl font-semibold mb-4">🚀 How Do I Get There?</h2>

          <div className="flex flex-wrap gap-3">
            <Chip label="Resume Optimizer" />
            <Chip label="Networking" />
            <Chip label="Interview Help" />
            <Chip label="Job Search" />
          </div>

          <p className="text-sm text-gray-500 mt-3">
            All of these tools live inside the <strong>Career Coach</strong>. Open it any time using the button above.
          </p>
        </section>

      </div>
    </div>
  );
}