import { createFileRoute } from '@tanstack/react-router'
import { p, AppContainer } from 'web-components'
import { Heart, Shield, Truck, Leaf } from 'lucide-react'

export const Route = createFileRoute('/me/about')({ component: AboutPage })

function AboutPage() {
  const missions = [
    {
      icon: Leaf,
      title: 'Local Roots',
      desc: 'We source directly from local farmers to bring you the freshest meat.',
    },
    {
      icon: Heart,
      title: 'Quality First',
      desc: 'Every cut is inspected for quality and freshness before delivery.',
    },
    {
      icon: Truck,
      title: 'Fast Delivery',
      desc: 'Get your order delivered within 1 hour in select areas.',
    },
    {
      icon: Shield,
      title: 'Farmers First',
      desc: 'We ensure fair prices and sustainable practices for our farmers.',
    },
  ]

  return (
    <AppContainer>
      <p className="font-bold mb-6 text-2xl">
        About Freshyo
      </p>

      <div className="grid grid-cols-2 gap-4">
        {missions.map((mission) => (
          <div
            key={mission.title}
            className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
          >
            <mission.icon className="mb-2 h-8 w-8 text-brand-500" />
            <p className="font-semibold mb-1">
              {mission.title}
            </p>
            <p className="text-sm text-gray-600">{mission.desc}</p>
          </div>
        ))}
      </div>

      <div className="mt-8">
        <p className="font-bold mb-3 text-lg">
          Sourcing & Quality
        </p>
        <p className="mb-6 text-sm leading-relaxed text-gray-600">
          We partner with trusted local farmers who follow ethical and sustainable
          farming practices. Every product undergoes rigorous quality checks to ensure
          you receive only the freshest meat.
        </p>
      </div>
    </AppContainer>
  )
}
