import React from 'react';
import {
  IonApp,
  IonContent,
  IonPage,
  IonButton,
  IonIcon,
  setupIonicReact,
} from '@ionic/react';
import {
  star,
  chevronForward,
  calculator,
  flash,
  leaf,
  flask,
} from 'ionicons/icons';

import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

import './theme/variables.css';
import './App.css';

const urlMode = new URLSearchParams(window.location.search).get('mode');
setupIonicReact({ mode: (urlMode === 'md' ? 'md' : 'ios') as 'ios' | 'md' });

const WelcomeScreen: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen className="welcome-content">
        <div className="background-shapes">
          <div className="shape-1"></div>
          <div className="shape-2"></div>
        </div>

        <div className="content-wrapper">
          <div className="hero-section">
            <div className="badge">
              <span>IGCSE Excellence</span>
            </div>

            <h1 className="hero-title">
              Unlock Your
              <br />
              <span className="text-gradient">Full Potential</span>
            </h1>

            <p className="hero-subtitle">
              Master Mathematics, Sciences, and more with interactive bite-sized
              lessons tailored for your exams.
            </p>

            <div className="subject-pills">
              <div className="subject-pill">
                <div className="subject-icon icon-math">
                  <IonIcon icon={calculator} />
                </div>
                <span className="subject-name">Maths</span>
              </div>
              <div className="subject-pill">
                <div className="subject-icon icon-physics">
                  <IonIcon icon={flash} />
                </div>
                <span className="subject-name">Physics</span>
              </div>
              <div className="subject-pill">
                <div className="subject-icon icon-bio">
                  <IonIcon icon={leaf} />
                </div>
                <span className="subject-name">Biology</span>
              </div>
              <div className="subject-pill">
                <div className="subject-icon icon-chem">
                  <IonIcon icon={flask} />
                </div>
                <span className="subject-name">Chemistry</span>
              </div>
            </div>
          </div>

          <div className="action-section">
            <IonButton expand="block" className="start-button">
              Get Started
              <IonIcon icon={chevronForward} slot="end" />
            </IonButton>
            <IonButton expand="block" fill="clear" className="login-button">
              I already have an account
            </IonButton>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

const App: React.FC = () => (
  <IonApp>
    <WelcomeScreen />
  </IonApp>
);

export default App;