import { Image, Linking, ScrollView, View } from "react-native";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";
import { Card, InfoRow } from "@/components/ui/Card";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { brand } from "@/lib/data/brand";
import { colors, gutter } from "@/lib/theme";

export default function AboutScreen() {
  return (
    <Screen>
      <AppHeader title="About" subtitle={brand.tagline} />
      <ScrollView
        contentContainerStyle={{
          paddingHorizontal: gutter,
          paddingBottom: 40,
          gap: 14,
        }}
      >
        <Card>
          <View style={{ flexDirection: "row", alignItems: "center", gap: 14 }}>
            <Image
              source={require("@/assets/logo/gishen-logo.png")}
              style={{ width: 64, height: 64, resizeMode: "contain" }}
            />
            <View style={{ flex: 1 }}>
              <Text variant="h2">{brand.name}</Text>
              <Text variant="caption" color={colors.muted} style={{ marginTop: 4 }}>
                Est. {brand.founded} · {brand.branchCount} branches
              </Text>
            </View>
          </View>
          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 14 }}>
            <Badge label={`${brand.institutions}+ institutions`} tone="brand" />
            <Badge label={`${brand.googleRating}★ Google`} tone="neutral" />
            <Badge label={`${brand.weeklyCustomers}/wk customers`} tone="info" />
          </View>
        </Card>

        <Card elevated={false}>
          <Text variant="h3">Our story</Text>
          <Text variant="bodySm" color={colors.muted} style={{ marginTop: 8, lineHeight: 22 }}>
            {brand.story}
          </Text>
        </Card>

        <Card elevated={false}>
          <Text variant="h3">Purpose</Text>
          <Text variant="bodySm" color={colors.muted} style={{ marginTop: 8, lineHeight: 22 }}>
            {brand.purpose}
          </Text>
        </Card>

        <Card elevated={false}>
          <Text variant="h3">Vision</Text>
          <Text variant="bodySm" color={colors.muted} style={{ marginTop: 8, lineHeight: 22 }}>
            {brand.vision}
          </Text>
        </Card>

        <Card elevated={false}>
          <Text variant="h3">Mission</Text>
          <Text variant="bodySm" color={colors.muted} style={{ marginTop: 8, lineHeight: 22 }}>
            {brand.mission}
          </Text>
        </Card>

        <Card padded={false}>
          <InfoRow label="Phone" value={brand.phoneDisplay} />
          <InfoRow label="Email" value={brand.email} />
          <InfoRow label="Orders" value={brand.orderEmail} />
          <InfoRow label="Website" value={brand.website.replace("https://", "")} last />
        </Card>

        <Button
          title="Call pharmacy"
          icon="call-outline"
          onPress={() => Linking.openURL(`tel:${brand.phone}`)}
        />
        <Button
          title="WhatsApp"
          variant="outline"
          icon="logo-whatsapp"
          onPress={() => Linking.openURL(brand.socials[0].href)}
        />
        <Button
          title="Open website"
          variant="ghost"
          onPress={() => Linking.openURL(brand.website)}
        />
      </ScrollView>
    </Screen>
  );
}