// sections.jsx — Page sections + App + Tweaks integration
// Depends on globals from components.jsx (Nav, Footer, Vial, etc.)

const NAD_BENEFITS = {
  intro:
    'NAD+ is a coenzyme naturally found in every cell of the body. Levels decline with age, stress, poor sleep, alcohol consumption, and chronic illness. NAD+ is involved in energy production, DNA repair, cellular health, and healthy aging.',
  groups: [
    {
      title: 'Skin Benefits of NAD+',
      items: [
        {
          icon: '✨',
          name: 'Supports Skin Repair',
          desc: 'Helps cells repair damage caused by UV exposure and environmental stress. Supports healthy skin regeneration.',
        },
        {
          icon: '✨',
          name: 'May Improve Skin Appearance',
          desc: 'Promotes healthier-looking, more radiant skin. May help reduce the appearance of dullness associated with aging.',
        },
        {
          icon: '✨',
          name: 'Supports Collagen Production',
          desc: 'Indirectly supports fibroblast function, which is important for collagen and elastin production. May contribute to improved skin elasticity and firmness.',
        },
        {
          icon: '✨',
          name: 'Antioxidant Support',
          desc: 'Helps the body’s natural defense systems combat oxidative stress. Protects skin cells from free radical damage.',
        },
        {
          icon: '✨',
          name: 'Supports Healthy Aging',
          desc: 'Activates enzymes called sirtuins, which are associated with cellular longevity and healthy aging. May help reduce visible signs of aging over time.',
        },
      ],
    },
    {
      title: 'Health & Wellness Benefits of NAD+',
      items: [
        {
          icon: '⚡',
          name: 'Energy Production',
          desc: 'Essential for converting food into cellular energy (ATP). Often used by individuals seeking support for fatigue and low energy.',
        },
        {
          icon: '🧠',
          name: 'Brain Function & Mental Clarity',
          desc: 'Supports healthy cognitive function. May promote focus, concentration, and mental performance.',
        },
        {
          icon: '😴',
          name: 'Sleep & Recovery Support',
          desc: 'Helps maintain healthy cellular function involved in recovery processes. Some users report improved overall wellness and recovery.',
        },
        {
          icon: '❤️',
          name: 'Supports Cardiovascular Health',
          desc: 'Plays a role in maintaining healthy blood vessel function. Supports cellular energy production in heart muscle cells.',
        },
        {
          icon: '💪',
          name: 'Physical Performance & Recovery',
          desc: 'Supports mitochondrial function. May assist with exercise recovery and physical endurance.',
        },
        {
          icon: '🧬',
          name: 'DNA Repair & Cellular Health',
          desc: 'Required for enzymes involved in DNA repair. Supports healthy cellular maintenance and function.',
        },
        {
          icon: '🔥',
          name: 'Healthy Metabolism',
          desc: 'Involved in metabolic pathways that regulate energy utilization. Supports overall metabolic health.',
        },
        {
          icon: '🍷',
          name: 'Recovery From Oxidative Stress',
          desc: 'May help replenish NAD+ levels depleted by stress, aging, poor sleep, and alcohol consumption.',
        },
      ],
    },
  ],
};

const GHK_BENEFITS = {
  intro:
    'GHK-Cu (Glycyl-L-Histidyl-L-Lysine Copper) is a naturally occurring copper peptide found in human plasma, saliva, and urine. Levels decline with age. It is widely studied for its role in skin rejuvenation, tissue repair, hair health, and overall regenerative support.',
  groups: [
    {
      title: '✨ Skin Benefits of GHK-Cu',
      items: [
        {
          icon: '🌟',
          name: 'Supports Collagen Production',
          desc: 'Helps stimulate collagen synthesis. May improve skin firmness and elasticity. Supports a more youthful-looking appearance.',
        },
        {
          icon: '🌟',
          name: 'Reduces the Appearance of Fine Lines & Wrinkles',
          desc: 'Promotes skin renewal processes. Helps improve skin texture and smoothness.',
        },
        {
          icon: '🌟',
          name: 'Supports Wound Healing & Tissue Repair',
          desc: 'Encourages healthy skin regeneration. Supports recovery from minor skin damage.',
        },
        {
          icon: '🌟',
          name: 'Improves Skin Hydration',
          desc: 'Helps strengthen the skin barrier. May improve moisture retention and skin softness.',
        },
        {
          icon: '🌟',
          name: 'Supports Even-Looking Skin Tone',
          desc: 'May help reduce the appearance of redness and discoloration. Promotes a healthier, brighter complexion.',
        },
        {
          icon: '🌟',
          name: 'Antioxidant Protection',
          desc: 'Helps protect skin cells from oxidative stress. Supports healthy aging of the skin.',
        },
      ],
    },
    {
      title: '💇 Hair & Scalp Benefits',
      items: [
        {
          icon: '💎',
          name: 'Supports Hair Growth',
          desc: 'May help stimulate hair follicles. Supports healthier, fuller-looking hair.',
        },
        {
          icon: '💎',
          name: 'Improves Hair Thickness',
          desc: 'Helps support stronger hair strands. May improve hair density over time.',
        },
        {
          icon: '💎',
          name: 'Supports Scalp Health',
          desc: 'Promotes a healthier scalp environment. Supports optimal follicle function.',
        },
      ],
    },
    {
      title: '💪 Recovery & Wellness Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Tissue Repair',
          desc: 'Involved in regenerative processes throughout the body. Supports recovery from physical stress.',
        },
        {
          icon: '🔹',
          name: 'Supports Healthy Inflammatory Response',
          desc: 'Helps maintain normal tissue recovery processes.',
        },
        {
          icon: '🔹',
          name: 'Supports Connective Tissue Health',
          desc: 'Plays a role in maintaining skin, tendons, and connective tissues.',
        },
        {
          icon: '🔹',
          name: 'Antioxidant Support',
          desc: 'Helps combat oxidative stress associated with aging and environmental exposure.',
        },
      ],
    },
    {
      title: '🌿 Healthy Aging Benefits',
      items: [
        {
          icon: '🧬',
          name: 'Supports Cellular Renewal',
          desc: 'Encourages healthy cellular function and regeneration.',
        },
        {
          icon: '🧬',
          name: 'Supports Youthful Skin Appearance',
          desc: 'Helps maintain skin firmness, elasticity, and overall skin quality.',
        },
        {
          icon: '🧬',
          name: 'Supports Long-Term Skin Health',
          desc: 'Promotes healthier-looking skin as part of an overall wellness routine.',
        },
      ],
    },
  ],
};

const TIRZEPATIDE_BENEFITS = {
  intro:
    'Tirzepatide is a dual-action peptide that works on both GLP-1 and GIP receptors, which are involved in appetite regulation, blood sugar control, and metabolic function. It is widely known for its role in weight management and metabolic health support.',
  groups: [
    {
      title: '⚖️ Weight Management Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Reduced Appetite',
          desc: 'Helps promote feelings of fullness. May reduce hunger and food cravings. Supports portion control and healthier eating habits.',
        },
        {
          icon: '🔹',
          name: 'Supports Weight Loss Goals',
          desc: 'Helps individuals maintain a calorie deficit. Supports gradual and sustainable weight management when combined with proper nutrition and exercise.',
        },
        {
          icon: '🔹',
          name: 'Supports Reduced Food Noise',
          desc: 'May help reduce constant thoughts about food. Supports improved control over eating behaviors.',
        },
      ],
    },
    {
      title: '🔥 Metabolic Health Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Healthy Blood Sugar Regulation',
          desc: 'Helps support glucose metabolism. Supports healthy insulin response.',
        },
        {
          icon: '🔹',
          name: 'Supports Improved Insulin Sensitivity',
          desc: 'May help the body utilize glucose more efficiently.',
        },
        {
          icon: '🔹',
          name: 'Supports Metabolic Function',
          desc: 'Supports overall metabolic wellness and energy utilization.',
        },
      ],
    },
    {
      title: '❤️ Cardiometabolic Wellness Support',
      items: [
        {
          icon: '🔹',
          name: 'Supports Healthy Cholesterol Levels',
          desc: 'May support healthier lipid profiles as part of overall weight management efforts.',
        },
        {
          icon: '🔹',
          name: 'Supports Healthy Blood Pressure',
          desc: 'Weight loss may contribute to improvements in cardiovascular health markers.',
        },
        {
          icon: '🔹',
          name: 'Supports Reduction of Excess Visceral Fat',
          desc: 'Helps target unhealthy abdominal fat associated with metabolic health risks.',
        },
      ],
    },
    {
      title: '🍽️ Lifestyle Benefits',
      items: [
        {
          icon: '✨',
          name: 'Better Portion Control',
          desc: 'Supports satisfaction with smaller meals.',
        },
        {
          icon: '✨',
          name: 'Reduced Snacking',
          desc: 'May decrease frequent cravings between meals.',
        },
        {
          icon: '✨',
          name: 'Long-Lasting Fullness',
          desc: 'Slows gastric emptying, helping users feel fuller for longer.',
        },
        {
          icon: '✨',
          name: 'Supports Healthy Habit Formation',
          desc: 'Can help individuals stay consistent with nutrition and fitness goals.',
        },
      ],
    },
    {
      title: '🌟 Wellness & Quality of Life Benefits',
      items: [
        {
          icon: '💎',
          name: 'Supports Confidence During Weight Loss Journey',
          desc: 'Helps users stay motivated by supporting measurable progress.',
        },
        {
          icon: '💎',
          name: 'Supports Active Lifestyle Goals',
          desc: 'May improve mobility and physical comfort as body weight decreases.',
        },
        {
          icon: '💎',
          name: 'Supports Long-Term Weight Management',
          desc: 'Can be part of a comprehensive wellness strategy alongside diet and exercise.',
        },
      ],
    },
  ],
};

