'use client'

import * as React from 'react'
import { ArrowRight, Droplet, Heart, Brain, Dumbbell, Baby, Moon, Shield } from 'lucide-react'
import { useRouter } from '@/lib/router'
import { PageShell, PageHero, Section, SectionHeading, Reveal, Eyebrow, Card, DefRow, LabeledDivider, LinkButton, Pill, NumberedStep } from '@/components/site/ui'

const SEGMENTS = [
  { icon: Droplet, t: 'Liposomal vitamins', d: 'Liposomal encapsulation protects vitamins from degradation in the gastrointestinal tract and may improve bioavailability of poorly absorbed nutrients. The liposome is composed of phospholipids that fuse with cell membranes, releasing the payload intracellularly.' },
  { icon: Heart, t: 'Clinical nutrition', d: 'Specialized nutritional products designed for patients with elevated metabolic demand, malabsorption or specific disease states — including oral nutritional supplements, tube-feeding formulations and repletion protocols.' },
  { icon: Shield, t: 'Immune support', d: 'Formulations containing vitamins (C, D, zinc), minerals and botanical ingredients with documented roles in immune function, as recognized by recognized health authorities where regulatory claims are permitted.' },
  { icon: Brain, t: 'Women\'s health', d: 'Condition-specific formulations addressing preconception, pregnancy, lactation, menopause and bone health, formulated with folate, iron, iodine, calcium and vitamin D as appropriate.' },
  { icon: Moon, t: 'Men\'s health', d: 'Targeted formulations supporting cardiovascular, metabolic, prostate and cognitive health, including zinc, selenium, omega-3 and antioxidant ingredients backed by population studies.' },
  { icon: Dumbbell, t: 'Sports nutrition', d: 'Pre-, intra- and post-exercise formulations containing electrolytes, branched-chain amino acids, carbohydrates and recovery nutrients, designed for hydration, performance and muscle protein synthesis.' },
  { icon: Baby, t: 'Pediatric nutrition', d: 'Age-appropriate formulations for infants, children and adolescents — including vitamin D drops, multivitamin syrups and growth-supporting nutritional supplements with careful attention to dosing and palatability.' },
  { icon: Heart, t: 'Healthy aging', d: 'Formulations targeting older adults\' needs — bone density, muscle mass, cognitive function and micronutrient repletion — with attention to absorption changes that accompany aging.' },
]

