'use client';

import React from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import type { OrderCreateState, OrderCreateHandlers } from '@/frontend/hooks/useOrderCreate';
import EditableImg from "@/@base/EditableImg";
import { MapPin, Map, Navigation, User, Phone, CarFront, Package, Info, CheckCircle2, AlertOctagon, TerminalSquare, ShieldCheck, DollarSign, LockKeyhole } from 'lucide-react';
interface Props {
  state: OrderCreateState;
  handlers: OrderCreateHandlers;
}
export const OrderCreateView = ({
  state,
  handlers
}: Props) => {
  const {
    formData,
    errors,
    isSubmitting,
    submitStatus,
    submitMessage,
    isGateUnlocked,
    accessUsername,
    accessCode,
    accessCodeError
  } = state;
  const {
    handleFormFieldChange,
    handleAccessUsernameChange,
    handleAccessCodeChange,
    handleUnlockGate,
    handleSubmit
  } = handlers;
  return <section className="w-full bg-[#0b040e] relative overflow-hidden min-h-screen font-['Tajawal',sans-serif]" dir="rtl" data-controller-name="إضافة طلب توصيل">
      {/* Injecting custom keyframes for the Mishwar ambient float effect */}
      <style dangerouslySetInnerHTML={{
      __html: `
        @keyframes float-glow {
          0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
          50% { transform: translate(-2%, 3%) scale(1.05); opacity: 0.25; }
        }
        .animate-float-glow {
          animation: float-glow 15s ease-in-out infinite;
        }
      `
    }} />

      {/* --- Ambient Deep-Space Void Elements --- */}
      {/* Heavy Purple Glow */}
      <div className="absolute top-[-20%] right-[-10%] w-[80vw] h-[80vw] rounded-full bg-[#64317e] opacity-[0.15] blur-[120px] pointer-events-none animate-float-glow" style={{
      animationDelay: '0s'
    }} />
      {/* Energetic Orange Glow */}
      <div className="absolute bottom-[-10%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-[#f16e00] opacity-[0.10] blur-[120px] pointer-events-none animate-float-glow" style={{
      animationDelay: '-7.5s'
    }} />
      {/* Dark Space Grain Texture */}
      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.03]" style={{
      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
    }} />

      {/* --- Inner Container --- */}
      <div className="container mx-auto px-8 py-24 relative z-10">
        
        <div className="grid grid-cols-12 gap-6">
          {/* Main Console Wrapper - Centers content without max-w classes */}
          <div className="col-span-12 lg:col-start-3 lg:col-span-8">
            
            <article className="bg-[#16071d]/40 backdrop-blur-2xl border border-white/5 rounded-[24px] shadow-[0_40px_80px_-20px_rgba(11,4,14,0.9),inset_0_1px_1px_rgba(253,248,255,0.05)] p-8 lg:p-12 flex flex-col gap-10">
              
              {/* 1. Hero Section (Welcome & Identity) */}
              <header className="flex flex-col items-center text-center gap-5">
                {/* Holographic Logo Container */}
                <div className="size-24 rounded-full bg-[#0f0514] border border-[#3b184d] shadow-[0_0_20px_0px_rgba(100,49,126,0.3)] flex items-center justify-center overflow-hidden p-2 relative">
                  <div className="absolute inset-0 bg-gradient-to-tr from-[#64317e]/20 to-transparent pointer-events-none" />
                  <EditableImg propKey="mishwar-logo" keywords="https://productp.s3.us-west-2.amazonaws.com/background/project_image/manual_editing/3927986505551070788/a23a7086-adfc-4374-a798-cbc0a4c9a4b9.png" description="A highly technical, futuristic logo for a logistics company named Mishwar. It should be abstract, sharp, and incorporate elements of delivery, speed, and connectivity in a dark neo-noir style with neon orange accents." className="w-full h-full object-contain relative z-10" />
                </div>
                
                <div className="space-y-3 w-full">
                  <div className="inline-flex items-center gap-2 bg-[#64317e]/10 border border-[#64317e]/30 px-3 py-1 rounded-full text-[#f16e00] text-xs font-bold tracking-widest uppercase mb-1">
                    <TerminalSquare className="size-3" />
                    <span>نظام الإدخال النشط</span>
                  </div>
                  <h1 className="font-['Tajawal',sans-serif] text-[#fdf8ff] text-3xl md:text-5xl font-black tracking-tight truncate w-full">
                    بوابة تسجيل طلبات التوصيل
                  </h1>
                  <p className="font-['Cairo',sans-serif] text-[#a385b0] text-base md:text-lg line-clamp-2 w-full mx-auto md:w-10/12">
                    واجهة مخصصة لإدخال الطلبات الجديدة وتوجيهها مباشرة إلى مركز العمليات بأمان وسرعة.
                  </p>
                </div>
              </header>

              <section className="bg-[#1c0a24]/40 border border-[#3b184d]/50 rounded-[20px] shadow-[0_10px_20px_-5px_rgba(11,4,14,0.6)] p-6 lg:p-8 flex flex-col gap-6" data-controller-name="حاجز رمز الدخول">
                  <div className="flex items-center gap-4">
                    <div className="size-12 rounded-full bg-[#64317e]/10 flex items-center justify-center text-[#f16e00] shadow-[inset_0_0_10px_rgba(100,49,126,0.2)] shrink-0">
                      <ShieldCheck className="size-6 stroke-[1.5]" />
                    </div>
                    <div className="flex flex-col gap-1 min-w-0">
                      <h2 className="font-['Cairo',sans-serif] text-[#fdf8ff] text-2xl font-bold truncate">التحقق قبل الدخول</h2>
                      <p className="font-['Tajawal',sans-serif] text-[#a385b0] text-sm leading-relaxed">أدخل اسم المستخدم الإداري ثم رمز الدخول المكوّن من 4 أرقام قبل عرض بوابة تسجيل الطلبات.</p>
                    </div>
                  </div>

                  {!isGateUnlocked && <form onSubmit={handleUnlockGate} className="flex flex-col gap-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="flex flex-col gap-2">
                        <Label htmlFor="access_username" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                          <User className="size-4 text-[#a385b0]" />
                          اسم مستخدم الأدمن
                        </Label>
                        <Input id="access_username" value={accessUsername} onChange={e => handleAccessUsernameChange(e.target.value)} disabled={isSubmitting} placeholder="أدخل اسم المستخدم الأدمن" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      </div>
                      <div className="flex flex-col gap-2">
                        <Label htmlFor="access_code" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                          <LockKeyhole className="size-4 text-[#a385b0]" />
                          رمز الدخول من 4 أرقام
                        </Label>
                        <Input id="access_code" type="password" inputMode="numeric" maxLength={4} value={accessCode} onChange={e => handleAccessCodeChange(e.target.value)} disabled={isSubmitting} placeholder="أدخل الرمز الرباعي" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      </div>
                    </div>
                    {accessCodeError && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                        <AlertOctagon className="size-3 shrink-0" />
                        {accessCodeError}
                      </span>}

                    <Button type="submit" disabled={isSubmitting} className="w-full h-auto inline-flex items-center justify-center font-['Cairo',sans-serif] transition-all duration-500 active:scale-95 outline-none bg-[#f16e00] text-[#0b040e] rounded-full px-8 py-4 text-lg font-black shadow-[0_0_30px_0px_rgba(241,110,0,0.5),inset_0_2px_4px_rgba(255,255,255,0.3)] hover:shadow-[0_0_50px_0px_rgba(241,110,0,0.7)] hover:bg-[#ff8c2a] focus-visible:ring-4 focus-visible:ring-[#ff8c2a]/50 disabled:opacity-50 disabled:pointer-events-none truncate">
                      {isSubmitting ? 'جارٍ التحقق...' : 'فتح بوابة الطلبات'}
                    </Button>
                  </form>}
                </section>
              {/* 2. Order Input Form */}
              <form onSubmit={handleSubmit} className="flex flex-col gap-8">
                
                {/* Logical Group: Location Details */}
                <section className="bg-[#1c0a24]/30 border border-[#3b184d]/50 rounded-[16px] shadow-[0_10px_20px_-5px_rgba(11,4,14,0.6)] p-6 flex flex-col gap-6">
                  {/* Sub-header with icon, no borders for separation */}
                  <div className="flex items-center gap-4">
                    <div className="size-12 rounded-full bg-[#64317e]/10 flex items-center justify-center text-[#f16e00] shadow-[inset_0_0_10px_rgba(100,49,126,0.2)] shrink-0">
                      <MapPin className="size-6 stroke-[1.5]" />
                    </div>
                    <h2 className="font-['Cairo',sans-serif] text-[#fdf8ff] text-2xl font-bold truncate">
                      الموقع الجغرافي
                    </h2>
                  </div>

                  {/* Form Grid rows 1 & 2 */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Row 1 - Right Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="governorate_name" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <Map className="size-4 text-[#a385b0]" />
                        اسم المحافظة
                      </Label>
                      <Input id="governorate_name" value={formData.governorate_name} onChange={e => handleFormFieldChange('governorate_name', e.target.value)} disabled={isSubmitting} placeholder="أدخل اسم المحافظة" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.governorate_name && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.governorate_name}
                        </span>}
                    </div>
                    
                    {/* Row 1 - Left Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="area_name" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <Navigation className="size-4 text-[#a385b0]" />
                        المنطقة
                      </Label>
                      <Input id="area_name" value={formData.area_name} onChange={e => handleFormFieldChange('area_name', e.target.value)} disabled={isSubmitting} placeholder="أدخل اسم المنطقة" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.area_name && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.area_name}
                        </span>}
                    </div>

                    {/* Row 2 - Full Width */}
                    <div className="md:col-span-2 flex flex-col gap-2">
                      <Label htmlFor="nearest_landmark" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <Info className="size-4 text-[#a385b0]" />
                        أقرب نقطة دالة
                      </Label>
                      <Input id="nearest_landmark" value={formData.nearest_landmark} onChange={e => handleFormFieldChange('nearest_landmark', e.target.value)} disabled={isSubmitting} placeholder="صف أقرب معلم بارز لتسهيل التوصيل" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.nearest_landmark && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.nearest_landmark}
                        </span>}
                    </div>
                  </div>
                </section>

                {/* Logical Group: Delivery Entities */}
                <section className="bg-[#1c0a24]/30 border border-[#3b184d]/50 rounded-[16px] shadow-[0_10px_20px_-5px_rgba(11,4,14,0.6)] p-6 flex flex-col gap-6">
                  
                  <div className="flex items-center gap-4">
                    <div className="size-12 rounded-full bg-[#64317e]/10 flex items-center justify-center text-[#f16e00] shadow-[inset_0_0_10px_rgba(100,49,126,0.2)] shrink-0">
                      <Package className="size-6 stroke-[1.5]" />
                    </div>
                    <h2 className="font-['Cairo',sans-serif] text-[#fdf8ff] text-2xl font-bold truncate">
                      تفاصيل الأطراف
                    </h2>
                  </div>

                  {/* Form Grid rows 3 & 4 */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Row 3 - Right Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="customer_name" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <User className="size-4 text-[#a385b0]" />
                        اسم العميل
                      </Label>
                      <Input id="customer_name" value={formData.customer_name} onChange={e => handleFormFieldChange('customer_name', e.target.value)} disabled={isSubmitting} placeholder="الاسم الكامل للعميل" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.customer_name && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.customer_name}
                        </span>}
                    </div>
                    
                    {/* Row 3 - Left Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="customer_phone" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <Phone className="size-4 text-[#a385b0]" />
                        رقم الزبون
                      </Label>
                      <Input id="customer_phone" type="tel" value={formData.customer_phone} onChange={e => handleFormFieldChange('customer_phone', e.target.value)} disabled={isSubmitting} placeholder="مثال: 078xxxxxxx" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full text-right" dir="ltr" />
                      {errors.customer_phone && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.customer_phone}
                        </span>}
                    </div>

                    {/* Row 4 - Right Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="driver_name" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <CarFront className="size-4 text-[#a385b0]" />
                        اسم السائق
                      </Label>
                      <Input id="driver_name" value={formData.driver_name} onChange={e => handleFormFieldChange('driver_name', e.target.value)} disabled={isSubmitting} placeholder="اسم سائق التوصيل" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.driver_name && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.driver_name}
                        </span>}
                    </div>
                    
                    {/* Row 4 - Left Column (RTL) */}
                    <div className="flex flex-col gap-2">
                      <Label htmlFor="order_type" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <Package className="size-4 text-[#a385b0]" />
                        نوع الطلب
                      </Label>
                      <Input id="order_type" value={formData.order_type} onChange={e => handleFormFieldChange('order_type', e.target.value)} disabled={isSubmitting} placeholder="مثال: طعام، طرد، وثائق..." className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.order_type && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.order_type}
                        </span>}
                    </div>

                    {/* Row 5 - Full Width */}
                    <div className="md:col-span-2 flex flex-col gap-2">
                      <Label htmlFor="total_amount" className="text-[#fdf8ff] text-sm font-medium tracking-wide font-['Tajawal',sans-serif] flex items-center gap-2 truncate">
                        <DollarSign className="size-4 text-[#a385b0]" />
                        المبلغ الكلي للطلب
                      </Label>
                      <Input id="total_amount" type="number" min="0" step="0.01" value={formData.total_amount} onChange={e => handleFormFieldChange('total_amount', e.target.value)} disabled={isSubmitting} placeholder="أدخل المبلغ الكلي" className="!h-auto !border-none !ring-0 !ring-offset-0 bg-[#0f0514] rounded-full px-6 py-4 text-right text-[#fdf8ff] text-base placeholder:text-[#a385b0] focus:shadow-[0_0_20px_0px_rgba(241,110,0,0.6)] focus:bg-[#0f0514]/90 transition-all duration-300 shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)] w-full" />
                      {errors.total_amount && <span role="alert" className="text-[#e11d48] text-xs mt-1 font-semibold flex items-center gap-1 truncate pr-2">
                          <AlertOctagon className="size-3 shrink-0" />
                          {errors.total_amount}
                        </span>}
                    </div>
                  </div>
                </section>

                {/* 3. Status & Guidelines Area */}
                <div className="flex flex-col gap-4">
                  {/* Guidelines Banner */}
                  <div className="bg-[#64317e]/10 border border-[#64317e]/30 rounded-[12px] p-4 flex items-start gap-4">
                    <Info className="size-5 text-[#f16e00] shrink-0 mt-0.5" />
                    <p className="font-['Tajawal',sans-serif] text-[#a385b0] text-sm leading-relaxed line-clamp-2">
                      جميع الحقول تدعم الإدخال باللغة العربية. يرجى إدخال رقم الزبون بالصيغة المحلية والمبلغ الكلي بصيغة رقمية واضحة.
                    </p>
                  </div>

                  {/* Dynamic System Feedback Panel */}
                  {submitStatus !== 'idle' && <Alert className={`
                        border rounded-[16px] flex items-start gap-4 p-5
                        ${submitStatus === 'error' ? 'bg-[#e11d48]/10 border-[#e11d48]/30 text-[#e11d48]' : 'bg-[#f16e00]/10 border-[#f16e00]/30 text-[#f16e00]'}
                      `}>
                      {submitStatus === 'success' ? <CheckCircle2 className="size-6 shrink-0 mt-0.5" /> : <AlertOctagon className="size-6 shrink-0 mt-0.5" />}
                      <div className="flex flex-col gap-1 w-full min-w-0">
                        <AlertTitle className="font-['Cairo',sans-serif] font-bold text-lg truncate">
                          {submitStatus === 'success' ? 'نجاح النظام' : 'تنبيه النظام'}
                        </AlertTitle>
                        <AlertDescription className="font-['Tajawal',sans-serif] text-sm opacity-90 line-clamp-2">
                          {submitMessage}
                        </AlertDescription>
                      </div>
                    </Alert>}
                </div>

                {/* 4. Call to Action */}
                <div className="mt-4">
                  <Button type="submit" disabled={isSubmitting} className="
                      w-full h-auto inline-flex items-center justify-center font-['Cairo',sans-serif] 
                      transition-all duration-500 active:scale-95 outline-none
                      bg-[#f16e00] text-[#0b040e] rounded-full px-10 py-5 text-xl font-black 
                      shadow-[0_0_30px_0px_rgba(241,110,0,0.5),inset_0_2px_4px_rgba(255,255,255,0.3)] 
                      hover:shadow-[0_0_50px_0px_rgba(241,110,0,0.7)] hover:bg-[#ff8c2a] 
                      focus-visible:ring-4 focus-visible:ring-[#ff8c2a]/50
                      disabled:opacity-50 disabled:pointer-events-none truncate
                    ">
                    {isSubmitting ? 'جاري الإرسال...' : 'إضافة الطلب'}
                  </Button>
                </div>

              </form>
            </article>
            
          </div>
        </div>
      </div>
    </section>;
};