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

const PRINCIPLES = [
  {
    icon: 'brain',
    title: 'Addressing Both Conscious and Subconscious Mind',
    desc: 'Our conscious intellect helps us plan and analyze, while our subconscious holds deeper emotional roots and unresolved memories. Working with both ensures understanding aligns with emotional reality.',
  },
  {
    icon: 'body',
    title: 'Including the Physical Body in Healing',
    desc: 'Trauma, stress, and anxiety live in the nervous system and manifest as physical tension. Somatic safety exercises are introduced from session one.',
  },
  {
    icon: 'compass',
    title: 'Cultivating Mindfulness and Awareness',
    desc: 'Learning to anchor yourself in the present moment breaks the cycle of rumination, quietens the mind, and lowers systemic stress.',
  },
  {
    icon: 'heart',
    title: 'Gaining Clarity About Core Values',
    desc: 'Healing is about empowerment. We clarify your authentic priorities so you can build a stable, joyful direction for your career, relationships, and well-being.',
  },
];

const METHODS = [
  { id: 'hypnosis',    label: 'Hypnosis / Hypnotherapy',      sub: 'Deep Subconscious Alignment' },
  { id: 'emdr',        label: 'EMDR Reprocessing',             sub: 'Trauma & Memory Resolution' },
  { id: 'act',         label: 'ACT Therapy',                   sub: 'Mindfulness & Values in Action' },
  { id: 'yager',       label: 'Yager Therapy',                 sub: 'Subliminal Higher Intelligence' },
  { id: 'mindfulness', label: 'Mindfulness & Breath',          sub: 'Somatic Nervous System Reset' },
  { id: 'coaching',    label: 'Life Coaching',                 sub: 'Focus, Clarity & Growth' },
];

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

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

      {/* Page Intro */}
      <View style={styles.section}>
        <Text style={styles.overline}>Healing Philosophy</Text>
        <Text style={styles.sectionTitle}>My Approach</Text>
        <View style={styles.divider} />
        <Text style={styles.bodyText}>
          As a Mental Health Counselor, certified in Integrative Psychotherapy, Hypnotherapist, Life Coach, and trained in trauma-sensitive work — I have developed a unique and holistic approach.
        </Text>
        <Text style={styles.bodyText}>
          I firmly believe in the innate goodness within each and every one of us. I trust that you already hold the wisdom and power to heal and evolve — even if that feels far from your current experience.
        </Text>
        <Text style={styles.bodyText}>
          I am convinced that there is no one-size-fits-all solution in Mental Health Counseling. This is why I draw from a wide range of approaches and techniques from both psychotherapy and coaching — making my approach truly integrative and holistic.
        </Text>

        {/* Quote */}
        <View style={styles.quoteBox}>
          <Text style={styles.quoteText}>
            "I do not look at you as a set of symptoms or a diagnosis that needs fixing. I look at you as a complete human being with an organic, natural capacity for resilience. Together, we remove the blocks preventing your natural healing waves from carrying you forward."
          </Text>
          <Text style={styles.quoteAttrib}>— Manuel Haeussler</Text>
        </View>

        <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
          <Text style={styles.btnDarkText}>Book Your FREE Call</Text>
        </TouchableOpacity>
      </View>

      {/* Key Principles */}
      <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
        <Text style={styles.overline}>Core Pillars</Text>
        <Text style={styles.sectionTitle}>Key Principles of My Approach</Text>
        <View style={styles.divider} />
        {PRINCIPLES.map((p, i) => (
          <View key={i} style={styles.principleCard}>
            <View style={styles.principleIcon}>
              <Ionicons name={p.icon as any} size={22} color={COLORS.slate800} />
            </View>
            <Text style={styles.principleTitle}>{p.title}</Text>
            <Text style={styles.principleDesc}>{p.desc}</Text>
          </View>
        ))}
      </View>

      {/* Unique Value */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>What is the Unique Value of This Approach?</Text>
        <View style={styles.divider} />
        <Text style={styles.bodyText}>
          What makes this approach so powerful is how mind, body, and subconscious work come together. By addressing all three dimensions simultaneously, we don't just alleviate symptoms — we lay the groundwork for lasting change.
        </Text>
        <View style={styles.infoBox}>
          <Text style={styles.infoBoxTitle}>A Trauma-Sensitive Foundation</Text>
          <Text style={styles.infoBoxText}>
            I take a trauma-sensitive approach, carefully supporting you at a pace that feels right for you, respecting your boundaries and readiness. Together, we focus on building safety, inner strength, and supportive resources first.
          </Text>
        </View>
        <Text style={styles.bodyText}>
          Many clients have shared how they've discovered a renewed sense of clarity, joy, and purpose — feeling liberated from what has held them back.
        </Text>
        <View style={styles.rowBtns}>
          <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
            <Text style={styles.btnDarkText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btnOutline} onPress={openWhatsApp}>
            <Text style={styles.btnOutlineText}>WhatsApp</Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* Methods Overview */}
      <View style={styles.darkSection}>
        <Text style={styles.sectionTitleDark}>
          Learn More About the Methods I Use
        </Text>
        <View style={styles.dividerWhite} />
        {METHODS.map(m => (
          <TouchableOpacity
            key={m.id}
            style={styles.methodBtn}
            onPress={() => navigation.navigate('Methods', { selectedMethod: m.id })}
          >
            <View>
              <Text style={styles.methodBtnLabel}>{m.label}</Text>
              <Text style={styles.methodBtnSub}>{m.sub}</Text>
            </View>
            <Ionicons name="chevron-forward" size={16} color={COLORS.slate400} />
          </TouchableOpacity>
        ))}
      </View>

      {/* Detailed Methods Sections */}
      <View style={[styles.section, { backgroundColor: COLORS.slate50 }]}>
        {[
          { title: 'Body-Centered Somatic Regulation', body: 'Psychological and emotional challenges are often approached on a purely mental level. However, for change to be lasting and meaningful, the body must also be part of the healing journey. From the very first session, I introduce practical exercises you can use on your own to calm your nervous system and regulate emotions.' },
          { title: 'Engaging the Subconscious (Hypnosis & Yager)', body: 'The subconscious is where our life experiences, deep-seated beliefs, and automatic patterns reside. Through Hypnosis or Yager Therapy, we can access the subconscious to identify and heal maladaptive patterns. Hypnosis has been scientifically validated for its effectiveness in facilitating profound, lasting change.' },
          { title: 'EMDR — Eye Movement Desensitization and Reprocessing', body: 'EMDR helps process and resolve distressing memories using bilateral stimulation. Unlike traditional talk therapy, EMDR works at a much deeper level, enabling your brain to reprocess painful memories so they lose their emotional charge and intensity.' },
          { title: 'ACT & Cognitive Flexibility', body: 'ACT is an evolution of Cognitive Behavioral Therapy that bridges evidence-based psychology with mindfulness. You will learn to accept difficult emotions and step away from unhelpful thought patterns — then take meaningful action toward your goals aligned with your core values.' },
        ].map((item, i) => (
          <View key={i} style={styles.detailBox}>
            <Text style={styles.detailTitle}>{item.title}</Text>
            <Text style={styles.detailText}>{item.body}</Text>
          </View>
        ))}
        <View style={styles.rowBtns}>
          <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
            <Text style={styles.btnDarkText}>Book FREE Call</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.btnOutline} onPress={openWhatsApp}>
            <Text style={styles.btnOutlineText}>WhatsApp</Text>
          </TouchableOpacity>
        </View>
      </View>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container:    { flex: 1, backgroundColor: COLORS.white },
  section:      { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md },
  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 },
  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.xl, fontWeight: '900', color: COLORS.white, textTransform: 'uppercase', lineHeight: 30 },
  divider:      { width: 48, height: 2, backgroundColor: COLORS.slate900 },
  dividerWhite: { width: 48, height: 2, backgroundColor: COLORS.white },
  bodyText:     { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate600, lineHeight: 26 },
  quoteBox:     { borderLeftWidth: 2, borderLeftColor: COLORS.slate900, backgroundColor: COLORS.slate50, padding: SPACING.md, gap: SPACING.sm },
  quoteText:    { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate700, fontStyle: 'italic', lineHeight: 24 },
  quoteAttrib:  { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  principleCard:{ borderWidth: 1, borderColor: COLORS.slate200, backgroundColor: COLORS.white, padding: SPACING.md, gap: SPACING.sm },
  principleIcon:{ width: 44, height: 44, backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, alignItems: 'center', justifyContent: 'center' },
  principleTitle:{ fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1, lineHeight: 18 },
  principleDesc: { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
  infoBox:      { backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.md, gap: SPACING.xs },
  infoBoxTitle: { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  infoBoxText:  { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
  methodBtn:    { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: COLORS.slate800, borderWidth: 1, borderColor: COLORS.slate700, padding: SPACING.md },
  methodBtnLabel:{ fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.white, textTransform: 'uppercase', letterSpacing: 1 },
  methodBtnSub:  { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, fontStyle: 'italic', marginTop: 2 },
  detailBox:    { backgroundColor: COLORS.white, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.md, gap: SPACING.sm },
  detailTitle:  { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  detailText:   { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
  rowBtns:      { flexDirection: 'row', gap: SPACING.sm },
  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, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.white },
  btnOutlineText:{ color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
});
