import React from 'react';
import { Link } from 'react-router-dom';

export default function LandingPage() {
  return (
    <div className="vh-100 bg-light d-flex flex-column">
      <main className="flex-grow-1 d-flex align-items-center justify-content-center p-4">
        <div className="text-center" style={{ maxWidth: '600px' }}>
          <h1 className="fw-bold display-5 mb-3" style={{ color: '#333' }}>
            Your Personal <br />
            <span className="text-primary" style={{color:'#00b4d8'}}>AI Doc/PDF</span> <br />
            Generator
          </h1>
          <p className="text-muted mb-4" style={{ fontSize: '0.9rem' }}>
            Generate professional documents quickly and efficiently with AI.
          </p>

          <div className="d-flex flex-wrap gap-3 justify-content-center">

            <Link
              to="/login"
              className="btn btn-lg px-4 rounded-pill fw-bold"
              style={{
                backgroundColor: '#00b4d8',
                borderColor: '#00b4d8',
                color: 'white',
                textDecoration: 'none', // removes underline
                display: 'inline-block', // ensures button-like behavior
              }}
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = '#009ecf';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = '#00b4d8';
              }}
            >
              Log in →
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
}