"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowRight, X, Info, Linkedin, Send, Sparkles, CheckCircle2 } from "lucide-react"; interface RequestFormData { fullName: string; email: string; phone: string; farmName: string; farmSize: string; cropType: string; notes: string; } function CreamOrganicsLogo({ className = "text-white" }: { className?: string }) { return (

); } export default function Header({ className }: { className?: string }) { const [menuOpen, setMenuOpen] = useState(false); const [requestAccessOpen, setRequestAccessOpen] = useState(false); const [activeTab, setActiveTab] = useState<"calculator" | "science" | "npk" | "about" | "blog" | "contact" | null>(null); const [formSubmitted, setFormSubmitted] = useState(false); const [formData, setFormData] = useState({ fullName: "", email: "", phone: "", farmName: "", farmSize: "", cropType: "", notes: "" }); const [traditionalWeight, setTraditionalWeight] = useState(200); const [activeCropType, setActiveCropType] = useState("Hydrating Glacier Clay"); const [selectedArticle, setSelectedArticle] = useState(null); const videoRef = useRef(null); useEffect(() => { if (videoRef.current) { videoRef.current.play().catch(() => { console.log("Autoplay was prevented. User interaction required."); }); } }, []); const handleFormSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!formData.fullName || !formData.email) return; setFormSubmitted(true); setTimeout(() => { setFormSubmitted(false); setRequestAccessOpen(false); setFormData({ fullName: "", email: "", phone: "", farmName: "", farmSize: "", cropType: "", notes: "" }); }, 4000); }; const nutrientsData: Record = { "Hydrating Glacier Clay": { n: 95, p: 80, k: 90, capsuleDuration: "24 Hours", dosage: "Apply 2-3g evenly" }, "Age-Defying Botanical": { n: 85, p: 98, k: 95, capsuleDuration: "48 Hours", dosage: "Apply 3-4g at night" }, "Tea Tree Detoxifying": { n: 75, p: 65, k: 92, capsuleDuration: "12 Hours", dosage: "Apply 2g on zones" }, "Vitamin C Radiance": { n: 90, p: 85, k: 99, capsuleDuration: "36 Hours", dosage: "Apply 3g in morning" } }; const cropTabsNeeded = Math.ceil(traditionalWeight / 50); const actualCropTabWeightKg = cropTabsNeeded * 0.15; const shippingTrucksFraction = 98.5; const carbonSavedKg = (traditionalWeight * 0.42).toFixed(1); const waterRunoffPreventedLiters = (traditionalWeight * 18).toFixed(0); const journalArticles = [ { id: 1, title: "The Silent Cost of Single-Use Sheet Masks", category: "ECOLOGY", date: "July 02, 2026", readTime: "4 min read", summary: "How standard sheet masks dump tons of microplastics into rivers, and how our bioactive cream formula delivers skin nutrition with absolute zero-waste luxury.", content: "Every year, billions of single-use sheet masks made of synthetic polyester or nylon fibers are discarded. Together with their non-recyclable foil sachets, they create a massive environmental crisis. When these masks are washed down or thrown away, they disintegrate into microplastics that permanently contaminate municipal water tables and oceans. CreamMask resolves this with an organic clay bio-matrix. By delivering nutrients in a biodegradable cream base that dissolves cleanly under pure warm water, we provide the ultimate glowing hydration with zero ecological footprint." }, { id: 2, title: "Deep Cellular Nutrition vs Surface Hydration", category: "DERMATOLOGY", date: "June 25, 2026", readTime: "5 min read", summary: "Most facial creams rely on heavy synthetic silicone carriers that temporarily clog pores. Micro-botanicals shift the focus to active dermal cell harmony.", content: "Traditional cosmetics rely on heavy synthetic silicones and petrochemical mineral oils. While they create a temporary illusion of smoothness, they actually form an occlusive barrier that suffocates the skin's natural lipid barrier and clogs pores. By stripping the synthetic carrier mass and compressing high-potency collagen, hyaluronic acid, and peptide molecules inside botanical lipid vesicles, we allow deep epidermis absorption. CreamMask delivers nutrient molecules directly to skin micro-pores with a 98% cleaner absorption rate, letting your skin breathe while maintaining standard hydration." }, { id: 3, title: "Decarbonizing Beauty: The Packaging Crisis", category: "SUPPLY CHAIN", date: "May 18, 2026", readTime: "6 min read", summary: "Shipping bulky cosmetic jars filled with 90% water generates massive transit emissions. We explore the beauty of dehydrated organic active capsules.", content: "The modern cosmetics industry is one of the heaviest emitters of transportation carbon, primarily due to shipping heavy glass jars filled with 90% water. By formulating highly concentrated, anhydrous (waterless) bioactive clay tablets that activate only when you mix them with a drop of warm water at home, we completely bypass this logistic waste. One tiny, elegant recyclable tin can replace fifty heavy single-use luxury glass bottles, leading to a massive 95% reduction in carbon footprint across global supply chains. Beautiful skin shouldn't cost the Earth." } ]; return ( <>

SERICAMASK

SKINCARE, REINVENTED.

50 SINGLE-USE SHEET MASKS — REIMAGINED AS ONE RECYCLABLE JAR.

{menuOpen && (

{[ { label: "Products", action: "npk" }, { label: "Aloe Matrix", action: "aloe-matrix" }, { label: "About", action: "about" }, { label: "Science", action: "science" }, { label: "Blog", action: "blog" }, { label: "Contact", action: "contact" } ].map((item, index) => ( ))}

SKINCARE REINVENTED hello@creamorganics.com

setMenuOpen(false)} className="flex-1 h-full cursor-pointer relative" >

)} {activeTab && (

Cream Organics {activeTab === "calculator" && ( <>

Eco Impact Calculator

Measure how transitioning from conventional single-use plastic sheet masks to zero-waste CreamMasks cuts carbon footprint and chemical microplastic waste.

)} {activeTab === "science" && ( <>

Molecular Technology

A structural look inside our Bio-Active Lipid vesicles that program nutrient delivery to coordinate perfectly with skin pores.

)} {activeTab === "npk" && ( <>

Our Product Formulations

Explore our range of skin-specific bioactive combinations, optimized for direct dermal cell bio-availability and targeted cellular nourishment.

)} {activeTab === "about" && ( <>

The Leap Forward

Cream Organics was founded to decouple chemical skin hydration from plastic waste volume, returning skin back to its native radiant health.

)} {activeTab === "blog" && ( <>

The Eco-Dermal Journal

Scientific papers, formulation breakthroughs, and dermatological dispatches written directly by our green research labs.

)} {activeTab === "contact" && ( <>

Let's Heal Together

Reach out to integrate CreamMask protocols in your spa, propose custom formulation profiles, or order a trial package.

)}

SKIN-HEALTH • EARTH-WISE

{activeTab === "calculator" && (

Select Target Skin Formulation

{Object.keys(nutrientsData).map((crop) => ( ))}

Single-Use Sheet Masks Used (Per Year) {traditionalWeight} Masks

) => setTraditionalWeight(Number(e.target.value))} className="w-full accent-white bg-white/20 h-1.5 rounded-lg cursor-pointer" />

50 Masks 2,500 Masks 5,000 Masks

SericaMask Replacements {cropTabsNeeded} Jars Total weight: {actualCropTabWeightKg.toFixed(2)} kg (replaces {traditionalWeight} synthetic sheet masks)

CO₂ Footprint Avoided {carbonSavedKg} kg CO₂e Equivalent to planting {Math.ceil(Number(carbonSavedKg) / 22)} trees

Microplastic Waste Prevented {waterRunoffPreventedLiters} Grams Synthetic polyester fibers prevented from landfills

Packaging Volume Reduced By {shippingTrucksFraction.toFixed(2)}% Zero plastic sheets vs boxes of single-use sachets

CreamMasks are engineered with a bioactive lipid vesicle matrix. Upon contact with pure warm water, the micro-nutrients are activated to penetrate the skin's dermal layer.

)} {activeTab === "science" && (

{[ { num: "1", title: "Active Skin-Dermal Core", desc: "High-purity organic botanical formulations (Hydration, Collagen, Antioxidants) combined with dermal stimulants form the concentrated nucleus. Fillers and synthetic plastic bases are completely eliminated." }, { num: "2", title: "Dermal Temperature Trigger", desc: "The bio-clay matrix is designed to react dynamically to body temperature and pore opening triggers, releasing active nutrition only when skin cells are receptive." }, { num: "3", title: "Micro-Pore Penetration", desc: "Because ingredients are delivered directly inside the skin's micro-pores, over 98% is successfully synthesized, preventing synthetic grease and clogging." }, { num: "4", title: "Organic Matrix Biodegradation", desc: "Once active ingredients are fully absorbed, the plant-based clay matrix dissolves cleanly under pure warm water, enriching municipal greywater with zero microplastics." } ].map((step) => (

{step.num}

{step.title}

{step.desc}

))}

Pore Absorption Over Time (45-Minute Session)

{[ { label: "0 Mins", pct: "10%" }, { label: "10 Mins", pct: "40%" }, { label: "20 Mins", pct: "75%" }, { label: "30 Mins", pct: "95%" }, { label: "45 Mins", pct: "100%" } ].map((bar) => (

{bar.pct}

{bar.label}

))}

)} {activeTab === "npk" && (

{Object.entries(nutrientsData).map(([name, spec]) => (

{name}

Recommended usage: {spec.dosage}

{spec.n}% Hydration (H) / {spec.p}% Collagen (C) / {spec.k}% Antioxidants (A)

Active Glow {spec.capsuleDuration}

))}

Bespoke formulations available: For premium salons and hotels, our dermatological lab conducts custom genetic pore analysis to synthesize custom-tailored active clay formulas matching your clientele's skin-profile.

)} {activeTab === "about" && (

Single-use plastic sheet masks have democratized skincare, but at severe cost. Synthetic fiber waste results in clogged municipal waterways, landfills overflowing with polyester sheets, and massive carbon transit footprints.

Our skin research teams at Cream Organics asked: What if we took out the heavy synthetic liquid carriers, stripped away the non-biodegradable polyester sheets, and delivered only pure bioactive cream straight to the skin pores?

The outcome was the concentrated SericaMask. We use bioactive lipid vesicles to carry high-potency ingredient payloads directly to skin pores. By eliminating synthetic water fillers and plastic sheets entirely, we compress 50 standard sheet mask applications into a single, elegant 150g recyclable jar.

98.5% Volume Squeezed

0% Plastic Waste

48 Hours Active Hydration

)} {activeTab === "blog" && (

{selectedArticle === null ? (

{journalArticles.map((article) => (

setSelectedArticle(article.id)} className="group bg-black/20 hover:bg-black/35 p-5 rounded-2xl border border-white/5 hover:border-white/15 transition-all duration-300 cursor-pointer text-left" >

{article.category} {article.date}

{article.title}

{article.summary}

Read Dispatch

))}

) : ( {(() => { const article = journalArticles.find((a) => a.id === selectedArticle); if (!article) return null; return (

{article.category} {article.date} • {article.readTime}

{article.title}

{article.summary}

{article.content}

); })()} )}

)} {activeTab === "contact" && (

Your Full Name * ) => setFormData({ ...formData, fullName: e.target.value })} className="w-full bg-black/25 border border-white/10 focus:border-white/40 focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all" />

