import { useEffect, useState, useRef, useCallback } from 'react'
import { Link } from 'react-router-dom'
import { useLang } from '@/context/LangContext'

type RiskLevel = 'critical' | 'high' | 'medium' | 'low' | 'opportunity'
type RiskItem = { quote: string; quoteEn?: string; name: string; nameEn?: string; date: string; dateEn?: string; level: RiskLevel }

const PANEL_API =
  (import.meta as ImportMeta & { env?: Record<string, string> }).env
    ?.VITE_PANEL_API || ''

/* ─── Risk data (fallback when panel is offline) ─────────── */
const fallbackRiskItems: RiskItem[] = [
  {
    quote: 'چین در نیمه اول ۲۰۲۴ رکورد ۵۴ میلیون تن صادرات فولاد را شکست. این موج صادراتی قیمت بازارهای آسیای غربی را ۱۲٪ کاهش داده و مستقیماً سهم ایران در عراق را تهدید می‌کند.',
    quoteEn: 'China broke the 54 Mt steel export record in H1 2024. This export surge cut West Asia market prices by 12%, directly threatening Iran\'s share in Iraq.',
    name: 'بازار جهانی — چین', nameEn: 'Global Market — China',
    date: 'بهمن ۱۴۰۳', dateEn: 'Feb 2025', level: 'high' as const,
  },
  {
    quote: 'اجرای مکانیسم CBAM اتحادیه اروپا از ۲۰۲۶ برای صنایع فولاد آغاز می‌شود. محصولات ایرانی با ضریب کربن بالاتر از میانگین جهانی، در بازار اروپا با افزایش هزینه ۱۵ تا ۲۲ دلار به ازای هر تن مواجه خواهند شد.',
    quoteEn: 'The EU\'s CBAM mechanism launches for steel in 2026. Iranian products with above-average carbon intensity will face $15–22/ton extra costs in European markets.',
    name: 'مقررات — اتحادیه اروپا', nameEn: 'Regulation — EU',
    date: 'افق: ۲۰۲۶', dateEn: 'Horizon: 2026', level: 'medium' as const,
  },
  {
    quote: 'بسته تحریمی جدید، ۳ مسیر اصلی پرداخت بین‌المللی شرکت‌های فولادی ایران را مسدود کرده است. ریسک تأخیر در دریافت وجوه صادراتی به بالاترین سطح در ۵ سال اخیر رسیده است.',
    quoteEn: 'New sanctions have blocked 3 major international payment channels for Iranian steel companies. Risk of export payment delays is at the highest level in 5 years.',
    name: 'ریسک ژئوپلیتیک — تحریم', nameEn: 'Geopolitical — Sanctions',
    date: 'دی ۱۴۰۳', dateEn: 'Jan 2025', level: 'critical' as const,
  },
  {
    quote: 'هند با افزایش ۱۸٪ ظرفیت تولید فولاد در سال ۲۰۲۴، به سومین تولیدکننده بزرگ جهان تبدیل شد. رقابت هند در بازارهای هدف ایران شامل عراق، افغانستان و آفریقای شرقی به‌شدت تشدید شده.',
    quoteEn: 'India became the world\'s 3rd largest steel producer with an 18% capacity increase in 2024. Competition in Iran\'s target markets—Iraq, Afghanistan, East Africa—has intensified sharply.',
    name: 'رقابت — هند', nameEn: 'Competition — India',
    date: 'افق میان‌مدت', dateEn: 'Mid-term Horizon', level: 'high' as const,
  },
  {
    quote: 'محدودیت‌های زمستانی گاز صنعتی در ۳ ماه گذشته باعث توقف موقت ۱۴ واحد تولیدی فولاد در اصفهان، خراسان و هرمزگان شده است. ریسک کمبود انرژی همچنان ادامه دارد.',
    quoteEn: 'Winter industrial gas restrictions caused temporary shutdowns at 14 steel plants in Isfahan, Khorasan, and Hormozgan over the past 3 months. Energy shortage risk persists.',
    name: 'زیرساخت — انرژی داخلی', nameEn: 'Infrastructure — Domestic Energy',
    date: 'پایش مستمر', dateEn: 'Ongoing', level: 'high' as const,
  },
  {
    quote: 'نرخ برابری ریال در برابر دلار در ۳ ماه اخیر ۸٪ کاهش یافته است. این نوسان از یک سو هزینه واردات مواد اولیه را افزایش و از سوی دیگر رقابت‌پذیری صادراتی را بهبود می‌بخشد.',
    quoteEn: 'The Rial has depreciated 8% against the dollar in the past 3 months. This raises raw material import costs while improving export competitiveness.',
    name: 'ریسک مالی — ارز', nameEn: 'Financial — FX Risk',
    date: 'بهمن ۱۴۰۳', dateEn: 'Feb 2025', level: 'medium' as const,
  },
  {
    quote: 'کاهش واردات فولاد ترکیه از بازار عراق، فرصت افزایش سهم ایران از ۴۰٪ به ۵۵٪ را فراهم کرده است. پنجره فرصت تا اواخر سال ۱۴۰۴ باز است.',
    quoteEn: 'Turkey\'s reduced steel exports to Iraq have opened an opportunity to increase Iran\'s market share from 40% to 55%. The window remains open until late 2025.',
    name: 'فرصت — بازار عراق', nameEn: 'Opportunity — Iraq Market',
    date: 'افق: ۱۴۰۴', dateEn: 'Horizon: 2025', level: 'opportunity' as const,
  },
  {
    quote: 'کشورهای آفریقای شرقی (کنیا، اتیوپی، تانزانیا) در مجموع ۸ میلیون تن واردات فولاد در سال دارند. سهم فعلی ایران تنها ۳٪ است در حالی که زیرساخت لجستیکی برای افزایش به ۱۵٪ وجود دارد.',
    quoteEn: 'East African nations (Kenya, Ethiopia, Tanzania) import 8 Mt/yr of steel. Iran\'s current share is only 3%, while logistics infrastructure exists to grow it to 15%.',
    name: 'فرصت — آفریقای شرقی', nameEn: 'Opportunity — East Africa',
    date: 'بررسی استراتژیک', dateEn: 'Strategic Review', level: 'opportunity' as const,
  },
  {
    quote: 'قیمت سنگ‌آهن در بورس دالیان در ماه اخیر ۱۸٪ جهش داشته است. این افزایش مستقیماً هزینه تمام‌شده واحدهای وابسته به واردات سنگ‌آهن را متأثر می‌کند.',
    quoteEn: 'Iron ore prices on the Dalian exchange surged 18% last month, directly raising production costs for plants reliant on imported iron ore.',
    name: 'کامودیتی — سنگ‌آهن', nameEn: 'Commodity — Iron Ore',
    date: 'آبان ۱۴۰۳', dateEn: 'Nov 2024', level: 'medium' as const,
  },
  {
    quote: 'روسیه پس از تحریم‌های غرب، مسیرهای صادراتی خود را به آسیا و خاورمیانه تغییر داده و با قیمت‌های پایین‌تر از نرخ جهانی وارد بازارهای هدف ایران شده است.',
    quoteEn: 'Following Western sanctions, Russia redirected exports to Asia and the Middle East, entering Iran\'s target markets at below-market prices.',
    name: 'رقابت — روسیه', nameEn: 'Competition — Russia',
    date: 'در حال پایش', dateEn: 'Under Monitoring', level: 'high' as const,
  },
  {
    quote: 'قرارداد ۲۵ ساله ایران و چین در بخش فولاد، ظرفیت همکاری مشترک در زنجیره تأمین و فناوری را باز کرده است. اجرایی‌شدن این بخش می‌تواند ۱.۵ میلیارد دلار سرمایه‌گذاری مستقیم جذب کند.',
    quoteEn: 'The 25-year Iran-China steel agreement opens joint collaboration in supply chain and technology. Full implementation could attract $1.5B in direct investment.',
    name: 'فرصت — همکاری چین', nameEn: 'Opportunity — China Partnership',
    date: 'افق: ۱۴۰۵', dateEn: 'Horizon: 2026', level: 'opportunity' as const,
  },
  {
    quote: 'ترکیه ظرفیت تولید فولاد خود را با ساخت ۳ کارخانه EAF جدید تا ۲۰۲۶ به ۵۵ میلیون تن می‌رساند. این توسعه رقابت ترکیه را در بازارهای مشترک با ایران در منطقه MENA تشدید می‌کند.',
    quoteEn: 'Turkey is expanding steel capacity to 55 Mt by 2026 with 3 new EAF plants, intensifying competition with Iran in shared MENA markets.',
    name: 'رقابت — ترکیه', nameEn: 'Competition — Turkey',
    date: 'افق: ۲۰۲۶', dateEn: 'Horizon: 2026', level: 'medium' as const,
  },
  {
    quote: 'کمبود آب در حوزه‌های رودخانه‌ای زاینده‌رود و کارون به‌عنوان ریسک عملیاتی بلندمدت برای کارخانه‌های فولاد اصفهان و خوزستان شناسایی شده.',
    quoteEn: 'Water scarcity in the Zayandeh Rud and Karun river basins has been identified as a long-term operational risk for Isfahan and Khuzestan steel plants.',
    name: 'زیست‌محیطی — بحران آب', nameEn: 'Environmental — Water Crisis',
    date: 'پایش مستمر', dateEn: 'Ongoing', level: 'critical' as const,
  },
  {
    quote: 'افغانستان با رشد ۲۲٪ واردات فولاد در سال ۱۴۰۳، بزرگ‌ترین بازار رشد منطقه‌ای برای ایران است.',
    quoteEn: 'Afghanistan\'s 22% steel import growth in 2024 makes it the largest regional growth market for Iran, with potential for 400,000 additional tons of sales.',
    name: 'فرصت — بازار افغانستان', nameEn: 'Opportunity — Afghanistan',
    date: 'آذر ۱۴۰۳', dateEn: 'Dec 2024', level: 'opportunity' as const,
  },
  {
    quote: 'نوسانات قیمت آلومینا و بوکسیت در بازارهای جهانی به‌دلیل محدودیت‌های صادراتی گینه، هزینه تولید فولاد آلیاژی را تا ۸٪ افزایش داده است.',
    quoteEn: 'Alumina and bauxite price volatility due to Guinea\'s export restrictions has raised alloy steel production costs by up to 8%.',
    name: 'کامودیتی — مواد آلیاژی', nameEn: 'Commodity — Alloys',
    date: 'دی ۱۴۰۳', dateEn: 'Jan 2025', level: 'medium' as const,
  },
  {
    quote: 'استاندارد جدید کیفیت ISO 630-4 برای فولاد ساختمانی از سال ۲۰۲۵ الزامی می‌شود. صادرکنندگان ایرانی باید گواهینامه انطباق را برای ورود به بازارهای اروپا و حوزه خلیج فارس اخذ کنند.',
    quoteEn: 'The new ISO 630-4 quality standard for structural steel becomes mandatory in 2025. Iranian exporters must obtain compliance certificates for European and Gulf markets.',
    name: 'مقررات — استانداردسازی', nameEn: 'Regulation — Standardization',
    date: 'افق: ۲۰۲۵', dateEn: 'Horizon: 2025', level: 'medium' as const,
  },
  {
    quote: 'پاکستان در حال مذاکره برای قرارداد بلندمدت تأمین اسلب فولادی است. این قرارداد می‌تواند ۸۰۰ هزار تن ظرفیت صادراتی ایران را برای ۵ سال تضمین کند.',
    quoteEn: 'Pakistan is negotiating a long-term steel slab supply contract that could secure 800,000 tons of Iranian export capacity for 5 years.',
    name: 'فرصت — بازار پاکستان', nameEn: 'Opportunity — Pakistan',
    date: 'در حال مذاکره', dateEn: 'Under Negotiation', level: 'opportunity' as const,
  },
  {
    quote: 'نرخ بهره بالا در اقتصاد داخلی، هزینه تأمین مالی پروژه‌های توسعه‌ای کارخانه‌ها را ۲۸٪ افزایش داده است.',
    quoteEn: 'High domestic interest rates have raised the financing cost of plant expansion projects by 28%, delaying energy optimization investments.',
    name: 'ریسک مالی — تأمین سرمایه', nameEn: 'Financial — Capital Access',
    date: 'بهمن ۱۴۰۳', dateEn: 'Feb 2025', level: 'high' as const,
  },
  {
    quote: 'کره جنوبی و ژاپن محصولات فولادی با ارزش افزوده بالا را با تخفیف ۹٪ نسبت به نرخ‌های بازار در خاورمیانه عرضه می‌کنند.',
    quoteEn: 'South Korea and Japan are offering high-value-added steel products (cold-rolled, galvanized flat) at 9% below market rates in the Middle East.',
    name: 'رقابت — آسیای شرقی', nameEn: 'Competition — East Asia',
    date: 'آبان ۱۴۰۳', dateEn: 'Nov 2024', level: 'high' as const,
  },
]

