"use client";

import React from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { Section } from "../../../src/components/Section";
import { Reveal } from "../../../src/components/Reveal";
import {
  H1,
  H2,
  H3,
  LeadText,
  Label,
  MonoLabel,
  BodyText,
} from "../../../src/components/Typography";
import { BackgroundGrid, Container } from "../../../src/components/Layout";
import Link from "next/link";
import { Button } from "../../../src/components/Button";
import { IframeSection } from "../../../src/components/IframeSection";
import {
  Activity,
  ArrowRight,
  ArrowLeft,
  ShieldCheck,
  Cpu,
  Server,
  Layers,
} from "lucide-react";

import { Marker } from "../../../src/components/Marker";
import { GlitchText } from "../../../src/components/GlitchText";

export default function KLZCablesCaseStudy() {
  const { scrollYProgress } = useScroll();
  const heroY = useTransform(scrollYProgress, [0, 0.2], [0, -20]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
  const gridRotate = useTransform(scrollYProgress, [0, 1], [0, 2]);

  return (
    <div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
      <motion.div
        style={{ opacity: heroOpacity }}
        className="fixed inset-0 z-0 pointer-events-none"
      >
        <BackgroundGrid />
      </motion.div>

      {/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
      <section className="relative min-h-[30vh] md:min-h-[40vh] py-10 md:py-20 overflow-hidden border-b border-slate-100 bg-white">
        <motion.div
          style={{ y: heroY, rotate: gridRotate }}
          className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
        />

        <Container variant="narrow" className="relative z-10">
          <Reveal>
            <Link
              href="/case-studies"
              className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
            >
              <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
              Zurück
            </Link>
          </Reveal>
          <div className="space-y-12">
            <Reveal direction="down" blur>
              <div className="inline-flex items-center gap-6">
                <motion.div
                  initial={{ width: 0 }}
                  whileInView={{ width: 48 }}
                  transition={{ duration: 1, ease: "circOut" }}
                  className="h-px bg-slate-900"
                />
                <div className="space-y-1">
                  <MonoLabel className="text-slate-900 tracking-[0.4em]">
                    SYSTEM-ARCHITEKTUR // 2025
                  </MonoLabel>
                  <Label className="text-[10px] text-slate-400 font-mono">
                    HARDENED WORDPRESS // VARNISH STACK
                  </Label>
                </div>
              </div>
            </Reveal>

            <div className="space-y-8 md:space-y-12">
              <GlitchText
                as="h1"
                className="text-4xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
              >
                KLZ Cables
              </GlitchText>
              <br className="hidden md:block" />
              <span className="text-slate-100 text-3xl md:text-6xl font-bold tracking-tighter">
                Case Study.
              </span>

              <Reveal delay={0.2} direction="right" blur>
                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-6 md:pl-12">
                  <LeadText className="text-lg md:text-4xl leading-tight text-slate-900 font-medium">
                    Engineering eines <br className="hidden md:block" />
                    <Marker delay={0.2}>Systems.</Marker>
                  </LeadText>
                  <BodyText className="mt-4 md:mt-6 text-base md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
                    Vom statischen Altsystem zum industriellen Standard. Ich
                    habe das KLZ-System auf das Wesentliche reduziert: Hardened
                    Infrastructure, parametrische Datenpflege und zero
                    maintenance.
                  </BodyText>
                </div>
              </Reveal>
            </div>

            <Reveal delay={0.4} direction="up" scale={0.98} blur>
              <div className="flex flex-wrap gap-8 md:gap-24 pt-6 md:pt-12 border-t border-slate-100">
                <div className="space-y-1 md:space-y-2">
                  <Label className="text-slate-400 text-[10px] md:text-xs">
                    Data Integrity
                  </Label>
                  <div className="flex items-center gap-2 md:gap-3">
                    <div className="w-2 h-2 md:w-2.5 md:h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
                    <span className="text-base md:text-2xl font-bold font-mono text-slate-900 tracking-tight">
                      Relational Data
                    </span>
                  </div>
                </div>
                <div className="space-y-1 md:space-y-2">
                  <Label className="text-slate-400 text-[10px] md:text-xs">
                    Security Layer
                  </Label>
                  <div className="flex items-center gap-2 md:gap-3 text-base md:text-2xl font-bold font-mono text-slate-900">
                    <ShieldCheck className="w-5 h-5 md:w-6 md:h-6 text-[rgba(129,199,132,1)]" />
                    <span>WP + Varnish</span>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </Container>
      </section>

      {/* --- SECTION 01: ARCHITECTURE --- */}
      <Section
        number="01"
        title="System-Hardening & Logic"
        borderBottom
        containerVariant="normal"
      >
        {/* Binary overlay background */}
        <div className="absolute top-0 right-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block">
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i}>01001101 01001001 01001110 01010100</div>
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-24 items-start">
          <div className="md:col-span-12 mb-4 md:mb-12">
            <H2 className="text-3xl md:text-8xl tracking-tighter mb-4 md:mb-12">
              <GlitchText>Architektur-</GlitchText> <br />
              Refactor.
            </H2>
          </div>
          <div className="md:col-span-7 space-y-8 md:space-y-12">
            <Reveal delay={0.1} direction="up" blur>
              <div className="space-y-6 md:space-y-10">
                <BodyText className="text-xl md:text-2xl leading-relaxed font-serif italic text-slate-500">
                  Vom statischen HTML zur zentralen Daten-Instanz.
                </BodyText>
                <BodyText className="text-lg md:text-xl text-slate-600 leading-relaxed">
                  Ich habe die KLZ-Architektur radikal auf einen entkoppelten
                  High-Performance-Stack umgestellt. WordPress fungiert hier
                  nicht als CMS-Baukasten, sondern speichert alle technischen
                  Attribute in einer zentralen relationalen Instanz. Durch die
                  Implementierung nativer PHP-Services und den Verzicht auf
                  volatile Drittanbieter-Plugins wurde ein System geschaffen,
                  das keine technologischen Überraschungen zulässt. Stability by{" "}
                  <Marker delay={0.5}>Design.</Marker>
                </BodyText>
              </div>
            </Reveal>
          </div>
          <div className="md:col-span-5 relative mt-8 md:mt-0">
            <Reveal delay={0.3} direction="right" scale={0.98} blur>
              <motion.div
                whileHover={{ y: -5, scale: 1.01 }}
                transition={{ type: "spring", stiffness: 200, damping: 25 }}
                className="p-6 md:p-12 bg-slate-50 rounded-[2.5rem] md:rounded-[3rem] border border-slate-100 space-y-6 md:space-y-12 relative overflow-hidden group shadow-sm text-left"
              >
                <div className="space-y-6 md:space-y-8 relative z-10">
                  <Label className="text-slate-900">System Metriken</Label>
                  <div className="space-y-6 md:space-y-8">
                    {[
                      {
                        label: "Edge Caching",
                        desc: "Varnish + W3TC Object Cache",
                        icon: <Server className="w-5 h-5 text-slate-400" />,
                      },
                      {
                        label: "Analytics",
                        desc: "Independent (Global Data Compliance)",
                        icon: <Activity className="w-5 h-5 text-slate-400" />,
                      },
                      {
                        label: "Custom Core",
                        desc: "REST via Native Services",
                        icon: <Cpu className="w-5 h-5 text-slate-400" />,
                      },
                    ].map((item, i) => (
                      <Reveal
                        key={i}
                        direction="right"
                        delay={0.5 + i * 0.1}
                        width="100%"
                        className="flex gap-4 md:gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
                      >
                        <div className="shrink-0 mt-1">{item.icon}</div>
                        <div className="space-y-1">
                          <MonoLabel className="text-[9px] md:text-[10px] text-slate-400">
                            {item.label}
                          </MonoLabel>
                          <BodyText className="text-base font-bold text-slate-900">
                            {item.desc}
                          </BodyText>
                        </div>
                      </Reveal>
                    ))}
                  </div>
                </div>
              </motion.div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* --- SHOWCASE: LANDING --- */}
      <section className="py-12 md:py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
        <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
          <Reveal direction="none" blur>
            <div className="relative mb-8 md:mb-16 flex justify-between items-end">
              <div className="space-y-6">
                <Label className="text-slate-500">
                  Infrastructure Validation
                </Label>
                <H3 className="text-3xl md:text-8xl tracking-tighter">
                  <GlitchText>Global Hub.</GlitchText>
                </H3>
              </div>

              {/* Binary overlay left */}
              <div className="absolute left-0 bottom-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block group-hover:opacity-10 transition-opacity duration-1000">
                {Array.from({ length: 4 }).map((_, i) => (
                  <div key={i}>HANDSHAKE_0x00{i}A // SYNC_ACTIVE</div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
            <motion.div
              whileHover={{ scale: 1.01 }}
              transition={{ type: "spring", stiffness: 200, damping: 20 }}
            >
              <IframeSection
                src="/showcase/klz-cables.com/index.html"
                height="400px"
                mobileHeight="350px"
                desktopHeight="850px"
                desktopWidth={1920}
                allowScroll
                browserFrame
                className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
              />
            </motion.div>
          </Reveal>
        </div>
      </section>

      {/* --- SECTION 02: TECHNICAL DETAIL --- */}
      <Section
        number="02"
        title="Asset Management"
        variant="white"
        borderBottom
        containerVariant="wide"
      >
        <div className="grid grid-cols-1 gap-8 md:gap-16">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-24 items-end">
            <div className="md:col-span-8">
              <Reveal direction="left" blur>
                <div className="space-y-6 md:space-y-12">
                  <Label className="text-slate-400 text-xs md:text-sm">
                    Asset Pipelines
                  </Label>
                  <H3 className="text-2xl md:text-6xl tracking-tighter">
                    Automated Documentation.
                  </H3>
                </div>
              </Reveal>
            </div>
            <Reveal delay={0.1} direction="right" blur>
              <BodyText className="text-lg md:text-xl text-slate-500 pb-2 font-serif italic leading-relaxed">
                Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine
                Sicherheitsanforderung. Ich habe eine automatisierte
                Asset-Pipeline entwickelt, die technische Datenblätter
                serverseitig generiert und validiert.
              </BodyText>
            </Reveal>
          </div>

          <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
            <motion.div
              whileHover={{ scale: 1.01 }}
              transition={{ type: "spring", stiffness: 200, damping: 20 }}
              className="relative w-full group"
            >
              <div className="relative w-full overflow-visible">
                <IframeSection
                  src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
                  height="450px"
                  mobileHeight="400px"
                  desktopHeight="1000px"
                  desktopWidth={1920}
                  allowScroll
                  offsetY={100}
                  browserFrame
                  className="w-full transition-all duration-1000 no-scrollbar"
                />
              </div>
            </motion.div>
          </Reveal>
        </div>
      </Section>

      <Section
        number="03"
        title="Katalog-Architektur"
        borderBottom
        containerVariant="wide"
      >
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16 items-center">
          <div className="lg:col-span-12 mb-4 md:mb-12 text-center lg:text-left relative z-10">
            <H3 className="text-3xl md:text-6xl max-w-4xl tracking-tighter">
              Fokus auf <br />
              <Marker delay={0.2}>Spezifikationen.</Marker>
            </H3>
          </div>

          <div className="lg:col-span-8 relative group">
            <Reveal width="100%" direction="left" scale={0.98} blur>
              <motion.div
                whileHover={{ scale: 1.01 }}
                transition={{ type: "spring", stiffness: 200, damping: 20 }}
                className="relative h-[400px] md:h-[650px] w-full overflow-hidden group"
              >
                <IframeSection
                  src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
                  height="100%"
                  desktopWidth={1920}
                  allowScroll
                  browserFrame
                  className="h-full w-full transition-all duration-700 no-scrollbar"
                />
              </motion.div>
            </Reveal>
          </div>

          <div className="lg:col-span-4 space-y-10 relative z-10">
            <Reveal delay={0.2} direction="right" blur>
              <div className="space-y-4 md:space-y-6">
                <Label className="text-slate-400">Katalog-Struktur</Label>
                <LeadText className="text-base md:text-lg leading-relaxed">
                  Der Produktbereich wurde konsequent auf die Bedürfnisse
                  technischer Planer optimiert. Klare Hierarchien und der
                  Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
                  Zugriff auf Kabel-Parameter und Datenblätter.
                </LeadText>
                <motion.div
                  whileHover={{ x: 10 }}
                  className="p-5 md:p-8 bg-white border border-slate-200 rounded-2xl md:rounded-3xl shadow-sm"
                >
                  <Layers className="w-5 h-5 md:w-6 md:h-6 text-slate-400 mb-3 md:mb-4" />
                  <BodyText className="text-sm font-medium">
                    Strukturierte Aufbereitung technischer Produktdaten.
                  </BodyText>
                </motion.div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* --- SECTION 04: CONTENT ENGINE --- */}
      <Section
        number="04"
        title="Content Strategy"
        variant="white"
        borderBottom
        containerVariant="wide"
      >
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
          <div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
            <Reveal direction="left" blur>
              <div className="space-y-6">
                <Label className="text-slate-400">Knowledge Transfer</Label>
                <H3 className="text-3xl md:text-6xl tracking-tighter">
                  Insights & News.
                </H3>
                <BodyText className="text-xl text-slate-500 font-serif italic">
                  Die News-Engine dient als technischer Hub für
                  Industrie-Standards. Durch die Implementierung eines
                  performanten Blog-Systems wird Fachwissen direkt an die
                  Zielgruppe kommuniziert.
                </BodyText>
              </div>
            </Reveal>
          </div>
          <div className="lg:col-span-8 order-1 lg:order-2">
            <Reveal width="100%" direction="right" scale={0.98} blur>
              <motion.div
                whileHover={{ scale: 1.01 }}
                transition={{ type: "spring", stiffness: 200, damping: 20 }}
                className="relative h-[450px] md:h-[700px] w-full"
              >
                <IframeSection
                  src="/showcase/klz-cables.com/blog.html"
                  height="100%"
                  desktopWidth={1600}
                  allowScroll
                  browserFrame
                  className="h-full w-full no-scrollbar"
                />
              </motion.div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* --- SECTION 05: TEAM & TRUST --- */}
      <Section
        number="05"
        title="Ergebnis"
        borderBottom
        containerVariant="wide"
      >
        <div className="space-y-10 md:space-y-16 text-center">
          <Reveal direction="up" blur>
            <H3 className="text-3xl md:text-8xl tracking-tighter">
              System-Lifecycle.
            </H3>
            <LeadText className="mx-auto max-w-2xl pt-2 md:pt-6 text-lg md:text-xl leading-relaxed">
              Die Migration von einer statischen Datei-Struktur zu einer
              zentralisierten Daten-Instanz eliminiert technische Schulden und
              manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
              Architektur, die technische Datentreue über den gesamten
              Produkt-Lifecycle sicherstellt.
            </LeadText>
          </Reveal>

          <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
            <div className="relative group w-full text-left">
              <div className="relative block w-full overflow-visible">
                <IframeSection
                  src="/showcase/klz-cables.com/team.html"
                  height="450px"
                  mobileHeight="400px"
                  desktopHeight="1100px"
                  desktopWidth={1440}
                  allowScroll
                  browserFrame
                  className="w-full h-full no-scrollbar"
                />
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* --- SECTION 06: CONVERSION --- */}
      <Section
        number="06"
        title="Lead Engineering"
        variant="white"
        containerVariant="wide"
        className="!pb-32"
      >
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-24 items-center">
          <div className="md:col-span-6 md:order-2">
            <Reveal direction="left" blur>
              <div className="space-y-6">
                <Label className="text-slate-400">Interaction Layer</Label>
                <H3 className="text-3xl md:text-7xl tracking-tighter text-slate-900 leading-[1.1]">
                  Direkter Draht.
                </H3>
                <BodyText className="text-lg md:text-xl text-slate-500 font-serif italic leading-relaxed">
                  Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein
                  deterministischer Kanal zwischen technischem Bedarf und
                  individueller Beratung – ohne Umwege, ohne Rauschen.
                </BodyText>
              </div>
            </Reveal>

            <Reveal delay={0.2} direction="left" blur>
              <div className="grid grid-cols-2 gap-8 border-t border-slate-100 pt-10">
                <div className="space-y-2">
                  <MonoLabel className="text-slate-400 text-[9px]">
                    RESPONSE_TIME
                  </MonoLabel>
                  <div className="text-xl font-bold text-slate-900 font-mono">
                    &lt; 120ms
                  </div>
                </div>
                <div className="space-y-2">
                  <MonoLabel className="text-slate-400 text-[9px]">
                    PROTOCOL
                  </MonoLabel>
                  <div className="text-xl font-bold text-slate-900 font-mono">
                    mTLS
                  </div>
                </div>
                <div className="space-y-2">
                  <MonoLabel className="text-slate-400 text-[9px]">
                    AVAILABILITY
                  </MonoLabel>
                  <div className="text-xl font-bold text-[rgba(129,199,132,1)] font-mono">
                    99.9%
                  </div>
                </div>
                <div className="space-y-2">
                  <MonoLabel className="text-slate-400 text-[9px]">
                    ENCRYPTION
                  </MonoLabel>
                  <div className="text-xl font-bold text-slate-900 font-mono">
                    AES-256
                  </div>
                </div>
              </div>
            </Reveal>
          </div>

          <div className="lg:col-span-7">
            <Reveal direction="right" scale={0.98} blur>
              <motion.div
                whileHover={{ scale: 1.002 }}
                transition={{ type: "spring", stiffness: 100, damping: 30 }}
                className="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-200/50 ring-1 ring-slate-100"
              >
                <IframeSection
                  src="/showcase/klz-cables.com/contact.html"
                  height="450px"
                  mobileHeight="400px"
                  desktopHeight="750px"
                  desktopWidth={1200}
                  mobileWidth={390}
                  allowScroll
                  browserFrame
                  className="w-full no-scrollbar"
                />
              </motion.div>
            </Reveal>
          </div>
        </div>
      </Section>
      {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
      <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
        <BackgroundGrid />
        <Container variant="normal" className="relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
            <div className="space-y-8 md:space-y-12">
              <Reveal direction="left" blur>
                <div className="space-y-3 md:space-y-6">
                  <MonoLabel className="text-slate-400 tracking-[0.2em] md:tracking-[0.4em]">
                    CONSULTING // ENGINEERING
                  </MonoLabel>
                  <H2 className="text-4xl md:text-8xl tracking-tighter leading-none font-bold">
                    Architektur <br />
                    <span className="text-slate-100">ohne Altlasten.</span>
                  </H2>
                </div>
              </Reveal>
              <Reveal delay={0.2} direction="left" blur>
                <BodyText className="text-xl md:text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
                  Vom Prototyp zum industriellen Standard. Ich entwickle
                  digitale Infrastrukturen, die technische Freiheit und
                  operative Stabilität garantieren – wartungsfrei und
                  skalierbar.
                </BodyText>
              </Reveal>
            </div>

            <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-6 md:p-14 rounded-[3.5rem] space-y-10 md:space-y-12 relative group shadow-sm">
              <Reveal direction="right" blur>
                <div className="inline-flex items-center gap-2 md:gap-3 px-3 py-1.5 md:px-4 md:py-2 bg-white rounded-full border border-slate-200 mb-4 md:mb-8 font-mono text-[9px] md:text-[10px] tracking-widest text-slate-500 uppercase">
                  <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
                  Operational Excellence
                </div>
                <div className="space-y-8 md:space-y-10">
                  {[
                    {
                      title: "Hardened Infrastructure",
                      desc: "Zentralisierte Datenpflege und entkoppelte WordPress-Instanzen.",
                    },
                    {
                      title: "Automated Data Pipelines",
                      desc: "Validierung technischer Spezifikationen ohne manuelle Eingriffe.",
                    },
                    {
                      title: "Maintenance-Free Core",
                      desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
                    },
                  ].map((item, i) => (
                    <div
                      key={i}
                      className="space-y-2 md:space-y-3 group/item text-left"
                    >
                      <MonoLabel className="text-[9px] md:text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
                        {item.title}
                      </MonoLabel>
                      <BodyText className="text-base md:text-lg font-bold text-slate-900 leading-tight">
                        {item.desc}
                      </BodyText>
                    </div>
                  ))}
                </div>
              </Reveal>
              <Reveal delay={0.5} direction="up" blur className="pt-6">
                <Button
                  href="/contact"
                  variant="outline"
                  showArrow={false}
                  className="w-full py-6 md:py-8 text-base md:text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
                >
                  Jetzt anfragen
                  <ArrowRight className="inline-block ml-3 md:ml-4 w-5 h-5 md:w-6 md:h-6 group-hover:translate-x-4 transition-transform duration-700" />
                </Button>
              </Reveal>
            </div>
          </div>
        </Container>
      </section>
    </div>
  );
}