crazycharge-app/component/accountPages/userTermsPageComponent.tsx

import { View, Text, ScrollView, Pressable, Button, Alert, StyleSheet } from 'react-native';
import React, { useContext } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg, RightArrowIconSvg } from '../global/SVG';
import NormalButton from '../global/normal_button';

type TermsSectionProps = {
  title: string| undefined;
  clauses: string[];
};

const TermsSection: React.FC<TermsSectionProps> = ({ title, clauses }) => (
  <View className="mb-3">
    {title && (
      <Text style={styles.sectionTitle}>{title}</Text>
    )}
    {clauses.map((clause, index) => (
      <Text key={index} style={styles.clause}>
        {clause}
      </Text>
    ))}
  </View>
);
const UserTermsPageComponent: React.FC<{ onAgree: () => void }> = ({ onAgree }) => {
  const sections = [
    {
      clauses: [
        '歡迎使用 Crazy Charge（以下簡稱「本公司」或「我們」）提供的電動車充電服務（以下簡稱「服務」）。請仔細閱讀以下條款及細則（以下簡稱「本條款」），使用 Crazy Charge 此應用程式即表示您同意遵守本條款的所有內容。'
      ]
    },
    {
      title: '1. 服務使用',
      clauses: [
        '1.1 賬戶與服務接入：用戶須透過本公司APP進行充值、付款及啓動充電服務。',
        '1.2 賬戶資料責任：用戶須確保所提供的資料真實、準確及完整，並對其帳戶的一切活動負責。',
        '1.3 服務變更權限：本公司保留隨時修改、暫停或終止服務的權利，而無須事先通知用戶。'
      ]
    },
    {
      title: '2. 充值及付款',
      clauses: [
        '2.1 充值與餘額：用戶可透過APP進行充值，充值金額將存入用戶帳戶。',
        '2.2 充值金額有效期：充值金額沒有使用期限。',
        '2.3 優惠政策：本公司可能不時提供優惠，相關優惠受特定條款約束。'
      ]
    },
    {
      title: '3. 退款政策',
      clauses: [
        '3.1 退款申請方式：如用戶要求退款，須透過WhatsApp提交申請。',
        '3.2 退款優惠扣除：退款金額將扣除該次充值所涉及的所有優惠。',
        '3.3 退款行政費用：每筆退款將收取港幣150元作為行政費用。',
        '3.4 退款建議：建議用戶將未使用的充值金額留作日後使用。',
        '3.5 退款處理時間：退款處理時間由本公司決定。'
      ]
    },
    {
      title: '4. 責任限制',
      clauses: [
        '4.1 服務穩定性承諾：本公司將盡力確保服務的穩定性及準確性。',
        '4.2 用戶損失責任：因使用本服務而導致的任何損失，本公司概不負責。',
        '4.3 不可抗力責任：如因不可抗力導致服務中斷，本公司不承擔責任。'
      ]
    }
  ];

  const handleAgree = () => {
    router.back()
    // onAgree();
  };

  return (
    <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <Text style={styles.header}>Crazy Charge 用戶條款及細則</Text>
        <View style={styles.section}>
          {sections.map((section, index) => (
            <TermsSection 
              key={index}
              title={section.title}
              clauses={section.clauses}
            />
          ))}
        </View>
      </ScrollView>
      <NormalButton
        extendedStyle={styles.agreeButton}
        onPress={() => handleAgree()}
        title={<Text
            style={{
                fontWeight: '600',
                fontSize: 18,
                color: '#fff'
            }}
        >
            同意並繼續
        </Text>}
        >

        </NormalButton>
    </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 8,
    backgroundColor: '#f8f9fa'
  },
  scrollContainer: {
    paddingBottom: 70
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 15,
    color: '#2c3e50',
    textAlign: 'center'
  },
  description: {
    fontSize: 14, 
    color: '#2c3e50',
    paddingLeft: 20,
    paddingRight: 20,
    marginBottom: 10,
  },
  section: {
    marginBottom: 10,
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    elevation: 2
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 12,
    color: '#025c72'
  },
  clause: {
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 5,
    color: '#34495e'
  },
  agreeButton: {
    position: 'absolute',
    bottom: 10,
    left: 20,
    right: 20,
    padding: 16,
    alignItems: 'center'
  },
});

export default UserTermsPageComponent;