export function VitaminsPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Advanced vitamins & nutraceuticals"
        title="Pharmaceutical science,"
        highlight="applied to nutrition."
        lead="Espandiar&apos;s advanced nutraceutical portfolio is developed with pharmaceutical rigor — applying formulation science, analytical validation and quality systems to nutritional products. Our work spans liposomal delivery, clinical nutrition, immune support and condition-specific formulations across every life stage."
      />

      {/* Scientific positioning */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Our approach"
          title="Nutraceuticals developed"
          highlight="like pharmaceuticals."
          lead="Unlike conventional dietary supplements, Espandiar&apos;s nutraceuticals are developed under pharmaceutical quality systems. Every formulation is supported by analytical method validation, stability testing (ICH conditions), contaminant control and — where regulatory frameworks permit — clinical evidence."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                The boundary between pharmaceuticals and nutraceuticals has
                narrowed as nutritional science has matured. Recognized bodies
                including the WHO, the European Food Safety Authority (EFSA),
                the U.S. Food and Drug Administration (FDA) Office of Dietary
                Supplements, and the U.S. Pharmacopeia (USP) now publish
                monographs and guidance for many vitamins, minerals and
                bioactive compounds.
              </p>
              <p>
                Espandiar formulates to those monographs. We select ingredients
                with documented bioavailability, manufacture under cGMP
                conditions, and verify each batch for identity, potency,
                purity and contaminants — including heavy metals (ICH Q3D
                principles), microbial limits (USP {'<2021>'}) and residual
                solvents (ICH Q3C).
              </p>
              <p>
                We do not make unsupported efficacy claims. Where health
                claims are permitted by EFSA, FDA or other regulators, we
                communicate them with the required qualifying language. Where
                science is emerging but not yet regulatory-grade, we say so
                transparently.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Quality framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="cGMP manufacturing">Pharmaceutical-grade facilities, qualified equipment, validated processes.</DefRow>
                <DefRow term="Identity & potency">HPLC, UPLC, GC and titrimetric methods per USP monographs where available.</DefRow>
                <DefRow term="Purity & contaminants">Heavy metals (Pb, As, Cd, Hg), microbial limits, residual solvents, pesticide screening.</DefRow>
                <DefRow term="Stability">ICH Q1A long-term and accelerated conditions; in-use and photostability as applicable.</DefRow>
                <DefRow term="Claim substantiation">Compliant with EFSA, FDA and local regulatory claim frameworks.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Delivery technologies */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Delivery technologies"
          title="The formulation is"
          highlight="the medicine."
          lead="Many vitamins and bioactive compounds have poor intrinsic bioavailability, are degraded in the GI tract, or require targeted delivery. Our delivery technologies address these challenges."
        />
        <div className="mt-12 space-y-7">
          {[
            { n: '01', t: 'Liposomal delivery', d: 'Liposomes — spherical vesicles composed of phospholipid bilayers — encapsulate water-soluble vitamins (e.g., vitamin C, B-complex) in their aqueous core and fat-soluble vitamins (A, D, E, K) in the lipid bilayer. Liposomal delivery can protect the payload from degradation, improve absorption across enterocytes and, in some cases, enhance intracellular delivery. Characterization includes particle size (DLS), encapsulation efficiency, zeta potential and stability over shelf life.' },
            { n: '02', t: 'Micellar & self-emulsifying systems', d: 'Self-emulsifying drug delivery systems (SEDDS) and mixed micelles improve solubilization of lipophilic nutrients in the GI tract. These systems form fine emulsions on contact with aqueous GI fluids, presenting the nutrient in a solubilized form that is more readily absorbed.' },
            { n: '03', t: 'Modified-release oral', d: 'Sustained-release matrices and coated bead formulations extend the release of water-soluble vitamins, smoothing plasma concentration–time profiles and reducing the frequency of dosing. This is particularly useful for B-vitamins and vitamin C, which have short elimination half-lives.' },
            { n: '04', t: 'Sublingual & orodispersible', d: 'Sublingual tablets and orally disintegrating formulations enable absorption through the oral mucosa, bypassing first-pass metabolism and improving convenience for pediatric and geriatric patients.' },
          ].map((s) => (
            <Reveal key={s.n}>
              <NumberedStep tone="dark" n={s.n} title={s.t}>
                {s.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Health segments */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Health segments"
          title="Formulations designed"
          highlight="for every life stage."
          lead="Our portfolio spans eight evidence-informed health segments. Each is formulated with consideration for the relevant physiology, life stage and regulatory claim framework."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {SEGMENTS.map((s, i) => {
            const Icon = s.icon
            return (
              <Reveal key={s.t} delay={(i % 4) * 0.07}>
                <Card className="h-full">
                  <div className="grid h-12 w-12 place-items-center rounded-2xl bg-[#0d5d50]/10 text-[#0d5d50] dark:bg-[#8fb9ad]/10 dark:text-[#8fb9ad]">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{s.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{s.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Liposomal deep-dive */}
      <Section tone="pearl">
        <SectionHeading
          index="05"
          eyebrow="Liposomal vitamin deep-dive"
          title="Why liposomal?"
          highlight="Why it matters."
          lead="Liposomal delivery is one of the most clinically validated nutraceutical delivery technologies. Below, we describe the science — without overstating the evidence."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                Liposomes are vesicles composed of one or more phospholipid
                bilayers enclosing an aqueous core. Water-soluble nutrients
                are encapsulated in the core; lipophilic nutrients are
                incorporated in the bilayer. Liposomes are typically 50–500
                nanometers in diameter.
              </p>
              <p>
                In the GI tract, liposomes protect their payload from
                degradation by gastric acid, enzymes and the first-pass
                effect. The phospholipid bilayer can fuse with enterocyte
                membranes or be taken up by endocytosis, releasing the
                payload intracellularly. The result, for some nutrients, is
                higher and more sustained plasma concentrations than
                conventional oral formulations.
              </p>
              <p>
                Liposomal vitamin C, in particular, has been studied
                extensively in clinical trials. The published evidence
                supports higher oral bioavailability than equivalent doses of
                non-liposomal vitamin C, although the clinical significance of
                this difference depends on the indication and population.
              </p>
              <p>
                We formulate our liposomal vitamins using phosphatidylcholine
                from sunflower or soy, with non-GMO sourcing and allergen
                control. Each batch is characterized for particle size,
                polydispersity index, encapsulation efficiency and
                microbiological purity.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card>
              <Eyebrow>Liposomal characterization</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Particle size">DLS — typical target 80–200 nm.</DefRow>
                <DefRow term="Polydispersity index (PDI)">Target &lt; 0.3, indicating a uniform population.</DefRow>
                <DefRow term="Zeta potential">Surface charge indicating colloidal stability.</DefRow>
                <DefRow term="Encapsulation efficiency">Percent of nutrient retained within liposome.</DefRow>
                <DefRow term="Phospholipid identity">HPLC-CAD or 31P-NMR confirmation.</DefRow>
                <DefRow term="Stability">Particle size, encapsulation and potency over shelf life.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Evidence & claims */}
      <Section tone="light">
        <SectionHeading
          index="06"
          eyebrow="Evidence & claims"
          title="Honest about what"
          highlight="we know."
          lead="Nutraceutical science is genuinely complex. We communicate evidence transparently — distinguishing established science from emerging research, and regulatory-grade claims from exploratory findings."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {[
            { t: 'Established science', d: 'Roles of essential vitamins and minerals in human physiology, as documented by WHO, IOM, EFSA and national nutrition authorities. We communicate these in line with permitted health claims.' },
            { t: 'Emerging evidence', d: 'Areas of active research — including the role of vitamin D in immune function, the gut microbiome and certain chronic conditions — where evidence is growing but not yet definitive. We describe these as emerging, not established.' },
            { t: 'Regulatory compliance', d: 'Every claim we make is reviewed against EFSA, FDA and local regulatory frameworks. We do not market products for the treatment, diagnosis or cure of disease unless they hold an approved medicinal authorization.' },
          ].map((c, i) => (
            <Reveal key={c.t} delay={i * 0.1}>
              <Card className="h-full">
                <Pill tone="emerald">0{i + 1}</Pill>
                <h3 className="mt-5 text-xl font-semibold tracking-[-0.02em]">{c.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{c.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-10">
          <Card className="border-l-4 border-l-[#0d5d50] dark:border-l-[#8fb9ad]">
            <Eyebrow>Important note</Eyebrow>
            <p className="mt-4 text-sm leading-6 text-muted-foreground">
              Nutraceutical products are not substitutes for a balanced diet
              or for medical treatment. Individuals with diagnosed
              deficiencies, chronic disease, or who are pregnant, lactating
              or taking medication should consult a qualified healthcare
              professional before use. Espandiar nutraceuticals are formulated
              to complement — not replace — evidence-based medical care.
            </p>
          </Card>
        </Reveal>
      </Section>

      {/* CTA */}
      <Section tone="dark">
        <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
          <Reveal>
            <Eyebrow tone="sage">Distributor & partnership inquiries</Eyebrow>
            <h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
              Bring advanced nutraceuticals to your market.
            </h2>
            <p className="mt-5 max-w-xl text-sm leading-6 text-white/70">
              Our nutraceutical portfolio is available through licensed
              distributors, pharmacies and healthcare channels in regulated
              markets. For distribution, white-label or contract manufacturing
              inquiries, our team can support technical documentation,
              regulatory dossiers and supply agreements.
            </p>
          </Reveal>
          <Reveal delay={0.1} className="flex flex-wrap gap-3 lg:justify-end">
            <LinkButton variant="light" onClick={() => navigate('contact')}>
              Contact business development
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="outline" className="text-white" onClick={() => navigate('cdmo')}>
              CDMO services
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </Reveal>
        </div>
      </Section>
    </PageShell>
  )
}
