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

import EconomicProjections from './EconomicProjections.js';

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">

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

          {/* Show user’s current career data (if any) */}
          <EconomicProjections socCode={socCode} stateName={stateName} />

          {/* Single button to go to "Career Roadmap" (formerly Milestone Tracker) */}
          <div className="mt-4">
            <Button onClick={() => navigate('/career-roadmap')}>
              Go to Career Roadmap
            </Button>
          </div>
        </section>

        {/* 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>
          <p className="text-gray-600 mb-4">
            Accelerate your career growth with the right tools:
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <Button onClick={() => navigate('/resume-optimizer')}>
              Optimize Resume
            </Button>
            <Button onClick={() => navigate('/networking')}>
              Networking
            </Button>
            <Button onClick={() => navigate('/interview-help')}>
              Interview Help
            </Button>
            <Button onClick={() => navigate('/job-search')}>
              Job Search
            </Button>
          </div>
        </section>

      </div>
    </div>
  );
}

export default EnhancingLanding;