import { GuideTable } from '../components/GuideTable';
import { GuideScreenshot } from '../components/GuideScreenshot';

export const GettingStartedSection = () => {
  return (
    <section id="getting-started" className="py-8 border-b border-white/5 scroll-mt-24">
      <h2 className="text-2xl font-bold text-avus mb-4">1. Getting Started</h2>

      {/* Creating an Account */}
      <div id="creating-an-account" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Creating an Account</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Navigate to <a href="https://motovaultpro.com" className="text-primary-400 hover:text-primary-300 underline">motovaultpro.com</a> and click the <strong className="text-avus">Sign Up</strong> button in the top-right corner of the navigation bar.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          <strong className="text-avus">Sign Up Page</strong>
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The registration page displays the MotoVaultPro logo and a clean form with the following fields:
        </p>

        <GuideTable
          headers={['Field', 'Required', 'Details']}
          rows={[
            ['Email Address', 'Yes', 'Your email address (e.g., your.email@example.com)'],
            ['Password', 'Yes', 'Minimum 8 characters, must include one uppercase letter and one number'],
            ['Confirm Password', 'Yes', 'Re-enter your password to confirm'],
            ['Terms & Conditions', 'Yes', 'Checkbox -- you must agree to the Terms & Conditions before creating your account'],
          ]}
        />

        <GuideScreenshot
          src="/guide/signup-desktop.png"
          alt="Sign Up page with registration form"
          caption="The Sign Up form with email, password, and terms & conditions fields"
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          After filling in all fields, click the <strong className="text-avus">Create Account</strong> button.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          If you already have an account, click the <strong className="text-avus">Login</strong> link at the bottom of the form.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          After registration, you will receive a verification email. Click the link in the email to verify your account before logging in.
        </p>
      </div>

      {/* Logging In */}
      <div id="logging-in" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Logging In</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          Click the <strong className="text-avus">Login</strong> button in the top-right corner of the navigation bar. You will be redirected to the secure login page powered by Auth0.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          <strong className="text-avus">Login Page</strong>
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          Enter your registered email address, then click <strong className="text-avus">Continue</strong>. On the next screen, enter your password and click <strong className="text-avus">Continue</strong> to log in.
        </p>

        <GuideScreenshot
          src="/guide/login-desktop.png"
          alt="Login page showing email and password entry"
          caption="The secure Auth0 login page"
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          After successful authentication, you will be redirected to the Dashboard.
        </p>
      </div>

      {/* Onboarding */}
      <div id="onboarding" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Onboarding</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          First-time users see an onboarding flow with three steps:
        </p>

        <ol className="list-decimal list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Preferences</strong> -- Choose your preferred unit system (Imperial or Metric), distance units, and notification preferences.
          </li>
          <li>
            <strong className="text-avus">Add Your First Vehicle</strong> -- Enter your first vehicle's details (you can skip this step and add vehicles later).
          </li>
          <li>
            <strong className="text-avus">Complete</strong> -- A welcome screen with quick links to get started exploring the app.
          </li>
        </ol>

        <GuideScreenshot
          src="/guide/onboarding-desktop.png"
          alt="Onboarding flow showing preferences step"
          caption="The onboarding flow guides new users through initial setup"
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          The onboarding experience is designed to get you up and running quickly. During the preferences step, you can configure:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>Your preferred unit system (Imperial or Metric) for distance, volume, and fuel economy</li>
          <li>Notification preferences for maintenance reminders</li>
          <li>Default settings for fuel logging and vehicle tracking</li>
        </ul>

        <p className="text-titanio/70 leading-relaxed mb-4">
          The optional vehicle setup step allows you to add your first vehicle immediately, but you can skip it and add vehicles later from the Vehicles page.
        </p>

        <GuideScreenshot
          src="/guide/onboarding-mobile.png"
          alt="Mobile onboarding showing vehicle setup step"
          caption="The onboarding flow is fully responsive and works on mobile devices"
          mobile
        />

        <p className="text-titanio/70 leading-relaxed mb-4">
          Once onboarding is complete, you will land on the Dashboard and can begin managing your fleet immediately.
        </p>
      </div>

      {/* Trouble Logging In */}
      <div id="trouble-logging-in" className="scroll-mt-24">
        <h3 className="text-xl font-semibold text-avus mb-3 mt-8">Trouble Logging In</h3>
        <p className="text-titanio/70 leading-relaxed mb-4">
          If you are having trouble logging in, try the following password reset and account recovery options.
        </p>

        <p className="text-titanio/70 leading-relaxed mb-4">
          Common login issues and solutions:
        </p>

        <ul className="list-disc list-inside text-titanio/70 space-y-2 mb-4 ml-4">
          <li>
            <strong className="text-avus">Forgot Password</strong> -- Use the password reset link to receive a reset email
          </li>
          <li>
            <strong className="text-avus">Account Not Verified</strong> -- Check your email for the verification link sent during signup
          </li>
          <li>
            <strong className="text-avus">Locked Account</strong> -- Contact support if your account has been locked due to multiple failed login attempts
          </li>
          <li>
            <strong className="text-avus">Browser Issues</strong> -- Try clearing your browser cache or using a different browser
          </li>
        </ul>

        <p className="text-titanio/70 leading-relaxed mb-4">
          MotoVaultPro uses Auth0 for secure authentication, ensuring your account credentials are protected with industry-standard security measures including encryption and multi-factor authentication support.
        </p>
      </div>
    </section>
  );
};