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

function PreparingLanding() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <div className="max-w-3xl w-full bg-white shadow-lg rounded-lg p-8 space-y-6">
        <h1 className="text-3xl font-bold text-center">
          Preparing for Your (Next) Career
        </h1>
        <p className="text-gray-600 text-center">
          Build the right skills and plan your education so you can confidently
          enter (or transition into) your new career.
        </p>

        {/* Section: Choose Skills-Based vs. Formal Education */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold">Which Path Fits You?</h2>
          <p className="text-gray-700">
            We can help you identify whether a <strong>skills-based program</strong> 
            (certifications, bootcamps, on-the-job training) or a more 
            <strong> formal education route</strong> (two-year or four-year college) 
            is the best fit. Whichever path you choose, our AI tools will guide 
            you from application to graduation.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            {/* Explore Education Options (handles skill-based & formal) */}
            <Button onClick={() => navigate('/educational-programs')}>
              Plan My Education Path
            </Button>

            {/* How to Pay button (placeholder route) */}
            <Button onClick={() => navigate('/how-to-pay')}>
              How to Pay for Education
            </Button>
          </div>
        </section>

        {/* Section: Tie-In to LoanRepayment or Additional Financial Planning */}
        <section className="space-y-4">
          <h2 className="text-xl font-semibold">Financing Your Future</h2>
          <p className="text-gray-700">
            Already have an idea of where you want to enroll? 
            We can help you compare costs, estimate student loan repayments, 
            and map out work-study or part-time opportunities. 
            Our integrated <strong>LoanRepayment</strong> tools will show you 
            realistic monthly payments so you can make confident choices.
          </p>
        </section>

        {/* Optional: Retake Interest Inventory */}
        <section className="space-y-3">
          <h2 className="text-xl font-semibold">Still Exploring?</h2>
          <p className="text-gray-700">
            If you’d like to revisit career possibilities, feel free to retake 
            our Interest Inventory to see other matching paths.
          </p>
          <Button onClick={() => navigate('/interest-inventory')}>
            Retake Interest Inventory
          </Button>
        </section>
      </div>
    </div>
  );
}

export default PreparingLanding;