Email Address * ) => setFormData({ ...formData, email: e.target.value })} className="w-full bg-black/25 border border-white/10 focus:border-white/40 focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all" />

Salon, Spa or Company Name ) => setFormData({ ...formData, farmName: e.target.value })} className="w-full bg-black/25 border border-white/10 focus:border-white/40 focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all" />

Monthly Treatments / Clients ) => setFormData({ ...formData, farmSize: e.target.value })} className="w-full bg-black/25 border border-white/10 focus:border-white/40 focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all" />

Specific Inquiry details

) => setFormData({ ...formData, notes: e.target.value })}
                              className="w-full bg-black/25 border border-white/10 focus:border-white/40 focus:outline-none rounded-xl p-4 text-sm text-white transition-all"
                            />
                          </div>

<button
                            type="submit"
                            className="w-full py-4 bg-white hover:bg-white/90 text-[#3c4a22] hover:translate-y-[-1px] font-mono text-xs uppercase tracking-widest rounded-xl transition-all font-bold cursor-pointer inline-flex items-center justify-center gap-2"
                          >
                            <Send className="w-4 h-4" />
                            <span>Transmit Inquiries</span>
                          </button>
                        </form>

<AnimatePresence>
                          {formSubmitted && (
                            <motion.div
                              key="contact-success"
                              initial={{ opacity: 0, y: 10 }}
                              animate={{ opacity: 1, y: 0 }}
                              exit={{ opacity: 0 }}
                              className="p-4 bg-white text-[#3c4a22] rounded-xl flex items-center gap-2.5 shadow-lg"
                            >
                              <CheckCircle2 className="w-5 h-5 text-[#4a5a2a]" />
                              <span className="text-xs font-mono font-semibold">
                                Inquiries received successfully! Our skincare expert will coordinate via email.
                              </span>
                            </motion.div>
                          )}
                        </AnimatePresence>
                      </div>
                    )}
                  </div>
                </motion.div>
              </div>
            )}
          </AnimatePresence>

