import Link from '@/components/LocalizedLink'
import { API_BASE } from '@/lib/api'

const PILLARS = [
  {
    icon: '🌱',
    title: 'Pure Origins',
    desc: 'Every extract is sourced directly from certified organic farms in Northern Thailand, Vietnam, and Southern France. We work exclusively with small-batch artisan growers.',
  },
  {
    icon: '⚗️',
    title: 'Artisan Craft',
    desc: 'Each formula is cold-extracted and hand-blended in our Bangkok studio. No heat processing means every aromatic molecule remains intact and therapeutically potent.',
  },
  {
    icon: '♾️',
    title: 'Zero Compromise',
    desc: 'No synthetic fragrance. No parabens. No animal testing. Our commitment to clean formulation is absolute — what touches your senses should honour your wellbeing.',
  },
]

const STATS = [
  { value: '45+', label: 'Unique Scents' },
  { value: '5', label: 'Product Lines' },
  { value: '2019', label: 'Founded' },
  { value: '100%', label: 'Natural Extracts' },
]

export default async function AboutPage({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const res = await fetch(`${API_BASE}/settings?lang=${lang}`, { next: { revalidate: 600 } });
  const settings = res.ok ? await res.json() : {};
  const brandName = settings?.brandName || '';

  return (
    <div className="min-h-screen bg-surface-page text-text-main">
      <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-surface-card pt-24">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" />
        <div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center">
          <p className="ui-eyebrow">Our Story</p>
          <h1 className="text-5xl font-bold leading-tight text-text-main md:text-7xl">
            Born from a passion for <span className="italic text-brand-primary">stillness</span>
          </h1>
          <p className="text-lg leading-relaxed text-muted-text">
            {brandName} began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
          </p>
        </div>
      </section>

      <section className="border-y border-line-primary/20 bg-surface-card px-6 py-12">
        <div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4">
          {STATS.map(s => (
            <div key={s.label} className="space-y-1">
              <div className="text-4xl font-bold text-brand-primary">{s.value}</div>
              <div className="text-xs uppercase tracking-widest text-muted-text">{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="px-6 py-24">
        <div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
          <div className="space-y-6">
            <p className="ui-eyebrow">Our Mission</p>
            <h2 className="text-4xl font-bold leading-tight text-text-main">Transforming spaces into sanctuaries of peace</h2>
            <p className="leading-relaxed text-text-main/85">
              We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
            </p>
            <p className="text-sm leading-relaxed text-muted-text">
              Every {brandName} product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
            </p>
          </div>
          <div className="relative h-80 overflow-hidden rounded-3xl border border-line-primary/20 bg-surface-card shadow-card">
            <div className="absolute inset-0 bg-gradient-to-br from-surface-page via-white to-brand-warm/20" />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="space-y-3 text-center">
                <div className="text-7xl">🌿</div>
                <p className="text-sm uppercase tracking-widest text-muted-text">{brandName} Studio, Bangkok</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="border-y border-line-primary/20 bg-surface-card px-6 py-24">
        <div className="mx-auto max-w-6xl space-y-12">
          <div className="space-y-3 text-center">
            <p className="ui-eyebrow">What We Stand For</p>
            <h2 className="text-4xl font-bold text-text-main">Three Pillars</h2>
            <div className="mx-auto h-px w-12 bg-brand-primary" />
          </div>
          <div className="grid gap-8 md:grid-cols-3">
            {PILLARS.map(p => (
              <div key={p.title} className="ui-card ui-card-hover space-y-4 p-8">
                <div className="text-4xl">{p.icon}</div>
                <h3 className="text-xl font-bold text-text-main">{p.title}</h3>
                <p className="text-sm leading-relaxed text-muted-text">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="space-y-6 px-6 py-24 text-center">
        <h2 className="text-4xl font-bold text-text-main">Ready to find your scent?</h2>
        <p className="mx-auto max-w-md text-muted-text">Let our Scent Guide help you discover the perfect blend for your moment.</p>
        <div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row">
          <Link href="/scent-guide" className="rounded-full bg-text-main px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
            Take the Scent Guide
          </Link>
          <Link href="/shop" className="rounded-full border border-brand-primary bg-surface-card px-10 py-4 font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page">
            Shop All Products
          </Link>
        </div>
      </section>
    </div>
  )
}