const LEVEL = {
  fa: {
    critical:    { dot: '#7f1d1d', label: 'بحرانی', bg: 'rgba(127,29,29,0.08)' },
    high:        { dot: '#9b1c1c', label: 'بالا',    bg: 'rgba(155,28,28,0.07)' },
    medium:      { dot: '#92400e', label: 'متوسط',   bg: 'rgba(146,64,14,0.07)' },
    low:         { dot: '#166534', label: 'پایین',   bg: 'rgba(22,101,52,0.07)' },
    opportunity: { dot: '#1e40af', label: 'فرصت',    bg: 'rgba(30,64,175,0.07)' },
  },
  en: {
    critical:    { dot: '#7f1d1d', label: 'Critical',    bg: 'rgba(127,29,29,0.08)' },
    high:        { dot: '#9b1c1c', label: 'High',        bg: 'rgba(155,28,28,0.07)' },
    medium:      { dot: '#92400e', label: 'Medium',      bg: 'rgba(146,64,14,0.07)' },
    low:         { dot: '#166534', label: 'Low',         bg: 'rgba(22,101,52,0.07)' },
    opportunity: { dot: '#1e40af', label: 'Opportunity', bg: 'rgba(30,64,175,0.07)' },
  },
}

const T = {
  fa: {
    overline: (n: number) => `پایش لحظه‌ای · ${n.toLocaleString('fa-IR')} سیگنال`,
    heading: 'نقشه ریسک صنعت',
    sub: 'ریسک‌های ژئوپلیتیک، مقرراتی و بازار که در ماه‌های اخیر پایش شده‌اند — با سطح‌بندی از بحرانی تا فرصت.',
    all: 'همه ریسک‌ها ←',
    legend: ['بحرانی', 'بالا', 'متوسط', 'پایین', 'فرصت'],
  },
  en: {
    overline: (n: number) => `LIVE MONITORING · ${n} SIGNALS`,
    heading: 'Industry Risk Map',
    sub: 'Geopolitical, regulatory, and market risks monitored in recent months — rated from critical to opportunity.',
    all: 'All Risks →',
    legend: ['Critical', 'High', 'Medium', 'Low', 'Opportunity'],
  },
}