<AnimatePresence>
            {requestAccessOpen && (
              <div key="request-modal" className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/75 backdrop-blur-md">
                <motion.div
                  key="request-panel"
                  initial={{ opacity: 0, scale: 0.95, y: 30 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.95, y: 30 }}
                  className="relative w-full max-w-lg bg-[#34411d] border border-white/10 rounded-3xl p-6 sm:p-8 text-left shadow-2xl overflow-hidden"
                >
                  <button
                    onClick={() => setRequestAccessOpen(false)}
                    className="absolute top-4 right-4 text-white/60 hover:text-white p-2 rounded-full hover:bg-white/5 cursor-pointer"
                  >
                    <X className="w-5 h-5" />
                  </button>

<div className="mb-6">
                    <div className="flex items-center gap-2 mb-2">
                      <Sparkles className="w-5 h-5 text-[#c8dca4]" />
                      <span className="text-xs font-mono uppercase tracking-widest text-white/50">Sample Order Request</span>
                    </div>
                    <h3 className="text-2xl sm:text-3xl font-light text-white">Secure Your SericaMask</h3>
                    <p className="text-white/70 text-xs mt-1.5">
                      Apply below to receive an exclusive SericaMask sample trial box. Supply is strictly limited based on hand-crafted batch sizes.
                    </p>
                  </div>

<form onSubmit={handleFormSubmit} className="space-y-4 relative z-10">
                    <div>
                      <label className="block text-[10px] font-mono uppercase tracking-widest text-white/50 mb-1">
                        Full Name *
                      </label>
                      <input
                        type="text"
                        required
                        placeholder="Enter your name"
                        value={formData.fullName}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, fullName: e.target.value })}
                        className="w-full bg-black/20 border border-white/10 focus:border-[#c8dca4] focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all"
                      />
                    </div>