const RETATRUTIDE_BENEFITS = {
  intro:
    'Retatrutide is an investigational triple-action peptide that targets GLP-1, GIP, and Glucagon receptors. This unique mechanism is being studied for its potential effects on weight management, energy metabolism, and body composition.',
  groups: [
    {
      title: '⚖️ Weight Management Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Significant Appetite Control',
          desc: 'Helps promote feelings of fullness. May reduce hunger and food cravings. Supports reduced calorie intake.',
        },
        {
          icon: '🔹',
          name: 'Supports Weight Loss Goals',
          desc: 'Assists individuals in maintaining a calorie deficit. Supports comprehensive weight management programs.',
        },
        {
          icon: '🔹',
          name: 'Supports Long-Term Weight Management',
          desc: 'May help users maintain healthier eating habits and weight-loss progress.',
        },
      ],
    },
    {
      title: '🔥 Metabolic Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Increased Energy Expenditure',
          desc: 'The glucagon receptor activity is believed to support increased calorie burning.',
        },
        {
          icon: '🔹',
          name: 'Supports Fat Metabolism',
          desc: 'May help the body utilize stored fat more efficiently.',
        },
        {
          icon: '🔹',
          name: 'Supports Healthy Blood Sugar Regulation',
          desc: 'Supports glucose control through GLP-1 and GIP pathways.',
        },
        {
          icon: '🔹',
          name: 'Supports Improved Insulin Sensitivity',
          desc: 'Helps support overall metabolic function.',
        },
      ],
    },
    {
      title: '💪 Body Composition Benefits',
      items: [
        {
          icon: '🔹',
          name: 'Supports Reduction of Excess Body Fat',
          desc: 'May help reduce overall body fat percentage.',
        },
        {
          icon: '🔹',
          name: 'Supports Reduction of Visceral Fat',
          desc: 'Helps target unhealthy abdominal fat associated with metabolic health risks.',
        },
        {
          icon: '🔹',
          name: 'Supports Leaner Body Composition',
          desc: 'When combined with adequate protein intake and exercise, may support preservation of lean muscle mass during weight loss.',
        },
      ],
    },
    {
      title: '❤️ Cardiometabolic Wellness Support',
      items: [
        {
          icon: '🔹',
          name: 'Supports Healthy Cholesterol Levels',
          desc: 'Weight reduction may contribute to healthier lipid profiles.',
        },
        {
          icon: '🔹',
          name: 'Supports Cardiovascular Wellness',
          desc: 'Improvements in weight and metabolic health may positively affect overall cardiovascular risk factors.',
        },
        {
          icon: '🔹',
          name: 'Supports Healthy Liver Function',
          desc: 'Ongoing research is exploring benefits related to liver fat reduction and metabolic health.',
        },
      ],
    },
    {
      title: '🌟 Lifestyle & Wellness Benefits',
      items: [
        {
          icon: '✨',
          name: 'Supports Reduced Food Noise',
          desc: 'May help reduce frequent thoughts about food and snacking.',
        },
        {
          icon: '✨',
          name: 'Supports Better Portion Control',
          desc: 'Encourages satisfaction with smaller meals.',
        },
        {
          icon: '✨',
          name: 'Supports Greater Adherence to Wellness Goals',
          desc: 'Helps users stay consistent with nutrition and exercise plans.',
        },
        {
          icon: '✨',
          name: 'Supports Increased Confidence',
          desc: 'Weight-loss progress often contributes to improved self-confidence and motivation.',
        },
      ],
    },
    {
      title: '🧪 Why Retatrutide Is Different — Triple-Receptor Technology',
      items: [
        {
          icon: '🔬',
          name: 'Targets Three Pathways',
          desc: 'Most weight-management peptides target one or two pathways. Retatrutide targets three: GLP-1, GIP, and Glucagon receptors.',
        },
        { icon: '✔', name: 'GLP-1 Receptor' },
        { icon: '✔', name: 'GIP Receptor' },
        { icon: '✔', name: 'Glucagon Receptor' },
        {
          icon: '🎯',
          name: 'Studied For',
          desc: 'Enhanced appetite control · Increased energy expenditure · Greater fat-loss potential · Improved metabolic health support.',
        },
      ],
    },
  ],
};

const PRODUCTS_EXT = [
  {
    id: 'nad500',
    code: 'NAD⁺',
    name: 'NAD⁺ Renewal',
    category: 'Cellular Energy',
    strength: '500mg',
    price: 128,
    accent: '#0E3D2E',
    rating: 4.9,
    reviews: 284,
    badge: 'High-Strength',
    image: 'uploads/new-box-8.png',
    bottle: 'uploads/bottle-2.png',
    shortDesc: 'High-strength formulation for enhanced cellular support and performance.',
    desc: 'VELORA NAD 500mg is a high-strength formulation developed for those seeking advanced cellular support and sustained performance. Designed for more intensive protocols, it delivers higher concentration with reliable consistency.',
    features: [
      'High-strength formulation',
      'Advanced cellular support',
      'Sustained performance',
      'Professional-grade quality',
    ],
    benefits: NAD_BENEFITS,
  },
  {
    id: 'nad100',
    code: 'NAD⁺',
    name: 'NAD⁺ Essence',
    category: 'Cellular Energy',
    strength: '100mg',
    price: 78,
    accent: '#2A5DAA',
    rating: 4.8,
    reviews: 198,
    badge: 'New',
    image: 'uploads/new-box-3.png',
    bottle: 'uploads/bottle-1.png',
    shortDesc: 'Cellular support formulation designed for energy and vitality.',
    desc: 'VELORA NAD 100mg is designed to support cellular processes and energy balance, making it an ideal option for those starting NAD-based protocols. This formulation provides a controlled introduction while maintaining VELORA’s commitment to purity and precision.',
    features: [
      'Entry-level NAD support',
      'Focus on cellular energy',
      'Clean and stable formulation',
      'Professional-grade quality',
    ],
    benefits: NAD_BENEFITS,
  },
  {
    id: 'ghk100',
    code: 'GHK-Cu',
    name: 'Copper Peptide Pro',
    category: 'Derma Repair',
    strength: '100mg',
    price: 168,
    accent: '#5A3E8E',
    rating: 5.0,
    reviews: 412,
    badge: 'Hero',
    image: 'uploads/new-box-1.png',
    bottle: 'uploads/bottle-5.png',
    shortDesc: 'Advanced peptide strength for enhanced support and performance.',
    desc: 'VELORA GHK-CU 100mg delivers a higher concentration for advanced protocols requiring greater support and efficiency. Designed for experienced users, it provides enhanced formulation strength with consistent quality. Engineered for professionals who demand results.',
    features: ['High-strength peptide', 'Advanced-level use', 'Enhanced formulation', 'Professional-grade quality'],
    benefits: GHK_BENEFITS,
  },
  {
    id: 'ghk50',
    code: 'GHK-Cu',
    name: 'Copper Peptide',
    category: 'Derma Repair',
    strength: '50mg',
    price: 118,
    accent: '#7A5BC7',
    rating: 4.9,
    reviews: 308,
    badge: 'Editor’s Pick',
    image: 'uploads/new-box-5.png',
    bottle: 'uploads/bottle-6.png',
    shortDesc: 'Precision peptide designed for skin and repair-focused protocols.',
    desc: 'VELORA GHK-CU 50mg is formulated to support skin-focused and repair-oriented protocols, offering a balanced strength suitable for controlled use. Developed with advanced formulation standards, it ensures purity, stability, and professional-grade consistency.',
    features: ['Balanced peptide strength', 'Skin-focused application', 'Reliable formulation', 'High purity standard'],
    benefits: GHK_BENEFITS,
  },
  {
    id: 'tir30',
    code: 'TIRZEPATIDE',
    name: 'Tirzepatide Apex',
    category: 'Metabolic Control',
    strength: '30mg',
    price: 218,
    accent: '#5A3E8E',
    rating: 4.8,
    reviews: 142,
    badge: 'Limited',
    image: 'uploads/new-box-6.png',
    bottle: 'uploads/bottle-7.png',
    shortDesc: 'Advanced strength designed for maximum support and performance.',
    desc: 'VELORA Tirzepatide 30mg is developed for advanced protocols requiring higher concentration and stronger support. This premium formulation is tailored for experienced users who demand maximum efficiency and precision. Manufactured to meet high standards, it ensures quality, purity, and dependable performance.',
    features: ['High-strength formulation', 'Advanced-level use', 'Maximum support', 'Professional-grade quality'],
    benefits: TIRZEPATIDE_BENEFITS,
  },
  {
    id: 'tir20',
    code: 'TIRZEPATIDE',
    name: 'Tirzepatide Balance',
    category: 'Metabolic Control',
    strength: '20mg',
    price: 168,
    accent: '#2A5DAA',
    rating: 4.8,
    reviews: 118,
    badge: 'Bestseller',
    image: 'uploads/new-box-10.png',
    bottle: 'uploads/bottle-10.png',
    shortDesc: 'Balanced strength for enhanced results and flexibility.',
    desc: 'VELORA Tirzepatide 20mg is the most preferred strength, offering a balance between effectiveness and flexibility. Ideal for those seeking enhanced support while maintaining control over dosing progression. Engineered for professionals, it delivers reliable performance and consistent quality with every vial.',
    features: ['Most popular choice', 'Balanced strength', 'Flexible protocol use', 'Consistent results'],
    benefits: TIRZEPATIDE_BENEFITS,
  },
  {
    id: 'tir10',
    code: 'TIRZEPATIDE',
    name: 'Tirzepatide Light',
    category: 'Metabolic Control',
    strength: '10mg',
    price: 118,
    accent: '#C9A47A',
    rating: 4.7,
    reviews: 96,
    badge: 'New',
    image: 'uploads/new-box-7.png',
    bottle: 'uploads/bottle-9.png',
    shortDesc: 'Entry-level peptide designed for gradual introduction and controlled progression.',
    desc: 'VELORA Tirzepatide 10mg is formulated for individuals beginning their peptide protocol, offering a controlled and manageable starting point. Designed with precision and consistency in mind, this formulation supports a structured approach to progression while maintaining professional-grade quality. Crafted under strict standards, it ensures purity, stability, and reliability for every use.',
    features: [
      'Beginner-friendly strength',
      'Consistent formulation',
      'High purity standard',
      'Designed for gradual protocols',
    ],
    benefits: TIRZEPATIDE_BENEFITS,
  },
  {
    id: 'reta30',
    code: 'RETA',
    name: 'Retatrutide Reset',
    category: 'Metabolic Control',
    strength: '30mg',
    accent: '#0E3D2E',
    rating: 4.9,
    reviews: 62,
    badge: 'New',
    hidePrice: true,
    image: 'uploads/new-box-2.png',
    bottle: 'uploads/reta-bottle.png',
    shortDesc: 'Advanced retatrutide formulation designed for premium metabolic support.',
    desc: 'VELORA Retatrutide Reset 30mg is a high-strength metabolic peptide developed for advanced protocols and discerning users. Formulated with precision and refined under exacting standards, it delivers concentrated efficacy with the consistency and purity that define the VELORA line. Engineered for professionals who demand maximum support and dependable performance.',
    features: [
      'High-strength retatrutide formulation',
      'Advanced metabolic support',
      'Designed for professional protocols',
      'Professional-grade quality',
    ],
    benefits: RETATRUTIDE_BENEFITS,
  },
  {
    id: 'nia',
    code: 'NIAMED',
    name: 'Niamed Brightening',
    category: 'Brightening Infusion',
    strength: '250mg/10ml',
    price: 96,
    accent: '#2A5DAA',
    rating: 4.8,
    reviews: 154,
    badge: 'New',
    image: 'uploads/new-box-4.png',
    bottle: 'uploads/new-box-4.png',
  },
  {
    id: 'bac',
    code: 'BAC WATER',
    name: 'Bacteriostatic Water',
    category: 'Sterile Diluent',
    strength: '10ml',
    price: 32,
    accent: '#0E3D2E',
    rating: 4.9,
    reviews: 540,
    badge: 'Essential',
    image: 'uploads/new-box-9.png',
    bottle: 'uploads/new-box-9.png',
    shortDesc: 'Sterile solution designed for safe and reliable reconstitution.',
    desc: 'VELORA Bacteriostatic Water is a sterile solution formulated for precision reconstitution of peptide products. Designed to maintain stability and usability, it supports proper preparation protocols. Manufactured under strict quality standards to ensure safety, sterility, and reliability.',
    features: [
      'Sterile and stable solution',
      'Supports reconstitution',
      'Professional-grade quality',
      'Reliable and consistent',
    ],
  },
];

