"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import { Leaf, Droplets, Shield, Sparkles, Check } from "lucide-react"; type Mode = "skincare" | "original"; interface DetailedBenefit { id: number; icon: React.ComponentType<{ className?: string }>; title: string; tagline: string; description: string; } export default function Benefit2ndSection({ className }: { className?: string }) { const [mode, setMode] = useState("skincare"); const [_hoveredCard, setHoveredCard] = useState(null); const leftText: Record = { skincare: "Up to 70% of active hydration is lost", original: "Up to 70% of nitrogen is lost", }; const rightText: Record = { skincare: "before standard creams can lock it", original: "before crops can use it", }; const detailedBenefits: DetailedBenefit[] = [ { id: 1, icon: Droplets, title: "Bioactive Aloe Base", tagline: "100% Pure Plant Gel", description: "We completely eliminate synthetic water fillers, replacing them with pure cold-pressed Aloe Vera extract to act as a natural bioactive carrier.", }, { id: 2, icon: Leaf, title: "Cellular Nutrition", tagline: "Locking Vital Nutrients", description: "Rich in active polysaccharides and minerals, forming an immediate natural breathable matrix over skin cells to prevent ambient moisture loss.", }, { id: 3, icon: Shield, title: "Zero Filler Volatility", tagline: "Pure Concentration", description: "Traditional sheet masks dry out rapidly, evaporating active ingredients. SericaMask forms a slow-release gel-film that drives nutrition deep.", }, ]; return ( <>

{/* Background Technical Grid Layout */}

{/* Subtle organic light gradient */}

{/* SECTION HEADER WITH PREMIUM CONCEPT SWITCHER */}

Active Botanicals

The Aloe Vera Matrix

{/* Dynamic Concept Switcher Toggle */}

{/* CORE HERO VISUAL GRID */}

{/* Left Aspect Text Box */}

{leftText[mode]}

Critical Loss Phase

{/* Center High-end Interactive Asset Frame */}

{/* Circular pulse glowing rings in the background */}

{/* Right Aspect Text Box */}

{rightText[mode]}

Cellular Absorption Threshold

{/* COMPACT EXPLANATIVE STATS / CARDS ROW */}

{detailedBenefits.map((benefit, index) => { const Icon = benefit.icon; return ( setHoveredCard(index)} onMouseLeave={() => setHoveredCard(null)} className="group relative bg-white/35 hover:bg-white/60 border border-[#2b3317]/5 hover:border-[#2b3317]/15 rounded-2xl p-6 transition-all duration-300 text-left flex flex-col justify-between" >

0{benefit.id} / CONCEPT

{benefit.tagline}

{benefit.title}

{benefit.description}

{/* Minimal interactive footer */}

CERTIFIED ORGANIC TECHNOLOGY

); })}

); }