// Visual mockups using divs + icons — no images
const { Cross, Globe, Users, LayoutDashboard, BarChart, Calendar, Mic,
  Check, QrCode, Play, BookOpen, DollarSign, TrendingUp, FileText, Award } = window.Icons;

// Browser frame for desktop mockups
const BrowserFrame = ({ children, title = 'app.ecclesiahub.com' }) => (
  <div className="rounded-2xl overflow-hidden bg-slate-900 shadow-2xl shadow-blue-900/40 border border-white/10">
    <div className="bg-slate-800/90 px-4 py-3 flex items-center gap-3 border-b border-white/5">
      <div className="flex gap-1.5">
        <span className="browser-dot bg-red-400/80"></span>
        <span className="browser-dot bg-amber-400/80"></span>
        <span className="browser-dot bg-emerald-400/80"></span>
      </div>
      <div className="flex-1 mx-4 text-[11px] text-slate-400 bg-slate-900/60 rounded-md px-3 py-1 truncate">
        🔒 {title}
      </div>
    </div>
    <div className="bg-gradient-to-br from-slate-50 to-slate-100">
      {children}
    </div>
  </div>
);

// Phone frame for mobile mockups
const PhoneFrame = ({ children }) => (
  <div className="relative mx-auto" style={{ width: 240 }}>
    <div className="rounded-[32px] bg-slate-900 p-2 shadow-2xl shadow-blue-900/40 border border-white/10">
      <div className="rounded-[26px] overflow-hidden bg-white relative" style={{ aspectRatio: '9/19' }}>
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-5 bg-slate-900 rounded-b-2xl z-10"></div>
        {children}
      </div>
    </div>
  </div>
);