const PRODUCTS = PRODUCTS_EXT.slice(0, 4);

const CATEGORIES = ['All Vials', 'Cellular Energy', 'Derma Repair', 'Metabolic Control', 'Essentials'];

const TESTIMONIALS = [
  {
    quote:
      "My ritual has been reduced to three vials and a quiet ten minutes. Velora rewrote what 'skincare' meant in my home.",
    name: 'Anjali Mehra',
    role: 'Architectural Designer · Mumbai',
    initial: 'A',
  },
  {
    quote:
      "The GHK-Cu protocol resurfaced something I'd written off as gone. After six weeks my mirror started agreeing with the data.",
    name: 'Léa Marchetti',
    role: 'Clinical Dermatology · Paris',
    initial: 'L',
  },
  {
    quote:
      'I appreciate that the science speaks first and the bottle whispers second. Discreet, exact, beautifully made.',
    name: 'Yusuf Adebayo',
    role: 'Investor · London',
    initial: 'Y',
  },
];

/* =========================================================
   HERO
   ========================================================= */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap-wide hero-grid">
        <div className="hero-copy">
          <Reveal>
            <div className="eyebrow">
              <span className="dot" />
              BIOPEPTIDE SCIENCES
            </div>
          </Reveal>
          <Reveal delay={1}>
            <h1>
              Precision <span className="it">wellness.</span>
              <br />
              Elevated <span className="au">performance.</span>
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <p className="lede">
              Research-driven formulations designed for modern wellness, recovery, vitality, and aesthetic support.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <div className="hero-ctas">
              <a className="btn btn-primary" href="#products">
                Explore the Products <span className="arr">→</span>
              </a>
              <a className="btn btn-ghost" href="#science">
                Discover Peptides
              </a>
            </div>
          </Reveal>
          <Reveal delay={4}>
            <div className="hero-meta">
              <div className="m">
                <b>96.4%</b>
                <span>Reported skin smoothness · 8 wks</span>
              </div>
              <div className="m">
                <b>4.9</b>
                <span>Across 2,400+ verified rituals</span>
              </div>
              <div className="m">
                <b>0.02%</b>
                <span>Active range, clinical-grade</span>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={2} className="hero-visual">
          <img
            className="hero-mobile-image"
            src="uploads/mobile-hero-2.png"
            alt="VELORA NAD 500mg — lyophilized peptide vial"
          />
          <div className="hero-stage">
            <div className="plinth" />
            <div className="ring" />
            <div className="ring r2" />
            <div className="ring r3" />

            <div className="badge-spin">
              <AuthSeal />
            </div>

            {/* Floating peptide tags */}
            <div className="peptide-tag t1">
              <span className="swatch" style={{ background: '#7A5BC7' }} />
              NAD⁺ · 500mg
            </div>
            <div className="peptide-tag t2">
              <span className="swatch" style={{ background: '#2A5DAA' }} />
              GHK-Cu · 50mg
            </div>
            <div className="peptide-tag t3">
              <span className="swatch" style={{ background: '#0E3D2E' }} />
              RETA · 30mg
            </div>

            {/* Vial trio */}
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
              <div
                style={{
                  display: 'flex',
                  gap: '-20px',
                  alignItems: 'flex-end',
                  position: 'relative',
                  width: '72%',
                  justifyContent: 'center',
                }}
              >
                <div
                  style={{
                    width: '30%',
                    marginRight: '-6%',
                    transform: 'translateY(20px)',
                    filter: 'drop-shadow(0 24px 32px rgba(14,61,46,.3))',
                  }}
                >
                  <Vial accent="#2A5DAA" label="GHK-Cu" strength="50mg" angle={-4} />
                </div>
                <div style={{ width: '38%', zIndex: 2, filter: 'drop-shadow(0 30px 40px rgba(14,61,46,.4))' }}>
                  <Vial accent="#7A5BC7" label="NAD+" strength="500mg" />
                </div>
                <div
                  style={{
                    width: '30%',
                    marginLeft: '-6%',
                    transform: 'translateY(28px)',
                    filter: 'drop-shadow(0 24px 32px rgba(14,61,46,.3))',
                  }}
                >
                  <Vial accent="#0E3D2E" label="RETA" strength="30mg" angle={4} />
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>

      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          <span>
            Pharmaceutical-grade peptides <i className="sep" /> Third-party assayed <i className="sep" /> Cold-chain
            shipped <i className="sep" /> Authenticated by hologram <i className="sep" />
          </span>
          <span>
            Pharmaceutical-grade peptides <i className="sep" /> Third-party assayed <i className="sep" /> Cold-chain
            shipped <i className="sep" /> Authenticated by hologram <i className="sep" />
          </span>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   ABOUT — Company description
   ========================================================= */
function About() {
  return (
    <section className="section section-paper" id="about">
      <div className="wrap">
        <div className="science-grid">
          <Reveal>
            <div
              style={{
                position: 'relative',
                aspectRatio: '1',
                maxWidth: '440px',
                margin: '0 auto',
                display: 'grid',
                placeItems: 'center',
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  inset: '6%',
                  borderRadius: '50%',
                  border: '1px solid rgba(201,164,122,.35)',
                }}
              />
              <div
                style={{
                  position: 'absolute',
                  inset: '18%',
                  borderRadius: '50%',
                  border: '1px dashed rgba(201,164,122,.25)',
                }}
              />
              <div
                style={{
                  position: 'relative',
                  background: 'var(--ivory)',
                  border: '1px solid var(--line)',
                  borderRadius: '14px',
                  padding: '36px 28px',
                  textAlign: 'center',
                  width: '72%',
                  boxShadow: '0 30px 60px rgba(14,61,46,.10)',
                }}
              >
                <div style={{ display: 'grid', placeItems: 'center', marginBottom: '14px' }}>
                  <img src="uploads/logo.png" alt="VELORA" width={56} height={56} style={{ objectFit: 'contain' }} />
                </div>
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontSize: '26px',
                    letterSpacing: '.18em',
                    color: 'var(--emerald-deep)',
                  }}
                >
                  VELORA
                </div>
                <div
                  className="mono"
                  style={{
                    fontSize: '10px',
                    letterSpacing: '.18em',
                    color: 'var(--ink-3)',
                    marginTop: '4px',
                  }}
                >
                  BIOPEPTIDE SCIENCES
                </div>
                <div
                  style={{
                    height: '1px',
                    background: 'var(--line)',
                    margin: '18px auto',
                    width: '48px',
                  }}
                />
                <div
                  className="italic-serif"
                  style={{
                    fontSize: '15px',
                    color: 'var(--gold-deep)',
                    lineHeight: '1.7',
                  }}
                >
                  Science-driven.
                  <br />
                  Professionally formulated.
                  <br />
                  Quality you can trust.
                </div>
              </div>
            </div>
          </Reveal>

          <div className="science-text">
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                About · VELORA BioPeptide Sciences
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2
                className="display"
                style={{
                  fontSize: 'clamp(40px, 5vw, 64px)',
                  margin: '18px 0 18px',
                  lineHeight: 1.02,
                  color: 'var(--emerald-deep)',
                }}
              >
                A premium wellness
                <br />
                and{' '}
                <span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>
                  peptide laboratory.
                </span>
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p
                className="italic-serif"
                style={{
                  fontSize: 'clamp(18px, 1.7vw, 22px)',
                  color: 'var(--gold-deep)',
                  lineHeight: 1.45,
                  margin: '0 0 24px',
                  paddingLeft: '18px',
                  borderLeft: '2px solid var(--gold-soft)',
                }}
              >
                Premium peptide &amp; wellness solutions built on precision, purity, and performance.
              </p>
              <p>
                VELORA BioPeptide Sciences is a premium wellness and peptide brand dedicated to delivering high-quality,
                science-driven formulations designed for precision, purity, and performance.
              </p>
              <p>
                We specialize in advanced peptide solutions, injectable compounds, and clinical-grade formulations —
                developed through rigorous standards and modern biotechnology. Every VELORA product is crafted to meet
                the demands of professionals who value consistency, reliability, and results.
              </p>
              <p>
                At VELORA, we believe in combining innovation and integrity, ensuring that each product reflects our
                commitment to excellence, safety, and scientific advancement.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <ul className="science-bullets">
                <li>
                  <span className="num">i.</span>
                  <div>
                    <b>SCIENCE-DRIVEN</b>
                    <small>Formulated on peer-reviewed peptide research and modern biotechnology.</small>
                  </div>
                </li>
                <li>
                  <span className="num">ii.</span>
                  <div>
                    <b>PROFESSIONALLY FORMULATED</b>
                    <small>Clinical-grade compounds engineered for precision, purity, and performance.</small>
                  </div>
                </li>
                <li>
                  <span className="num">iii.</span>
                  <div>
                    <b>QUALITY YOU CAN TRUST</b>
                    <small>Third-party assayed, hologram-sealed, and shipped under strict cold-chain.</small>
                  </div>
                </li>
              </ul>
            </Reveal>
            <Reveal delay={4}>
              <a href="#science" className="btn-link">
                The science behind Velora <span className="arr">→</span>
              </a>
            </Reveal>
          </div>
        </div>

        <Reveal delay={2}>
          <div
            style={{
              marginTop: '80px',
              paddingTop: '48px',
              borderTop: '1px solid var(--line)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 'clamp(24px, 5vw, 64px)',
              flexWrap: 'wrap',
              textAlign: 'center',
            }}
          >
            {['Precision.', 'Purity.', 'Performance.'].map((word) => (
              <span
                key={word}
                className="italic-serif"
                style={{
                  fontFamily: 'var(--f-display)',
                  fontStyle: 'italic',
                  fontSize: 'clamp(32px, 4.4vw, 56px)',
                  color: 'var(--gold-deep)',
                  lineHeight: 1,
                  letterSpacing: '-.01em',
                }}
              >
                {word}
              </span>
            ))}
          </div>
          <div
            className="mono"
            style={{
              textAlign: 'center',
              marginTop: '18px',
              fontSize: '10.5px',
              letterSpacing: '.24em',
              color: 'var(--ink-3)',
            }}
          >
            — THE VELORA STANDARD —
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   SCIENCE / PEPTIDES
   ========================================================= */
