const { useState } = React;

function LandingPage({ onStart }) {
  const [hovered, setHovered] = useState(false);

  return (
    <div className="landing">
      <div className="landing-inner">
        {/* Hero */}
        <div className="landing-hero">
          <div className="landing-eyebrow">Built for California community college students</div>
          <h1 className="landing-title">
            See your transfer path<br />
            <span className="landing-title-accent">clearly.</span>
          </h1>
          <p className="landing-subtitle">
            Stop juggling spreadsheets and guessing at ASSIST.
            TransferLens shows you exactly which community college courses
            satisfy your transfer requirements — across every major and university, in one calm place.
          </p>
          <button
            className="btn-cta"
            onClick={onStart}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
          >
            Start Planning
            <span className="btn-cta-arrow" style={{ transform: hovered ? 'translateX(4px)' : 'translateX(0)' }}>→</span>
          </button>
          <div className="landing-hint">Free · No account needed · Takes 3 minutes</div>
        </div>

        {/* Features */}
        <div className="landing-features">
          <div className="landing-feature">
            <div className="feature-icon">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M3 10h14M3 5h14M3 15h8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="feature-text">
              <div className="feature-title">Course Mappings</div>
              <div className="feature-desc">See exactly which IVC courses fulfill each university requirement — with AND/OR logic displayed simply.</div>
            </div>
          </div>
          <div className="landing-feature">
            <div className="feature-icon">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="1.8"/>
                <path d="M10 6v4l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="feature-text">
              <div className="feature-title">Multi-School Stacking</div>
              <div className="feature-desc">Apply to multiple universities? See all requirements side-by-side and find courses that satisfy all of them at once.</div>
            </div>
          </div>
          <div className="landing-feature">
            <div className="feature-icon">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <rect x="3" y="3" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
                <rect x="11" y="3" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
                <rect x="3" y="11" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
                <rect x="11" y="11" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.8"/>
              </svg>
            </div>
            <div className="feature-text">
              <div className="feature-title">Smart Planning</div>
              <div className="feature-desc">Auto-schedule all your courses across semesters, respecting prerequisites, unit caps, and difficulty balance.</div>
            </div>
          </div>
        </div>

        {/* Social proof / reassurance */}
        <div className="landing-reassurance">
          <div className="reassurance-text">
            Used at IVC · Saddleback · SMC · De Anza and more
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LandingPage });