Greenlens/app/onboarding.tsx

import React from 'react';
import {
  Image,
  ImageBackground,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useWindowDimensions,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';
import Svg, { Path } from 'react-native-svg';
import { useApp } from '../context/AppContext';

type Feature = {
  icon: keyof typeof Ionicons.glyphMap;
  title: string;
  description: string;
};

export default function OnboardingScreen() {
  const { t } = useApp();
  const { height, width } = useWindowDimensions();
  const compact = height < 760;
  const sheetTop = compact ? 142 : 156;
  const waveHeight = compact ? 148 : 170;
  const bodyOffset = waveHeight - 2;
  const contentTop = compact ? 94 : 108;

  const features: Feature[] = [
    {
      icon: 'scan-outline',
      title: t.welcomeFeatureIdentifyTitle,
      description: t.welcomeFeatureIdentifyDesc,
    },
    {
      icon: 'notifications-outline',
      title: t.welcomeFeatureReminderTitle,
      description: t.welcomeFeatureReminderDesc,
    },
    {
      icon: 'book-outline',
      title: t.welcomeFeatureLibraryTitle,
      description: t.welcomeFeatureLibraryDesc,
    },
  ];

  return (
    <View style={styles.container}>
      <ImageBackground
        source={require('../assets/welcome_botanical_hero.png')}
        style={styles.heroImage}
        imageStyle={styles.heroImageContent}
        resizeMode="cover"
      >
        <View style={styles.heroShadeTop} />
        <View style={styles.heroShadeBottom} />
        <SafeAreaView style={styles.safeArea}>
          <View style={[styles.brandRow, compact && styles.brandRowCompact]}>
            <Image
              source={require('../assets/icon.png')}
              style={styles.logo}
              resizeMode="cover"
            />
            <Text style={styles.brandName}>
              Green<Text style={styles.brandAccent}>Lens</Text>
            </Text>
          </View>
        </SafeAreaView>
      </ImageBackground>

      <View style={[styles.sheet, { top: sheetTop }]}>
        <Svg
          width={width}
          height={waveHeight}
          viewBox={`0 0 ${width} ${waveHeight}`}
          preserveAspectRatio="none"
          style={styles.sheetWave}
        >
          <Path
            d={`M0 34 C ${width * 0.08} 76 ${width * 0.14} 82 ${width * 0.24} 82 C ${width * 0.38} 82 ${width * 0.52} 82 ${width * 0.64} 82 C ${width * 0.78} 86 ${width * 0.88} 132 ${width} 156 L ${width} ${waveHeight} L 0 ${waveHeight} Z`}
            fill="#fbfaf3"
          />
        </Svg>
        <View style={[styles.sheetBody, { top: bodyOffset }]} />
        <View
          style={[
            styles.sheetContent,
            { top: contentTop },
            compact && styles.sheetContentCompact,
          ]}
        >
          <Text style={[styles.headline, compact && styles.headlineCompact]}>
            {t.welcomeHeadline}
          </Text>
          <Text style={styles.subheadline}>{t.welcomeSubheadline}</Text>

          <View style={styles.features}>
            {features.map((feature, index) => (
              <View
                key={feature.title}
                style={[
                  styles.featureRow,
                  index === features.length - 1 && styles.featureRowLast,
                ]}
              >
                <View style={styles.featureIcon}>
                  <Ionicons name={feature.icon} size={22} color="#a6d66f" />
                </View>
                <View style={styles.featureCopy}>
                  <Text style={styles.featureTitle}>{feature.title}</Text>
                  <Text style={styles.featureDescription}>{feature.description}</Text>
                </View>
              </View>
            ))}
          </View>

          <TouchableOpacity
            style={styles.demoButton}
            onPress={() => router.push('/scanner')}
            activeOpacity={0.86}
          >
            <Ionicons name="scan" size={25} color="#f8f7ef" />
            <Text style={styles.demoButtonText}>{t.welcomeDemoScan}</Text>
            <Ionicons name="chevron-forward" size={26} color="#f8f7ef" />
          </TouchableOpacity>

          <View style={styles.authRow}>
            <TouchableOpacity
              style={styles.authButton}
              onPress={() => router.push('/auth/signup')}
              activeOpacity={0.82}
            >
              <Text style={styles.authButtonText}>{t.onboardingRegister}</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.authButton, styles.loginButton]}
              onPress={() => router.push('/auth/login')}
              activeOpacity={0.82}
            >
              <Text style={[styles.authButtonText, styles.loginButtonText]}>
                {t.onboardingLogin}
              </Text>
            </TouchableOpacity>
          </View>

          <TouchableOpacity
            style={styles.subscriptionLink}
            onPress={() => router.push('/profile/billing')}
            activeOpacity={0.8}
          >
            <Ionicons name="leaf-outline" size={21} color="#4b7c31" />
            <Text style={styles.subscriptionText}>{t.welcomeSubscriptionPlans}</Text>
            <Ionicons name="chevron-forward" size={20} color="#4b7c31" />
          </TouchableOpacity>

          <Text style={styles.legalText}>{t.welcomeLegal}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0a110b',
  },
  heroImage: {
    height: '60%',
    minHeight: 430,
  },
  heroImageContent: {
    backgroundColor: '#0a110b',
    transform: [{ scale: 1.04 }],
  },
  heroShadeTop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.08)',
  },
  heroShadeBottom: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 190,
    backgroundColor: 'rgba(7,12,7,0.2)',
  },
  safeArea: {
    flex: 1,
  },
  brandRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 15,
    paddingHorizontal: 30,
    paddingTop: 62,
  },
  brandRowCompact: {
    paddingTop: 42,
  },
  logo: {
    width: 68,
    height: 68,
    borderRadius: 16,
    backgroundColor: '#fff',
  },
  brandName: {
    color: '#f8f7ef',
    fontSize: 36,
    fontWeight: '900',
  },
  brandAccent: {
    color: '#9bc76e',
  },
  sheet: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  },
  sheetWave: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
  },
  sheetBody: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: '#fbfaf3',
  },
  sheetContent: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: 24,
    paddingBottom: 10,
  },
  sheetContentCompact: {
    paddingHorizontal: 22,
    paddingBottom: 8,
  },
  headline: {
    color: '#101c12',
    fontSize: 40,
    lineHeight: 43,
    fontWeight: '900',
    marginBottom: 6,
    maxWidth: 310,
  },
  headlineCompact: {
    fontSize: 34,
    lineHeight: 37,
  },
  subheadline: {
    color: '#5f625d',
    fontSize: 15,
    lineHeight: 19,
    fontWeight: '500',
    marginBottom: 11,
  },
  features: {
    marginBottom: 10,
  },
  featureRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 11,
    paddingVertical: 6,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: 'rgba(16,28,18,0.14)',
  },
  featureRowLast: {
    borderBottomWidth: 0,
  },
  featureIcon: {
    width: 46,
    height: 46,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#173817',
  },
  featureCopy: {
    flex: 1,
  },
  featureTitle: {
    color: '#101c12',
    fontSize: 16,
    fontWeight: '800',
    marginBottom: 2,
  },
  featureDescription: {
    color: '#696b65',
    fontSize: 13,
    lineHeight: 16,
    fontWeight: '500',
  },
  demoButton: {
    height: 60,
    borderRadius: 7,
    backgroundColor: '#437824',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 18,
    marginBottom: 8,
  },
  demoButtonText: {
    color: '#f8f7ef',
    fontSize: 21,
    fontWeight: '800',
  },
  authRow: {
    flexDirection: 'row',
    gap: 8,
    marginBottom: 8,
  },
  authButton: {
    flex: 1,
    height: 50,
    borderRadius: 7,
    borderWidth: 1.4,
    borderColor: '#4b7c31',
    alignItems: 'center',
    justifyContent: 'center',
  },
  loginButton: {
    borderColor: '#101c12',
  },
  authButtonText: {
    color: '#4b7c31',
    fontSize: 17,
    fontWeight: '700',
  },
  loginButtonText: {
    color: '#101c12',
  },
  subscriptionLink: {
    minHeight: 24,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    marginBottom: 7,
  },
  subscriptionText: {
    color: '#4b7c31',
    fontSize: 15,
    fontWeight: '800',
    textAlign: 'center',
  },
  legalText: {
    color: '#6b6d68',
    fontSize: 11,
    lineHeight: 14,
    fontWeight: '500',
    textAlign: 'center',
  },
});