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

const manuelImg = require('../assets/images/manuel_portrait.jpg');

const QUALIFICATIONS = [
  'Licensed Mental Health Counselor in Germany (Heilpraktiker beschränkt auf das Gebiet der Psychotherapie)',
  'Certified Hypnosis-Master — German Institute of Clinical Hypnosis (Dr. N. Preetz)',
  'Licensed Hypnotherapist and Hypnosis Coach — German Institute of Clinical Hypnosis',
  'Registered Certified Hypnotherapist — National Guild of Hypnotists, Merrimack, New Hampshire, USA',
  'Integrative Psychotherapy (2-year course) — HPA Germany: Talk Therapy, Gestalt, CBT, Depth Psychology, Systemic Therapy, Mindfulness',
  'EMDR in Trauma Therapy and Coaching — EMDR Center Munich',
  'Life Coach Training (1-year course) — Landsiedel NLP Seminars and World of NLP',
  'Acceptance and Commitment Therapy (8-month course) — Dipl. Psych. A. Jankowski',
  'Acceptance and Commitment Therapy (11-month course) — ACT Mindful Space',
  'Yager-Code / Subliminal Therapy by Dr. Yager — German Institute of Clinical Hypnosis',
  'Online Training SEI® — Recognizing and Healing Early Wounds and Developmental Trauma',
  'Fundamentals of Breath Therapy by Ilse Mittendorf',
  'Working with Symbols — Intervention Techniques for Therapy and Coaching',
  'Specialist workshops: Depth Psychology and Dreams, Transactional Analysis, Couples Therapy, Death & Grief, Autogenic Training',
];

