"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import {
  FileText,
  Video,
  Calendar,
  ClipboardList,
  Shield,
  Lock,
  Phone,
  Mail,
  Clock,
  AlertCircle,
  Sparkles,
  HeartPulse,
  Activity
} from "lucide-react"

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between max-w-6xl mx-auto px-4">
          <div className="flex items-center gap-2">
            <Link href="/" className="flex items-center space-x-2 group">
              <div className="relative">
                <Activity className="size-6 text-primary transition-transform group-hover:scale-110" />
                <div className="absolute inset-0 bg-primary/20 blur-lg opacity-0 group-hover:opacity-100 transition-opacity" />
              </div>
              <span className="text-2xl font-bold tracking-tight text-foreground font-[family-name:var(--font-display)]">
                Factor Sciences
              </span>
            </Link>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <a href="#about" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              About
            </a>
            <a href="#services" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              Services
            </a>
            <a href="#process" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              How It Works
            </a>
            <a href="#compliance" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              Compliance
            </a>
            <a href="#contact" className="text-muted-foreground hover:text-primary transition-colors font-medium">
              Contact
            </a>
          </nav>
          <Button asChild variant="default" size="sm" className="bg-accent-gradient hover:opacity-90 transition-opacity">
            <a href="#services">View Services</a>
          </Button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative bg-hero-gradient py-24 md:py-32 overflow-hidden">
        <div className="absolute inset-0 bg-medical-grid opacity-30" />
        <div className="container max-w-4xl mx-auto px-4 text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm mb-6 animate-fade-in-up">
            <Shield className="size-4 animate-pulse-glow" />
            <span className="font-medium">Professional Digital Educational Services</span>
          </div>
          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground mb-6 animate-fade-in-up delay-100 font-[family-name:var(--font-display)]">
            Expert Resources.{" "}
            <span className="text-gradient-primary">Digital Access.</span>{" "}
            <span className="text-gradient-accent">Professional Guidance.</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-4 animate-fade-in-up delay-200">
            Factor Sciences provides digital educational services focused on scientific and wellness information through qualified professionals.
          </p>
          <p className="text-sm text-muted-foreground max-w-2xl mx-auto mb-8 font-medium animate-fade-in-up delay-300 bg-muted/50 px-4 py-2 rounded-lg inline-block">
            We operate exclusively online. All services are digital and informational in nature. No physical products are sold.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up delay-400">
            <Button asChild size="lg" className="bg-accent-gradient hover:opacity-90 transition-opacity shadow-lg">
              <a href="#services" className="gap-2">
                <Sparkles className="size-5" />
                Explore Services
              </a>
            </Button>
            <Button asChild size="lg" variant="outline" className="border-primary/30 hover:border-primary/50 hover:bg-primary/5">
              <a href="#process">Learn How It Works</a>
            </Button>
          </div>

          {/* Floating decorative elements */}
          <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-3xl animate-float" />
          <div className="absolute bottom-20 right-10 w-32 h-32 bg-accent/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }} />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 md:py-24 bg-medical-gradient">
        <div className="container max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 text-primary mb-4">
              <HeartPulse className="size-6 icon-glow-primary" />
            </div>
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              About Factor Sciences
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              A professional platform for digital educational services
            </p>
          </div>

          <Card className="shadow-elevated border-gradient relative overflow-hidden corner-accent">
            <CardContent className="pt-6">
              <div className="prose prose-sm max-w-none text-foreground">
                <p className="text-base leading-relaxed mb-4">
                  Factor Sciences is a digital platform that provides educational services focused on scientific and
                  wellness information. Our operations are conducted entirely online through secure, digital channels.
                </p>
                <p className="text-base leading-relaxed mb-4">
                  <strong className="text-primary">Important Notice:</strong> Factor Sciences does not sell or ship
                  physical products of any kind. Our services are strictly educational, informational, and administrative
                  in nature.
                </p>
                <p className="text-base leading-relaxed mb-0">
                  All services are delivered digitally. Payments are processed securely for access to educational
                  resources, informational content, and administrative support services.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <Separator className="container max-w-6xl mx-auto" />

      {/* Services Section */}
      <section id="services" className="py-20 md:py-24 relative">
        <div className="absolute inset-0 bg-texture opacity-50" />
        <div className="container max-w-6xl mx-auto px-4 relative z-10">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              Our Services
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Professional digital services delivered by qualified professionals
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-primary/10 hover:border-primary/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <Video className="size-7 text-primary icon-glow-primary" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Digital Learning Sessions</CardTitle>
                <CardDescription className="text-base">
                  Live virtual sessions with qualified professionals delivering scientific and wellness educational content
                </CardDescription>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-accent/10 hover:border-accent/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <FileText className="size-7 text-accent icon-glow-accent" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Educational Wellness Resources</CardTitle>
                <CardDescription className="text-base">
                  Access to curated educational materials and wellness information resources
                </CardDescription>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-primary/10 hover:border-primary/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <ClipboardList className="size-7 text-primary icon-glow-primary" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Documentation Review Services</CardTitle>
                <CardDescription className="text-base">
                  Professional review and administrative support for documentation and records
                </CardDescription>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-accent/10 hover:border-accent/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <Calendar className="size-7 text-accent icon-glow-accent" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Administrative Coordination</CardTitle>
                <CardDescription className="text-base">
                  Scheduling, intake coordination, and administrative support services
                </CardDescription>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-primary/10 hover:border-primary/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <ClipboardList className="size-7 text-primary icon-glow-primary" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Client Onboarding Services</CardTitle>
                <CardDescription className="text-base">
                  Comprehensive intake and onboarding process management for new clients
                </CardDescription>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 bg-service-card border-accent/10 hover:border-accent/30 group">
              <CardHeader>
                <div className="size-14 rounded-xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                  <FileText className="size-7 text-accent icon-glow-accent" />
                </div>
                <CardTitle className="text-xl font-bold font-[family-name:var(--font-display)]">Professional Guidance Sessions</CardTitle>
                <CardDescription className="text-base">
                  One-time or recurring sessions with qualified specialists focused on educational content
                </CardDescription>
              </CardHeader>
            </Card>
          </div>

          <div className="mt-8 p-5 bg-gradient-to-r from-muted/80 to-muted/40 rounded-xl border border-border shadow-sm">
            <p className="text-sm text-muted-foreground text-center flex items-center justify-center gap-2">
              <AlertCircle className="size-5 text-primary shrink-0" />
              <span>All services are digital and non-physical. No physical products are sold or shipped.</span>
            </p>
          </div>
        </div>
      </section>

      <Separator className="container max-w-6xl mx-auto" />

      {/* Process Section */}
      <section id="process" className="py-20 md:py-24 bg-hero-gradient relative">
        <div className="absolute inset-0 bg-medical-grid opacity-20" />
        <div className="container max-w-4xl mx-auto px-4 relative z-10">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              How the Process Works
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              A clear, transparent workflow for accessing our digital services
            </p>
          </div>

          <div className="space-y-6">
            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 border-l-4 border-l-primary">
              <CardHeader>
                <div className="flex items-start gap-4">
                  <div className="size-12 rounded-full bg-accent-gradient text-primary-foreground flex items-center justify-center font-bold text-lg shrink-0 shadow-lg">
                    1
                  </div>
                  <div className="flex-1">
                    <CardTitle className="text-xl mb-2 font-bold font-[family-name:var(--font-display)]">Service Selection</CardTitle>
                    <CardDescription className="text-base">
                      Browse available services and select a session type, service package, or subscription plan
                      that meets your needs.
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 border-l-4 border-l-accent">
              <CardHeader>
                <div className="flex items-start gap-4">
                  <div className="size-12 rounded-full bg-accent-gradient text-primary-foreground flex items-center justify-center font-bold text-lg shrink-0 shadow-lg">
                    2
                  </div>
                  <div className="flex-1">
                    <CardTitle className="text-xl mb-2 font-bold font-[family-name:var(--font-display)]">Secure Payment Processing</CardTitle>
                    <CardDescription className="text-base">
                      Submit your order and complete payment via Zelle or CashApp. Your order is confirmed once
                      payment is verified by our team.
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 border-l-4 border-l-primary">
              <CardHeader>
                <div className="flex items-start gap-4">
                  <div className="size-12 rounded-full bg-accent-gradient text-primary-foreground flex items-center justify-center font-bold text-lg shrink-0 shadow-lg">
                    3
                  </div>
                  <div className="flex-1">
                    <CardTitle className="text-xl mb-2 font-bold font-[family-name:var(--font-display)]">Digital Access Granted</CardTitle>
                    <CardDescription className="text-base">
                      Once payment is verified, you receive access to your educational materials, schedule
                      sessions, or coordinate services with our team.
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300 border-l-4 border-l-accent">
              <CardHeader>
                <div className="flex items-start gap-4">
                  <div className="size-12 rounded-full bg-accent-gradient text-primary-foreground flex items-center justify-center font-bold text-lg shrink-0 shadow-lg">
                    4
                  </div>
                  <div className="flex-1">
                    <CardTitle className="text-xl mb-2 font-bold font-[family-name:var(--font-display)]">Service Delivery</CardTitle>
                    <CardDescription className="text-base">
                      All services are delivered digitally through online portals, video sessions, or electronic
                      document delivery. No physical shipping or product fulfillment occurs.
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
            </Card>
          </div>

          <div className="mt-8 p-6 bg-card rounded-xl border-2 border-primary/20 shadow-elevated">
            <h3 className="font-bold text-foreground mb-3 flex items-center gap-2 text-lg font-[family-name:var(--font-display)]">
              <Shield className="size-6 text-primary icon-glow-primary" />
              Payment and Service Confirmation
            </h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li className="flex items-start gap-3">
                <span className="text-primary mt-0.5 text-lg">•</span>
                <span>Payment is submitted via Zelle or CashApp and verified by our team</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-primary mt-0.5 text-lg">•</span>
                <span>Services are non-physical and delivered entirely through digital means</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-primary mt-0.5 text-lg">•</span>
                <span>No shipping addresses required as no physical products are involved</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-primary mt-0.5 text-lg">•</span>
                <span>Service delivery timelines are communicated during the booking process</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <Separator className="container max-w-6xl mx-auto" />

      {/* Compliance Section */}
      <section id="compliance" className="py-20 md:py-24">
        <div className="container max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 text-primary mb-4">
              <Shield className="size-6 icon-glow-primary" />
            </div>
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              Compliance & Disclaimers
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Important information regarding our services and limitations
            </p>
          </div>

          <div className="space-y-6">
            <Card className="shadow-elevated border-2 border-primary/30 bg-gradient-to-br from-card to-primary/5">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-xl font-bold font-[family-name:var(--font-display)]">
                  <AlertCircle className="size-6 text-primary icon-glow-primary" />
                  Service Nature and Limitations
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="prose prose-sm max-w-none">
                  <p className="text-muted-foreground mb-3">
                    Factor Sciences provides informational and educational services only. Our platform delivers digital
                    educational content focused on scientific and wellness information.
                  </p>
                  <ul className="space-y-2 text-muted-foreground">
                    <li className="flex items-start gap-2">
                      <span className="text-primary font-bold mt-0.5">•</span>
                      <span>Our services are educational and informational in nature</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary font-bold mt-0.5">•</span>
                      <span>We do not sell or ship physical products of any kind</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary font-bold mt-0.5">•</span>
                      <span>Content is provided for general informational purposes only</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary font-bold mt-0.5">•</span>
                      <span>Individual results and experiences may vary</span>
                    </li>
                  </ul>
                </div>
              </CardContent>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-xl font-bold font-[family-name:var(--font-display)]">
                  <Shield className="size-6 text-primary" />
                  Important Disclaimer
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground leading-relaxed">
                  Information provided through Factor Sciences is for educational and informational purposes only.
                  Content is focused on scientific and wellness information and should not be considered professional
                  advice. Always consult qualified professionals for decisions specific to your individual circumstances.
                </p>
              </CardContent>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-xl font-bold font-[family-name:var(--font-display)]">
                  <FileText className="size-6 text-accent" />
                  Regulatory Compliance
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground leading-relaxed">
                  Factor Sciences operates in compliance with applicable digital services regulations. Our platform
                  maintains appropriate security measures and data protection practices. Payment processing is handled
                  securely with appropriate oversight.
                </p>
              </CardContent>
            </Card>

            <Card className="shadow-float hover:shadow-elevated transition-all duration-300">
              <CardHeader>
                <CardTitle className="flex items-center gap-2 text-xl font-bold font-[family-name:var(--font-display)]">
                  <Lock className="size-6 text-primary" />
                  No Guarantees
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground leading-relaxed mb-3">
                  Factor Sciences makes no claims, promises, or guarantees regarding specific outcomes or results.
                  Our services are educational and informational in nature.
                </p>
                <p className="text-sm text-muted-foreground font-medium bg-muted/50 p-3 rounded-lg">
                  Individual results may vary. Educational content does not guarantee specific outcomes.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      <Separator className="container max-w-6xl mx-auto" />

      {/* Privacy Section */}
      <section id="privacy" className="py-20 md:py-24 bg-medical-gradient">
        <div className="container max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 text-primary mb-4">
              <Lock className="size-6 icon-glow-primary" />
            </div>
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              Privacy & Data Protection
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Your privacy and data security are our priority
            </p>
          </div>

          <Card className="shadow-elevated border-gradient">
            <CardContent className="pt-6">
              <div className="space-y-6">
                <div>
                  <h3 className="font-bold text-foreground mb-3 flex items-center gap-2 text-lg font-[family-name:var(--font-display)]">
                    <Lock className="size-6 text-primary" />
                    Data Privacy Commitment
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Factor Sciences respects and protects user privacy. We collect only the information necessary
                    to provide our services and maintain our platform. All personal information is handled with
                    appropriate confidentiality and security measures.
                  </p>
                </div>

                <Separator />

                <div>
                  <h3 className="font-bold text-foreground mb-3 flex items-center gap-2 text-lg font-[family-name:var(--font-display)]">
                    <Shield className="size-6 text-accent icon-glow-accent" />
                    Security Practices
                  </h3>
                  <p className="text-muted-foreground leading-relaxed mb-3">
                    Our platform employs industry-standard security practices for protecting your information,
                    including:
                  </p>
                  <ul className="space-y-2 text-sm text-muted-foreground">
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">•</span>
                      <span>Encrypted data transmission and secure storage protocols</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">•</span>
                      <span>Access controls and authentication requirements</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">•</span>
                      <span>Regular security assessments and compliance monitoring</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary mt-0.5">•</span>
                      <span>Limited data retention and secure disposal procedures</span>
                    </li>
                  </ul>
                </div>

                <Separator />

                <div>
                  <h3 className="font-bold text-foreground mb-3 flex items-center gap-2 text-lg font-[family-name:var(--font-display)]">
                    <FileText className="size-6 text-primary" />
                    Information Collection and Use
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">
                    We collect personal information only for service delivery, payment processing, and communication
                    purposes. Your data is never sold to third parties. For detailed information about our data
                    practices, please review our Privacy Policy.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <Separator className="container max-w-6xl mx-auto" />

      {/* Contact Section */}
      <section id="contact" className="py-20 md:py-24 relative">
        <div className="absolute inset-0 bg-texture opacity-50" />
        <div className="container max-w-4xl mx-auto px-4 relative z-10">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4 font-[family-name:var(--font-display)]">
              Contact & Business Information
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Get in touch with our professional team
            </p>
          </div>

          <Card className="shadow-elevated border-gradient">
            <CardContent className="pt-6">
              <div className="grid md:grid-cols-2 gap-8">
                <div>
                  <h3 className="font-bold text-foreground mb-4 text-lg font-[family-name:var(--font-display)]">Business Details</h3>
                  <div className="space-y-4">
                    <div className="p-3 bg-muted/30 rounded-lg">
                      <p className="text-sm text-muted-foreground mb-1">Business Name</p>
                      <p className="font-bold text-foreground">Factor Sciences</p>
                    </div>
                    <div className="p-3 bg-muted/30 rounded-lg">
                      <p className="text-sm text-muted-foreground mb-1">Business Type</p>
                      <p className="font-medium text-foreground">Digital Educational Services Platform</p>
                    </div>
                    <div className="p-3 bg-muted/30 rounded-lg">
                      <p className="text-sm text-muted-foreground mb-1">State of Operation</p>
                      <p className="font-medium text-foreground">Sheridan, Wyoming</p>
                    </div>
                  </div>
                </div>

                <div>
                  <h3 className="font-bold text-foreground mb-4 text-lg font-[family-name:var(--font-display)]">Contact Information</h3>
                  <div className="space-y-4">
                    <div className="flex items-start gap-3 p-3 bg-gradient-to-r from-primary/5 to-transparent rounded-lg hover:from-primary/10 transition-colors">
                      <Mail className="size-6 text-primary mt-0.5 shrink-0" />
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Email</p>
                        <a href="mailto:support@factorsciences.com" className="font-medium text-foreground hover:text-primary transition-colors">
                          support@factorsciences.com
                        </a>
                      </div>
                    </div>
                    <div className="flex items-start gap-3 p-3 bg-gradient-to-r from-accent/5 to-transparent rounded-lg hover:from-accent/10 transition-colors">
                      <Phone className="size-6 text-accent mt-0.5 shrink-0" />
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Phone</p>
                        <a href="tel:+18182536096" className="font-medium text-foreground hover:text-accent transition-colors">
                          +1 (818) 253-6096
                        </a>
                      </div>
                    </div>
                    <div className="flex items-start gap-3 p-3 bg-gradient-to-r from-primary/5 to-transparent rounded-lg">
                      <Clock className="size-6 text-primary mt-0.5 shrink-0" />
                      <div>
                        <p className="text-sm text-muted-foreground mb-1">Business Hours</p>
                        <p className="font-medium text-foreground">Monday - Friday</p>
                        <p className="text-sm text-muted-foreground">9:00 AM - 6:00 PM EST</p>
                        <p className="text-sm text-muted-foreground mt-1">
                          Responses within 24-48 business hours
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <Separator className="my-8" />

              <div className="bg-gradient-to-r from-muted/50 to-muted/30 rounded-lg p-6 border border-border/50">
                <h3 className="font-bold text-foreground mb-3 font-[family-name:var(--font-display)]">Customer Support</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  For questions about our services, billing inquiries, or technical support, please contact us
                  via email or phone during business hours.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-gradient-to-b from-muted/30 to-muted/50 py-12">
        <div className="container max-w-6xl mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div className="md:col-span-2">
              <div className="flex items-center gap-2 mb-3">
                <Activity className="size-6 text-primary" />
                <h3 className="text-xl font-bold tracking-tight text-foreground font-[family-name:var(--font-display)]">
                  Factor Sciences
                </h3>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed">
                Professional digital educational services platform providing scientific and wellness
                information. No physical products sold.
              </p>
            </div>

            <div>
              <h4 className="font-bold text-foreground mb-3 text-sm font-[family-name:var(--font-display)]">Legal</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/terms" className="text-muted-foreground hover:text-primary transition-colors">
                    Terms of Service
                  </Link>
                </li>
                <li>
                  <Link href="/privacy" className="text-muted-foreground hover:text-primary transition-colors">
                    Privacy Policy
                  </Link>
                </li>
                <li>
                  <Link href="/refund" className="text-muted-foreground hover:text-primary transition-colors">
                    Refund Policy
                  </Link>
                </li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold text-foreground mb-3 text-sm font-[family-name:var(--font-display)]">Resources</h4>
              <ul className="space-y-2 text-sm">
                <li>
                  <a href="#services" className="text-muted-foreground hover:text-primary transition-colors">
                    Services
                  </a>
                </li>
                <li>
                  <a href="#process" className="text-muted-foreground hover:text-primary transition-colors">
                    How It Works
                  </a>
                </li>
                <li>
                  <a href="#compliance" className="text-muted-foreground hover:text-primary transition-colors">
                    Compliance
                  </a>
                </li>
                <li>
                  <a href="#contact" className="text-muted-foreground hover:text-primary transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <Separator className="mb-8" />

          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
            <p>
              © {new Date().getFullYear()} Factor Sciences. All rights reserved.
            </p>
            <p className="text-xs text-center md:text-right">
              This platform provides educational and informational services only. No physical products sold.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}