import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  CheckCircleIcon,
  PlayCircleIcon,
  AwardIcon,
  CalendarIcon } from
'lucide-react';
type BrandTheme = {
  id: string;
  name: string;
  domain: string;
  primary: string;
  soft: string;
};
const themes: BrandTheme[] = [
{
  id: 'apex',
  name: 'Apex Safety',
  domain: 'training.apexsafety.com',
  primary: '#007C84',
  soft: '#E3F2F2'
},
{
  id: 'northfield',
  name: 'Northfield RTO',
  domain: 'learn.northfield.edu',
  primary: '#B4530A',
  soft: '#FBEEE2'
},
{
  id: 'ironpeak',
  name: 'IronPeak Training',
  domain: 'portal.ironpeak.co',
  primary: '#3B4A9F',
  soft: '#E9EBF8'
}];

const lessons = [
{
  title: 'Hazard Identification Basics',
  done: true
},
{
  title: 'Working at Heights — Module 2',
  done: true
},
{
  title: 'Confined Space Entry Quiz',
  done: false
}];

export function PortalPreview() {
  const [theme, setTheme] = useState<BrandTheme>(themes[0]);
  return (
    <div>
      {/* Theme switcher */}
      <div className="mb-4 flex items-center gap-2">
        <span className="mr-1 text-xs font-medium uppercase tracking-wider text-white/50">
          Your brand:
        </span>
        {themes.map((t) =>
        <button
          key={t.id}
          type="button"
          onClick={() => setTheme(t)}
          aria-pressed={theme.id === t.id}
          className={`flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold transition-all ${theme.id === t.id ? 'border-brand-bright bg-brand-bright/10 text-white' : 'border-white/15 text-white/60 hover:border-white/30 hover:text-white'}`}>
          
            <span
            className="h-2.5 w-2.5 rounded-full"
            style={{
              backgroundColor: t.primary
            }}
            aria-hidden="true" />
          
            {t.name}
          </button>
        )}
      </div>

      {/* Browser frame */}
      <div className="overflow-hidden rounded-2xl border border-white/10 bg-white shadow-lift">
        {/* Chrome bar */}
        <div className="flex items-center gap-3 border-b border-brand-ink/10 bg-brand-mist px-4 py-2.5">
          <div className="flex gap-1.5" aria-hidden="true">
            <span className="h-2.5 w-2.5 rounded-full bg-brand-ink/15" />
            <span className="h-2.5 w-2.5 rounded-full bg-brand-ink/15" />
            <span className="h-2.5 w-2.5 rounded-full bg-brand-ink/15" />
          </div>
          <AnimatePresence mode="wait">
            <motion.div
              key={theme.id}
              initial={{
                opacity: 0,
                y: -4
              }}
              animate={{
                opacity: 1,
                y: 0
              }}
              exit={{
                opacity: 0,
                y: 4
              }}
              transition={{
                duration: 0.25
              }}
              className="flex-1 rounded-md bg-white px-3 py-1 text-xs font-medium text-brand-ink/60">
              
              {theme.domain}
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Portal header */}
        <motion.div
          animate={{
            backgroundColor: theme.primary
          }}
          transition={{
            duration: 0.45
          }}
          className="flex items-center justify-between px-5 py-3.5">
          
          <AnimatePresence mode="wait">
            <motion.span
              key={theme.id}
              initial={{
                opacity: 0
              }}
              animate={{
                opacity: 1
              }}
              exit={{
                opacity: 0
              }}
              transition={{
                duration: 0.25
              }}
              className="font-display text-sm font-bold text-white">
              
              {theme.name}
            </motion.span>
          </AnimatePresence>
          <div className="flex items-center gap-4 text-xs font-medium text-white/85">
            <span>Catalog</span>
            <span>My Courses</span>
            <span className="hidden sm:inline">Certificates</span>
            <span
              className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-[10px] font-bold text-white"
              aria-hidden="true">
              
              JT
            </span>
          </div>
        </motion.div>

        {/* Portal body */}
        <div className="grid gap-4 p-5 sm:grid-cols-5">
          {/* Course progress card */}
          <div className="sm:col-span-3">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-brand-ink/40">
              Continue learning
            </p>
            <h3 className="mt-1 font-display text-sm font-bold text-brand-ink">
              Confined Space Entry — Blended Program
            </h3>
            <div className="mt-3 space-y-2">
              {lessons.map((lesson) =>
              <div
                key={lesson.title}
                className="flex items-center gap-2.5 rounded-lg border border-brand-ink/8 bg-white px-3 py-2">
                
                  {lesson.done ?
                <CheckCircleIcon
                  size={15}
                  style={{
                    color: theme.primary
                  }}
                  aria-hidden="true" /> :


                <PlayCircleIcon
                  size={15}
                  className="text-brand-ink/30"
                  aria-hidden="true" />

                }
                  <span
                  className={`text-xs ${lesson.done ? 'text-brand-ink/50 line-through' : 'font-medium text-brand-ink'}`}>
                  
                    {lesson.title}
                  </span>
                </div>
              )}
            </div>
            <div className="mt-3">
              <div className="flex items-center justify-between text-[11px] font-medium text-brand-ink/50">
                <span>Online progress</span>
                <span>67%</span>
              </div>
              <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-brand-ink/10">
                <motion.div
                  className="h-full rounded-full"
                  animate={{
                    backgroundColor: theme.primary
                  }}
                  initial={{
                    width: 0
                  }}
                  whileInView={{
                    width: '67%'
                  }}
                  viewport={{
                    once: true
                  }}
                  transition={{
                    duration: 0.9,
                    ease: 'easeOut'
                  }} />
                
              </div>
            </div>
          </div>

          {/* Side cards */}
          <div className="flex flex-col gap-3 sm:col-span-2">
            <motion.div
              animate={{
                backgroundColor: theme.soft
              }}
              transition={{
                duration: 0.45
              }}
              className="rounded-xl p-3.5">
              
              <div className="flex items-center gap-2">
                <CalendarIcon
                  size={14}
                  style={{
                    color: theme.primary
                  }}
                  aria-hidden="true" />
                
                <span className="text-[11px] font-bold uppercase tracking-wider text-brand-ink/60">
                  In-person session
                </span>
              </div>
              <p className="mt-1.5 text-xs font-semibold text-brand-ink">
                Practical — Bay 4, North Campus
              </p>
              <p className="mt-0.5 text-[11px] text-brand-ink/50">
                Thu, Jul 23 · 8:00 AM · 6 seats left
              </p>
            </motion.div>
            <div className="rounded-xl border border-dashed border-brand-ink/15 p-3.5">
              <div className="flex items-center gap-2">
                <AwardIcon
                  size={14}
                  className="text-brand-ink/40"
                  aria-hidden="true" />
                
                <span className="text-[11px] font-bold uppercase tracking-wider text-brand-ink/60">
                  Certificate
                </span>
              </div>
              <p className="mt-1.5 text-[11px] leading-relaxed text-brand-ink/50">
                Issued after online completion, attendance &amp; exam pass
              </p>
            </div>
          </div>
        </div>
      </div>

      <p className="mt-3 text-center text-xs text-white/40">
        One platform. Every provider sees their own brand, domain, and catalog.
      </p>
    </div>);

}