function Science() {
  return (
    <section className="section section-paper" id="science">
      <div className="wrap">
        <div className="science-grid">
          <Reveal>
            <div className="molecule">
              <div className="ring-bg" />
              <svg viewBox="0 0 400 400">
                <defs>
                  <radialGradient id="atomGrad" cx="35%" cy="35%">
                    <stop offset="0%" stopColor="#fff" />
                    <stop offset="100%" stopColor="#C9A47A" />
                  </radialGradient>
                  <radialGradient id="atomEmerald" cx="35%" cy="35%">
                    <stop offset="0%" stopColor="#5A9F84" />
                    <stop offset="100%" stopColor="#0E3D2E" />
                  </radialGradient>
                </defs>
                {/* Helix-ish path */}
                <g stroke="#0E3D2E" strokeOpacity=".35" strokeWidth="1" fill="none">
                  <path d="M80 200 Q 200 100, 320 200 T 80 200" />
                  <path d="M80 200 Q 200 300, 320 200 T 80 200" />
                </g>
                {/* Connections */}
                <g stroke="#0E3D2E" strokeOpacity=".25" strokeWidth=".8">
                  <line x1="120" y1="150" x2="200" y2="120" />
                  <line x1="200" y1="120" x2="280" y2="150" />
                  <line x1="280" y1="150" x2="320" y2="220" />
                  <line x1="320" y1="220" x2="260" y2="280" />
                  <line x1="260" y1="280" x2="180" y2="290" />
                  <line x1="180" y1="290" x2="120" y2="250" />
                  <line x1="120" y1="250" x2="120" y2="150" />
                  <line x1="200" y1="120" x2="220" y2="200" />
                  <line x1="220" y1="200" x2="280" y2="150" />
                  <line x1="220" y1="200" x2="180" y2="290" />
                  <line x1="220" y1="200" x2="120" y2="250" />
                </g>
                {/* Atoms */}
                <circle cx="120" cy="150" r="12" fill="url(#atomGrad)" />
                <circle cx="200" cy="120" r="16" fill="url(#atomEmerald)" />
                <circle cx="280" cy="150" r="11" fill="url(#atomGrad)" />
                <circle cx="320" cy="220" r="14" fill="url(#atomEmerald)" />
                <circle cx="260" cy="280" r="10" fill="url(#atomGrad)" />
                <circle cx="180" cy="290" r="13" fill="url(#atomEmerald)" />
                <circle cx="120" cy="250" r="11" fill="url(#atomGrad)" />
                <circle cx="220" cy="200" r="22" fill="url(#atomEmerald)" stroke="#C9A47A" strokeWidth="1.5" />
                {/* Labels */}
                <text
                  x="220"
                  y="204"
                  textAnchor="middle"
                  fontFamily="Cormorant Garamond"
                  fontStyle="italic"
                  fontSize="13"
                  fill="#FBF8F3"
                >
                  peptide
                </text>
                <text x="320" y="244" fontFamily="JetBrains Mono" fontSize="8" fill="#0E3D2E" letterSpacing="1">
                  Gly-His-Lys
                </text>
                <text x="80" y="140" fontFamily="JetBrains Mono" fontSize="8" fill="#0E3D2E" letterSpacing="1">
                  Cu²⁺
                </text>
                <text x="240" y="100" fontFamily="JetBrains Mono" fontSize="8" fill="#0E3D2E" letterSpacing="1">
                  NH₂
                </text>
              </svg>
            </div>
          </Reveal>

          <div className="science-text">
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                The Science · Vol. I
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '18px 0 22px' }}>
                Three amino acids,
                <br />
                <span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>
                  infinite consequence.
                </span>
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p>
                Peptides are the brief, eloquent sentences your body writes to itself — short chains of amino acids that
                instruct collagen to renew, telomeres to hold, and the skin barrier to remember its own architecture.
              </p>
              <p>
                Velora isolates these messengers and returns them to you in pharmaceutical-grade vials — lyophilised,
                third-party assayed, indistinguishable from the molecules already present in your dermis.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <ul className="science-bullets">
                <li>
                  <span className="num">i.</span>
                  <div>
                    <b>SIGNAL PEPTIDES</b>
                    <small>
                      Instruct fibroblasts to synthesise new collagen — the structural protein responsible for skin
                      firmness.
                    </small>
                  </div>
                </li>
                <li>
                  <span className="num">ii.</span>
                  <div>
                    <b>CARRIER PEPTIDES</b>
                    <small>
                      Deliver trace elements such as copper to enzymatic sites involved in wound healing and renewal.
                    </small>
                  </div>
                </li>
                <li>
                  <span className="num">iii.</span>
                  <div>
                    <b>NEUROTRANSMITTER PEPTIDES</b>
                    <small>
                      Soften micro-contractions and the appearance of expression lines without altering function.
                    </small>
                  </div>
                </li>
                <li>
                  <span className="num">iv.</span>
                  <div>
                    <b>ENZYME-INHIBITOR PEPTIDES</b>
                    <small>
                      Protect collagen from premature breakdown, preserving the dermal matrix already in place.
                    </small>
                  </div>
                </li>
              </ul>
            </Reveal>
            <Reveal delay={4}>
              <a href="#products" className="btn-link">
                Browse the peptide products <span className="arr">→</span>
              </a>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PRODUCTS
   ========================================================= */
function Products() {
  const [tab, setTab] = React.useState(0);
  const [activeProduct, setActiveProduct] = React.useState(null);
  const byCat = (cat) => PRODUCTS_EXT.filter((p) => p.category === cat);
  const list =
    tab === 0
      ? PRODUCTS_EXT
      : tab === 1
        ? byCat('Cellular Energy')
        : tab === 2
          ? byCat('Derma Repair')
          : tab === 3
            ? byCat('Metabolic Control')
            : PRODUCTS_EXT.filter((p) => p.category === 'Sterile Diluent' || p.category === 'Brightening Infusion');

  return (
    <section className="section" id="products">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                The Products · {PRODUCTS_EXT.length} vials
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                The peptide
                <br />
                <span className="it">products.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              Each vial begins as a single peptide sequence and ends as a quiet ritual. Choose your concentration — or
              compose a regimen with our concierge.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="products-bar">
            <div className="product-tabs">
              {CATEGORIES.map((c, i) => (
                <button key={c} className={`product-tab ${tab === i ? 'active' : ''}`} onClick={() => setTab(i)}>
                  {c}
                </button>
              ))}
            </div>
            <a href="#science" className="btn-link">
              The science behind <span className="arr">→</span>
            </a>
          </div>
        </Reveal>

        <div className="product-grid">
          {list.map((p, i) => (
            <ProductCard key={p.id + tab} p={p} delay={Math.min(4, i + 1)} onOpen={() => setActiveProduct(p)} />
          ))}
        </div>
      </div>
      <ProductModal p={activeProduct} onClose={() => setActiveProduct(null)} />
    </section>
  );
}

function ProductCard({ p, delay, onOpen }) {
  const [hover, setHover] = React.useState(false);
  const showBottle = hover && p.bottle && p.bottle !== p.image;
  const handleOpen = () => onOpen && onOpen();
  const handleKey = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      handleOpen();
    }
  };
  return (
    <Reveal delay={delay}>
      <article
        className="product-card photo"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={handleOpen}
        onKeyDown={handleKey}
        role="button"
        tabIndex={0}
        style={{ cursor: onOpen ? 'pointer' : 'default' }}
      >
        <div className="product-art">
          <img className="product-img" src={p.image} alt={`${p.name} — ${p.code} ${p.strength}`} />
          {p.bottle && p.bottle !== p.image && (
            <img className={`product-img bottle ${showBottle ? 'show' : ''}`} src={p.bottle} alt={`${p.name} vial`} />
          )}
        </div>
        <div className="product-meta">
          <span className="cat">{p.category}</span>
          <h4>{p.name}</h4>
          <small
            style={{ fontFamily: 'var(--f-mono)', fontSize: '10.5px', color: 'var(--ink-3)', letterSpacing: '.1em' }}
          >
            {p.code} · {p.strength}
          </small>
          {p.shortDesc && (
            <p
              className="italic-serif"
              style={{
                margin: '10px 0 6px',
                fontSize: '13.5px',
                color: 'var(--ink-2)',
                fontStyle: 'italic',
                lineHeight: 1.5,
              }}
            >
              {p.shortDesc}
            </p>
          )}
          <div className="row">
            {p.hidePrice ? (
              <span />
            ) : (
              <span
                className="price italic-serif"
                style={{ fontSize: '18px', color: 'var(--gold-deep)', fontStyle: 'italic' }}
              >
                {p.category.split(' ')[0]}
              </span>
            )}
            <span>
              <span className="stars">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Ic.star key={i} width="10" height="10" />
                ))}
              </span>
              <span className="reviews">({p.reviews})</span>
            </span>
          </div>
          {onOpen && (
            <span
              className="mono"
              style={{
                display: 'inline-block',
                marginTop: '10px',
                fontSize: '10px',
                letterSpacing: '.2em',
                color: 'var(--gold-deep)',
                textTransform: 'uppercase',
              }}
            >
              View details <span className="arr">→</span>
            </span>
          )}
        </div>
      </article>
    </Reveal>
  );
}

