"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import LegalSection from '@/components/legal/LegalSection';

export default function FitGuidePage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSizeMediumTitles"
        background="grid"
        cardStyle="soft-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              {
                name: "Home",                id: "#hero"},
              {
                name: "About",                id: "#about"},
              {
                name: "Features",                id: "#features"},
              {
                name: "Tickets",                id: "#pricing"},
              {
                name: "Testimonials",                id: "#testimonials"},
              {
                name: "FAQ",                id: "#faq"},
              {
                name: "Size Guide",                id: "/size-guide"},
              {
                name: "Fit Guide",                id: "/fit-guide"},
              {
                name: "Blog",                id: "/blog"},
              {
                name: "Support",                id: "/support"},
              {
                name: "Contact",                id: "#contact"},
            ]}
            brandName="Khurasan Party"
          />
        </div>

        <div id="fit-guide" data-section="fit-guide">
          <LegalSection
            layout="page"
            title="Bra Fit Guide"
            subtitle="Tips and tricks for achieving the most comfortable and supportive bra fit."
            sections={[
              {
                heading: "Signs of a Good Fit",                content: [
                  {
                    type: "list",                    items: [
                      "The band is firm and level all the way around, not riding up.",                      "The center gore (the piece between the cups) lies flat against your sternum.",                      "Your breasts fill the cups completely without gaping or overflowing.",                      "The straps feel comfortable and don't dig into your shoulders.",                      "You can slide two fingers under the band comfortably."],
                  },
                ],
              },
              {
                heading: "Signs of a Bad Fit",                content: [
                  {
                    type: "list",                    items: [
                      "The band rides up your back, especially after moving.",                      "Cups gape, creating wrinkles or space between your breast and the cup.",                      "Your breasts spill out over the top or sides of the cups (known as 'double boob').",                      "The center gore lifts away from your body.",                      "The straps dig into your shoulders or constantly fall down.",                      "You experience discomfort, chafing, or redness."],
                  },
                ],
              },
              {
                heading: "Tips for Finding Your Best Bra",                content: [
                  {
                    type: "numbered-list",                    items: [
                      "Always start with the band: It provides 80% of the support.",                      "Scoop and swoop: Lean forward and scoop all breast tissue into the cups.",                      "Adjust straps: After scooping, adjust straps so they are firm but not tight.",                      "Try different styles: Not all styles fit the same, experiment to find what works for you.",                      "Get professionally fitted: A trained expert can help you find your true size."],
                  },
                ],
              },
              {
                heading: "Different Bra Styles & Their Fit",                content: [
                  {
                    type: "paragraph",                    text: "Each bra style offers a unique fit and level of support. Balconette bras offer a lift and rounded shape, while full-coverage bras provide maximum support and modesty. Bralettes are generally unpadded and wire-free, offering light support and comfort. T-shirt bras are seamless and provide a smooth silhouette under clothing."},
                ],
              },
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  {
                    label: "About Us",                    href: "#about"},
                  {
                    label: "Features",                    href: "#features"},
                  {
                    label: "Tickets",                    href: "#pricing"},
                ],
              },
              {
                items: [
                  {
                    label: "Testimonials",                    href: "#testimonials"},
                  {
                    label: "Partners",                    href: "#social-proof"},
                  {
                    label: "FAQ",                    href: "#faq"},
                ],
              },
              {
                items: [
                  {
                    label: "Size Guide",                    href: "/size-guide"},
                  {
                    label: "Fit Guide",                    href: "/fit-guide"},
                  {
                    label: "Blog",                    href: "/blog"},
                ],
              },
              {
                items: [
                  {
                    label: "Support",                    href: "/support"},
                  {
                    label: "Contact",                    href: "#contact"},
                  {
                    label: "Privacy Policy",                    href: "#"},
                  {
                    label: "Terms of Service",                    href: "#"},
                ],
              },
            ]}
            logoText="Khurasan Party"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
