"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";

export default function HowItWorksPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Leagues", id: "leagues" },
    { name: "Stats", id: "stats" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "How It Works", href: "/how-it-works" },
        { label: "Pricing", href: "/pricing" },
        { label: "Leagues", href: "/leagues" },
      ],
    },
    {
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Community", href: "#" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      items: [
        { label: "Contact", href: "#" },
        { label: "Support", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
    {
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Discord", href: "https://discord.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FantasyRugby"
          navItems={navItems}
          button={{
            text: "Start Your Squad",
            href: "#cta",
          }}
        />
      </div>

      <div id="hero-how-it-works" data-section="hero-how-it-works">
        <HeroLogo
          logoText="How Fantasy Rugby Works Step-by-Step Guide"
          description="Master the complete fantasy rugby experience from squad drafting to real-time scoring. Learn the mechanics, strategies, and tips that will help you climb the leaderboard and compete at your level."
          buttons={[
            {
              text: "Back to Home",
              href: "/",
            },
            {
              text: "Start Competing",
              href: "#cta",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/american-football-player-wearing-equipment_23-2151117495.jpg"
          imageAlt="Fantasy rugby strategy and planning guide"
          showDimOverlay={true}
          ariaLabel="How it works hero section"
        />
      </div>

      <div id="how-it-works-steps" data-section="how-it-works-steps">
        <FeatureCardMedia
          title="Complete Fantasy Rugby Gameplay Flow"
          description="Follow these essential steps to build winning squads and compete successfully in FantasyRugby leagues."
          tag="Step-by-Step Guide"
          tagAnimation="blur-reveal"
          features={[
            {
              id: "step-1",
              title: "1. Register & Join a League",
              description: "Create your FantasyRugby account and choose a public league to join or create a private league for your friends. Select your competition level (free, pro, or elite) to unlock different features. Set your team name and customize your league preferences.",
              tag: "Getting Started",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-uses-smartphone-while-sitting-stadium-stands_169016-48649.jpg",
              imageAlt: "League selection and registration interface",
              buttons: [],
            },
            {
              id: "step-2",
              title: "2. Draft Your Squad",
              description: "Build your 15-player squad from Championship and Premiership players within your £50M salary cap. Balance your lineup with forwards and backs, mixing established stars with value prospects. Use player analytics to inform your picks and maximize potential points.",
              tag: "Squad Assembly",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-working-with-finance-diagrams-table-laptop-papers_1268-17477.jpg",
              imageAlt: "Squad drafting and player selection process",
              buttons: [],
            },
            {
              id: "step-3",
              title: "3. Manage Weekly Transfers",
              description: "Each matchweek, transfer out underperforming players and bring in hot-form rookies. Monitor real-time price changes and plan ahead for upcoming fixtures. Use transfer recommendations to stay competitive and maximize your squad value.",
              tag: "Weekly Management",
              imageSrc: "http://img.b2bpic.net/free-vector/flat-fitness-mobile-app-infographic_23-2148203348.jpg",
              imageAlt: "Transfer market management dashboard",
              buttons: [],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          ariaLabel="Fantasy rugby step-by-step guide"
        />
      </div>

      <div id="scoring-mechanics" data-section="scoring-mechanics">
        <FeatureCardMedia
          title="Scoring & Competition Rules"
          description="Understand how points are awarded, league mechanics work, and how to strategically compete in multiple leagues."
          tag="Game Mechanics"
          tagAnimation="opacity"
          features={[
            {
              id: "scoring",
              title: "Real-Time Match Scoring",
              description: "Points update instantly during matches: Tries (5 pts), Conversions (2 pts), Penalties (1 pt), Tackles (0.5 pts), Assists (1 pt), Turnovers Won (0.5 pts). Defenders earn clean sheet bonuses (1 pt) and top performers get man-of-match awards. No delays—pure live engagement.",
              tag: "Points System",
              imageSrc: "http://img.b2bpic.net/free-photo/african-american-staff-gathers-examines-monthly-revenue-balance_482257-130896.jpg",
              imageAlt: "Live scoring system and points breakdown",
              buttons: [],
            },
            {
              id: "leagues",
              title: "League Types & Rankings",
              description: "Compete in open global leagues or create branded private leagues (office, friends, clubs). Weekly leaderboards track your progress in real-time. Rankings update after each matchweek with bonus opportunities and seasonal milestones. Head-to-head records break ties.",
              tag: "Competition Format",
              imageSrc: "http://img.b2bpic.net/free-photo/joyful-close-friends-joking-arguing_1262-21176.jpg",
              imageAlt: "League leaderboards and ranking system",
              buttons: [],
            },
            {
              id: "strategy",
              title: "Advanced Strategy Tips",
              description: "Balance your squad around fixture difficulty and form trends. Invest in rising stars before price spikes. Hold premium picks for key weeks and use subs strategically. Monitor injury news and weather forecasts. Join multiple leagues to diversify your competitive experience.",
              tag: "Pro Tactics",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-people-taking-selfie_23-2149037725.jpg",
              imageAlt: "Strategy tips and competitive analysis",
              buttons: [],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
          ariaLabel="Fantasy rugby scoring and mechanics guide"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="FantasyRugby"
          columns={footerColumns}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}