/* ─── Shared card ───────────────────────────────────────── */
function RiskCard({
  item, cfg, lang, idx, mobile,
}: {
  item: RiskItem
  cfg: { dot: string; label: string; bg: string }
  lang: 'fa' | 'en'
  idx: number
  mobile?: boolean
}) {
  const text = lang === 'en' && item.quoteEn ? item.quoteEn : item.quote
  const name = lang === 'en' && item.nameEn ? item.nameEn : item.name
  const date = lang === 'en' && item.dateEn ? item.dateEn : item.date

  return (
    <div
      style={{
        background:    'var(--paper)',
        border:        '1px solid var(--rule-thin)',
        borderTop:     `3px solid ${cfg.dot}`,
        padding:       mobile ? '20px 18px 16px' : '24px 24px 20px',
        direction:     'rtl',
        display:       'flex',
        flexDirection: 'column',
        animation:     `riskCardIn 320ms ${idx * 60}ms ease both`,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10 }}>
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: cfg.dot, flexShrink: 0 }} />
        <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: cfg.dot }}>
          {cfg.label}
        </span>
      </div>

      <p style={{
        fontSize: mobile ? 13 : 13,
        lineHeight: 1.8,
        color: 'var(--ink-2)',
        marginBottom: 14,
        flex: 1,
        /* on mobile truncate to ~4 lines */
        ...(mobile ? { WebkitLineClamp: 4, WebkitBoxOrient: 'vertical', overflow: 'hidden', display: '-webkit-box' } : {}),
      }}>
        {text}
      </p>

      <div style={{ paddingTop: 12, borderTop: '1px solid var(--rule-thin)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)' }}>{name}</div>
          <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>{date}</div>
        </div>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase', color: cfg.dot, background: cfg.bg, padding: '4px 10px' }}>
          {cfg.label}
        </div>
      </div>
    </div>
  )
}

