import partsData from '../data/index.js';

export default function MainPage({ onSelectBuildType }) {
  const handleSelect = (buildType) => {
    onSelectBuildType(buildType);
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
      <div className="max-w-4xl mx-auto px-4">
        {/* Header */}
        <div className="mb-12 text-center">
          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
            OSSM Configurator
          </h1>
          <p className="text-gray-600 dark:text-gray-300">
            Configure your Open Source Sex Machine
          </p>
        </div>

        {/* Build Type Selection */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
            Select Your Build Type
          </h2>
          
          <div className="grid md:grid-cols-3 gap-6">
            {/* New Build - RAD Kit */}
            <button
              onClick={() => handleSelect('rad-kit')}
              className="flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-200 group"
            >
              <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
                <svg
                  className="w-8 h-8 text-blue-600 dark:text-blue-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                New Build
              </h3>
              <p className="text-sm font-medium text-blue-600 dark:text-blue-400 mb-3">
                Kit from RAD
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-300 text-center">
                Pre-configured kit with all required parts. Jump straight to the summary.
              </p>
            </button>

            {/* New Build - Self Source */}
            <button
              onClick={() => handleSelect('self-source')}
              className="flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-green-500 dark:hover:border-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 transition-all duration-200 group"
            >
              <div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-green-200 dark:group-hover:bg-green-900/50 transition-colors">
                <svg
                  className="w-8 h-8 text-green-600 dark:text-green-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                New Build
              </h3>
              <p className="text-sm font-medium text-green-600 dark:text-green-400 mb-3">
                Self Source
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-300 text-center">
                Go through the full wizard to select and customize all components.
              </p>
            </button>

            {/* Upgrade */}
            <button
              onClick={() => handleSelect('upgrade')}
              className="flex flex-col items-center p-6 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-purple-500 dark:hover:border-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-200 group"
            >
              <div className="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4 group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
                <svg
                  className="w-8 h-8 text-purple-600 dark:text-purple-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  />
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                Upgrade / Mod
              </h3>
              <p className="text-sm font-medium text-purple-600 dark:text-purple-400 mb-3">
                Add Modifications
              </p>
              <p className="text-sm text-gray-600 dark:text-gray-300 text-center">
                Browse and select upgrade components and modifications for your existing build.
              </p>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
