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

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

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-aptiva-gray to-white p-6">
      <div className="max-w-2xl w-full bg-white shadow-xl rounded-xl p-8 md:p-10">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-aptiva mb-2">
            Planning Your Career
          </h1>
          <p className="text-gray-600 max-w-xl mx-auto text-sm md:text-base leading-relaxed">
            Discover career options that match your interests, skills, and
            potential. AptivaAI helps you explore ideal paths, understand
            educational requirements, compare salaries, and analyze job market
            trends—all in one place.
          </p>
        </div>

        {/* Options grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Interest Inventory */}
          <div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
            <h2 className="text-lg font-semibold mb-2">Interest Inventory</h2>
            <p className="text-sm text-gray-600 mb-4 flex-1">
              Identify your interests and discover careers aligned with your
              strengths.
            </p>
            <Button
              className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
              onClick={() => navigate('/interest-inventory')}
            >
              Take Inventory
            </Button>
          </div>

          {/* Career Explorer */}
          <div className="flex flex-col border rounded-lg p-5 hover:shadow-md transition-colors">
            <h2 className="text-lg font-semibold mb-2">Career Explorer</h2>
            <p className="text-sm text-gray-600 mb-4 flex-1">
              Research career profiles, job descriptions, salaries, and
              employment outlooks.
            </p>
            <Button
              className="w-full mt-auto bg-aptiva hover:bg-aptiva-dark text-white"
              onClick={() => navigate('/career-explorer')}
            >
              Explore Careers
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PlanningLanding;