import React from 'react';
import {
  View, Text, ScrollView, TouchableOpacity,
  Image, StyleSheet, Linking, Dimensions,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useBooking } from '../context/BookingContext';
import { COLORS, FONTS, FONT_SIZE, SPACING } from '../theme';

const { width } = Dimensions.get('window');
const wavesImg  = require('../assets/images/ocean_waves.jpg');
const manuelImg = require('../assets/images/manuel_portrait.jpg');

const CHALLENGES = [
  'Anxiousness and worry as constant companions',
  'Chronic tension — feeling physically and mentally on edge',
  'Lack of consistency and focus on goals',
  'Persistent self-doubt and inner criticism',
  'Turning to self-medication to unwind or fall asleep',
  'Low energy and motivation — feeling drained or stuck',
  'Self-sabotage — blocking your own progress',
  'Difficulty sleeping or poor-quality rest',
  'Always on the go, unable to slow down',
];

const OUTCOMES = [
  'Waking up excited about your day with optimism',
  'Regulating your emotions and fears with ease',
  'Experiencing deep inner peace through your days',
  'Following through on intentions even after setbacks',
  'Enjoying meaningful, trusting relationships',
  'Feeling profound, genuine gratitude daily',
  'Building unwavering trust in yourself',
  'Becoming a happier, more fulfilled version of yourself',
];