// Hero — Admin Dashboard mockup
const DashboardMockup = ({ t }) => (
  <BrowserFrame title="admin.ecclesiahub.com/dashboard">
    <div className="p-5 grid grid-cols-12 gap-3">
      {/* Sidebar */}
      <div className="col-span-3 space-y-1.5">
        <div className="flex items-center gap-2 mb-3 px-2">
          <div className="w-7 h-7 rounded-lg bg-blue-600 flex items-center justify-center text-white">
            <Cross size={14} strokeWidth={2.5} />
          </div>
          <span className="font-bold text-slate-900 text-sm">Ecclesia</span>
        </div>
        {[
          { icon: LayoutDashboard, label: 'Dashboard', active: true },
          { icon: Users, label: 'Membros' },
          { icon: DollarSign, label: 'Tesouraria' },
          { icon: Calendar, label: 'Agenda' },
          { icon: Mic, label: 'Sermões' },
          { icon: BookOpen, label: 'Cursos' }
        ].map((item, i) => (
          <div key={i} className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs ${item.active ? 'bg-blue-600 text-white' : 'text-slate-600'}`}>
            <item.icon size={13} />
            <span>{item.label}</span>
          </div>
        ))}
      </div>
      {/* Main */}
      <div className="col-span-9 space-y-3">
        <div className="flex items-center justify-between">
          <div>
            <div className="text-sm font-bold text-slate-900">{t.mockup.dashboard}</div>
            <div className="text-[10px] text-slate-500">Visão geral · Outubro 2026</div>
          </div>
          <div className="w-7 h-7 rounded-full bg-gradient-to-br from-blue-500 to-blue-700"></div>
        </div>
        {/* Stats row */}
        <div className="grid grid-cols-3 gap-2">
          {[
            { label: t.mockup.members, value: '420', delta: '+12', color: 'blue' },
            { label: t.mockup.revenue, value: 'R$ 28k', delta: '+18%', color: 'emerald' },
            { label: t.mockup.attendance, value: '87%', delta: '+4%', color: 'amber' }
          ].map((s, i) => (
            <div key={i} className="bg-white rounded-lg p-2.5 border border-slate-200/70">
              <div className="text-[9px] text-slate-500 uppercase tracking-wide">{s.label}</div>
              <div className="text-base font-bold text-slate-900 mt-0.5">{s.value}</div>
              <div className={`text-[9px] mt-0.5 text-${s.color}-600 flex items-center gap-0.5`}>
                <TrendingUp size={9} /> {s.delta}
              </div>
            </div>
          ))}
        </div>
        {/* Chart */}
        <div className="bg-white rounded-lg p-3 border border-slate-200/70">
          <div className="flex items-center justify-between mb-2">
            <div className="text-[10px] font-semibold text-slate-700">{t.mockup.revenue}</div>
            <div className="text-[9px] text-slate-400">6 meses</div>
          </div>
          <div className="flex items-end gap-1.5 h-16">
            {[42, 58, 51, 72, 68, 85].map((h, i) => (
              <div key={i} className="flex-1 flex flex-col items-center gap-1">
                <div
                  className="bar w-full rounded-t bg-gradient-to-t from-blue-600 to-blue-400"
                  style={{ height: `${h}%`, animationDelay: `${i * 0.1}s` }}
                ></div>
              </div>
            ))}
          </div>
        </div>
        {/* Members list */}
        <div className="bg-white rounded-lg p-2.5 border border-slate-200/70">
          <div className="text-[10px] font-semibold text-slate-700 mb-2">Novos membros</div>
          <div className="space-y-1.5">
            {[
              { n: 'Ana Lima', t: 'Hoje' },
              { n: 'João Silva', t: 'Ontem' },
              { n: 'Maria Costa', t: '2 dias' }
            ].map((m, i) => (
              <div key={i} className="flex items-center gap-2">
                <div className={`w-5 h-5 rounded-full bg-gradient-to-br ${['from-pink-400 to-rose-500','from-blue-400 to-indigo-500','from-emerald-400 to-teal-500'][i]}`}></div>
                <div className="flex-1 text-[10px] text-slate-700">{m.n}</div>
                <div className="text-[9px] text-slate-400">{m.t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </BrowserFrame>
);

// Hero — Phone Member Portal mockup
const PhoneMockup = ({ t }) => (
  <PhoneFrame>
    <div className="h-full bg-gradient-to-b from-blue-50 to-white p-3 pt-7">
      <div className="flex items-center justify-between mb-3">
        <div>
          <div className="text-[8px] text-slate-400">Bem-vindo</div>
          <div className="text-xs font-bold text-slate-900">Pr. Lucas</div>
        </div>
        <div className="w-7 h-7 rounded-full bg-gradient-to-br from-blue-500 to-blue-700"></div>
      </div>
      {/* Check-in card */}
      <div className="rounded-xl bg-gradient-to-br from-blue-600 to-blue-800 p-3 text-white mb-3">
        <div className="text-[8px] opacity-80 uppercase tracking-wider">{t.mockup.checkin}</div>
        <div className="text-xs font-bold mt-0.5">Culto · 19h30</div>
        <button className="mt-2 w-full bg-white text-blue-700 rounded-md py-1.5 text-[10px] font-bold flex items-center justify-center gap-1">
          <QrCode size={10} /> Fazer Check-in
        </button>
      </div>
      {/* Courses */}
      <div className="text-[9px] font-semibold text-slate-700 mb-1.5">{t.mockup.courses}</div>
      {[
        { name: 'Discipulado I', prog: 75, color: 'bg-blue-500' },
        { name: 'Liderança', prog: 40, color: 'bg-amber-500' }
      ].map((c, i) => (
        <div key={i} className="bg-white rounded-lg p-2 mb-1.5 border border-slate-100">
          <div className="flex items-center justify-between mb-1">
            <div className="text-[10px] font-semibold text-slate-800">{c.name}</div>
            <div className="text-[8px] text-slate-500">{c.prog}%</div>
          </div>
          <div className="h-1 bg-slate-100 rounded-full overflow-hidden">
            <div className={`h-full ${c.color} rounded-full`} style={{ width: `${c.prog}%` }}></div>
          </div>
        </div>
      ))}
      {/* Bottom nav */}
      <div className="absolute bottom-2 left-3 right-3 bg-white rounded-xl border border-slate-100 flex justify-around py-1.5 shadow-md">
        {[LayoutDashboard, Calendar, BookOpen, Users].map((I, i) => (
          <I key={i} size={14} className={i === 0 ? 'text-blue-600' : 'text-slate-400'} />
        ))}
      </div>
    </div>
  </PhoneFrame>
);

// Showcase 1 — Financial
const FinancialMockup = ({ t }) => (
  <BrowserFrame title="admin.ecclesiahub.com/tesouraria">
    <div className="p-5">
      <div className="flex items-center justify-between mb-4">
        <div>
          <div className="text-base font-bold text-slate-900">Tesouraria</div>
          <div className="text-xs text-slate-500">Outubro 2026</div>
        </div>
        <button className="bg-blue-600 text-white text-xs px-3 py-1.5 rounded-lg font-medium flex items-center gap-1.5">
          + {t.mockup.newEntry}
        </button>
      </div>
      <div className="grid grid-cols-3 gap-2 mb-4">
        {[
          { l: 'Entradas', v: 'R$ 32.450', c: 'emerald' },
          { l: 'Saídas', v: 'R$ 18.200', c: 'rose' },
          { l: 'Saldo', v: 'R$ 14.250', c: 'blue' }
        ].map((s, i) => (
          <div key={i} className={`bg-${s.c}-50 border border-${s.c}-100 rounded-lg p-2.5`}>
            <div className="text-[10px] text-slate-500">{s.l}</div>
            <div className={`text-sm font-bold text-${s.c}-700 mt-0.5`}>{s.v}</div>
          </div>
        ))}
      </div>
      {/* Chart */}
      <div className="bg-white rounded-lg p-3 border border-slate-200/70 mb-3">
        <div className="text-[11px] font-semibold text-slate-700 mb-2">Receita mensal</div>
        <div className="flex items-end gap-2 h-20">
          {[45, 62, 55, 78, 70, 88, 82, 95].map((h, i) => (
            <div key={i} className="flex-1 bar rounded-t bg-gradient-to-t from-blue-600 to-blue-400" style={{ height: `${h}%`, animationDelay: `${i * 0.08}s` }}></div>
          ))}
        </div>
      </div>
      {/* Recent txns */}
      <div className="bg-white rounded-lg border border-slate-200/70">
        <div className="px-3 py-2 border-b border-slate-100 text-[11px] font-semibold text-slate-700">Lançamentos recentes</div>
        {[
          { d: '24/10', desc: 'Dízimos · Culto Domingo', v: '+ R$ 4.250', c: 'emerald' },
          { d: '23/10', desc: 'Conta de luz', v: '- R$ 680', c: 'rose' },
          { d: '22/10', desc: 'Oferta especial', v: '+ R$ 1.890', c: 'emerald' }
        ].map((tx, i) => (
          <div key={i} className="flex items-center px-3 py-2 border-b border-slate-50 last:border-0">
            <div className="text-[10px] text-slate-400 w-10">{tx.d}</div>
            <div className="flex-1 text-[11px] text-slate-700">{tx.desc}</div>
            <div className={`text-[11px] font-semibold text-${tx.c}-600`}>{tx.v}</div>
          </div>
        ))}
      </div>
    </div>
  </BrowserFrame>
);

// Showcase 2 — Check-in
const CheckinMockup = ({ t }) => (
  <BrowserFrame title="admin.ecclesiahub.com/check-in">
    <div className="p-5">
      <div className="flex items-center justify-between mb-4">
        <div>
          <div className="text-base font-bold text-slate-900">{t.mockup.checkin}</div>
          <div className="text-xs text-slate-500">Domingo, 19h30 · 87 presentes</div>
        </div>
        <div className="w-12 h-12 bg-white border-2 border-slate-200 rounded-lg p-1.5 grid grid-cols-3 gap-px">
          {[1,1,0,1,0,1,0,1,1].map((b,i) => (
            <div key={i} className={`${b ? 'bg-slate-900' : 'bg-transparent'} rounded-sm`}></div>
          ))}
        </div>
      </div>
      <div className="grid grid-cols-2 gap-2 mb-3">
        <div className="bg-emerald-50 border border-emerald-100 rounded-lg p-2.5">
          <div className="text-[10px] text-slate-500">Presentes</div>
          <div className="text-lg font-bold text-emerald-700">87</div>
          <div className="text-[10px] text-emerald-600">+ 12 vs semana passada</div>
        </div>
        <div className="bg-slate-100 rounded-lg p-2.5">
          <div className="text-[10px] text-slate-500">Total membros</div>
          <div className="text-lg font-bold text-slate-700">100</div>
          <div className="text-[10px] text-slate-500">87% de presença</div>
        </div>
      </div>
      <div className="bg-white rounded-lg border border-slate-200/70">
        <div className="px-3 py-2 border-b border-slate-100 text-[11px] font-semibold text-slate-700">Membros</div>
        {[
          { n: 'Ana Beatriz Lima', cell: 'Célula Vida', here: true },
          { n: 'Carlos Eduardo', cell: 'Célula Fé', here: true },
          { n: 'Daniela Souza', cell: 'Célula Vida', here: false },
          { n: 'Eduardo Martins', cell: 'Célula Esperança', here: true }
        ].map((m, i) => (
          <div key={i} className="flex items-center px-3 py-2 border-b border-slate-50 last:border-0">
            <div className={`w-6 h-6 rounded-full bg-gradient-to-br ${['from-pink-400 to-rose-500','from-blue-400 to-indigo-500','from-emerald-400 to-teal-500','from-amber-400 to-orange-500'][i]}`}></div>
            <div className="flex-1 ml-2">
              <div className="text-[11px] font-medium text-slate-800">{m.n}</div>
              <div className="text-[9px] text-slate-500">{m.cell}</div>
            </div>
            <div className={`w-5 h-5 rounded ${m.here ? 'bg-emerald-500' : 'border border-slate-300'} flex items-center justify-center`}>
              {m.here && <Check size={11} className="text-white" strokeWidth={3} />}
            </div>
          </div>
        ))}
      </div>
    </div>
  </BrowserFrame>
);

// Showcase 3 — EAD
const EADMockup = ({ t }) => (
  <BrowserFrame title="app.ecclesiahub.com/cursos/discipulado">
    <div className="p-5">
      <div className="text-xs text-slate-500 mb-1">Curso · Discipulado I</div>
      <div className="text-base font-bold text-slate-900 mb-3">Fundamentos da Fé Cristã</div>
      {/* Video player */}
      <div className="relative aspect-video bg-gradient-to-br from-slate-800 via-blue-900 to-slate-900 rounded-lg mb-3 flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 dots-pattern opacity-30"></div>
        <div className="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center backdrop-blur shadow-xl">
          <Play size={20} className="text-blue-700 ml-0.5" strokeWidth={2} />
        </div>
        <div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 text-white text-[10px]">
          <span>04:32</span>
          <div className="flex-1 h-1 bg-white/20 rounded-full">
            <div className="w-1/3 h-full bg-blue-400 rounded-full"></div>
          </div>
          <span>14:08</span>
        </div>
      </div>
      {/* Progress */}
      <div className="bg-white rounded-lg p-2.5 border border-slate-200/70 mb-3">
        <div className="flex items-center justify-between text-[10px] mb-1">
          <span className="font-semibold text-slate-700">{t.mockup.progress}</span>
          <span className="text-blue-600 font-bold">68%</span>
        </div>
        <div className="h-1.5 bg-slate-100 rounded-full">
          <div className="w-2/3 h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"></div>
        </div>
      </div>
      {/* Modules */}
      <div className="bg-white rounded-lg border border-slate-200/70">
        {[
          { n: '1. Quem é Jesus?', done: true },
          { n: '2. A obra da Cruz', done: true },
          { n: '3. Vida em Comunhão', done: false, current: true },
          { n: '4. O Espírito Santo', done: false }
        ].map((m, i) => (
          <div key={i} className={`flex items-center px-3 py-2 border-b border-slate-50 last:border-0 ${m.current ? 'bg-blue-50' : ''}`}>
            <div className={`w-5 h-5 rounded-full flex items-center justify-center ${m.done ? 'bg-emerald-500' : m.current ? 'bg-blue-600' : 'bg-slate-200'}`}>
              {m.done ? <Check size={11} className="text-white" strokeWidth={3} /> : <span className="text-[9px] text-white font-bold">{i+1}</span>}
            </div>
            <div className={`flex-1 ml-2 text-[11px] ${m.current ? 'font-semibold text-blue-900' : 'text-slate-700'}`}>{m.n}</div>
            {m.done && <div className="text-[9px] text-emerald-600 font-semibold">✓ {t.mockup.complete}</div>}
          </div>
        ))}
      </div>
    </div>
  </BrowserFrame>
);

window.Mockups = { BrowserFrame, PhoneFrame, DashboardMockup, PhoneMockup, FinancialMockup, CheckinMockup, EADMockup };