"use client";

import { ArrowRight } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { useStickyCta } from "@/features/landing-page/hooks";
import {
  Chapter,
  HeroSection,
  TrustStrip,
  ServicesCarousel,
  WhyUsSection,
  CTABanner,
  SupportDownloadsSection,
  ContactSection,
} from "@/features/landing-page/components";

export function PublicLandingView() {
  const { heroCTARef, showStickyCTA } = useStickyCta();

  return (
    <div className="pb-8">
      {/* Chapter 1: Who we are */}
      <Chapter className="min-h-dvh flex flex-col bg-gradient-to-br from-surface-sunken via-background to-info-bg/80">
        <HeroSection heroCTARef={heroCTARef} />
        <TrustStrip />
      </Chapter>

      {/* Chapter 2: What we offer */}
      <Chapter className="bg-surface-sunken/30">
        <ServicesCarousel />
      </Chapter>

      {/* Chapter 3: Why choose us */}
      <Chapter className="bg-background">
        <WhyUsSection />
        <CTABanner />
      </Chapter>

      {/* Chapter 4: Get in touch */}
      <Chapter className="bg-background">
        <SupportDownloadsSection />
        <ContactSection />
      </Chapter>

      {/* Sticky Mobile CTA */}
      {showStickyCTA && (
        <div className="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur-sm border-t border-border p-4 z-50 md:hidden animate-in slide-in-from-bottom-4 duration-300">
          <Button
            as="a"
            href="/services"
            variant="pill"
            size="lg"
            rightIcon={<ArrowRight className="h-5 w-5" />}
            className="w-full shadow-lg"
          >
            Find Your Plan
          </Button>
        </div>
      )}
    </div>
  );
}
