import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet, SafeAreaView } from 'react-native';

const PAGES = [
  { emoji: '🎨', title: 'Design without limits', body: 'A library of beautiful, ready-to-use mobile screens.', c: '#0EA5E9' },
  { emoji: '⚡', title: 'Build in minutes', body: 'Copy a design link and hand it straight to your AI builder.', c: '#8B5CF6' },
  { emoji: '🚀', title: 'Ship something great', body: 'Free forever. Browse, remix, and launch your idea today.', c: '#22C55E' },
];

export default function App() {
  const [page, setPage] = useState(0);
  const p = PAGES[page];
  const last = page === PAGES.length - 1;
  return (
    <SafeAreaView style={[s.safe, { backgroundColor: '#0A0E14' }]}>
      <View style={s.center}>
        <View style={[s.badge, { backgroundColor: p.c + '22' }]}><Text style={s.emoji}>{p.emoji}</Text></View>
        <Text style={s.title}>{p.title}</Text>
        <Text style={s.body}>{p.body}</Text>
      </View>
      <View style={s.footer}>
        <View style={s.dots}>
          {PAGES.map((_, i) => (<View key={i} style={[s.dot, i === page && { backgroundColor: p.c, width: 24 }]} />))}
        </View>
        <Pressable onPress={() => setPage((x) => (last ? 0 : x + 1))} style={[s.btn, { backgroundColor: p.c }]}>
          <Text style={s.btnText}>{last ? 'Get started' : 'Continue'}</Text>
        </Pressable>
        <Text style={s.skip}>{last ? 'Welcome aboard' : 'Skip'}</Text>
      </View>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1 },
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 36 },
  badge: { width: 140, height: 140, borderRadius: 40, alignItems: 'center', justifyContent: 'center', marginBottom: 40 },
  emoji: { fontSize: 70 },
  title: { color: '#fff', fontSize: 30, fontWeight: '800', textAlign: 'center', letterSpacing: -0.5 },
  body: { color: '#8A93A6', fontSize: 17, textAlign: 'center', marginTop: 14, lineHeight: 25 },
  footer: { paddingHorizontal: 30, paddingBottom: 40 },
  dots: { flexDirection: 'row', justifyContent: 'center', gap: 8, marginBottom: 26 },
  dot: { width: 8, height: 8, borderRadius: 4, backgroundColor: '#2A2E38' },
  btn: { borderRadius: 30, paddingVertical: 18, alignItems: 'center' },
  btnText: { color: '#fff', fontSize: 17, fontWeight: '800' },
  skip: { color: '#5A5E68', fontSize: 15, textAlign: 'center', marginTop: 18, fontWeight: '600' },
});