import { View, Text, ScrollView } from '@tarojs/components';
import { getLegalDocument } from '@dukang/shared-types';
import PageShell from '../../components/PageShell';
import SubPageHeader from '../../components/SubPageHeader';

export default function UserAgreementPage() {
  const doc = getLegalDocument('user-agreement');
  return (
    <PageShell variant="sub" className="legal-page">
      <SubPageHeader title={doc.title} />
      <View className="sub-page-body inset-page">
        <ScrollView scrollY className="legal-scroll">
          <Text className="legal-updated">更新日期：{doc.updatedAt}</Text>
          <Text className="legal-intro">{doc.intro}</Text>
          {doc.sections.map((section) => (
            <View key={section.heading} className="legal-section">
              <Text className="legal-heading">{section.heading}</Text>
              {section.paragraphs.map((p, i) => (
                <Text key={`${section.heading}-${i}`} className="legal-paragraph">
                  {p}
                </Text>
              ))}
            </View>
          ))}
        </ScrollView>
      </View>
    </PageShell>
  );
}
