import { mdiCellphoneCog, mdiLogin, mdiQrcodeScan, mdiRobotExcitedOutline, mdiShieldAccountOutline, mdiWhatsapp } from '@mdi/js';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import BaseButton from '../components/BaseButton';
import CardBox from '../components/CardBox';
import LayoutGuest from '../layouts/Guest';
import Logo from '../components/Logo';
import { getPageTitle } from '../config';

const services = [
  'creacion de aplicaciones',
  'instalacion de Sistema Windows',
  'diseño de paginas web',
  'creacion de aplicaciones',
];

const steps = [
  { title: 'Escanea o entra', text: 'El cliente llega desde QR, landing o bot y abre su pedido.' },
  { title: 'Describe el fallo', text: 'Se capturan equipo, síntomas, contacto y preferencia de pago.' },
  { title: 'Paga y recibe estado', text: 'Transfermóvil/Enzona quedan listos con referencia y cola de WhatsApp.' },
];

export default function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Floresoftware Ideas')}</title>
        <meta name="description" content="Taller tecnológico de reparación de móviles con pedidos, pagos, QR, WhatsApp e inteligencia artificial." />
      </Head>

      <main className="min-h-screen overflow-hidden bg-slate-950 text-white">
        <section className="relative isolate px-6 py-8 md:px-10 lg:px-16">
          <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.35),transparent_32%),radial-gradient(circle_at_80%_20%,rgba(217,70,239,0.28),transparent_30%),linear-gradient(135deg,#020617_0%,#06263a_46%,#1e1034_100%)]" />
          <div className="absolute left-1/2 top-20 -z-10 h-72 w-72 rounded-full bg-cyan-400/20 blur-3xl" />

          <header className="mx-auto flex max-w-7xl items-center justify-between gap-4 rounded-full border border-white/10 bg-white/10 px-4 py-3 backdrop-blur-xl">
            <div className="flex items-center gap-3">
              <div className="overflow-hidden rounded-2xl border border-white/15 bg-white shadow-lg shadow-cyan-300/20">
                <Logo className="h-12 w-20 object-cover object-center" />
              </div>
              <div>
                <p className="text-sm font-black leading-tight">Floresoftware Ideas</p>
                <p className="text-xs text-cyan-100/70">Mobile Repair SaaS</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <BaseButton href="/login" label="Login" color="lightDark" icon={mdiLogin} small />
              <BaseButton href="/dashboard" label="Admin" color="info" icon={mdiShieldAccountOutline} small />
            </div>
          </header>

          <div className="mx-auto grid max-w-7xl items-center gap-10 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
            <div>
              <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-cyan-200/20 bg-cyan-300/10 px-4 py-2 text-sm font-bold text-cyan-100">
                <span className="h-2 w-2 rounded-full bg-emerald-300 shadow-lg shadow-emerald-300/70" />
                Taller moderno con QR, pagos y WhatsApp
              </div>
              <h1 className="max-w-4xl text-5xl font-black tracking-tight md:text-7xl">
                crear app, instalacion de SO Windows, y <span className="bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-emerald-200 bg-clip-text text-transparent">moviles</span>
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-200/80">
                Landing pública + portal de clientes + panel admin para convertir consultas en pedidos, generar referencias de Transfermóvil/Enzona y preparar avisos al WhatsApp del taller.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <BaseButton href="/repair-intake" label="Crear pedido ahora" color="success" icon={mdiCellphoneCog} />
                <BaseButton href="https://wa.me/5359177041" target="_blank" label="WhatsApp taller" color="info" icon={mdiWhatsapp} outline />
              </div>
              <div className="mt-8 grid max-w-2xl gap-3 sm:grid-cols-2">
                {services.map((service) => (
                  <div key={service} className="rounded-2xl border border-white/10 bg-white/10 px-4 py-3 text-sm font-semibold text-slate-100 backdrop-blur">
                    {service}
                  </div>
                ))}
              </div>
            </div>

            <CardBox className="border-0 bg-white/10 p-0 text-white shadow-2xl shadow-fuchsia-950/40 backdrop-blur-xl" hasComponentLayout>
              <div className="rounded-3xl border border-white/10 bg-slate-950/75 p-5">
                <div className="mb-5 overflow-hidden rounded-[2rem] border border-cyan-200/20 bg-white shadow-2xl shadow-cyan-500/20">
                  <Logo className="h-auto w-full object-cover" />
                </div>
                <div className="mb-5 flex items-center justify-between">
                  <div>
                    <p className="text-xs font-bold uppercase tracking-[0.24em] text-cyan-300">Pedido demo</p>
                    <h2 className="text-2xl font-black">iPhone 11 · Pantalla</h2>
                  </div>
                  <span className="rounded-full bg-emerald-300 px-3 py-1 text-xs font-black text-slate-950">Nuevo</span>
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                  <div className="rounded-3xl bg-white/10 p-4">
                    <p className="text-xs text-slate-400">Pago</p>
                    <p className="mt-1 text-lg font-black">Transfermóvil</p>
                    <p className="text-xs text-cyan-100">REF-FI-24X9</p>
                  </div>
                  <div className="rounded-3xl bg-white/10 p-4">
                    <p className="text-xs text-slate-400">WhatsApp</p>
                    <p className="mt-1 text-lg font-black">+5359177041</p>
                    <p className="text-xs text-fuchsia-100">Mensaje en cola</p>
                  </div>
                </div>

                <div className="my-5 rounded-[2rem] border border-dashed border-cyan-200/40 bg-cyan-300/10 p-6 text-center">
                  <Image
                    src="/qr-mobile-order.jpg"
                    alt="Código QR para crear un pedido desde el móvil"
                    width={494}
                    height={532}
                    className="mx-auto w-full max-w-[220px] rounded-2xl border border-white/80 bg-white p-2 shadow-xl shadow-cyan-500/20"
                    priority
                  />
                  <p className="mt-4 text-sm font-semibold text-slate-300">Escanea para crear un pedido desde el móvil.</p>
                </div>

                <div className="space-y-3">
                  {steps.map((step, index) => (
                    <div key={step.title} className="flex gap-3 rounded-2xl bg-white/10 p-4">
                      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-fuchsia-300 text-sm font-black text-slate-950">{index + 1}</span>
                      <div>
                        <p className="font-black">{step.title}</p>
                        <p className="text-sm text-slate-300">{step.text}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </CardBox>
          </div>
        </section>

        <section className="border-y border-white/10 bg-white/[0.03] px-6 py-12 md:px-10 lg:px-16">
          <div className="mx-auto grid max-w-7xl gap-6 md:grid-cols-3">
            <div className="rounded-3xl border border-white/10 bg-white/10 p-6">
              <svg className="h-8 w-8 text-cyan-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiRobotExcitedOutline} /></svg>
              <h3 className="mt-4 text-xl font-black">Bot con IA</h3>
              <p className="mt-2 text-sm leading-6 text-slate-300">Preparado para responder preguntas y convertir chats en solicitudes estructuradas.</p>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/10 p-6">
              <svg className="h-8 w-8 text-fuchsia-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiQrcodeScan} /></svg>
              <h3 className="mt-4 text-xl font-black">QR de recepción</h3>
              <p className="mt-2 text-sm leading-6 text-slate-300">Un punto de entrada simple para mostrador, redes sociales, tarjetas y stickers.</p>
            </div>
            <div className="rounded-3xl border border-white/10 bg-white/10 p-6">
              <svg className="h-8 w-8 text-emerald-300" viewBox="0 0 24 24" fill="currentColor"><path d={mdiShieldAccountOutline} /></svg>
              <h3 className="mt-4 text-xl font-black">Panel admin</h3>
              <p className="mt-2 text-sm leading-6 text-slate-300">Gestiona clientes, equipos, pagos, facturas y estados desde el backoffice.</p>
            </div>
          </div>
        </section>
      </main>
    </>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
