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

const INGREDIENTS = ['2 eggs', '200g spaghetti', '60g pecorino', '100g guanciale', 'Black pepper', 'Sea salt'];
const STEPS = [
  'Boil salted water and cook the spaghetti until al dente.',
  'Crisp the guanciale in a dry pan over medium heat.',
  'Whisk eggs with grated pecorino and plenty of pepper.',
  'Toss pasta off the heat with the egg mix and a splash of water.',
];

export default function App() {
  const [step, setStep] = useState(0);
  return (
    <SafeAreaView style={s.safe}>
      <ScrollView contentContainerStyle={s.scroll} showsVerticalScrollIndicator={false}>
        <View style={s.hero}><Text style={s.heroEmoji}>🍝</Text></View>
        <Text style={s.kicker}>ITALIAN · 20 MIN</Text>
        <Text style={s.title}>Carbonara</Text>
        <View style={s.metaRow}>
          <View style={s.meta}><Text style={s.metaN}>20</Text><Text style={s.metaL}>min</Text></View>
          <View style={s.meta}><Text style={s.metaN}>2</Text><Text style={s.metaL}>serves</Text></View>
          <View style={s.meta}><Text style={s.metaN}>★ 4.9</Text><Text style={s.metaL}>312 cooks</Text></View>
        </View>
        <Text style={s.section}>Ingredients</Text>
        <View style={s.ingGrid}>
          {INGREDIENTS.map((i) => (<View key={i} style={s.ing}><Text style={s.ingText}>{i}</Text></View>))}
        </View>
        <Text style={s.section}>Method</Text>
        {STEPS.map((st, i) => (
          <Pressable key={i} onPress={() => setStep(i)} style={[s.step, step === i && s.stepOn]}>
            <View style={[s.stepNum, step === i && s.stepNumOn]}><Text style={[s.stepNumT, step === i && { color: '#fff' }]}>{i + 1}</Text></View>
            <Text style={[s.stepText, step === i && { color: '#fff' }]}>{st}</Text>
          </Pressable>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: '#120D0A' },
  scroll: { padding: 22, paddingTop: 60, paddingBottom: 30 },
  hero: { height: 150, borderRadius: 24, backgroundColor: '#241612', alignItems: 'center', justifyContent: 'center', marginBottom: 18 },
  heroEmoji: { fontSize: 72 },
  kicker: { color: '#F0743A', fontSize: 12, fontWeight: '700', letterSpacing: 2 },
  title: { color: '#fff', fontSize: 34, fontWeight: '800', marginTop: 4 },
  metaRow: { flexDirection: 'row', gap: 28, marginTop: 14 },
  meta: { },
  metaN: { color: '#fff', fontSize: 18, fontWeight: '700' },
  metaL: { color: '#9A857C', fontSize: 12, marginTop: 2 },
  section: { color: '#fff', fontSize: 19, fontWeight: '700', marginTop: 28, marginBottom: 14 },
  ingGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
  ing: { backgroundColor: '#1E1410', borderRadius: 14, paddingVertical: 11, paddingHorizontal: 16 },
  ingText: { color: '#E6D6CE', fontSize: 14, fontWeight: '500' },
  step: { flexDirection: 'row', backgroundColor: '#1A120E', borderRadius: 16, padding: 16, marginBottom: 12 },
  stepOn: { backgroundColor: '#F0743A' },
  stepNum: { width: 30, height: 30, borderRadius: 15, backgroundColor: '#2A1C16', alignItems: 'center', justifyContent: 'center', marginRight: 14 },
  stepNumOn: { backgroundColor: 'rgba(255,255,255,0.25)' },
  stepNumT: { color: '#F0743A', fontWeight: '800' },
  stepText: { color: '#C9B5AB', flex: 1, fontSize: 15, lineHeight: 21 },
});