import React, { useState } from 'react';
import {
  View,
  ScrollView,
  Text,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContent: {
    paddingBottom: 20,
  },
  heroSection: {
    backgroundColor: '#ffffff',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  heroTitle: {
    fontSize: 28,
    fontWeight: '700',
    color: '#000',
    marginBottom: 10,
  },
  heroSubtitle: {
    fontSize: 16,
    color: '#666',
    lineHeight: 24,
    marginBottom: 15,
  },
  primaryButton: {
    backgroundColor: '#0066cc',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    alignItems: 'center',
  },
  primaryButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  section: {
    marginTop: 20,
    paddingHorizontal: 15,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#000',
    marginBottom: 12,
  },
  sectionDescription: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
    marginBottom: 12,
  },
  cardContainer: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    borderLeftWidth: 4,
    borderLeftColor: '#0066cc',
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000',
    marginBottom: 8,
  },
  cardDescription: {
    fontSize: 13,
    color: '#666',
    lineHeight: 18,
  },
  featureGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  featureCard: {
    width: '48%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    alignItems: 'center',
  },
  featureIcon: {
    fontSize: 32,
    marginBottom: 8,
  },
  featureTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#000',
    textAlign: 'center',
  },
  ctaButton: {
    backgroundColor: '#0066cc',
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 6,
    marginTop: 8,
  },
  ctaButtonText: {
    color: '#fff',
    fontSize: 13,
    fontWeight: '600',
    textAlign: 'center',
  },
});

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <ScrollView style={styles.scrollContent} showsVerticalScrollIndicator={false}>
        {/* Hero Section */}
        <View style={styles.heroSection}>
          <Text style={styles.heroTitle}>You are more than a diagnosis.</Text>
          <Text style={styles.heroSubtitle}>
            Connecting Through Stories, Thriving Through Community
          </Text>
          <TouchableOpacity style={styles.primaryButton}>
            <Text style={styles.primaryButtonText}>Join Our Community</Text>
          </TouchableOpacity>
        </View>

        {/* Happy Mail Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>💌 Happy Mail</Text>
          <View style={styles.cardContainer}>
            <Text style={styles.cardTitle}>Free Joy-Filled Snail Mail</Text>
            <Text style={styles.cardDescription}>
              Nerisa sends personalized snail mail to folks navigating cancer and chronic illness.
            </Text>
            <Text style={[styles.cardDescription, { marginTop: 8, fontWeight: '600' }]}>
              Who can receive:
            </Text>
            <Text style={[styles.cardDescription, { marginTop: 4 }]}>
              ✓ Cancer diagnosis or treatment{'\n'}
              ✓ Chronic illness or rare disease{'\n'}
              ✓ Medical limbo or recovery
            </Text>
            <TouchableOpacity style={styles.ctaButton}>
              <Text style={styles.ctaButtonText}>Order Happy Mail</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* Connect Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>🤝 Connect</Text>
          <View style={styles.cardContainer}>
            <Text style={styles.cardTitle}>Safe & Supportive Space</Text>
            <Text style={styles.cardDescription}>
              "We're here to create a safe, supportive space where you can connect with others, share your story, and find hope. Cancer and chronic illness can feel so isolating, but together, we're stronger."
            </Text>
            <TouchableOpacity style={styles.ctaButton}>
              <Text style={styles.ctaButtonText}>Learn More</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* Podcast Section */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>🎙️ Podcast</Text>
          <View style={styles.cardContainer}>
            <Text style={styles.cardTitle}>More Than A Diagnosis Podcast</Text>
            <Text style={styles.cardDescription}>
              Hosted by Jes and Den, who share real stories about life beyond the medical chart.
            </Text>
            <TouchableOpacity style={styles.ctaButton}>
              <Text style={styles.ctaButtonText}>Listen Now</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* Features Grid */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>What We Offer</Text>
          <View style={styles.featureGrid}>
            <View style={styles.featureCard}>
              <Text style={styles.featureIcon}>📚</Text>
              <Text style={styles.featureTitle}>Resources</Text>
              <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                Curated support materials
              </Text>
            </View>

            <View style={styles.featureCard}>
              <Text style={styles.featureIcon}>👥</Text>
              <Text style={styles.featureTitle}>Community</Text>
              <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                Support groups & circles
              </Text>
            </View>

            <View style={styles.featureCard}>
              <Text style={styles.featureIcon}>📖</Text>
              <Text style={styles.featureTitle}>Stories</Text>
              <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                The Journal & experiences
              </Text>
            </View>

            <View style={styles.featureCard}>
              <Text style={styles.featureIcon}>🎁</Text>
              <Text style={styles.featureTitle}>Shop</Text>
              <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
                Purpose-driven apparel
              </Text>
            </View>
          </View>
        </View>

        {/* Wings of Remembrance */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>🕊️ Wings of Remembrance</Text>
          <View style={styles.cardContainer}>
            <Text style={styles.cardTitle}>Honor Those Who Shaped Us</Text>
            <Text style={styles.cardDescription}>
              Share a tribute, memory, or reflection to honor those who shaped our journey.
            </Text>
            <TouchableOpacity style={styles.ctaButton}>
              <Text style={styles.ctaButtonText}>Share Your Tribute</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}