/* =========================================================
   PRODUCT MODAL — Full description + key features
   ========================================================= */
function ProductModal({ p, onClose }) {
  const open = !!p;

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className="product-modal-scrim"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-labelledby="product-modal-title"
    >
      <div className="product-modal-card" onClick={(e) => e.stopPropagation()}>
        <button
          onClick={onClose}
          aria-label="Close"
          style={{
            position: 'absolute',
            top: '14px',
            right: '14px',
            zIndex: 2,
            width: '38px',
            height: '38px',
            border: '1px solid var(--line)',
            borderRadius: '50%',
            background: 'var(--ivory)',
            color: 'var(--emerald-deep)',
            fontSize: '18px',
            cursor: 'pointer',
            display: 'grid',
            placeItems: 'center',
            lineHeight: 1,
          }}
        >
          ×
        </button>

        <div
          style={{
            background: 'radial-gradient(80% 70% at 50% 30%, rgba(255,255,255,.9), rgba(244,238,228,.9) 70%)',
            display: 'grid',
            alignItems: p.benefits ? 'start' : 'center',
            justifyItems: 'center',
            padding: '48px 32px',
            minHeight: '320px',
          }}
        >
          <img
            src={p.bottle || p.image}
            alt={`${p.name} · ${p.code} ${p.strength}`}
            style={{
              maxWidth: '100%',
              maxHeight: '420px',
              objectFit: 'contain',
              filter: 'drop-shadow(0 30px 40px rgba(14,61,46,.25))',
              ...(p.benefits ? { position: 'sticky', top: '48px' } : {}),
            }}
          />
        </div>

        <div style={{ padding: '48px 40px 40px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
          <div
            className="mono"
            style={{ fontSize: '10.5px', letterSpacing: '.22em', color: 'var(--ink-3)', textTransform: 'uppercase' }}
          >
            {p.category} · {p.code} · {p.strength}
          </div>
          <h3
            id="product-modal-title"
            className="display"
            style={{
              fontFamily: 'var(--f-display)',
              fontSize: 'clamp(28px, 3.4vw, 40px)',
              lineHeight: 1.05,
              margin: 0,
              color: 'var(--emerald-deep)',
            }}
          >
            {p.name}
          </h3>

          {p.shortDesc && (
            <p
              className="italic-serif"
              style={{
                fontSize: '17px',
                color: 'var(--gold-deep)',
                lineHeight: 1.5,
                margin: '4px 0 0',
                paddingLeft: '14px',
                borderLeft: '2px solid var(--gold-soft)',
              }}
            >
              {p.shortDesc}
            </p>
          )}

          {p.desc && (
            <p style={{ fontSize: '14.5px', color: 'var(--ink-2)', lineHeight: 1.7, margin: '8px 0 0' }}>{p.desc}</p>
          )}

          {p.features && p.features.length > 0 && (
            <div style={{ marginTop: '8px' }}>
              <div
                className="mono"
                style={{
                  fontSize: '10.5px',
                  letterSpacing: '.22em',
                  color: 'var(--ink-3)',
                  textTransform: 'uppercase',
                  marginBottom: '10px',
                }}
              >
                Key Features
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '8px' }}>
                {p.features.map((f, i) => (
                  <li
                    key={i}
                    style={{
                      display: 'grid',
                      gridTemplateColumns: '24px 1fr',
                      gap: '10px',
                      alignItems: 'baseline',
                      paddingBottom: '8px',
                      borderBottom: '1px solid var(--line)',
                      fontSize: '13.5px',
                      color: 'var(--emerald-deep)',
                    }}
                  >
                    <span
                      className="italic-serif"
                      style={{ color: 'var(--gold-deep)', fontStyle: 'italic', fontSize: '15px' }}
                    >
                      {['i.', 'ii.', 'iii.', 'iv.', 'v.', 'vi.'][i] || `${i + 1}.`}
                    </span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {p.benefits && (
            <div
              style={{
                marginTop: '24px',
                paddingTop: '24px',
                borderTop: '1px solid var(--line)',
                display: 'flex',
                flexDirection: 'column',
                gap: '20px',
              }}
            >
              {p.benefits.intro && (
                <p style={{ fontSize: '14px', color: 'var(--ink-2)', lineHeight: 1.7, margin: 0 }}>
                  {p.benefits.intro}
                </p>
              )}
              {p.benefits.groups &&
                p.benefits.groups.map((g, gi) => (
                  <div key={gi}>
                    <h4
                      className="display"
                      style={{
                        fontFamily: 'var(--f-display)',
                        fontSize: '20px',
                        color: 'var(--emerald-deep)',
                        margin: '0 0 12px',
                        letterSpacing: '-.005em',
                      }}
                    >
                      {g.title}
                    </h4>
                    <ul
                      style={{
                        listStyle: 'none',
                        padding: 0,
                        margin: 0,
                        display: 'grid',
                        gap: '12px',
                      }}
                    >
                      {g.items.map((b, bi) => (
                        <li
                          key={bi}
                          style={{
                            display: 'grid',
                            gridTemplateColumns: '28px 1fr',
                            gap: '12px',
                            alignItems: 'flex-start',
                            paddingBottom: '10px',
                            borderBottom: '1px solid var(--line)',
                          }}
                        >
                          <span style={{ fontSize: '18px', lineHeight: 1.2 }} aria-hidden="true">
                            {b.icon}
                          </span>
                          <div>
                            <div
                              style={{
                                fontSize: '13.5px',
                                fontWeight: 600,
                                color: 'var(--emerald-deep)',
                                marginBottom: b.desc ? '4px' : 0,
                              }}
                            >
                              {b.name}
                            </div>
                            {b.desc && (
                              <div
                                style={{
                                  fontSize: '13px',
                                  color: 'var(--ink-2)',
                                  lineHeight: 1.55,
                                }}
                              >
                                {b.desc}
                              </div>
                            )}
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
            </div>
          )}

          <div style={{ display: 'flex', gap: '12px', marginTop: '16px', flexWrap: 'wrap' }}>
            <a className="btn btn-primary" href="#contact" onClick={onClose}>
              Order via concierge <span className="arr">→</span>
            </a>
            <button
              onClick={onClose}
              className="btn btn-ghost"
              style={{ background: 'transparent', cursor: 'pointer' }}
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   SHOWCASE — Real product photography gallery
   ========================================================= */
const SHOWCASE_BOTTLES = [
  { src: 'uploads/bottle-2.png', code: 'NAD⁺', name: 'NAD⁺ Renewal', dose: '500mg', tag: 'Bestseller', tagGold: true },
  { src: 'uploads/bottle-1.png', code: 'NAD⁺', name: 'NAD⁺ Essence', dose: '100mg', tag: 'New' },
  {
    src: 'uploads/bottle-5.png',
    code: 'GHK-Cu',
    name: 'Copper Peptide Pro',
    dose: '100mg',
    tag: 'Hero',
    tagGold: true,
  },
  { src: 'uploads/bottle-6.png', code: 'GHK-Cu', name: 'Copper Peptide', dose: '50mg', tag: 'Editor’s Pick' },
  {
    src: 'uploads/bottle-7.png',
    code: 'TIRZEPATIDE',
    name: 'Tirzepatide Reform',
    dose: '30mg',
    tag: 'Limited',
    tagGold: true,
  },
  { src: 'uploads/bottle-10.png', code: 'TIRZEPATIDE', name: 'Tirzepatide Balance', dose: '20mg', tag: 'Restocked' },
  { src: 'uploads/bottle-9.png', code: 'TIRZEPATIDE', name: 'Tirzepatide Light', dose: '10mg', tag: 'New' },
  { src: 'uploads/bottle-4.png', code: 'NAD⁺', name: 'NAD⁺ Daily', dose: '100mg', tag: 'Travel-Size' },
];

function Showcase() {
  return (
    <section className="section section-paper" id="showcase">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                The Collection · Photographed
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                The vials,
                <br />
                <span className="it">in their own light.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              Each bottle is photographed under identical laboratory conditions — clear glass, lyophilised peptide,
              hologram-sealed. The products, as they arrive at your door.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="showcase-hero">
            <img
              className="showcase-hero-img"
              src="uploads/22D17F43-2D5C-4AEC-ADB0-10E71F5253C3.png"
              alt="Velora full product line — NAD⁺, GHK-Cu, RETA, BAC Water"
            />
            <div className="showcase-hero-overlay" />
            <div className="showcase-hero-cap">
              <div>
                <span className="badge">
                  <span
                    style={{ width: 6, height: 6, borderRadius: '50%', background: '#C9A47A', display: 'inline-block' }}
                  />
                  The Complete Products
                </span>
                <h3>
                  Four protocols. One <span className="it">measured ritual.</span>
                </h3>
              </div>
              <p>NAD⁺ · GHK-Cu · RETA · BAC</p>
            </div>
          </div>
        </Reveal>

        <div className="showcase-gallery">
          {SHOWCASE_BOTTLES.map((b, i) => (
            <Reveal delay={Math.min(4, (i % 4) + 1)} key={b.src}>
              <article className="showcase-tile">
                <div className="showcase-tile-art">
                  <img className="showcase-tile-img" src={b.src} alt={`${b.name} · ${b.dose}`} />
                </div>
                <div className="showcase-tile-meta">
                  <div>
                    <h5>{b.name}</h5>
                    <small>{b.code} · Lyophilised</small>
                  </div>
                  <span className="dose">{b.dose}</span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <div className="tirze-spotlight">
          <Reveal>
            <div className="tirze-spotlight-row">
              <div className="tirze-spotlight-img">
                <img src="uploads/bottle-13.png" alt="Tirzepatide Comparison Chart — Precision, Purity, Performance" />
              </div>
              <div className="tirze-spotlight-copy">
                <div className="eyebrow">
                  <span className="dot" />
                  Tirzepatide Trio · Metabolic Control
                </div>
                <h3>
                  Three strengths,
                  <br />
                  <span className="it">one measured outcome.</span>
                </h3>
                <p>
                  From a gentle 10mg introduction to a 30mg advanced protocol — the Velora Tirzepatide line is
                  engineered for precision dosing, calibrated to the unhurried rhythm of metabolic recalibration.
                </p>
                <ul className="tirze-spotlight-feat">
                  <li>
                    <b>10mg</b>
                    <span>Beginner · Maintenance &amp; starting protocols</span>
                  </li>
                  <li>
                    <b>20mg</b>
                    <span>Intermediate · Balanced weight management</span>
                  </li>
                  <li>
                    <b>30mg</b>
                    <span>Advanced · Maximum metabolic support</span>
                  </li>
                </ul>
                <a href="#products" className="btn-link">
                  Browse Tirzepatide <span className="arr">→</span>
                </a>
              </div>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <figure className="tirze-spotlight-family">
              <img
                src="uploads/bottle-12.png"
                alt="The Tirzepatide product family — boxes, vials, and editorial composition"
              />
              <figcaption>
                <span className="cap-label">The Tirzepatide Family</span>
                <span className="cap-sub">10mg · 20mg · 30mg — Lyophilised, sterile, research-grade</span>
              </figcaption>
            </figure>
          </Reveal>
        </div>

        <Reveal>
          <div className="showcase-auth">
            <div className="showcase-auth-seal">
              <img src="uploads/9CC0C6BF-191B-488F-9015-E57CC5D45EAF.png" alt="Velora authenticity hologram seal" />
            </div>
            <div className="showcase-auth-text">
              <div className="eyebrow">
                <span className="dot" />
                Authenticated · 3 × 3 cm hologram
              </div>
              <h3>
                A seal you can hold,
                <br />
                <span className="it">a science you can trust.</span>
              </h3>
              <p>
                Every Velora vial is finished with a holographic authenticity seal — traceable to a single batch, and
                impossible to counterfeit. Quality. Purity. Integrity.
              </p>
              <ul className="showcase-auth-feat">
                <li>
                  <span className="num">i.</span>
                  <div>
                    <b>Pharmaceutical Grade</b>
                    <small>Lyophilised under sterile conditions, third-party assayed for purity ≥ 99.2%.</small>
                  </div>
                </li>
                <li>
                  <span className="num">ii.</span>
                  <div>
                    <b>Cold-Chain Shipped</b>
                    <small>Insulated 2–8 °C couriered delivery, temperature-logged in transit.</small>
                  </div>
                </li>
                <li>
                  <span className="num">iii.</span>
                  <div>
                    <b>Hologram-Verified</b>
                    <small>Tilt the seal — DNA helix shifts spectrum. Scan the QR for full provenance.</small>
                  </div>
                </li>
                <li>
                  <span className="num">iv.</span>
                  <div>
                    <b>Preservative-Added BAC</b>
                    <small>Sterile bacteriostatic water for reconstitution, sealed and non-pyrogenic.</small>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   STUDIO — Interactive 3D Vial (Three.js)
   Real WebGL 3D model of a peptide vial with a procedurally
   drawn sticker label (Canvas → THREE.CanvasTexture).
   ========================================================= */
function buildLabelCanvas(product) {
  // Cylinder aspect: circumference (2π × r ≈ 6.4) vs height (1.7) ≈ 3.76 : 1
  // Use a wide canvas so the wrapped label keeps natural proportions.
  const c = document.createElement('canvas');
  c.width = 1536;
  c.height = 410;
  const ctx = c.getContext('2d');

  // Cream paper background
  ctx.fillStyle = '#FBF8F3';
  ctx.fillRect(0, 0, c.width, c.height);

  // Subtle ivory grain
  ctx.fillStyle = 'rgba(168, 133, 90, 0.05)';
  for (let i = 0; i < 800; i++) {
    ctx.fillRect(Math.random() * c.width, Math.random() * c.height, 1, 1);
  }

  // Gold rule lines top/bottom
  ctx.fillStyle = '#C9A47A';
  ctx.fillRect(60, 30, c.width - 120, 1.5);
  ctx.fillRect(60, c.height - 30, c.width - 120, 1.5);

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Brand wordmark
  ctx.fillStyle = '#082A1F';
  ctx.font = '700 30px "Inter", "Helvetica Neue", Arial, sans-serif';
  ctx.fillText('VELORA', c.width / 2, 70);

  ctx.font = '500 12px "JetBrains Mono", "Courier New", monospace';
  ctx.fillStyle = '#A8855A';
  ctx.fillText('— B I O P E P T I D E   S C I E N C E S —', c.width / 2, 100);

  // Product name (italic serif, may wrap)
  ctx.fillStyle = '#082A1F';
  ctx.font = 'italic 400 70px "Cormorant Garamond", "EB Garamond", Georgia, serif';
  const name = product.name || '';
  const maxLineWidth = c.width - 160;
  const words = name.split(' ');
  let line = '';
  const lines = [];
  for (const w of words) {
    const test = line ? line + ' ' + w : w;
    if (ctx.measureText(test).width > maxLineWidth && line) {
      lines.push(line);
      line = w;
    } else {
      line = test;
    }
  }
  if (line) lines.push(line);
  const nameBaseY = lines.length === 1 ? 195 : 175;
  lines.forEach((ln, i) => ctx.fillText(ln, c.width / 2, nameBaseY + i * 70));

  // Code · strength
  ctx.font = '500 24px "JetBrains Mono", "Courier New", monospace';
  ctx.fillStyle = '#A8855A';
  ctx.fillText(`${product.code}   ·   ${product.strength}`, c.width / 2, 280);

  // Category (letter-spaced)
  ctx.font = '500 13px "Inter", "Helvetica Neue", Arial, sans-serif';
  ctx.fillStyle = 'rgba(8, 42, 31, 0.55)';
  const cat = (product.category || '').toUpperCase();
  const catSpaced = cat.split('').join(' ');
  ctx.fillText(catSpaced, c.width / 2, 320);

  // Lot / regulatory line
  ctx.font = '500 11px "JetBrains Mono", "Courier New", monospace';
  ctx.fillStyle = 'rgba(8, 42, 31, 0.55)';
  ctx.fillText(`LOT ${product.id.toUpperCase()}-2026   ·   STERILE · LYOPHILISED · 2ml`, c.width / 2, 365);

  return c;
}

function makeLabelTexture(product, THREE) {
  const tex = new THREE.CanvasTexture(buildLabelCanvas(product));
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.anisotropy = 8;
  tex.needsUpdate = true;
  return tex;
}

function Studio() {
  const [idx, setIdx] = React.useState(0);

  const mountRef = React.useRef(null);
  const frameRef = React.useRef(null);
  const sceneObjRef = React.useRef(null); // { renderer, scene, camera, group, labelMat }
  const pausedRef = React.useRef(false);
  const onScreenRef = React.useRef(true);
  const targetRotRef = React.useRef({ x: 0, y: 0 });
  const currentRotRef = React.useRef({ x: 0, y: 0 });

  const product = PRODUCTS_EXT[idx];

  /* ----- Build the scene once ----- */
  React.useEffect(() => {
    const mount = mountRef.current;
    const THREE = window.THREE;
    if (!mount || !THREE) {
      console.warn('[Studio] Three.js not available');
      return;
    }

    const w = mount.clientWidth || 480;
    const h = mount.clientHeight || 480;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(w, h);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.05;
    mount.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(32, w / h, 0.1, 100);
    camera.position.set(0, 2.0, 9.5);
    camera.lookAt(0, 2.0, 0);

    /* Lights */
    scene.add(new THREE.HemisphereLight(0xfbf8f3, 0x1a2a22, 0.55));

    const key = new THREE.DirectionalLight(0xffffff, 1.4);
    key.position.set(3.5, 6, 5);
    scene.add(key);

    const fill = new THREE.DirectionalLight(0xa9c4b8, 0.4);
    fill.position.set(-4, 2, 2);
    scene.add(fill);

    const rim = new THREE.DirectionalLight(0xc9a47a, 0.9);
    rim.position.set(-2, 3, -4);
    scene.add(rim);

    /* Bottle group */
    const group = new THREE.Group();

    // Glass body — LatheGeometry profile (vial silhouette)
    const profile = [
      new THREE.Vector2(0.0, 0.0),
      new THREE.Vector2(0.92, 0.0),
      new THREE.Vector2(0.98, 0.05),
      new THREE.Vector2(1.0, 0.12),
      new THREE.Vector2(1.0, 2.85),
      new THREE.Vector2(0.94, 2.99),
      new THREE.Vector2(0.78, 3.13),
      new THREE.Vector2(0.58, 3.24),
      new THREE.Vector2(0.46, 3.33),
      new THREE.Vector2(0.44, 3.4),
      new THREE.Vector2(0.44, 3.78),
      new THREE.Vector2(0.54, 3.84),
      new THREE.Vector2(0.54, 3.93),
      new THREE.Vector2(0.44, 3.98),
      new THREE.Vector2(0.0, 3.98),
    ];
    const bottleGeo = new THREE.LatheGeometry(profile, 96);
    const glassMat = new THREE.MeshPhysicalMaterial({
      color: 0xf6fbf7,
      metalness: 0,
      roughness: 0.08,
      transmission: 0.92,
      transparent: true,
      opacity: 0.55,
      ior: 1.45,
      thickness: 0.6,
      clearcoat: 1.0,
      clearcoatRoughness: 0.08,
      side: THREE.DoubleSide,
      envMapIntensity: 0.8,
    });
    const bottle = new THREE.Mesh(bottleGeo, glassMat);
    group.add(bottle);

    // Lyophilised peptide cake at bottom (white powder cylinder)
    const cakeGeo = new THREE.CylinderGeometry(0.92, 0.92, 0.45, 48);
    const cakeMat = new THREE.MeshStandardMaterial({
      color: 0xf2ece0,
      roughness: 0.95,
      metalness: 0,
    });
    const cake = new THREE.Mesh(cakeGeo, cakeMat);
    cake.position.y = 0.27;
    group.add(cake);

    // Aluminium crimp cap
    const capGeo = new THREE.CylinderGeometry(0.6, 0.6, 0.55, 48);
    const capMat = new THREE.MeshStandardMaterial({
      color: 0xc9a47a,
      metalness: 0.85,
      roughness: 0.28,
    });
    const cap = new THREE.Mesh(capGeo, capMat);
    cap.position.y = 3.96;
    group.add(cap);

    // Flip-off plastic top
    const flipGeo = new THREE.CylinderGeometry(0.5, 0.52, 0.07, 32);
    const flipMat = new THREE.MeshStandardMaterial({
      color: 0x082a1f,
      metalness: 0.05,
      roughness: 0.55,
    });
    const flip = new THREE.Mesh(flipGeo, flipMat);
    flip.position.y = 4.27;
    group.add(flip);

    // Crimp ring (subtle gold band where cap meets glass)
    const ringGeo = new THREE.TorusGeometry(0.55, 0.04, 12, 48);
    const ringMat = new THREE.MeshStandardMaterial({
      color: 0xa8855a,
      metalness: 0.9,
      roughness: 0.32,
    });
    const ring = new THREE.Mesh(ringGeo, ringMat);
    ring.position.y = 3.72;
    ring.rotation.x = Math.PI / 2;
    group.add(ring);

    // Sticker label — open cylinder slightly larger than the body, with
    // the procedurally-drawn canvas applied from the start so the label
    // is visible on the very first frame.
    const labelGeo = new THREE.CylinderGeometry(1.025, 1.025, 1.7, 96, 1, true);
    const initialLabelTex = makeLabelTexture(PRODUCTS_EXT[0], THREE);
    const labelMat = new THREE.MeshStandardMaterial({
      map: initialLabelTex,
      roughness: 0.6,
      metalness: 0,
      side: THREE.DoubleSide,
    });
    const label = new THREE.Mesh(labelGeo, labelMat);
    label.position.y = 1.6;
    group.add(label);

    scene.add(group);

    // Soft contact shadow on the floor (radial-gradient texture on a plane)
    const shadowSize = 256;
    const sCanvas = document.createElement('canvas');
    sCanvas.width = shadowSize;
    sCanvas.height = shadowSize;
    const sCtx = sCanvas.getContext('2d');
    const grad = sCtx.createRadialGradient(
      shadowSize / 2,
      shadowSize / 2,
      10,
      shadowSize / 2,
      shadowSize / 2,
      shadowSize / 2,
    );
    grad.addColorStop(0, 'rgba(0,0,0,0.55)');
    grad.addColorStop(0.5, 'rgba(0,0,0,0.18)');
    grad.addColorStop(1, 'rgba(0,0,0,0)');
    sCtx.fillStyle = grad;
    sCtx.fillRect(0, 0, shadowSize, shadowSize);
    const shadowTex = new THREE.CanvasTexture(sCanvas);
    const shadowMat = new THREE.MeshBasicMaterial({ map: shadowTex, transparent: true, depthWrite: false });
    const shadowPlane = new THREE.Mesh(new THREE.PlaneGeometry(3.6, 3.6), shadowMat);
    shadowPlane.rotation.x = -Math.PI / 2;
    shadowPlane.position.y = 0.001;
    scene.add(shadowPlane);

    sceneObjRef.current = {
      renderer,
      scene,
      camera,
      group,
      labelMat,
      bottleGeo,
      glassMat,
      capGeo,
      capMat,
      cakeGeo,
      cakeMat,
      flipGeo,
      flipMat,
      ringGeo,
      ringMat,
      labelGeo,
      shadowTex,
      shadowMat,
    };

    /* Resize observer */
    const onResize = () => {
      const w2 = mount.clientWidth;
      const h2 = mount.clientHeight;
      if (!w2 || !h2) return;
      camera.aspect = w2 / h2;
      camera.updateProjectionMatrix();
      renderer.setSize(w2, h2);
    };
    const ro = new ResizeObserver(onResize);
    ro.observe(mount);

    /* IntersectionObserver — only render when on-screen */
    const io = new IntersectionObserver(
      (entries) => {
        onScreenRef.current = entries[0]?.isIntersecting ?? true;
      },
      { threshold: 0.05 },
    );
    io.observe(mount);

    /* Animation loop */
    let raf;
    const clock = new THREE.Clock();
    const animate = () => {
      raf = requestAnimationFrame(animate);
      if (!onScreenRef.current) return;
      const t = clock.getElapsedTime();
      if (!pausedRef.current) {
        targetRotRef.current.y = Math.sin(t * 0.32) * 0.5;
        targetRotRef.current.x = Math.sin(t * 0.18) * 0.06;
      }
      // smooth approach to target
      currentRotRef.current.y += (targetRotRef.current.y - currentRotRef.current.y) * 0.12;
      currentRotRef.current.x += (targetRotRef.current.x - currentRotRef.current.x) * 0.12;
      group.rotation.y = currentRotRef.current.y;
      group.rotation.x = currentRotRef.current.x;
      renderer.render(scene, camera);
    };
    animate();

    /* Cleanup */
    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      io.disconnect();
      const o = sceneObjRef.current;
      if (o) {
        if (o.labelMat.map) o.labelMat.map.dispose();
        [
          o.bottleGeo,
          o.glassMat,
          o.capGeo,
          o.capMat,
          o.cakeGeo,
          o.cakeMat,
          o.flipGeo,
          o.flipMat,
          o.ringGeo,
          o.ringMat,
          o.labelGeo,
          o.labelMat,
          o.shadowTex,
          o.shadowMat,
        ].forEach((d) => d?.dispose && d.dispose());
        o.renderer.dispose();
        if (o.renderer.domElement.parentNode) o.renderer.domElement.parentNode.removeChild(o.renderer.domElement);
      }
      sceneObjRef.current = null;
    };
  }, []);

  /* ----- Update sticker label when product changes (after initial mount) ----- */
  const skipFirstLabelUpdate = React.useRef(true);
  React.useEffect(() => {
    if (skipFirstLabelUpdate.current) {
      skipFirstLabelUpdate.current = false;
      return; // initial label is set up inside the build effect
    }
    const o = sceneObjRef.current;
    const THREE = window.THREE;
    if (!o || !THREE) return;

    const tex = makeLabelTexture(product, THREE);
    if (o.labelMat.map) o.labelMat.map.dispose();
    o.labelMat.map = tex;
    o.labelMat.needsUpdate = true;
  }, [idx, product]);

  /* ----- Pointer interaction ----- */
  const onMove = (e) => {
    if (!pausedRef.current) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const xPct = (e.clientX - rect.left) / rect.width - 0.5;
    const yPct = (e.clientY - rect.top) / rect.height - 0.5;
    targetRotRef.current.y = xPct * Math.PI * 0.9;
    targetRotRef.current.x = yPct * Math.PI * 0.25;
  };
  const onEnter = () => {
    pausedRef.current = true;
    if (frameRef.current) frameRef.current.classList.add('is-paused');
  };
  const onLeave = () => {
    pausedRef.current = false;
    if (frameRef.current) frameRef.current.classList.remove('is-paused');
    targetRotRef.current.x = 0;
  };

  const prev = () => setIdx((i) => (i - 1 + PRODUCTS_EXT.length) % PRODUCTS_EXT.length);
  const next = () => setIdx((i) => (i + 1) % PRODUCTS_EXT.length);

  return (
    <section className="section section-ink" id="studio">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                The Studio · Interactive 3D
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                Inspect the vial,
                <br />
                <span className="it">at every angle.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              A real WebGL model — glass, crimp cap, and sticker label. Hover over the stage to control rotation; step
              away and the vial resumes its quiet orbit.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="studio-stage">
            <button className="studio-nav prev" onClick={prev} aria-label="Previous product">
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M15 18l-6-6 6-6"
                />
              </svg>
            </button>

            <div
              ref={frameRef}
              className="studio-frame studio-frame-3d"
              onMouseEnter={onEnter}
              onMouseLeave={onLeave}
              onMouseMove={onMove}
            >
              <div ref={mountRef} className="studio-canvas-mount" />
              <span className="studio-hint">— Move cursor to rotate —</span>
            </div>

            <div className="studio-info">
              <div className="studio-eyebrow">
                {product.category} · {product.code} · {product.strength}
              </div>
              <h3 key={product.id + '-name'}>{product.name}</h3>
              {product.shortDesc && (
                <p className="italic-serif" key={product.id + '-desc'}>
                  {product.shortDesc}
                </p>
              )}
              <div className="studio-counter">
                <span className="cur">{String(idx + 1).padStart(2, '0')}</span>
                <span className="sep">/</span>
                <span className="tot">{String(PRODUCTS_EXT.length).padStart(2, '0')}</span>
              </div>
            </div>

            <button className="studio-nav next" onClick={next} aria-label="Next product">
              <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
                <path
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9 18l6-6-6-6"
                />
              </svg>
            </button>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="studio-dots" role="tablist" aria-label="Choose a product">
            {PRODUCTS_EXT.map((p, i) => (
              <button
                key={p.id}
                role="tab"
                aria-selected={i === idx}
                onClick={() => setIdx(i)}
                className={`studio-dot ${i === idx ? 'active' : ''}`}
                aria-label={`Show ${p.name}`}
              />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   BENEFITS
   ========================================================= */
function Benefits() {
  const items = [
    {
      icon: <Ic.clock width="56" height="56" className="benefit-icon" />,
      title: 'Anti-Aging',
      body: 'Diminishes the visible architecture of time — fine lines, slackening, lost luminosity.',
      stat: '— 38% wrinkle depth, 12 wks',
    },
    {
      icon: <Ic.collagen width="56" height="56" className="benefit-icon" />,
      title: 'Collagen Renewal',
      body: 'Signals fibroblasts to resume the production of Types I & III collagen, the dermal scaffolding.',
      stat: '+ 41% fibroblast activity',
    },
    {
      icon: <Ic.hydration width="56" height="56" className="benefit-icon" />,
      title: 'Deep Hydration',
      body: 'Restores the lipid lamellae and trans-epidermal water balance — skin that holds its own light.',
      stat: '+ 64% trans-epidermal hydration',
    },
    {
      icon: <Ic.shield width="56" height="56" className="benefit-icon" />,
      title: 'Barrier Repair',
      body: 'Reconstitutes the stratum corneum and reduces inflammation at the molecular level.',
      stat: '— 52% TEWL after 28 days',
    },
  ];
  return (
    <section className="section section-paper" id="benefits">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                Clinical Outcomes
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                Four measured
                <br />
                <span className="it">consequences.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              Independent third-party assays. 28-day, 8-week and 12-week timepoints, n = 240. We publish what the data
              is willing to say — no more.
            </p>
          </Reveal>
        </div>
        <Reveal>
          <div className="benefits-grid">
            {items.map((it, i) => (
              <div className="benefit" key={i}>
                {it.icon}
                <div>
                  <h4>{it.title}</h4>
                  <p>{it.body}</p>
                  <div className="stat">{it.stat}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   BEFORE / AFTER
   ========================================================= */
function BeforeAfter() {
  const [pct, setPct] = React.useState(50);
  const stageRef = React.useRef(null);

  React.useEffect(() => {
    // Update clip-path live
    const el = stageRef.current;
    if (el) {
      const after = el.querySelector('.ba-side.after');
      const handle = el.querySelector('.ba-handle');
      if (after) after.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;
      if (handle) handle.style.left = pct + '%';
    }
  }, [pct]);

  return (
    <section className="section" id="results">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                Campaign · Vol. II
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                What 12 weeks
                <br />
                <span className="it">restores.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              Captured under identical laboratory lighting. No retouching. No filters. Drag the slider to witness what a
              measured ritual leaves behind.
            </p>
          </Reveal>
        </div>

        <div className="ba-wrap">
          <Reveal>
            <div className="ba-stage" ref={stageRef}>
              <div className="ba-side before" />
              <div className="ba-side after" />
              <div className="ba-handle" style={{ left: '50%' }}>
                <div className="ba-knob">
                  <Ic.slider width="16" height="16" />
                </div>
              </div>
              <span className="ba-label l">Before · Day 0</span>
              <span className="ba-label r">After · Wk 12</span>
              <input
                className="ba-input"
                type="range"
                min="0"
                max="100"
                value={pct}
                onChange={(e) => setPct(+e.target.value)}
                aria-label="Before / after"
              />
            </div>
          </Reveal>

          <div className="ba-info">
            <Reveal>
              <h3>
                The luminance
                <br />
                of <span className="it">measured patience.</span>
              </h3>
              <p style={{ color: 'var(--ink-2)', margin: '0 0 8px' }}>
                Twelve weeks on the GHK-Cu + NAD⁺ Ritual. Photographed in standardised D65 light, n = 1, representative
                subject.
              </p>
            </Reveal>
            <Reveal delay={2}>
              <div className="results">
                <div className="res">
                  <b>+ 47%</b>
                  <span>Skin luminance, measured corneometrically</span>
                  <small>Wk 12</small>
                </div>
                <div className="res">
                  <b>− 38%</b>
                  <span>Visible fine-line depth, 3-D imaging</span>
                  <small>Wk 12</small>
                </div>
                <div className="res">
                  <b>+ 64%</b>
                  <span>Hydration retention, post-ritual</span>
                  <small>Wk 12</small>
                </div>
                <div className="res">
                  <b>− 52%</b>
                  <span>Trans-epidermal water loss</span>
                  <small>Wk 12</small>
                </div>
              </div>
            </Reveal>
            <Reveal delay={3}>
              <div className="ba-cta">
                <a className="btn btn-primary" href="#products">
                  Browse the Products <span className="arr">→</span>
                </a>
                <a className="btn btn-link" href="#">
                  Read the study
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
function Testimonials() {
  return (
    <section className="section section-ink" id="reviews">
      <div className="wrap-wide">
        <div className="section-head">
          <div>
            <Reveal>
              <div className="eyebrow">
                <span className="dot" />
                The Quiet Chorus
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h2>
                2,400 rituals,
                <br />
                <span className="it">one common word.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={2}>
            <p>
              Verified accounts from clinicians, designers and patients who have made Velora part of their unhurried
              evenings.
            </p>
          </Reveal>
        </div>

        <div className="test-grid">
          {TESTIMONIALS.map((t, i) => (
            <Reveal delay={i + 1} key={i}>
              <div className="test-card">
                <div className="test-quote">{t.quote}</div>
                <div className="test-meta">
                  <div className="test-avatar">{t.initial}</div>
                  <div className="test-name">
                    <b>{t.name}</b>
                    <span>{t.role}</span>
                  </div>
                  <span className="test-stars">★★★★★</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div
            style={{
              display: 'flex',
              gap: 48,
              justifyContent: 'center',
              marginTop: 64,
              paddingTop: 48,
              borderTop: '1px solid rgba(201,164,122,.2)',
              flexWrap: 'wrap',
            }}
          >
            {[
              ['Trustpilot', '4.9 / 5'],
              ['Vogue Beauty', '"Editor’s Box, 2026"'],
              ['Goop Wellness', '"Quiet luxury, properly built"'],
              ['Allure', '"Best in show, peptide category"'],
            ].map(([k, v]) => (
              <div key={k} style={{ textAlign: 'center' }}>
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontStyle: 'italic',
                    fontSize: '20px',
                    color: 'var(--gold)',
                    marginBottom: '6px',
                  }}
                >
                  {v}
                </div>
                <div className="mono" style={{ color: 'rgba(251,248,243,.6)' }}>
                  {k}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* =========================================================
   NEWSLETTER
   ========================================================= */
const SOCIALS = [
  {
    id: 'fb',
    name: 'Facebook',
    handle: '@velorabiopeptide',
    blurb: 'Page updates, product launches, and direct messaging.',
    cta: 'Message on Facebook',
    href: 'https://www.facebook.com/people/Velorabiopeptide/61590647421475/',
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M13 22v-8h3l.5-4H13V7.5c0-1.2.3-2 2-2h2V2.1C16.7 2 15.6 2 14.5 2 11.8 2 10 3.7 10 6.9V10H7v4h3v8h3z" />
      </svg>
    ),
  },
  {
    id: 'ig',
    name: 'Instagram',
    handle: '@velora.biopeptide',
    blurb: 'Daily rituals, behind-the-lab, and customer reviews.',
    cta: 'DM on Instagram',
    href: 'https://instagram.com/velora.biopeptide',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4" />
        <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
      </svg>
    ),
  },
  {
    id: 'tt',
    name: 'TikTok',
    handle: '@velorabiopeptide',
    blurb: 'Tutorials, reconstitution guides, and quick consultations.',
    cta: 'Watch on TikTok',
    href: 'https://tiktok.com/@velorabiopeptide',
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5v3a.5.5 0 1 0 .5.5V4h2.5a3.5 3.5 0 0 0 3.5 3.5V10a5.5 5.5 0 0 1-3-1V4Z" />
      </svg>
    ),
  },
  {
    id: 'vb',
    name: 'Viber',
    handle: 'Number coming soon',
    blurb: 'Fastest reply — order tracking, sizing, and concierge.',
    cta: 'Chat on Viber',
    href: '#',
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.5 2 2 5.7 2 10.5c0 2.5 1.3 4.8 3.4 6.3v3.7l3.3-2c1 .2 2.1.3 3.3.3 5.5 0 10-3.7 10-8.3S17.5 2 12 2Zm-.8 4.4c.2 0 .4.2.4.4 0 .3-.2.4-.4.4-2.4 0-4.3 1.8-4.3 4 0 .3-.2.4-.5.4s-.4-.1-.4-.4c0-2.6 2.4-4.8 5.2-4.8Zm-3 7.6c.3-.3.8-.2 1.1.1l.6.8c.2.3.5.4.8.2l.7-.4c.4-.2.8-.2 1.1.1l1.6 1.6c.3.3.4.7.2 1l-.5.8c-.3.5-.9.6-1.4.4-3-1.1-5-3.2-6-6-.2-.5 0-1.1.5-1.4l.7-.4c.4-.2.8-.1 1 .2l.8 1c.2.3.2.7-.1 1l-.5.5c-.2.2-.2.5-.1.7l1.5 2c.2.3.5.3.7.1l.4-.4Zm3-5.7c.2 0 .4.1.4.4 0 .2-.2.4-.4.4-1.4 0-2.5 1.1-2.5 2.4 0 .3-.1.4-.4.4-.2 0-.4-.1-.4-.4 0-1.7 1.5-3.2 3.3-3.2Zm0 1.7c.2 0 .4.2.4.4 0 .3-.2.4-.4.4-.5 0-.8.3-.8.7 0 .3-.2.4-.4.4-.3 0-.4-.1-.4-.4 0-.9.7-1.5 1.6-1.5Z" />
      </svg>
    ),
  },
];

function Contact() {
  return (
    <section className="contact" id="contact">
      <div
        className="glow"
        style={{ width: 480, height: 480, background: 'var(--gold-soft)', top: '-180px', left: '8%', opacity: 0.4 }}
      />
      <div
        className="glow"
        style={{ width: 520, height: 520, background: '#0E3D2E', bottom: '-220px', right: '8%', opacity: 0.08 }}
      />
      <div className="wrap contact-inner">
        <Reveal>
          <div className="eyebrow">
            <span className="dot" />
            The Velora Concierge
          </div>
        </Reveal>
        <Reveal delay={1}>
          <h2>
            A direct line, <span className="it">anytime.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="contact-lede">
            Reach our team through your preferred platform — every message is read by a human, and replies arrive within
            12 hours. Mon–Sat, 9am–7pm PHT.
          </p>
        </Reveal>

        <div className="contact-grid">
          {SOCIALS.map((s, i) => (
            <Reveal delay={Math.min(4, i + 1)} key={s.id}>
              <a className="social-card" href={s.href} target="_blank" rel="noreferrer">
                <span className="social-icon">{s.icon}</span>
                <h4>{s.name}</h4>
                <span className="social-handle">{s.handle}</span>
                <p>{s.blurb}</p>
                <span className="social-cta">
                  {s.cta} <span className="arr">→</span>
                </span>
              </a>
            </Reveal>
          ))}
        </div>

        <Reveal delay={2}>
          <div className="contact-direct">
            <div className="cd-col">
              <span className="cd-label">Email · Formal inquiries</span>
              <a className="cd-value" href="mailto:hello@velorabiopeptide.com">
                hello@velorabiopeptide.com
              </a>
              <small>For wholesale, lab partnerships, and press.</small>
            </div>
            <div className="cd-sep" aria-hidden="true" />
            <div className="cd-col">
              <span className="cd-label">Headquarters</span>
              <span className="cd-value">USA</span>
              <small>Cold-chain shipping nationwide & overseas.</small>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero,
  About,
  Science,
  Products,
  ProductCard,
  ProductModal,
  Showcase,
  Studio,
  Benefits,
  BeforeAfter,
  Testimonials,
  Contact,
});