export default function HomeScreen({ navigation }: any) {
  const { openBookingModal } = useBooking();
  const openWhatsApp = () => Linking.openURL('https://wa.me/250790000000');

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>

      {/* HERO */}
      <View style={styles.hero}>
        <Image source={wavesImg} style={styles.heroBg} resizeMode="cover" />
        <View style={styles.heroOverlay} />
        <View style={styles.heroContent}>
          <View style={styles.heroBadge}>
            <Text style={styles.heroBadgeText}>Welcome to Your Healing Space</Text>
          </View>
          <Text style={styles.heroTitle}>YOUR WAVE</Text>
          <Text style={styles.heroSubtitle}>
            Mental Health Counseling • Trauma Counseling • Hypnosis
          </Text>
          <Text style={styles.heroTagline}>Find Healing, Clarity, and Lasting Change</Text>
          <View style={styles.heroDivider} />
          <Text style={styles.heroBody}>
            Does life feel heavy right now? Maybe you wake up with a sense of dread, wondering how to get through the day. Or maybe everything looks fine on the outside, but inside you feel unfulfilled.
          </Text>
          <Text style={styles.heroBodyBold}>
            It doesn't have to stay this way — you are in the right place here.
          </Text>
          <View style={styles.heroBtns}>
            <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
              <Ionicons name="call" size={15} color={COLORS.white} />
              <Text style={styles.btnDarkText}>Book FREE Call</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnOutline} onPress={openWhatsApp}>
              <Ionicons name="chatbubble-ellipses-outline" size={15} color={COLORS.slate600} />
              <Text style={styles.btnOutlineText}>WhatsApp</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>

      {/* MEET MANUEL */}
      <View style={styles.section}>
        <Text style={styles.overline}>Your Practitioner</Text>
        <Text style={styles.sectionTitle}>Meet Manuel Haeussler</Text>
        <View style={styles.divider} />
        <Image source={manuelImg} style={styles.portrait} resizeMode="cover" />
        <View style={styles.portraitTag}>
          <Text style={styles.portraitTagSub}>Practice Location</Text>
          <Text style={styles.portraitTagMain}>Kiyovu, Kigali</Text>
          <Text style={styles.portraitTagNote}>In Person & Online Worldwide</Text>
        </View>
        <Text style={styles.bodyText}>
          Hello, my name is <Text style={styles.bold}>Manuel Haeussler</Text>. I am a licensed Mental Health Counselor in Germany, certified Hypnotherapist, and Life Coach based in Kigali, Rwanda. Most services are also offered online worldwide.
        </Text>
        <Text style={styles.bodyText}>
          My approach combines evidence-based psychological methods with body-centered and subconscious healing techniques to create meaningful and lasting transformation.
        </Text>

        <View style={styles.specialtyGrid}>
          {[
            { icon: 'heart',    title: 'Clinical Hypnotherapy', desc: 'Tapping into subconscious patterns for deep breakthrough.' },
            { icon: 'sparkles', title: 'Trauma & EMDR',         desc: 'Somatic integration and reprocessing of painful memories.' },
            { icon: 'compass',  title: 'ACT & Coaching',        desc: 'Mindfulness, values clarification, and committed action.' },
            { icon: 'shield-checkmark', title: 'Stress & Burnout', desc: 'Practical nervous system regulation and lifestyle design.' },
          ].map(item => (
            <View key={item.title} style={styles.specialtyCard}>
              <View style={styles.specialtyIcon}>
                <Ionicons name={item.icon as any} size={20} color={COLORS.slate800} />
              </View>
              <View style={{ flex: 1 }}>
                <Text style={styles.specialtyTitle}>{item.title}</Text>
                <Text style={styles.specialtyDesc}>{item.desc}</Text>
              </View>
            </View>
          ))}
        </View>

        <View style={styles.rowBtns}>
          <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
            <Ionicons name="call" size={14} color={COLORS.white} />
            <Text style={styles.btnDarkText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btnOutline} onPress={openWhatsApp}>
            <Ionicons name="chatbubble-ellipses-outline" size={14} color={COLORS.slate600} />
            <Text style={styles.btnOutlineText}>WhatsApp</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* HOW IT WORKS */}
      <View style={styles.darkSection}>
        <Text style={styles.overlineDark}>Multi-Level Integrative Process</Text>
        <Text style={styles.sectionTitleDark}>How It Can Work For You</Text>
        <View style={styles.dividerWhite} />
        {[
          { num: '01', title: 'The Conscious Mind',  body: 'Engaging the conscious mind for understanding, cognitive awareness, and structured action. We evaluate patterns and map out practical day-to-day changes.' },
          { num: '02', title: 'The Subconscious',    body: 'Diving deeper into the subconscious through hypnosis, where many limiting beliefs and old emotional wounds are rooted — so we can gently release them.' },
          { num: '03', title: 'Clarity & Purpose',   body: 'Gaining absolute clarity on the direction you want your life to take — identifying core values, emotional self-regulation, and steps toward a deeply fulfilling life.' },
        ].map(item => (
          <View key={item.num} style={styles.darkCard}>
            <Text style={styles.darkCardNum}>{item.num}</Text>
            <Text style={styles.darkCardTitle}>{item.title}</Text>
            <Text style={styles.darkCardBody}>{item.body}</Text>
          </View>
        ))}
        <Text style={styles.quoteText}>
          "Through this holistic approach of working with the mind, the body, and the subconscious — we don't just alleviate symptoms, but lay the groundwork for lasting change."
        </Text>
        <View style={styles.rowBtns}>
          <TouchableOpacity style={styles.btnLight} onPress={openBookingModal}>
            <Text style={styles.btnLightText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btnOutlineDark} onPress={openWhatsApp}>
            <Text style={styles.btnOutlineDarkText}>WhatsApp</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* CHALLENGES */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>
          If you're here, you're likely in a difficult phase of your life...
        </Text>
        <Text style={styles.sectionSubtitle}>
          ...the challenges listed here are probably very real and familiar. If any of the following resonate, I am confident I can help.
        </Text>
        <View style={styles.divider} />
        {CHALLENGES.map((c, i) => (
          <View key={i} style={styles.checkItem}>
            <View style={styles.checkIcon}>
              <Ionicons name="checkmark" size={13} color={COLORS.slate900} strokeWidth={3} />
            </View>
            <Text style={styles.checkText}>{c}</Text>
          </View>
        ))}
        <TouchableOpacity style={[styles.btnDark, { alignSelf: 'center', marginTop: SPACING.lg }]} onPress={openBookingModal}>
          <Ionicons name="call" size={14} color={COLORS.white} />
          <Text style={styles.btnDarkText}>Schedule FREE Call</Text>
        </TouchableOpacity>
      </View>

      {/* OUTCOMES */}
      <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
        <Text style={styles.sectionTitle}>
          I know it might feel hard to imagine right now...
        </Text>
        <Text style={styles.sectionSubtitle}>
          ...but a meaningful, balanced, healthy, and happy life is absolutely within your reach.
        </Text>
        <View style={styles.divider} />
        {OUTCOMES.map((o, i) => (
          <View key={i} style={styles.outcomeItem}>
            <View style={styles.outcomeIcon}>
              <Ionicons name="checkmark" size={13} color={COLORS.white} />
            </View>
            <Text style={styles.outcomeText}>{o}</Text>
          </View>
        ))}
        <TouchableOpacity style={[styles.btnDark, { alignSelf: 'center', marginTop: SPACING.lg }]} onPress={openBookingModal}>
          <Ionicons name="call" size={14} color={COLORS.white} />
          <Text style={styles.btnDarkText}>Book FREE Call Now</Text>
        </TouchableOpacity>
      </View>

      {/* HOW WE WORK TOGETHER */}
      <View style={styles.darkSection}>
        <Text style={styles.overlineDark}>Step-by-Step Journey</Text>
        <Text style={styles.sectionTitleDark}>This is How We Work Together</Text>
        <View style={styles.dividerWhite} />
        {[
          { step: '1', title: 'Reach Out',               body: 'Fill out my short contact form, send an email, or message me on WhatsApp. We will find a suitable time for a free initial discovery call.', action: 'Contact Me', onPress: () => navigation.navigate('More', { screen: 'Contact' }) },
          { step: '2', title: 'Discovery Call (FREE)',    body: 'A brief 15-minute chat. You share what you\'d like to work on, and I explain my methods. 100% free, zero obligation.', action: 'Book FREE Call', onPress: openBookingModal },
          { step: '3', title: 'Mental Health Coaching',  body: 'We begin our work in person at my private practice in Kiyovu, Kigali, or online via encrypted video call — whichever is most convenient for you.', action: 'WhatsApp Me', onPress: openWhatsApp },
        ].map(item => (
          <View key={item.step} style={styles.darkCard}>
            <View style={styles.stepNumBadge}>
              <Text style={styles.stepNumText}>{item.step}</Text>
            </View>
            <Text style={styles.darkCardTitle}>{item.title}</Text>
            <Text style={styles.darkCardBody}>{item.body}</Text>
            <TouchableOpacity style={styles.darkCardBtn} onPress={item.onPress}>
              <Text style={styles.darkCardBtnText}>{item.action}</Text>
            </TouchableOpacity>
          </View>
        ))}
      </View>

      {/* DISCLAIMER */}
      <View style={[styles.section, { backgroundColor: COLORS.white }]}>
        <View style={styles.disclaimerBox}>
          <Ionicons name="shield-checkmark-outline" size={22} color={COLORS.slate500} style={{ marginTop: 2 }} />
          <View style={{ flex: 1 }}>
            <Text style={styles.disclaimerTitle}>Important Disclaimer</Text>
            <Text style={styles.disclaimerText}>
              I am a licensed Mental Health Counselor (Heilpraktiker für Psychotherapie) in Germany. I am not a licensed psychotherapist in Rwanda. My services are not a substitute for medical, psychological, or psychiatric care. If you are experiencing severe mental health issues or crisis situations, please seek professional help from a licensed healthcare provider in your area.
            </Text>
          </View>
        </View>
      </View>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container:    { flex: 1, backgroundColor: COLORS.white },
  hero:         { minHeight: 520, position: 'relative', justifyContent: 'flex-end' },
  heroBg:       { ...StyleSheet.absoluteFillObject, width: '100%', height: '100%', opacity: 0.12 },
  heroOverlay:  { ...StyleSheet.absoluteFillObject, backgroundColor: COLORS.white, opacity: 0.88 },
  heroContent:  { padding: SPACING.lg, paddingTop: SPACING.xxl, paddingBottom: SPACING.xl, gap: SPACING.sm },
  heroBadge:    { backgroundColor: COLORS.slate100, alignSelf: 'flex-start', paddingHorizontal: SPACING.sm, paddingVertical: 4 },
  heroBadgeText:{ fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate600, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
  heroTitle:    { fontFamily: FONTS.heading, fontSize: FONT_SIZE.hero, fontWeight: '900', color: COLORS.slate900, letterSpacing: -1, textTransform: 'uppercase', lineHeight: 52 },
  heroSubtitle: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate500, fontStyle: 'italic', lineHeight: 24 },
  heroTagline:  { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 3 },
  heroDivider:  { width: 48, height: 2, backgroundColor: COLORS.slate900 },
  heroBody:     { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate600, lineHeight: 22 },
  heroBodyBold: { fontFamily: FONTS.sans, fontSize: FONT_SIZE.sm, color: COLORS.slate900, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1 },
  heroBtns:     { flexDirection: 'row', gap: SPACING.sm, marginTop: SPACING.xs },
  section:      { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md, backgroundColor: COLORS.white },
  darkSection:  { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md, backgroundColor: COLORS.slate900 },
  overline:     { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 3 },
  overlineDark: { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 3 },
  sectionTitle: { fontFamily: FONTS.heading, fontSize: FONT_SIZE.xxl, fontWeight: '900', color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: -0.5, lineHeight: 34 },
  sectionTitleDark: { fontFamily: FONTS.heading, fontSize: FONT_SIZE.xxl, fontWeight: '900', color: COLORS.white, textTransform: 'uppercase', letterSpacing: -0.5, lineHeight: 34 },
  sectionSubtitle:  { fontFamily: FONTS.sans, fontSize: FONT_SIZE.sm, color: COLORS.slate500, lineHeight: 20 },
  divider:      { width: 48, height: 2, backgroundColor: COLORS.slate900 },
  dividerWhite: { width: 48, height: 2, backgroundColor: COLORS.white },
  portrait:     { width: '100%', aspectRatio: 1, backgroundColor: COLORS.slate100 },
  portraitTag:  { backgroundColor: COLORS.slate900, padding: SPACING.md, gap: 2 },
  portraitTagSub:  { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
  portraitTagMain: { fontFamily: FONTS.sans, fontSize: FONT_SIZE.sm, color: COLORS.white, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 2 },
  portraitTagNote: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate300, fontStyle: 'italic' },
  bodyText:     { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate600, lineHeight: 26 },
  bold:         { fontFamily: FONTS.sans, fontWeight: '700', color: COLORS.slate900 },
  specialtyGrid:{ gap: SPACING.sm },
  specialtyCard:{ flexDirection: 'row', gap: SPACING.md, padding: SPACING.md, borderWidth: 1, borderColor: COLORS.slate200, backgroundColor: COLORS.white, alignItems: 'flex-start' },
  specialtyIcon:{ width: 36, height: 36, backgroundColor: COLORS.slate100, alignItems: 'center', justifyContent: 'center' },
  specialtyTitle:{ fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  specialtyDesc: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xxs, color: COLORS.slate500, lineHeight: 16, marginTop: 2 },
  rowBtns:      { flexDirection: 'row', gap: SPACING.sm, marginTop: SPACING.xs },
  btnDark:      { flex: 1, backgroundColor: COLORS.slate900, paddingVertical: SPACING.sm + 4, paddingHorizontal: SPACING.md, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs },
  btnDarkText:  { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnOutline:   { flex: 1, borderWidth: 1, borderColor: COLORS.slate200, paddingVertical: SPACING.sm + 4, paddingHorizontal: SPACING.md, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs, backgroundColor: COLORS.white },
  btnOutlineText: { color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnLight:     { flex: 1, backgroundColor: COLORS.white, paddingVertical: SPACING.sm + 4, paddingHorizontal: SPACING.md, alignItems: 'center', justifyContent: 'center' },
  btnLightText: { color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnOutlineDark: { flex: 1, borderWidth: 1, borderColor: COLORS.slate700, paddingVertical: SPACING.sm + 4, paddingHorizontal: SPACING.md, alignItems: 'center', justifyContent: 'center' },
  btnOutlineDarkText: { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  darkCard:     { backgroundColor: COLORS.slate800, borderWidth: 1, borderColor: COLORS.slate700, padding: SPACING.lg, gap: SPACING.sm },
  darkCardNum:  { fontFamily: FONTS.heading, fontSize: FONT_SIZE.lg, fontWeight: '700', color: COLORS.slate400 },
  darkCardTitle:{ fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.base, color: COLORS.white, textTransform: 'uppercase', letterSpacing: 1 },
  darkCardBody: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate300, lineHeight: 20 },
  darkCardBtn:  { backgroundColor: COLORS.slate700, paddingVertical: SPACING.sm, paddingHorizontal: SPACING.md, alignSelf: 'flex-start', marginTop: SPACING.xs },
  darkCardBtnText: { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  quoteText:    { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate300, fontStyle: 'italic', lineHeight: 22, textAlign: 'center', paddingHorizontal: SPACING.sm },
  stepNumBadge: { width: 28, height: 28, backgroundColor: COLORS.white, alignItems: 'center', justifyContent: 'center', alignSelf: 'flex-end' },
  stepNumText:  { fontFamily: FONTS.sans, fontWeight: '900', fontSize: FONT_SIZE.sm, color: COLORS.slate900 },
  checkItem:    { flexDirection: 'row', gap: SPACING.sm, alignItems: 'flex-start', paddingVertical: SPACING.xs, paddingHorizontal: SPACING.sm, backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200 },
  checkIcon:    { width: 22, height: 22, backgroundColor: COLORS.slate200, alignItems: 'center', justifyContent: 'center', marginTop: 1 },
  checkText:    { flex: 1, fontFamily: FONTS.sans, fontSize: FONT_SIZE.xs, color: COLORS.slate700, lineHeight: 18 },
  outcomeItem:  { flexDirection: 'row', gap: SPACING.sm, alignItems: 'flex-start', paddingVertical: SPACING.sm, paddingHorizontal: SPACING.sm, borderWidth: 1, borderColor: COLORS.slate200, backgroundColor: COLORS.white },
  outcomeIcon:  { width: 22, height: 22, backgroundColor: COLORS.slate900, alignItems: 'center', justifyContent: 'center', marginTop: 1 },
  outcomeText:  { flex: 1, fontFamily: FONTS.sans, fontWeight: '600', fontSize: FONT_SIZE.xxs, color: COLORS.slate800, textTransform: 'uppercase', letterSpacing: 1, lineHeight: 16 },
  disclaimerBox:{ flexDirection: 'row', gap: SPACING.md, backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.md },
  disclaimerTitle: { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1, marginBottom: SPACING.xs },
  disclaimerText:  { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
});