/* ─── Section ────────────────────────────────────────────── */
export default function RiskSection() {
  const { lang } = useLang()
  const t = T[lang]
  const levelCfg = LEVEL[lang]
  const [riskItems, setRiskItems] = useState<RiskItem[]>(fallbackRiskItems)

  useEffect(() => {
    let cancelled = false
    fetch(`${PANEL_API}/api/risks?limit=200`)
      .then(r => r.ok ? r.json() : null)
      .then((data: RiskItem[] | null) => {
        if (cancelled || !Array.isArray(data) || data.length === 0) return
        setRiskItems(data)
      })
      .catch(() => { /* keep fallback */ })
    return () => { cancelled = true }
  }, [])

  const VISIBLE   = 3   // cards visible on desktop
  const INTERVAL  = 4000
  const total     = riskItems.length

  const [current,  setCurrent]  = useState(0)
  const [paused,   setPaused]   = useState(false)
  const [isAnim,   setIsAnim]   = useState(false)
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)

  // touch support
  const touchStartX = useRef(0)

  const go = useCallback((dir: 'next' | 'prev') => {
    if (isAnim) return
    setIsAnim(true)
    setTimeout(() => {
      setCurrent(c => dir === 'next' ? (c + 1) % total : (c - 1 + total) % total)
      setIsAnim(false)
    }, 320)
  }, [isAnim, total])

  useEffect(() => {
    if (paused) return
    timerRef.current = setInterval(() => go('next'), INTERVAL)
    return () => { if (timerRef.current) clearInterval(timerRef.current) }
  }, [paused, go])

  const visibleItems = Array.from({ length: VISIBLE }, (_, i) =>
    riskItems[(current + i) % total]
  )

  return (
    <section style={{ background: 'var(--paper)' }}>
      {/* ── Header ── */}
      <div className="max-w-7xl mx-auto px-12 pt-24 max-md:px-5 max-md:pt-16">
        <div
          className="mq-stack max-md:grid-cols-1 max-md:gap-4"
          style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 32, paddingBottom: 28, borderBottom: '1px solid var(--rule-thin)', marginBottom: 28 }}
        >
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <div style={{ width: 32, height: 2, background: 'var(--red)' }} />
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>
                {t.overline(riskItems.length)}
              </span>
            </div>
            <h2 style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', lineHeight: 1.2, marginBottom: 12 }}>
              {t.heading}
            </h2>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--ink-4)', maxWidth: 580 }}>{t.sub}</p>
          </div>
          <Link to="/risks" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', paddingBottom: 4 }}>
            {t.all}
          </Link>
        </div>

        {/* Legend */}
        <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap', marginBottom: 8 }}>
          {(['critical','high','medium','low','opportunity'] as const).map((key, i) => (
            <div key={key} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: levelCfg[key].dot }} />
              <span style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 600 }}>{t.legend[i]}</span>
            </div>
          ))}
        </div>
      </div>

      {/* ── Slider ── */}
      <div
        className="max-w-7xl mx-auto px-12 max-md:px-5"
        style={{ paddingTop: 28, paddingBottom: 48, position: 'relative' }}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onTouchStart={e => { touchStartX.current = e.touches[0].clientX }}
        onTouchEnd={e => {
          const dx = touchStartX.current - e.changedTouches[0].clientX
          if (Math.abs(dx) > 50) go(dx > 0 ? 'next' : 'prev')
        }}
      >
        {/* Desktop: 3 cards */}
        <div className="hidden md:grid md:grid-cols-3 gap-4">
          {visibleItems.map((item, idx) => (
            <RiskCard key={`${current}-${idx}`} item={item} cfg={levelCfg[item.level]} lang={lang} idx={idx} />
          ))}
        </div>
        {/* Mobile: 1 card */}
        <div className="md:hidden">
          {/* Mobile: single card with slide animation */}
          <div key={current} style={{ animation: 'riskCardIn 320ms ease both' }}>
            <RiskCard item={riskItems[current]} cfg={levelCfg[riskItems[current].level]} lang={lang} idx={0} mobile />
          </div>
        </div>

        {/* Progress bar (mobile) + dots (desktop) + arrows */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 20, gap: 12 }}>
          {/* Progress bar on mobile, dots on desktop */}
          <div className="md:hidden" style={{ flex: 1, height: 3, background: 'var(--rule-thin)', borderRadius: 2 }}>
            <div style={{
              height: '100%', borderRadius: 2,
              background: 'var(--ink)',
              width: `${((current + 1) / total) * 100}%`,
              transition: 'width 300ms ease',
            }} />
          </div>
          <div className="hidden md:flex" style={{ display: 'none', gap: 6 }}>
            {riskItems.map((_, i) => (
              <button key={i} onClick={() => setCurrent(i)} style={{
                width: i === current ? 24 : 8, height: 8, borderRadius: 4,
                border: 'none', cursor: 'pointer', padding: 0,
                background: i === current ? 'var(--ink)' : 'var(--rule-thin)',
                transition: 'all 300ms ease',
              }} />
            ))}
          </div>

          {/* Counter on mobile */}
          <span className="md:hidden" style={{ fontSize: 12, color: 'var(--ink-4)', flexShrink: 0 }}>
            {(current + 1).toLocaleString('fa-IR')} / {total.toLocaleString('fa-IR')}
          </span>

          {/* Arrows */}
          <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
            <button onClick={() => go('prev')}
              style={{ width: 36, height: 36, border: '1px solid var(--rule-thin)', background: 'transparent', cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 150ms' }}
              onMouseEnter={e => (e.currentTarget.style.background = 'var(--paper-2)')}
              onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
            >
              {lang === 'fa' ? '→' : '←'}
            </button>
            <button
              onClick={() => go('next')}
              style={{ width: 36, height: 36, border: '1px solid var(--rule-thin)', background: 'transparent', cursor: 'pointer', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background 150ms' }}
              onMouseEnter={e => (e.currentTarget.style.background = 'var(--paper-2)')}
              onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
            >
              {lang === 'fa' ? '←' : '→'}
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}
