export default function Home() {
  return (
    <main style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' }}>
      {/* Header */}
      <header style={{ padding: '1.5rem 2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#10b981' }}>
          🌿 SagePHR
        </div>
        <nav style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
          <a href="#features" style={{ color: '#e2e8f0', textDecoration: 'none' }}>Features</a>
          <a href="#pricing" style={{ color: '#e2e8f0', textDecoration: 'none' }}>Pricing</a>
          <a href="#waitlist" style={{ 
            background: '#10b981', 
            color: '#0f172a', 
            padding: '0.5rem 1rem', 
            borderRadius: '0.5rem',
            textDecoration: 'none',
            fontWeight: 600
          }}>
            Join Waitlist
          </a>
        </nav>
      </header>

      {/* Hero */}
      <section style={{ 
        maxWidth: '1200px', 
        margin: '0 auto', 
        padding: '6rem 2rem',
        textAlign: 'center'
      }}>
        <h1 style={{ 
          fontSize: '3.5rem', 
          fontWeight: 'bold', 
          color: '#f8fafc',
          marginBottom: '1.5rem',
          lineHeight: 1.2
        }}>
          Stop hunting for medical records.<br />
          <span style={{ color: '#10b981' }}>Start owning your health history.</span>
        </h1>
        <p style={{ 
          fontSize: '1.25rem', 
          color: '#94a3b8',
          maxWidth: '700px',
          margin: '0 auto 2rem'
        }}>
          Your Personal Health Record — a secure, AI-enhanced repository for all your medical data. 
          One place for lab results, medications, diagnoses, and emergency access.
        </p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
          <a href="#waitlist" style={{
            background: '#10b981',
            color: '#0f172a',
            padding: '1rem 2rem',
            borderRadius: '0.5rem',
            fontSize: '1.1rem',
            fontWeight: 600,
            textDecoration: 'none'
          }}>
            Join Waitlist — 50% Off Forever
          </a>
          <a href="#features" style={{
            border: '1px solid #475569',
            color: '#e2e8f0',
            padding: '1rem 2rem',
            borderRadius: '0.5rem',
            fontSize: '1.1rem',
            textDecoration: 'none'
          }}>
            Learn More
          </a>
        </div>
      </section>

      {/* Problem */}
      <section style={{ 
        background: 'rgba(15, 23, 42, 0.5)', 
        padding: '4rem 2rem',
        borderTop: '1px solid #1e293b',
        borderBottom: '1px solid #1e293b'
      }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '2rem' }}>
            The Problem
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '2rem' }}>
            <div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
              <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📁</div>
              <div style={{ color: '#94a3b8' }}>
                Average patient has records scattered across <strong style={{ color: '#f8fafc' }}>5-7 providers</strong>
              </div>
            </div>
            <div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
              <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📋</div>
              <div style={{ color: '#94a3b8' }}>
                <strong style={{ color: '#f8fafc' }}>1 in 4 Americans</strong> have incomplete medical histories
              </div>
            </div>
            <div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
              <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>🔍</div>
              <div style={{ color: '#94a3b8' }}>
                Paper records get <strong style={{ color: '#f8fafc' }}>lost, faxed, forgotten</strong>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" style={{ maxWidth: '1200px', margin: '0 auto', padding: '5rem 2rem' }}>
        <h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '3rem', textAlign: 'center' }}>
          One Secure Place for Everything
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
          <FeatureCard 
            emoji="🧪"
            title="Lab Results & Imaging"
            description="Store and organize all your test results with AI-powered trend analysis"
          />
          <FeatureCard 
            emoji="💊"
            title="Medication History"
            description="Complete record of prescriptions, dosages, and allergies"
          />
          <FeatureCard 
            emoji="🩺"
            title="Doctor Visits & Diagnoses"
            description="Timeline of all your medical encounters and conditions"
          />
          <FeatureCard 
            emoji="👨‍👩‍👧‍👦"
            title="Family Health History"
            description="Track hereditary conditions and share with providers"
          />
          <FeatureCard 
            emoji="🚨"
            title="Emergency Access"
            description="Share critical info with family and first responders instantly"
          />
          <FeatureCard 
            emoji="🤖"
            title="AI-Powered Insights"
            description="Get personalized health insights from your data"
          />
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" style={{ 
        background: 'rgba(16, 185, 129, 0.1)', 
        padding: '5rem 2rem',
        textAlign: 'center'
      }}>
        <div style={{ maxWidth: '600px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '1rem' }}>
            Simple, Transparent Pricing
          </h2>
          <p style={{ color: '#94a3b8', marginBottom: '2rem' }}>
            Launch Q3 2026 • Early adopter pricing
          </p>
          <div style={{ 
            background: 'rgba(15, 23, 42, 0.8)', 
            padding: '3rem', 
            borderRadius: '1rem',
            border: '2px solid #10b981'
          }}>
            <div style={{ fontSize: '3rem', fontWeight: 'bold', color: '#10b981' }}>
              $9<span style={{ fontSize: '1.25rem', color: '#94a3b8' }}>/month</span>
            </div>
            <div style={{ color: '#f8fafc', marginTop: '0.5rem', marginBottom: '1.5rem' }}>
              50% off forever for early adopters
            </div>
            <ul style={{ 
              listStyle: 'none', 
              padding: 0, 
              textAlign: 'left',
              color: '#e2e8f0',
              marginBottom: '2rem'
            }}>
              <li style={{ padding: '0.5rem 0' }}>✅ Unlimited health records</li>
              <li style={{ padding: '0.5rem 0' }}>✅ AI-powered health insights</li>
              <li style={{ padding: '0.5rem 0' }}>✅ Family sharing (up to 5 members)</li>
              <li style={{ padding: '0.5rem 0' }}>✅ Export to any provider (PDF, FHIR, C-CDA)</li>
              <li style={{ padding: '0.5rem 0' }}>✅ Emergency access QR code</li>
            </ul>
            <a href="#waitlist" style={{
              display: 'inline-block',
              background: '#10b981',
              color: '#0f172a',
              padding: '1rem 2rem',
              borderRadius: '0.5rem',
              fontSize: '1.1rem',
              fontWeight: 600,
              textDecoration: 'none'
            }}>
              Reserve Your Spot
            </a>
          </div>
        </div>
      </section>

      {/* Waitlist */}
      <section id="waitlist" style={{ maxWidth: '600px', margin: '0 auto', padding: '5rem 2rem', textAlign: 'center' }}>
        <h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '1rem' }}>
          Join the Waitlist
        </h2>
        <p style={{ color: '#94a3b8', marginBottom: '2rem' }}>
          First 500 get lifetime 50% discount. No spam, just updates on launch.
        </p>
        <form action="https://formspree.io/f/xpwzgvqr" method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <input 
            type="email" 
            name="email" 
            placeholder="Enter your email"
            required
            style={{
              padding: '1rem',
              borderRadius: '0.5rem',
              border: '1px solid #475569',
              background: 'rgba(15, 23, 42, 0.5)',
              color: '#f8fafc',
              fontSize: '1rem'
            }}
          />
          <button 
            type="submit"
            style={{
              background: '#10b981',
              color: '#0f172a',
              padding: '1rem',
              borderRadius: '0.5rem',
              border: 'none',
              fontSize: '1.1rem',
              fontWeight: 600,
              cursor: 'pointer'
            }}
          >
            Join Waitlist
          </button>
        </form>
      </section>

      {/* Footer */}
      <footer style={{ 
        borderTop: '1px solid #1e293b', 
        padding: '2rem',
        textAlign: 'center',
        color: '#64748b'
      }}>
        <div style={{ marginBottom: '1rem' }}>
          🌿 SagePHR
        </div>
        <div style={{ fontSize: '0.875rem' }}>
          © 2026 SagePHR. Your health data, your control.
        </div>
      </footer>
    </main>
  )
}

function FeatureCard({ emoji, title, description }: { emoji: string; title: string; description: string }) {
  return (
    <div style={{ 
      padding: '1.5rem', 
      background: 'rgba(30, 41, 59, 0.5)', 
      borderRadius: '0.75rem',
      border: '1px solid #334155'
    }}>
      <div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>{emoji}</div>
      <h3 style={{ color: '#f8fafc', margin: '0 0 0.5rem', fontSize: '1.1rem' }}>{title}</h3>
      <p style={{ color: '#94a3b8', margin: 0, fontSize: '0.95rem' }}>{description}</p>
    </div>
  )
}