/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/about/page.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { ShieldCheck, Leaf, Award, Truck, Phone, Mail, MapPin } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import external package or local module
import {
  // Property or array item — trailing comma allowed in TypeScript
  SITE_ADDRESS,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_EMAIL,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_PHONE_DISPLAY,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_HOURS,
// Closing brace — end of block (function, if, object, JSX)
} from '@/lib/constants';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function AboutPage() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
  // Line 15: const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, ...
  const telHref = `tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`;
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div>
      // JSX element — HTML-like tag becomes React component in browser
      <div className="bg-gradient-to-br from-brand-900 to-brand-950 px-4 py-20 text-white sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mx-auto max-w-3xl text-center">
          // JSX element — HTML-like tag becomes React component in browser
          <h1 className="mb-4 font-display text-4xl font-bold">
            // Line 22: {t('about.title', { name: t('site.name') })}
            {t('about.title', { name: t('site.name') })}
          // JSX element — HTML-like tag becomes React component in browser
          </h1>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-lg text-brand-100">{t('about.subtitle')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
// (blank line — separates logical blocks for readability)
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <section className="mb-16">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-4">{t('about.ourStory')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="mb-4 leading-relaxed text-gray-600">
            // Line 32: {t('about.storyP1', { name: t('site.name') })}
            {t('about.storyP1', { name: t('site.name') })}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="leading-relaxed text-gray-600">{t('about.storyP2')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section id="halal" className="mb-16">
          // JSX element — HTML-like tag becomes React component in browser
          <div className="mb-6 flex items-center gap-3">
            // JSX element — HTML-like tag becomes React component in browser
            <ShieldCheck className="h-8 w-8 text-brand-700" />
            // JSX element — HTML-like tag becomes React component in browser
            <h2 className="section-heading">{t('about.halalTitle')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="leading-relaxed text-gray-600">
            // Line 43: {t('about.halalDesc', { name: t('site.name') })}
            {t('about.halalDesc', { name: t('site.name') })}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section className="mb-16">
          // JSX element — HTML-like tag becomes React component in browser
          <div className="grid gap-6 sm:grid-cols-3">
            // Line 49: {[
            {[
              // Property or array item — trailing comma allowed in TypeScript
              { icon: Leaf, title: t('about.freshDaily'), desc: t('about.freshDailyDesc') },
              // Line 51: {
              {
                // Property or array item — trailing comma allowed in TypeScript
                icon: Award,
                // Property or array item — trailing comma allowed in TypeScript
                title: t('about.premiumQuality'),
                // Property or array item — trailing comma allowed in TypeScript
                desc: t('about.premiumQualityDesc'),
              // Closing brace — end of block (function, if, object, JSX)
              },
              // Line 56: {
              {
                // Property or array item — trailing comma allowed in TypeScript
                icon: Truck,
                // Property or array item — trailing comma allowed in TypeScript
                title: t('about.fastDelivery'),
                // Property or array item — trailing comma allowed in TypeScript
                desc: t('about.fastDeliveryDesc'),
              // Closing brace — end of block (function, if, object, JSX)
              },
            // Array.map — transform each item (often render a list of components)
            ].map((item) => (
              // JSX element — HTML-like tag becomes React component in browser
              <div key={item.title} className="card-premium p-6 text-center">
                // JSX element — HTML-like tag becomes React component in browser
                <item.icon className="mx-auto mb-3 h-8 w-8 text-brand-700" />
                // JSX element — HTML-like tag becomes React component in browser
                <h3 className="mb-1 font-semibold text-brand-900">{item.title}</h3>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="text-sm text-gray-500">{item.desc}</p>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // Line 67: ))}
            ))}
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section id="delivery" className="mb-16">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-4">{t('about.deliveryTitle')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <div className="space-y-3 text-gray-600">
            // JSX element — HTML-like tag becomes React component in browser
            <p>{t('about.delivery1')}</p>
            // JSX element — HTML-like tag becomes React component in browser
            <p>{t('about.delivery2')}</p>
            // JSX element — HTML-like tag becomes React component in browser
            <p>{t('about.delivery3')}</p>
            // JSX element — HTML-like tag becomes React component in browser
            <p>{t('about.delivery4')}</p>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section id="contact" className="card-premium mb-16 p-8">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-6">{t('about.contactTitle')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <div className="space-y-4">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="flex items-center gap-3 text-gray-600">
              // JSX element — HTML-like tag becomes React component in browser
              <Phone className="h-5 w-5 text-brand-700" />
              // JSX element — HTML-like tag becomes React component in browser
              <a href={telHref} className="hover:text-brand-800">
                // Line 87: {SITE_PHONE_DISPLAY}
                {SITE_PHONE_DISPLAY}
              // JSX element — HTML-like tag becomes React component in browser
              </a>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="flex items-center gap-3 text-gray-600">
              // JSX element — HTML-like tag becomes React component in browser
              <Mail className="h-5 w-5 text-brand-700" />
              // JSX element — HTML-like tag becomes React component in browser
              <a href={`mailto:${SITE_EMAIL}`} className="hover:text-brand-800">
                // Line 93: {SITE_EMAIL}
                {SITE_EMAIL}
              // JSX element — HTML-like tag becomes React component in browser
              </a>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="flex items-start gap-3 text-gray-600">
              // JSX element — HTML-like tag becomes React component in browser
              <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-brand-700" />
              // JSX element — HTML-like tag becomes React component in browser
              <span>
                // Line 99: {SITE_ADDRESS}
                {SITE_ADDRESS}
                // JSX element — HTML-like tag becomes React component in browser
                <br />
                // Line 101: {t('footer.hours', { hours: SITE_HOURS })}
                {t('footer.hours', { hours: SITE_HOURS })}
              // JSX element — HTML-like tag becomes React component in browser
              </span>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
          // JSX element — HTML-like tag becomes React component in browser
          <div className="mt-6">
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Link target URL — internal route or external https://
              href="/shop"
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="text-sm font-semibold text-brand-700 hover:text-brand-900"
            // Line 109: >
            >
              // Line 110: {t('cta.button')} →
              {t('cta.button')} →
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section id="privacy" className="mb-16">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-4">{t('about.privacyTitle')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="leading-relaxed text-gray-600">{t('about.privacyText')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <section id="terms" className="mb-8">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-4">{t('about.termsTitle')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="leading-relaxed text-gray-600">{t('about.termsText')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        </section>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 126: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
