const React = window.React;
const { getTheoryOverview, getAllLoveLanguages, getQuizMetadata } = window.quizDataUtils;

const LandingPage = ({ onStartQuiz, onLearnMore, apiConfigured, onConfigureApi }) => {
  const theoryOverview = getTheoryOverview();
  const loveLanguages = getAllLoveLanguages();
  const quizMetadata = getQuizMetadata();

  return (
    <div className="min-h-screen" style={{ backgroundColor: 'var(--color-light)' }}>
      {/* Header */}
      <header className="shadow-sm" style={{ backgroundColor: 'var(--color-white)' }}>
        <div className="max-w-4xl mx-auto px-4 py-6">
          <div className="flex justify-between items-center">
            <div className="flex-1">
              <h1 className="text-3xl font-bold text-center" style={{ color: 'var(--color-primary)' }}>
                Five Love Languages Quiz
              </h1>
              <p className="text-center mt-2" style={{ color: 'var(--color-medium)' }}>
                Discover how you give and receive love
              </p>
            </div>
            {onConfigureApi && (
              <button
                onClick={onConfigureApi}
                className="ml-4 px-3 py-2 rounded-lg text-sm font-medium transition-all"
                style={{
                  backgroundColor: apiConfigured ? 'var(--color-success)' : 'var(--color-accent)',
                  color: 'var(--color-white)'
                }}
                title={apiConfigured ? 'API Configured' : 'Configure API for Enhanced Insights'}
              >
                {apiConfigured ? '✓ API' : '⚙ API'}
              </button>
            )}
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-4xl mx-auto px-4 py-8">
        {/* Hero Section */}
        <section className="text-center mb-12">
          <div className="rounded-2xl shadow-lg p-8 mb-8" style={{ backgroundColor: 'var(--color-white)' }}>
            <h2 className="text-4xl font-bold mb-4" style={{ color: 'var(--color-dark)' }}>
              {quizMetadata.title}
            </h2>
            <p className="text-xl mb-6 leading-relaxed" style={{ color: 'var(--color-medium)' }}>
              {quizMetadata.description}
            </p>
            <div 
              className="text-white rounded-lg p-6 mb-6"
              style={{
                background: `linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%)`
              }}
            >
              <h3 className="text-lg font-semibold mb-2">About This Assessment</h3>
              <p className="text-sm opacity-90">
                {theoryOverview.description}
              </p>
            </div>
            <button 
              onClick={onStartQuiz}
              className="text-lg px-8 py-4 mb-4 rounded-lg font-semibold transition-all"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'var(--color-white)',
                boxShadow: 'var(--shadow-primary)'
              }}
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = 'var(--color-primary-dark)';
                e.target.style.transform = 'translateY(-2px)';
                e.target.style.boxShadow = 'var(--shadow-primary-lg)';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = 'var(--color-primary)';
                e.target.style.transform = 'translateY(0)';
                e.target.style.boxShadow = 'var(--shadow-primary)';
              }}
              aria-label="Start the Five Love Languages quiz"
            >
              Start Quiz ({quizMetadata.totalQuestions} Questions)
            </button>
            <p className="text-sm" style={{ color: 'var(--color-medium)' }}>
              Takes approximately 15-30 minutes to complete
            </p>
            
            {apiConfigured && (
              <div 
                className="mt-4 p-3 rounded-lg text-sm"
                style={{
                  backgroundColor: 'var(--color-success-alpha-10)',
                  color: 'var(--color-success-dark)'
                }}
              >
                ✨ AI-enhanced insights enabled for personalized results
              </div>
            )}
          </div>
        </section>

        {/* Love Languages Overview */}
        <section className="mb-12">
          <h3 className="text-2xl font-bold text-center mb-8" style={{ color: 'var(--color-dark)' }}>
            The Five Love Languages
          </h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {loveLanguages.map((language, index) => (
              <div 
                key={language.key}
                className="rounded-xl p-6 transition-all"
                style={{
                  backgroundColor: 'var(--color-white)',
                  boxShadow: 'var(--shadow-md)',
                  animation: `fadeIn 0.5s ease-out ${index * 0.1}s both`
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-lg)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                }}
              >
                <h4 className="text-lg font-semibold mb-3" style={{ color: 'var(--color-dark)' }}>
                  {language.title}
                </h4>
                <p className="text-sm mb-4 leading-relaxed" style={{ color: 'var(--color-medium)' }}>
                  {language.description}
                </p>
                <div className="space-y-2">
                  <h5 className="font-medium text-sm" style={{ color: 'var(--color-dark)' }}>
                    Key Characteristics:
                  </h5>
                  <ul className="text-xs space-y-1" style={{ color: 'var(--color-medium)' }}>
                    {language.characteristics.slice(0, 2).map((characteristic, idx) => (
                      <li key={idx} className="flex items-start">
                        <span className="mr-2" style={{ color: 'var(--color-secondary)' }}>•</span>
                        {characteristic}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Theory Background */}
        <section className="mb-12">
          <div className="rounded-xl shadow-lg p-8" style={{ backgroundColor: 'var(--color-white)' }}>
            <h3 className="text-2xl font-bold mb-4 text-center" style={{ color: 'var(--color-dark)' }}>
              {theoryOverview.title}
            </h3>
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <p className="mb-4 leading-relaxed" style={{ color: 'var(--color-medium)' }}>
                  Developed by <strong style={{ color: 'var(--color-dark)' }}>{theoryOverview.author}</strong>, 
                  this theory identifies five distinct ways people express and receive love.
                </p>
                <p className="mb-4 leading-relaxed" style={{ color: 'var(--color-medium)' }}>
                  {theoryOverview.key_principle}
                </p>
                <button 
                  onClick={onLearnMore}
                  className="px-6 py-3 rounded-lg font-medium transition-all"
                  style={{
                    backgroundColor: 'var(--color-accent)',
                    color: 'var(--color-white)'
                  }}
                  onMouseEnter={(e) => e.target.style.backgroundColor = 'var(--color-accent-dark)'}
                  onMouseLeave={(e) => e.target.style.backgroundColor = 'var(--color-accent)'}
                  aria-label="Learn more about love languages theory"
                >
                  Learn More About Each Language
                </button>
              </div>
              <div 
                className="rounded-lg p-6"
                style={{
                  background: `linear-gradient(135deg, var(--color-primary-alpha-10) 0%, var(--color-accent-alpha-10) 100%)`
                }}
              >
                <h4 className="font-semibold mb-3" style={{ color: 'var(--color-dark)' }}>
                  What You'll Discover:
                </h4>
                <ul className="space-y-2 text-sm" style={{ color: 'var(--color-medium)' }}>
                  <li className="flex items-start">
                    <span className="mr-2" style={{ color: 'var(--color-secondary)' }}>✓</span>
                    Your primary love language
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2" style={{ color: 'var(--color-secondary)' }}>✓</span>
                    Your secondary love language
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2" style={{ color: 'var(--color-secondary)' }}>✓</span>
                    How to better communicate love
                  </li>
                  <li className="flex items-start">
                    <span className="mr-2" style={{ color: 'var(--color-secondary)' }}>✓</span>
                    Ways to strengthen relationships
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* Quiz Instructions */}
        <section className="mb-8">
          <div 
            className="border rounded-xl p-6"
            style={{
              backgroundColor: 'var(--color-accent-alpha-10)',
              borderColor: 'var(--color-accent-alpha-20)'
            }}
          >
            <h3 className="text-lg font-semibold mb-3" style={{ color: 'var(--color-dark)' }}>
              How It Works
            </h3>
            <div className="grid md:grid-cols-3 gap-4 text-sm" style={{ color: 'var(--color-medium)' }}>
              <div className="text-center">
                <div 
                  className="rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm font-semibold"
                  style={{
                    backgroundColor: 'var(--color-primary)',
                    color: 'var(--color-white)'
                  }}
                >
                  1
                </div>
                <p>Answer {quizMetadata.totalQuestions} question pairs</p>
              </div>
              <div className="text-center">
                <div 
                  className="rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm font-semibold"
                  style={{
                    backgroundColor: 'var(--color-secondary)',
                    color: 'var(--color-white)'
                  }}
                >
                  2
                </div>
                <p>Choose the statement that best represents you</p>
              </div>
              <div className="text-center">
                <div 
                  className="rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm font-semibold"
                  style={{
                    backgroundColor: 'var(--color-accent)',
                    color: 'var(--color-white)'
                  }}
                >
                  3
                </div>
                <p>Get your personalized results</p>
              </div>
            </div>
            <p className="text-center text-xs mt-4" style={{ color: 'var(--color-medium)' }}>
              {quizMetadata.instructions}
            </p>
          </div>
        </section>

        {/* Call to Action */}
        <section className="text-center">
          <div 
            className="text-white rounded-2xl p-8"
            style={{
              background: `linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%)`
            }}
          >
            <h3 className="text-2xl font-bold mb-4">
              Ready to Discover Your Love Language?
            </h3>
            <p className="text-lg opacity-90 mb-6">
              Take the quiz now and gain insights into how you give and receive love.
            </p>
            <button 
              onClick={onStartQuiz}
              className="font-semibold px-8 py-4 rounded-lg transition-all"
              style={{
                backgroundColor: 'var(--color-white)',
                color: 'var(--color-primary)'
              }}
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = 'var(--color-light)';
                e.target.style.transform = 'scale(1.05)';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = 'var(--color-white)';
                e.target.style.transform = 'scale(1)';
              }}
              aria-label="Begin the Five Love Languages assessment"
            >
              Begin Assessment
            </button>
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer 
        className="border-t mt-16"
        style={{
          backgroundColor: 'var(--color-white)',
          borderColor: 'var(--color-light)'
        }}
      >
        <div className="max-w-4xl mx-auto px-4 py-6 text-center">
          <p className="text-sm" style={{ color: 'var(--color-medium)' }}>
            Based on "The Five Love Languages" by {theoryOverview.author}
          </p>
          <p className="text-xs mt-2" style={{ color: 'var(--color-medium)', opacity: 0.7 }}>
            This assessment helps you understand your love language preferences for better relationships.
          </p>
        </div>
      </footer>
    </div>
  );
};

// Expose globally
window.LandingPage = LandingPage;