"use client"

import { useState } from "react"
import Link from "next/link"
import { useSettings } from "@/providers/SettingsProvider"

interface Model {
  name: string
  height: string
  weight?: string
  size: string
  image: string
  desc: string
}

const menSizingModels: Model[] = [
  {
    name: "Regular Tall",
    height: "6'0\" - 6'3\"",
    size: "Fits like standard M/L, but with extra length.",
    image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image",
    desc: "Perfect for heights 6'0\" to 6'3\" who need extra length without standard wide boxiness."
  },
  {
    name: "Tall",
    height: "6'4\" - 6'7\"",
    size: "Our signature fit. Balanced length and width.",
    image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image",
    desc: "Our signature fit. Tailored precisely for lean, athletic, or stocky builds."
  },
  {
    name: "Extra Tall",
    height: "6'8\" - 7'1\"",
    size: "For the exceptionally tall. Maximum length.",
    image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image",
    desc: "Engineering maximum length for heights up to 7'1\". Balanced proportions."
  }
]

const womenSizingModels: Model[] = [
  {
    name: "Tall",
    height: "5'9\" - 6'1\"",
    size: "Fits heights 5'9\" to 6'1\" perfectly.",
    image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image",
    desc: "Tailored beautifully for tall women 5'9\" to 6'1\" seeking perfectly proportioned sleeve, torso, and leg rises."
  },
  {
    name: "Extra Tall",
    height: "6'2\" - 6'6\"",
    size: "Designed for heights 6'2\" to 6'6\".",
    image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image",
    desc: "Optimized leg openings, dropped waistlines, and long rises for tall women 6'2\" to 6'6\"."
  }
]

interface CategoryItem {
  title: string
  image: string
  link: string
}