export default function AboutScreen() {
  const { openBookingModal } = useBooking();

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

      {/* Portrait Card */}
      <View style={styles.section}>
        <Text style={styles.overline}>The Practitioner</Text>
        <Text style={styles.sectionTitle}>About Me</Text>
        <View style={styles.divider} />
        <Image source={manuelImg} style={styles.portrait} resizeMode="cover" />
        <View style={styles.profileMeta}>
          <Text style={styles.profileName}>Manuel Haeussler</Text>
          <Text style={styles.profileRole}>Mental Health Counselor & Coach</Text>
          <Text style={styles.profileNote}>Age: 39 • From Germany</Text>
        </View>
        <View style={styles.metaRow}>
          <Ionicons name="location-outline" size={15} color={COLORS.slate400} />
          <Text style={styles.metaText}>Based in Kiyovu, Kigali, Rwanda</Text>
        </View>
        <View style={styles.metaRow}>
          <Ionicons name="globe-outline" size={15} color={COLORS.slate400} />
          <Text style={styles.metaText}>In-person & Online worldwide</Text>
        </View>
      </View>

      {/* Bio */}
      <View style={[styles.section, { borderTopWidth: 1, borderTopColor: COLORS.slate200 }]}>
        <View style={styles.sectionHeadRow}>
          <Ionicons name="compass-outline" size={18} color={COLORS.slate500} />
          <Text style={styles.sectionHeading}>My Story</Text>
        </View>
        <Text style={styles.bodyText}>
          My name is Manuel, I am 39 years old and I have been living abroad with my lovely wife in different countries for a couple of years now. We are currently based in Kigali, Rwanda.
        </Text>
        <Text style={styles.bodyText}>
          My career is not really what you'd call a linear trajectory. I graduated from university as a high school and middle school teacher. Shortly after, I forayed into the restaurant business — together with one of my best friends, I co-owned <Text style={styles.bold}>Veggie Bros</Text>, a vegetarian restaurant and catering service, which I sold in the summer of 2024.
        </Text>
        <Text style={styles.bodyText}>
          Over the years it has become more and more clear to me that my purpose in life is to support other human beings and to give back to those less fortunate. Since then I have dedicated my life to this purpose, both professionally and on a personal and voluntary basis.
        </Text>

        {/* Nonprofit */}
        <View style={styles.nonprofitBox}>
          <View style={styles.sectionHeadRow}>
            <Ionicons name="heart-outline" size={16} color={COLORS.slate500} />
            <Text style={styles.nonprofitTitle}>Founder of Give One Back</Text>
          </View>
          <Text style={styles.nonprofitText}>
            A few years ago, I founded a small nonprofit called <Text style={styles.bold}>Give One Back</Text> that supports street children in Bangladesh and I currently act as the president. Since we work entirely voluntarily and unpaid, 100% of donations reach the beneficiaries directly — ensuring local kids get nutrition, education, and safe shelter.
          </Text>
        </View>

        <TouchableOpacity style={styles.btnDark} onPress={openBookingModal}>
          <Text style={styles.btnDarkText}>Connect with Manuel</Text>
        </TouchableOpacity>
      </View>

      {/* Qualifications */}
      <View style={styles.darkSection}>
        <View style={{ alignItems: 'center', gap: SPACING.sm }}>
          <Ionicons name="school" size={40} color={COLORS.slate400} />
          <Text style={styles.darkTitle}>Trainings & Qualifications</Text>
          <Text style={styles.darkSubtitle}>
            As part of my commitment to therapeutic safety and professionalism, I constantly upgrade my expertise through intensive, accredited courses.
          </Text>
          <View style={styles.dividerWhite} />
        </View>

        <View style={styles.timeline}>
          {QUALIFICATIONS.map((q, i) => (
            <View key={i} style={styles.timelineItem}>
              <View style={styles.timelineDot} />
              <View style={styles.timelineCard}>
                <Text style={styles.timelineText}>{q}</Text>
              </View>
            </View>
          ))}
        </View>

        <TouchableOpacity style={[styles.btnLight, { marginTop: SPACING.lg }]} onPress={openBookingModal}>
          <Text style={styles.btnLightText}>Connect with Manuel</Text>
        </TouchableOpacity>
      </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 },
  divider:        { width: 48, height: 2, backgroundColor: COLORS.slate900 },
  dividerWhite:   { width: 48, height: 2, backgroundColor: COLORS.white },
  portrait:       { width: '100%', aspectRatio: 1, backgroundColor: COLORS.slate100 },
  profileMeta:    { gap: 3 },
  profileName:    { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.lg, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  profileRole:    { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate400, textTransform: 'uppercase', letterSpacing: 2 },
  profileNote:    { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, fontStyle: 'italic' },
  metaRow:        { flexDirection: 'row', gap: SPACING.sm, alignItems: 'center' },
  metaText:       { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xs, color: COLORS.slate600 },
  sectionHeadRow: { flexDirection: 'row', gap: SPACING.sm, alignItems: 'center' },
  sectionHeading: { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  bodyText:       { fontFamily: FONTS.serif, fontSize: FONT_SIZE.base, color: COLORS.slate600, lineHeight: 26 },
  bold:           { fontFamily: FONTS.sans, fontWeight: '700', color: COLORS.slate900 },
  nonprofitBox:   { backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, padding: SPACING.md, gap: SPACING.sm },
  nonprofitTitle: { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 2 },
  nonprofitText:  { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate500, lineHeight: 18 },
  darkTitle:      { fontFamily: FONTS.heading, fontWeight: '900', fontSize: FONT_SIZE.xxl, color: COLORS.white, textTransform: 'uppercase', textAlign: 'center', letterSpacing: -0.5 },
  darkSubtitle:   { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate300, textAlign: 'center', lineHeight: 18, maxWidth: 280 },
  timeline:       { borderLeftWidth: 1, borderLeftColor: COLORS.slate700, marginLeft: SPACING.md, gap: SPACING.md },
  timelineItem:   { flexDirection: 'row', gap: SPACING.md, alignItems: 'flex-start' },
  timelineDot:    { width: 10, height: 10, backgroundColor: COLORS.slate400, marginLeft: -5, marginTop: 6 },
  timelineCard:   { flex: 1, backgroundColor: COLORS.slate800, borderWidth: 1, borderColor: COLORS.slate700, padding: SPACING.md },
  timelineText:   { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xs, color: COLORS.slate200, lineHeight: 18 },
  btnDark:        { backgroundColor: COLORS.slate900, paddingVertical: SPACING.sm + 4, alignItems: 'center', justifyContent: 'center' },
  btnDarkText:    { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnLight:       { backgroundColor: COLORS.white, paddingVertical: SPACING.sm + 4, alignItems: 'center', justifyContent: 'center' },
  btnLightText:   { color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
});
