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 MENU_ITEMS = [
  { label: 'Testimonials',  icon: 'chatbubble-ellipses-outline', sub: 'Read what clients say',           screen: 'Testimonials' },
  { label: 'Costs',         icon: 'card-outline',                sub: 'Pricing, location & packages',    screen: 'Costs' },
  { label: 'Blog',          icon: 'newspaper-outline',           sub: 'Articles on mental well-being',   screen: 'Blog' },
  { label: 'Contact',       icon: 'mail-outline',                sub: 'Send a message or book a call',   screen: 'Contact' },
];

export default function MoreScreen({ navigation }: any) {
  const { openBookingModal } = useBooking();
  const openWhatsApp = () => Linking.openURL('https://wa.me/250790000000');
  const openEmail    = () => Linking.openURL('mailto:mail@yourwave-coaching.com');
  const openWebsite  = () => Linking.openURL('https://www.yourwave-coaching.com');

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

      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.wordmark}>YOUR WAVE</Text>
        <Text style={styles.tagline}>Mental Health · Trauma Counseling · Hypnosis</Text>
      </View>

      {/* Navigation Links */}
      <View style={styles.section}>
        <Text style={styles.sectionLabel}>More Pages</Text>
        {MENU_ITEMS.map(item => (
          <TouchableOpacity
            key={item.screen}
            style={styles.menuRow}
            onPress={() => navigation.navigate(item.screen)}
          >
            <View style={styles.menuIconWrap}>
              <Ionicons name={item.icon as any} size={20} color={COLORS.slate700} />
            </View>
            <View style={styles.menuText}>
              <Text style={styles.menuLabel}>{item.label}</Text>
              <Text style={styles.menuSub}>{item.sub}</Text>
            </View>
            <Ionicons name="chevron-forward" size={16} color={COLORS.slate400} />
          </TouchableOpacity>
        ))}
      </View>

      {/* CTA Block */}
      <View style={styles.ctaSection}>
        <Text style={styles.ctaTitle}>Start Your Healing Journey</Text>
        <Text style={styles.ctaBody}>
          Ready to take the first step? Book a free 15-minute discovery call — zero obligation, completely confidential.
        </Text>
        <TouchableOpacity style={styles.btnPrimary} onPress={openBookingModal}>
          <Ionicons name="call" size={15} color={COLORS.white} />
          <Text style={styles.btnPrimaryText}>Book FREE Discovery Call</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.btnSecondary} onPress={openWhatsApp}>
          <Ionicons name="chatbubble-ellipses-outline" size={15} color={COLORS.slate900} />
          <Text style={styles.btnSecondaryText}>Message on WhatsApp</Text>
        </TouchableOpacity>
      </View>

      {/* Contact Details */}
      <View style={styles.section}>
        <Text style={styles.sectionLabel}>Contact Details</Text>

        <TouchableOpacity style={styles.contactRow} onPress={openEmail}>
          <Ionicons name="mail-outline" size={18} color={COLORS.slate400} />
          <Text style={styles.contactText}>mail@yourwave-coaching.com</Text>
          <Ionicons name="open-outline" size={14} color={COLORS.slate400} />
        </TouchableOpacity>

        <TouchableOpacity style={styles.contactRow} onPress={openWebsite}>
          <Ionicons name="globe-outline" size={18} color={COLORS.slate400} />
          <Text style={styles.contactText}>www.yourwave-coaching.com</Text>
          <Ionicons name="open-outline" size={14} color={COLORS.slate400} />
        </TouchableOpacity>

        <View style={styles.contactRow}>
          <Ionicons name="location-outline" size={18} color={COLORS.slate400} />
          <Text style={styles.contactText}>Kiyovu, Kigali, Rwanda · In Person & Online</Text>
        </View>
      </View>

      {/* Footer */}
      <View style={styles.footer}>
        <Text style={styles.footerText}>
          Copyright © 2026 Manuel Haeussler. All rights reserved.
        </Text>
        <TouchableOpacity onPress={() => navigation.navigate('Contact')}>
          <Text style={styles.footerLink}>Imprint & Privacy Policy</Text>
        </TouchableOpacity>
      </View>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container:      { flex: 1, backgroundColor: COLORS.white },
  header:         { backgroundColor: COLORS.slate900, padding: SPACING.xl, gap: SPACING.xs },
  wordmark:       { fontFamily: FONTS.heading, fontWeight: '900', fontSize: FONT_SIZE.xxl, color: COLORS.white, letterSpacing: -0.5, textTransform: 'uppercase' },
  tagline:        { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xs, color: COLORS.slate400, fontStyle: 'italic' },
  section:        { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.sm, borderBottomWidth: 1, borderBottomColor: COLORS.slate200 },
  sectionLabel:   { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate400, textTransform: 'uppercase', letterSpacing: 3, marginBottom: SPACING.xs },
  menuRow:        { flexDirection: 'row', alignItems: 'center', gap: SPACING.md, paddingVertical: SPACING.sm + 2, borderBottomWidth: 1, borderBottomColor: COLORS.slate100 },
  menuIconWrap:   { width: 40, height: 40, backgroundColor: COLORS.slate50, borderWidth: 1, borderColor: COLORS.slate200, alignItems: 'center', justifyContent: 'center' },
  menuText:       { flex: 1, gap: 2 },
  menuLabel:      { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.sm, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: 1 },
  menuSub:        { fontFamily: FONTS.serif, fontSize: FONT_SIZE.xxs, color: COLORS.slate500 },
  ctaSection:     { backgroundColor: COLORS.slate50, padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.md, borderBottomWidth: 1, borderBottomColor: COLORS.slate200 },
  ctaTitle:       { fontFamily: FONTS.heading, fontWeight: '900', fontSize: FONT_SIZE.xl, color: COLORS.slate900, textTransform: 'uppercase', letterSpacing: -0.5 },
  ctaBody:        { fontFamily: FONTS.serif, fontSize: FONT_SIZE.sm, color: COLORS.slate500, lineHeight: 20 },
  btnPrimary:     { backgroundColor: COLORS.slate900, paddingVertical: SPACING.sm + 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs },
  btnPrimaryText: { color: COLORS.white, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  btnSecondary:   { borderWidth: 1, borderColor: COLORS.slate200, paddingVertical: SPACING.sm + 4, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: SPACING.xs, backgroundColor: COLORS.white },
  btnSecondaryText:{ color: COLORS.slate900, fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, textTransform: 'uppercase', letterSpacing: 2 },
  contactRow:     { flexDirection: 'row', gap: SPACING.md, alignItems: 'center', paddingVertical: SPACING.xs },
  contactText:    { flex: 1, fontFamily: FONTS.sans, fontSize: FONT_SIZE.sm, color: COLORS.slate700 },
  footer:         { padding: SPACING.lg, paddingVertical: SPACING.xl, gap: SPACING.sm, alignItems: 'center' },
  footerText:     { fontFamily: FONTS.sans, fontSize: FONT_SIZE.xxs, color: COLORS.slate400, textAlign: 'center' },
  footerLink:     { fontFamily: FONTS.sans, fontWeight: '700', fontSize: FONT_SIZE.xxs, color: COLORS.slate600, textTransform: 'uppercase', letterSpacing: 1, textDecorationLine: 'underline' },
});