const menCategories: CategoryItem[] = [
  { title: "Men's Tops", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=mens" },
  { title: "Men's Bottoms", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=mens-bottoms" },
  { title: "Men's Activewear", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=mens" },
  { title: "Men's Outerwear", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=mens" }
]

const womenCategories: CategoryItem[] = [
  { title: "Women's Tops", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=womens" },
  { title: "Women's Bottoms", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=womens-bottoms" },
  { title: "Women's Loungewear", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=womens" },
  { title: "Women's Outerwear", image: "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image", link: "/shop?category=womens" }
]

interface FitPointer {
  top: string
  left: string
  title: string
  desc: string
}

const fitPointers: FitPointer[] = [
  { top: "15%", left: "55%", title: "Adjusted Shoulder Breaks", desc: "Lowered and contoured shoulder seams prevent bunching on tall frames." },
  { top: "35%", left: "62%", title: "Arm-Length Extension", desc: "Sleeves engineered with custom extensions that sit perfectly past the wrist break." },
  { top: "45%", left: "48%", title: "Torso Proportioning", desc: "Lowered waistline and deep-cut torso ensure comfortable cover when moving." },
  { top: "60%", left: "60%", title: "Proportional Knee Break", desc: "Knee curves are dropped to match long inseams, ending knee-riding folds." },
  { top: "82%", left: "53%", title: "Longer Rise & Extended Inseam", desc: "Extra rise and extended inseam lengths fit tall men 6'0\"-7'1\" and women 5'9\"-6'6\"." }
]

export default function AboutClientPage({ settings }: { settings: Record<string, string> }) {
  const [gender, setGender] = useState<"men" | "women">("men")
  const { storeName } = useSettings()
  const s = settings || {}

  // Toggle helpers
  const sizingModels = gender === "men" ? menSizingModels : womenSizingModels
  const categories = gender === "men" ? menCategories : womenCategories

  // Section details
  const heroTitle = s.fit_hero_title || "We didn't just add inches. We redesigned the fit."
  const heroDesc = s.fit_hero_desc || "Standard brands just add width when you size up. We engineer clothing specifically for the functionally blessed."
  const heroImage = s.fit_hero_image || "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"

  // Section 2: Designed Exclusively
  const s2Heading = s.fit_s2_heading || "Designed Exclusively For Tall"
  const s2ProblemLabel = s.fit_s2_problem_label || "The Problem"
  const s2ProblemText = s.fit_s2_problem_text || "Most brands assume that if you're taller, you must be wider. They just add inches to the bottom hem, resulting in boxy, ill-fitting clothes that look terrible on a tall, lean frame."
  const s2SolutionLabel = s.fit_s2_solution_label || `${storeName} — The Solution`
  const s2SolutionText = s.fit_s2_solution_text || "Extra length without extra width. We adjust the entire garment — lowering the waistline, deepening the armholes, dropping the knee break, and extending the sleeves — for a truly proportionate fit."

  // Section 3: All the Length
  const s3Heading = s.fit_s3_heading || "All the Length You Need & More"
  const s3Subheading = s.fit_s3_subheading || "Extra Length, Not Extra Width"
  const s3Text = s.fit_s3_text || "It takes more than just a few inches at the hem to fit a tall frame. We lower the waistline, deepen the armholes, drop the knee break, and extend the sleeves. We measure every single detail so you get a truly proportionate fit — every time."
  
  // Section 3 Images toggle based on gender
  const s3Image = gender === "men"
    ? "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"
    : "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"

  // Section 4: Difference Models
  const s4Heading = s.fit_s4_heading || "The Difference"

  return (
    <div className="flex flex-col min-h-screen bg-white font-sans antialiased text-zinc-950">
      {/* ─── SECTION 1: HERO ─── */}
      <section className="relative w-full min-h-[75vh] flex items-end bg-zinc-100 overflow-hidden">
        <img src={heroImage} alt={heroTitle} className="absolute inset-0 w-full h-full object-cover object-top filter contrast-[105%]" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/15 to-transparent" />
        <div className="relative z-10 w-full max-w-[1440px] mx-auto px-6 md:px-12 pb-12 md:pb-16 text-white">
          <p className="text-[10px] font-black uppercase tracking-[0.25em] text-white/80 mb-3">Welcome to {storeName}</p>
          <h1 className="text-3xl md:text-[44px] leading-[1.1] font-extrabold tracking-tight max-w-2xl">
            {heroTitle}
          </h1>
          <p className="text-[13px] md:text-[15px] mt-4 max-w-xl opacity-90 leading-relaxed font-light">
            {heroDesc}
          </p>
        </div>
      </section>

      {/* ─── MASTER GENDER STATE TOGGLE BAR ─── */}
      <div className="sticky top-14 z-40 bg-white/95 backdrop-blur-md border-b border-zinc-100 shadow-[0_4px_12px_rgb(0,0,0,0.03)] py-4">
        <div className="max-w-md mx-auto flex items-center justify-center gap-4 px-6">
          <button
            type="button"
            onClick={() => setGender("men")}
            className={`flex-1 py-3 text-[11px] font-black uppercase tracking-[0.2em] transition-all rounded-sm cursor-pointer ${
              gender === "men"
                ? "bg-zinc-950 text-white shadow-sm"
                : "bg-zinc-50 text-zinc-400 hover:text-zinc-950 hover:bg-zinc-100/50"
            }`}
          >
            Men Fit
          </button>
          <button
            type="button"
            onClick={() => setGender("women")}
            className={`flex-1 py-3 text-[11px] font-black uppercase tracking-[0.2em] transition-all rounded-sm cursor-pointer ${
              gender === "women"
                ? "bg-zinc-950 text-white shadow-sm"
                : "bg-zinc-50 text-zinc-400 hover:text-zinc-950 hover:bg-zinc-100/50"
            }`}
          >
            Women Fit
          </button>
        </div>
      </div>

      {/* ─── SECTION 2: DESIGNED EXCLUSIVELY FOR TALL ─── */}
      <section className="w-full bg-white border-b border-zinc-100 py-10">
        <div className="text-center py-10 px-6">
          <h2 className="text-[22px] md:text-[32px] font-extrabold tracking-tight uppercase">{s2Heading}</h2>
          <div className="w-10 h-[2px] bg-zinc-900 mx-auto mt-5" />
        </div>

        <div className="flex flex-col lg:flex-row max-w-[1440px] mx-auto px-6">
          {/* Left Description Column */}
          <div className="w-full lg:w-1/2 px-4 md:px-10 lg:px-14 py-8 flex flex-col justify-center">
            <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 mb-3">{s2ProblemLabel}</p>
            <p className="text-[14px] md:text-[15px] text-zinc-600 leading-[1.8] mb-10">{s2ProblemText}</p>
            
            <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 mb-3">{s2SolutionLabel}</p>
            <p className="text-[14px] md:text-[15px] text-zinc-600 leading-[1.8] mb-8">{s2SolutionText}</p>
            <div>
              <Link href="/shop" className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.15em] text-zinc-950 border-b border-zinc-950 pb-1 hover:text-zinc-500 hover:border-zinc-500 transition-colors">
                Shop {gender === "men" ? "Mens" : "Womens"} Collection →
              </Link>
            </div>
          </div>

          {/* Right Sizing Cards Column (Fully dynamic based on toggle state!) */}
          <div className="w-full lg:w-1/2 px-4 md:px-10 lg:px-14 py-8 flex items-stretch">
            <div className="w-full bg-zinc-50/50 p-6 md:p-10 border border-zinc-200/40 rounded-sm flex items-center justify-center">
              <div className={`grid grid-cols-1 gap-6 w-full ${gender === "men" ? "sm:grid-cols-3" : "sm:grid-cols-2 max-w-lg mx-auto"}`}>
                {sizingModels.map((model, idx) => (
                  <div key={idx} className="flex flex-col items-center text-center group">
                    <div className="aspect-[3/4] w-full overflow-hidden bg-zinc-200 border border-zinc-200/45 mb-4 relative">
                      <img
                        src={model.image}
                        alt={model.name}
                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                      />
                    </div>
                    <h4 className="text-[12px] font-black uppercase tracking-wider text-zinc-950 mb-1">
                      {model.name}
                    </h4>
                    <p className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest mb-1.5">
                      {model.height}
                    </p>
                    <p className="text-[10px] text-zinc-500 leading-normal font-medium px-2">
                      {model.size}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── SECTION 3: ALL THE LENGTH YOU NEED ─── */}
      <section className="flex flex-col lg:flex-row w-full border-b border-zinc-100 bg-white">
        <div className="w-full lg:w-1/2 relative min-h-[450px] lg:min-h-[600px]">
          <img src={s3Image} alt={s3Heading} className="absolute inset-0 w-full h-full object-cover" />
          {/* Subtle slider accent overlay */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40px] h-[40px] bg-white rounded-full flex items-center justify-center shadow-lg border border-zinc-200 z-20 pointer-events-none">
            <span className="text-[10px] font-extrabold text-zinc-600 uppercase tracking-wider">&harr;</span>
          </div>
        </div>
        <div className="w-full lg:w-1/2 px-8 md:px-14 lg:px-20 py-14 lg:py-20 flex flex-col justify-center bg-white">
          <h2 className="text-[22px] md:text-[30px] font-extrabold tracking-tight mb-5 uppercase">{s3Heading}</h2>
          <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-zinc-400 mb-5">{s3Subheading}</p>
          <p className="text-[14px] md:text-[15px] text-zinc-600 leading-[1.8]">{s3Text}</p>
        </div>
      </section>

      {/* ─── SECTION 4: THE DIFFERENCE (3 up profiles) ─── */}
      <section className="w-full py-16 md:py-24 bg-[#ebebeb]/50 border-b border-zinc-100">
        <div className="max-w-[1440px] mx-auto px-6 md:px-12 text-center">
          <h2 className="text-[22px] md:text-[32px] font-extrabold tracking-tight mb-14 uppercase">{s4Heading}</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {/* Model Card 1 */}
            <div className="flex flex-col items-center bg-white p-6 shadow-[0_4px_20px_rgb(0,0,0,0.02)] border border-zinc-200/40 rounded-sm">
              <div className="aspect-[3/4] w-full overflow-hidden bg-zinc-100 mb-5">
                <img 
                  src={gender === "men" 
                    ? "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image" 
                    : "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"} 
                  alt="Fit 1" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h4 className="text-[12px] font-black uppercase tracking-wider text-zinc-950 mb-1">The Classic</h4>
              <p className="text-[10px] text-zinc-400 uppercase tracking-widest mb-3">Clean &amp; Proportioned</p>
              <p className="text-[12px] text-zinc-600 leading-relaxed">
                {gender === "men" 
                  ? "Standard armholes lowered by 2 inches and chest adjustments designed for slim-to-lean structures."
                  : "Lowered waist rises and expanded chest measurements tailored to provide a beautifully balanced tall silhouette."}
              </p>
            </div>

            {/* Model Card 2 */}
            <div className="flex flex-col items-center bg-white p-6 shadow-[0_4px_20px_rgb(0,0,0,0.02)] border border-zinc-200/40 rounded-sm">
              <div className="aspect-[3/4] w-full overflow-hidden bg-zinc-100 mb-5">
                <img 
                  src={gender === "men" 
                    ? "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image" 
                    : "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"} 
                  alt="Fit 2" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h4 className="text-[12px] font-black uppercase tracking-wider text-zinc-950 mb-1">The Athletic</h4>
              <p className="text-[10px] text-zinc-400 uppercase tracking-widest mb-3">Athletic Tapered</p>
              <p className="text-[12px] text-zinc-600 leading-relaxed">
                {gender === "men" 
                  ? "Broad shoulder cuts with tapered waist contouring, giving tall muscular builds a sharp, streamlined fit."
                  : "Slight hip contours with balanced shoulder lines engineered specifically for athletic or hourglass tall frames."}
              </p>
            </div>

            {/* Model Card 3 */}
            <div className="flex flex-col items-center bg-white p-6 shadow-[0_4px_20px_rgb(0,0,0,0.02)] border border-zinc-200/40 rounded-sm">
              <div className="aspect-[3/4] w-full overflow-hidden bg-zinc-100 mb-5">
                <img 
                  src={gender === "men" 
                    ? "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image" 
                    : "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"} 
                  alt="Fit 3" 
                  className="w-full h-full object-cover" 
                />
              </div>
              <h4 className="text-[12px] font-black uppercase tracking-wider text-zinc-950 mb-1">The Relaxed</h4>
              <p className="text-[10px] text-zinc-400 uppercase tracking-widest mb-3">Easy Silhouette</p>
              <p className="text-[12px] text-zinc-600 leading-relaxed">
                {gender === "men" 
                  ? "Laid-back, relaxed drape that fits comfortably without looking baggy. Ideal for loungewear and street staples."
                  : "A drapey, relaxed cut that keeps things easy and fluid. Perfect for oversized fashion styles."}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ─── SECTION 5: THE SCIENCE OF FIT (Pointer diagram!) ─── */}
      <section className="w-full bg-zinc-900 text-white py-16 md:py-24 border-b border-zinc-950">
        <div className="max-w-[1440px] mx-auto px-6 md:px-12 text-center">
          <p className="text-[10px] font-black uppercase tracking-[0.25em] text-white/70 mb-3">Precision Engineering</p>
          <h2 className="text-[22px] md:text-[36px] font-extrabold tracking-tight text-white mb-16 uppercase">The Science of Fit</h2>
          
          <div className="max-w-4xl mx-auto flex flex-col md:flex-row gap-12 items-center justify-center">
            {/* Interactive Pointer Diagram (Absolute overlays!) */}
            <div className="w-full md:w-1/2 relative max-w-[400px] border border-zinc-800 rounded-sm overflow-hidden bg-black/30">
              <img 
                src={gender === "men" 
                  ? "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"
                  : "https://placehold.co/600x800/e2e8f0/64748b.png?text=Store+Image"}
                alt="Model Fitting callouts" 
                className="w-full h-auto object-cover opacity-80" 
              />
              
              {/* Dot Markers */}
              {fitPointers.map((p, idx) => (
                <div 
                  key={idx} 
                  style={{ top: p.top, left: p.left }}
                  className="absolute w-4 h-4 -translate-x-1/2 -translate-y-1/2 group z-20 cursor-pointer"
                >
                  <div className="w-full h-full rounded-full bg-white animate-ping absolute opacity-60" />
                  <div className="w-3 h-3 rounded-full bg-white border border-zinc-900 mx-auto mt-0.5 relative z-10 transition-colors group-hover:bg-zinc-950" />
                  
                  {/* Tooltip on Hover */}
                  <div className="absolute bottom-6 left-1/2 -translate-x-1/2 w-48 bg-zinc-950 border border-zinc-800 p-2.5 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all rounded-sm z-30 pointer-events-none text-left">
                    <p className="text-[10px] font-black uppercase tracking-wider text-white mb-1">{p.title}</p>
                    <p className="text-[9px] text-zinc-400 leading-normal">{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Pointer description list on side */}
            <div className="w-full md:w-1/2 text-left space-y-8">
              {fitPointers.map((p, idx) => (
                <div key={idx} className="flex gap-4 items-start border-l border-zinc-800 pl-4 hover:border-white transition-colors py-1">
                  <span className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">0{idx + 1}</span>
                  <div>
                    <h4 className="text-[11px] font-black uppercase tracking-widest text-white mb-1.5">{p.title}</h4>
                    <p className="text-[12px] text-zinc-400 leading-relaxed font-light">{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ─── SECTION 8: DYNAMIC SHOP BY CATEGORY ─── */}
      <section className="w-full bg-white py-16 md:py-24">
        <div className="max-w-[1440px] mx-auto px-6 md:px-12 text-center">
          <p className="text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400 mb-3">Shop Collections</p>
          <h2 className="text-[22px] md:text-[32px] font-extrabold tracking-tight mb-12 uppercase">
            Shop {gender === "men" ? "Men" : "Women"} by Category
          </h2>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {categories.map((cat, idx) => (
              <Link key={idx} href={cat.link} className="group relative aspect-[3/4] overflow-hidden bg-zinc-100 block">
                <img 
                  src={cat.image} 
                  alt={cat.title} 
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 filter contrast-[102%]" 
                />
                <div className="absolute inset-0 bg-zinc-950/20 group-hover:bg-zinc-950/30 transition-colors z-10" />
                <div className="absolute inset-0 z-20 flex items-end p-5">
                  <span className="text-white text-[12px] font-bold uppercase tracking-[0.15em] border-b border-white pb-0.5 group-hover:border-transparent transition-colors">
                    {cat.title}
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ─── SECTION 9: BRAND MISSION ─── */}
      <section className="w-full bg-zinc-950 text-white py-16 md:py-24 border-t border-zinc-900">
        <div className="max-w-[1440px] mx-auto px-6 md:px-12 text-center">
          <p className="text-[10px] font-black uppercase tracking-[0.25em] text-zinc-500 mb-4">{storeName} Mission</p>
          <h2 className="text-[20px] md:text-[28px] font-extrabold tracking-tight max-w-2xl mx-auto leading-snug uppercase">
            Tall is not a size — it&apos;s a body type. And it deserves clothing designed from the ground up.
          </h2>
          <div className="mt-10">
            <Link href="/shop" className="inline-block px-10 py-4 border border-white text-[11px] font-black uppercase tracking-[0.2em] hover:bg-white hover:text-zinc-950 transition-all">
              Shop Collections
            </Link>
          </div>
        </div>
      </section>
    </div>
  )
}