import SEO from '@/components/SEO'
import { AlertCircle, ArrowRight, CheckCircle2, Clock3, ExternalLink, Headphones, LifeBuoy, ShieldCheck, TicketCheck, Wrench } from 'lucide-react'

const portalLinks = [
  {
    label: 'Sign in',
    href: 'https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signin',
  },
  {
    label: 'Create account',
    href: 'https://queuenorthtechnologiesllc.zohodesk.com/portal/en/signup',
  },
]

const responseTargets = [
  { priority: 'Low', context: 'General request', target: '24 hours' },
  { priority: 'Medium', context: 'Standard issue', target: '4 hours' },
  { priority: 'High', context: 'Critical outage', target: '1 hour' },
]

const supportedSystems = [
  '8x8 Communications Platform',
  'Cisco Webex',
  'VoIP Phone Systems',
  'Contact Center Solutions',
  'Network Infrastructure',
  'Cloud Migration Support',
]

const Support = () => {
  return (
    <>
      <SEO
        title="IT Support & Help Desk | Queue North Technologies"
        description="Get IT support and help desk services from Queue North Technologies. 24/7 monitoring, rapid response SLAs, and dedicated support engineers for your business."
        url="https://queuenorth.com/support"
      />
      {/* Page Hero */}
      <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
        <div className="absolute inset-0 -z-10">
          <img
            src="/assets/modern-call-center.webp"
            alt="Support team managing communications requests"
            className="h-full w-full object-cover object-center"
          />
          <div className="absolute inset-0 bg-primary-navy/84" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.72fr] gap-10 lg:gap-14 items-center">
            <div>
              <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan">
                <LifeBuoy className="h-4 w-4" aria-hidden="true" />
                Queue North Support
              </div>
              <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                Get help without getting handed off.
              </h1>
              <p className="mt-6 text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed">
                Sign in to the client portal to manage tickets, create a new support request, or escalate a service-impacting issue through one clear path.
              </p>
              <div className="mt-8 flex flex-col sm:flex-row gap-3">
                <a
                  href={portalLinks[0].href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
                >
                  Sign In
                  <ArrowRight className="h-4 w-4" aria-hidden="true" />
                </a>
                <a
                  href={portalLinks[1].href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
                >
                  Create Account
                  <ExternalLink className="h-4 w-4" aria-hidden="true" />
                </a>
              </div>
            </div>

            <div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
              <h2 className="text-lg font-semibold mb-5">Choose the right path</h2>
              <div className="space-y-4">
                <div className="flex gap-4">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
                    <TicketCheck className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <div>
                    <h3 className="font-semibold">Existing client</h3>
                    <p className="text-sm text-white/70">Sign in to create, update, and track support tickets.</p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
                    <AlertCircle className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <div>
                    <h3 className="font-semibold">Active outage</h3>
                    <a href="tel:+13217308020" className="text-sm font-semibold text-primary-cyan hover:text-white transition-colors" aria-label="Call Queue North support">
                      Call (321) 730-8020
                    </a>
                  </div>
                </div>
                <div className="flex gap-4">
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
                    <Wrench className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <div>
                    <h3 className="font-semibold">Planned work</h3>
                    <p className="text-sm text-white/70">Use the portal for moves, adds, changes, and deployments.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Support Portal */}
      <section id="support-portal" className="bg-background py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-start">
            <div className="space-y-6">
              <div className="rounded-md border border-border border-t-[3px] border-t-primary-blue bg-white p-6 shadow-sm">
                <div className="flex items-start gap-4">
                  <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
                    <Headphones className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <div>
                    <h2 className="text-xl font-bold text-primary-navy">Support Center</h2>
                    <p className="mt-2 text-sm leading-relaxed text-soft-text">
                      Use the client portal to create requests, manage existing tickets, add updates, and keep support history in one place.
                    </p>
                  </div>
                </div>

                <div className="mt-6 flex flex-col sm:flex-row gap-3">
                  {portalLinks.map((link, index) => (
                    <a
                      key={link.label}
                      href={link.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`inline-flex h-10 items-center justify-center gap-2 rounded-md px-4 text-sm font-semibold transition-colors ${index === 0 ? 'bg-primary-navy text-white hover:bg-primary-navy-dark' : 'border border-border bg-white text-primary-navy hover:bg-section-alt'}`}
                    >
                      {link.label}
                      <ExternalLink className="h-4 w-4" aria-hidden="true" />
                    </a>
                  ))}
                </div>
              </div>

              <div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-white p-6 shadow-sm">
                <div className="flex items-center gap-3 mb-5">
                  <span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy">
                    <Clock3 className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <h2 className="text-xl font-bold text-primary-navy">Response Targets</h2>
                </div>
                <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
                  {responseTargets.map((item) => (
                    <div key={item.priority} className="rounded-md border border-border bg-background p-4">
                      <div className="flex items-center justify-between gap-3">
                        <p className="font-semibold text-text">{item.priority}</p>
                        <p className="font-numeric text-xl text-primary-navy">{item.target}</p>
                      </div>
                      <p className="mt-1 text-sm text-soft-text">{item.context}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-md border border-border border-t-[3px] border-t-cyan-400 bg-section-alt p-6">
                <div className="flex items-center gap-3 mb-5">
                  <span className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-primary-navy">
                    <ShieldCheck className="h-5 w-5" aria-hidden="true" />
                  </span>
                  <h2 className="text-xl font-bold text-primary-navy">Covered Systems</h2>
                </div>
                <ul className="space-y-3">
                  {supportedSystems.map((item) => (
                    <li key={item} className="flex items-center gap-3 text-sm text-text">
                      <CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div>
              <div className="rounded-md border border-border border-t-[3px] border-t-accent-gold bg-white p-6 shadow-sm lg:p-8">
                <div className="flex items-start gap-4 border-b border-border pb-6">
                  <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
                    <TicketCheck className="h-6 w-6" aria-hidden="true" />
                  </span>
                  <div>
                    <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Client Portal</p>
                    <h2 className="mt-2 text-3xl font-bold text-primary-navy">Manage support in Zoho Desk.</h2>
                    <p className="mt-3 text-sm leading-relaxed text-soft-text">
                      Existing clients can sign in to submit new tickets, review open items, and keep communications tied to the right account.
                    </p>
                  </div>
                </div>

                <div className="mt-6 grid gap-3 sm:grid-cols-2">
                  <a
                    href={portalLinks[0].href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary-navy px-5 text-sm font-semibold text-white hover:bg-primary-navy-dark transition-colors"
                  >
                    Sign In
                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
                  </a>
                  <a
                    href={portalLinks[1].href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex h-11 items-center justify-center gap-2 rounded-md border border-border bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
                  >
                    Create Account
                    <ExternalLink className="h-4 w-4" aria-hidden="true" />
                  </a>
                </div>

                <div className="mt-8 grid gap-3">
                  {[
                    'Submit and track support tickets',
                    'Add updates without starting a new thread',
                    'Keep request history tied to your account',
                  ].map((item) => (
                    <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-background p-4 text-sm font-medium text-text">
                      <CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
                      {item}
                    </div>
                  ))}
                </div>

                <div className="mt-8 rounded-md border border-border bg-section-alt p-4">
                  <p className="text-sm font-semibold text-primary-navy">Service-impacting issue?</p>
                  <p className="mt-1 text-sm text-soft-text">
                    Call Queue North directly for urgent outages or time-sensitive escalations.
                  </p>
                  <a href="tel:+13217308020" className="mt-3 inline-flex text-sm font-semibold text-primary-blue hover:text-primary-navy transition-colors">
                    (321) 730-8020
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default Support