"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Shield, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="inset"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Platform",          id: "#platform"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="MeliuSafe"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="MeliuSafe"
      description="Continuous AI-powered structural monitoring detects settlement, strain, and stress before they become expensive problems. Submillimeter precision, 24/7 realtime alerts, 5–10 year battery life."
      buttons={[
        {
          text: "Request a Demo",          href: "#contact"},
        {
          text: "See How It Works",          href: "#features"},
        {
          text: "Get In Touch",          href: "#contact"},
      ]}
      imageSrc="https://img.b2bpic.net/premium-photo/architecture-details-modern-building-metal-wall-curve-futuristic-space_1033579-188584.jpg?id=333886856"
      imageAlt="MeliuSafe AI-powered structural health monitoring dashboard"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="About Us"
      title="Redefining Infrastructure Safety with AI"
      description="MeliuSafe, by Meliusense Technologies, delivers an AI-powered platform for proactive structural health monitoring. We empower municipalities, developers, and engineering firms to manage aging infrastructure risk, reduce costs, and enhance safety."
      subdescription="Our deeptech sensor networks and machine learning algorithms provide unprecedented real-time insights, transforming reactive maintenance into predictive intelligence."
      icon={Shield}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DzqSODNYEnnzhh2ssW1at3CSMe/uploaded-1780421416934-wzscdvsx.png"
      imageAlt="MeliuSafe deeptech structural health monitoring sensors"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNineteen
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          tag: "Real-Time Alerts",          title: "Instant Anomaly Detection",          subtitle: "24/7 Monitoring",          description: "Receive immediate notifications on any detected structural anomalies, enabling rapid response and mitigation of potential risks.",          imageSrc: "http://img.b2bpic.net/free-photo/lock-icon-front-side_187299-39511.jpg",          imageAlt: "Real-time alerts icon"},
        {
          tag: "Sub-Millimeter Precision",          title: "Unrivaled Accuracy",          subtitle: "Micro-level Shifts",          description: "Our advanced sensors detect the slightest structural movements and changes with sub-millimeter precision, far beyond human capability.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250207.jpg",          imageAlt: "Sub-millimeter precision icon"},
        {
          tag: "Extended Battery Life",          title: "Long-Term Reliability",          subtitle: "5-10 Years Power",          description: "Benefit from low-maintenance sensors with an impressive 5-10 year battery life, ensuring continuous monitoring without frequent interventions.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-environment-project-scene_23-2148896010.jpg",          imageAlt: "Long battery life icon"},
        {
          tag: "Predictive Analytics",          title: "Future-Proof Your Assets",          subtitle: "AI-Driven Insights",          description: "Leverage AI-powered predictive models to forecast potential degradation and plan proactive maintenance, optimizing budgets and preventing failures.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-flowing-particles-network-communications-design_1048-15848.jpg",          imageAlt: "Predictive analytics icon"},
      ]}
      title="Intelligent Monitoring for Critical Assets"
      description="MeliuSafe offers a comprehensive suite of features designed for precision, reliability, and ease of integration across diverse infrastructure types."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "99.9%",          description: "Detection Accuracy"},
        {
          id: "m2",          value: "5-10 Years",          description: "Sensor Battery Life"},
        {
          id: "m3",          value: "30%",          description: "Maintenance Cost Reduction"},
      ]}
      title="Measurable Results, Unmatched Reliability"
      description="Our platform delivers tangible benefits, driving efficiency, reducing risks, and extending asset lifespans for our partners."
    />
  </div>

  <div id="platform" data-section="platform">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Sensor Network Deployment",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/salina-turda-salt-mine-romania_1268-20549.jpg",          imageAlt: "MeliuSafe sensor network deployment"},
        {
          id: "p2",          name: "AI Data Analytics Engine",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-smartwatch-hologram-presentation-wearable-gadget_53876-97061.jpg",          imageAlt: "AI data analytics engine"},
        {
          id: "p3",          name: "Real-time Dashboard & Alerts",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/back-shot-business-womens-with-medical-face-mask-working-together-management-presentation-using-tablet-computer-while-sitting-company-office-team-respecting-social-distance_482257-17559.jpg",          imageAlt: "Real-time structural health dashboard"},
        {
          id: "p4",          name: "Historical Data & Reporting",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/male-administrator-using-chroma-key-display-digital-analysis_482257-126246.jpg",          imageAlt: "Historical data reports"},
        {
          id: "p5",          name: "Predictive Maintenance Modules",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/modern-businessman-employs-virtual-reality-headset-digital-environment-focused-performance_482257-136139.jpg",          imageAlt: "Predictive maintenance forecasting"},
        {
          id: "p6",          name: "API Integration & Custom Solutions",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/data-center-technician-using-artificial-intelligence-tablet-close-up_482257-125938.jpg",          imageAlt: "API integration"},
      ]}
      title="Full-Spectrum Structural Intelligence"
      description="Explore the core components and capabilities of the MeliuSafe platform, tailored for diverse operational needs and integration levels."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="none"
      plans={[
        {
          id: "plan-pilot",          name: "Pilot Program",          badge: "Start Smart",          badgeIcon: Sparkles,
          price: "Starting at $X,XXX/month",          buttons: [
            {
              text: "Request Pilot Demo",              href: "#contact"},
          ],
          features: [
            "Limited Sensor Deployment",            "Basic AI Monitoring",            "Standard Dashboard Access",            "Initial Data Reports",            "Dedicated Onboarding Support"],
        },
        {
          id: "plan-enterprise",          name: "Enterprise Suite",          badge: "Comprehensive",          badgeIcon: Shield,
          price: "Custom Pricing",          buttons: [
            {
              text: "Consult an Expert",              href: "#contact"},
          ],
          features: [
            "Full-Scale Sensor Network",            "Advanced AI Analytics Engine",            "Real-time Dashboard & Alerts",            "Historical & Predictive Reporting",            "Priority Support & SLAs",            "API Access & Integrations"],
        },
        {
          id: "plan-custom",          name: "Custom Integration",          badge: "Bespoke",          badgeIcon: Zap,
          price: "Contact for Quote",          buttons: [
            {
              text: "Build Your Solution",              href: "#contact"},
          ],
          features: [
            "Tailored Sensor Deployments",            "Bespoke AI Model Development",            "Deep System Integrations",            "Advanced Custom Reporting",            "24/7 Premium Support",            "Dedicated Technical Account Manager"],
        },
      ]}
      title="Tailored Solutions for Your Infrastructure"
      description="MeliuSafe offers flexible engagement models, from pilot projects to full-scale deployments. Connect with us to design a plan that fits your specific monitoring needs."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="MeliuSafe transformed our approach to infrastructure maintenance, providing insights we never thought possible. Their proactive alerts saved us millions and ensured public safety across our city. An indispensable partner for modern urban planning."
      rating={5}
      author="Maria Rodriguez, City Engineer, Metropolis Department of Public Works"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-interviewee-taking-notes_23-2149037866.jpg",          alt: "Maria Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/silhouette-person-city_23-2149211340.jpg",          alt: "Michael Chen"},
        {
          src: "http://img.b2bpic.net/free-photo/building-construction-worker-site_23-2149124275.jpg",          alt: "Emily Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",          alt: "David Kim"},
        {
          src: "http://img.b2bpic.net/free-photo/vintage-style-people-working-office-with-computers_23-2149850983.jpg",          alt: "Sarah Johnson"},
        {
          src: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg",          alt: "Alex Lee"},
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "How does MeliuSafe differ from traditional monitoring?",          content: "MeliuSafe provides continuous, real-time, AI-powered insights with sub-millimeter precision, significantly surpassing the intermittent, manual, and often subjective assessments of traditional methods."},
        {
          id: "q2",          title: "What types of infrastructure can MeliuSafe monitor?",          content: "Our platform is versatile and can monitor a wide range of infrastructure including bridges, high-rise buildings, tunnels, dams, historical structures, and industrial facilities."},
        {
          id: "q3",          title: "What is the typical battery life of your sensors?",          content: "MeliuSafe sensors are designed for longevity, typically offering an impressive 5 to 10 years of battery life, minimizing maintenance needs and operational disruptions."},
        {
          id: "q4",          title: "How long does installation and setup take?",          content: "Installation time varies based on project scope, but our deeptech sensors are designed for efficient deployment. A typical setup can range from a few days to a few weeks, followed by a brief calibration period."},
        {
          id: "q5",          title: "What kind of data do we receive, and how is it accessed?",          content: "You receive actionable insights, including settlement, strain, and stress data, accessible via our secure, real-time dashboard. Custom reports and API integrations are also available for deeper analysis."},
        {
          id: "q6",          title: "Do you offer ongoing support and maintenance?",          content: "Yes, we provide comprehensive ongoing support, including technical assistance, platform updates, and sensor maintenance services, ensuring optimal performance and peace of mind."},
      ]}
      title="Common Questions, Clear Answers"
      description="Find quick answers to the most frequently asked questions about MeliuSafe, our technology, and how we can support your infrastructure goals."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Partner with MeliuSafe Today"
      description="Ready to explore a pilot program, request a demo, or discuss a custom solution? Our team is eager to connect and demonstrate how MeliuSafe can secure your infrastructure."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "organization",          type: "text",          placeholder: "Organization Name",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Phone Number (optional)"},
      ]}
      textarea={{
        name: "message",        placeholder: "How can MeliuSafe help your infrastructure?",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/green-screen-device-smiling-colleagues-doing-brainstorming_482257-123555.jpg"
      imageAlt="Professional meeting discussing structural blueprints and data"
      mediaPosition="right"
      buttonText="Send Inquiry"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="MeliuSafe"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}