<div>
                      <label className="block text-[10px] font-mono uppercase tracking-widest text-white/50 mb-1">
                        Email Address *
                      </label>
                      <input
                        type="email"
                        required
                        placeholder="Enter your email"
                        value={formData.email}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
                        className="w-full bg-black/20 border border-white/10 focus:border-[#c8dca4] focus:outline-none rounded-xl px-4 py-3 text-sm text-white transition-all"
                      />
                    </div>

<div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="block text-[10px] font-mono uppercase tracking-widest text-white/50 mb-1">
                          Target Formulation
                        </label>
                        <select
                          value={formData.cropType}
                          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFormData({ ...formData, cropType: e.target.value })}
                          className="w-full bg-black/25 border border-white/10 focus:border-[#c8dca4] focus:outline-none rounded-xl px-3 py-3 text-xs text-white transition-all"
                        >
                          <option value="">Choose formulation...</option>
                          <option value="Hydrating Glacier Clay">Hydrating Glacier Clay</option>
                          <option value="Age-Defying Botanical">Age-Defying Botanical</option>
                          <option value="Tea Tree Detoxifying">Tea Tree Detoxifying</option>
                          <option value="Vitamin C Radiance">Vitamin C Radiance</option>
                        </select>
                      </div>

<div>
                        <label className="block text-[10px] font-mono uppercase tracking-widest text-white/50 mb-1">
                          Usage Volume
                        </label>
                        <select
                          value={formData.farmSize}
                          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setFormData({ ...formData, farmSize: e.target.value })}
                          className="w-full bg-black/25 border border-white/10 focus:border-[#c8dca4] focus:outline-none rounded-xl px-3 py-3 text-xs text-white transition-all"
                        >
                          <option value="">Choose volume...</option>
                          <option value="Personal Use (1 Jar)">Personal Use (1 Jar)</option>
                          <option value="Boutique Spa (5-10 Jars)">Boutique Spa (5-10 Jars)</option>
                          <option value="Wellness Resort (20+ Jars)">Wellness Resort (20+ Jars)</option>
                        </select>
                      </div>
                    </div>

<button
                      type="submit"
                      className="w-full py-3.5 bg-white hover:bg-white/95 text-[#34411d] font-mono text-xs uppercase tracking-widest rounded-xl transition-all font-bold cursor-pointer shadow-lg hover:shadow-black/20"
                    >
                      Send Sample Request
                    </button>
                  </form>

{formSubmitted && (
                    <div className="absolute inset-0 bg-[#34411d]/95 flex flex-col items-center justify-center p-6 text-center z-20">
                      <motion.div
                        initial={{ scale: 0.8, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        className="space-y-3"
                      >
                        <CheckCircle2 className="w-16 h-16 text-[#c8dca4] mx-auto animate-bounce" />
                        <h4 className="text-xl font-medium text-white">Transmission Complete</h4>
                        <p className="text-white/70 text-xs max-w-xs mx-auto leading-relaxed">
                          Your premium skin treatment reservation is complete. A confirmation summary is routeing to <strong className="text-white">{formData.email}</strong>.
                        </p>
                      </motion.div>
                    </div>
                  )}
                </motion.div>
              </div>
            )}
          </AnimatePresence>
        </div>
      </section>
    </>
  );
}
</article></body></html>