export const dynamic = 'force-dynamic'

import type { Metadata } from 'next'
import { redirect } from 'next/navigation'

export const metadata: Metadata = {
  title: 'Ask QIEN — AI-augmented quality support for manufacturing',
  description: 'Route quality issues from the production floor to your specialists — with AI that triages, summarises, and drafts the answer before the expert opens the ticket. Built for pharmaceutical, medical device, and food manufacturing.',
  openGraph: {
    title: 'Ask QIEN — AI-augmented quality support for manufacturing',
    description: 'Route quality issues from the production floor to your specialists — with AI that triages, summarises, and drafts the answer before the expert opens the ticket.',
    url: 'https://quality-intelligence.co',
    type: 'website',
  },
  alternates: {
    canonical: 'https://quality-intelligence.co',
  },
}
import { auth } from '@/auth'
import { db } from '@/db'
import { users } from '@/db/schema'
import { eq } from 'drizzle-orm'
import Link from 'next/link'
import BrandName from '@/app/BrandName'

export default async function LandingPage() {
  // Redirect authenticated users to their app home
  const session = await auth()
  if (session?.user?.id) {
    const [user] = await db
      .select({ displayName: users.displayName })
      .from(users)
      .where(eq(users.id, session.user.id))
      .limit(1)
    if (user) {
      if (!user.displayName) redirect('/onboarding')
      const role = session.user.role
      redirect(role === 'expert' || role === 'admin' ? '/inbox' : '/submit')
    }
  }

  const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'Organization',
        '@id': 'https://quality-intelligence.co/#organization',
        name: 'Quality Intelligence',
        url: 'https://quality-intelligence.co',
        logo: 'https://quality-intelligence.co/brand/qi-mark.png',
        sameAs: ['https://www.linkedin.com/company/quality-intelligence'],
        contactPoint: {
          '@type': 'ContactPoint',
          email: 'hello@quality-intelligence.co',
          contactType: 'sales',
        },
      },
      {
        '@type': 'SoftwareApplication',
        '@id': 'https://quality-intelligence.co/#software',
        name: 'Ask QIEN',
        applicationCategory: 'BusinessApplication',
        operatingSystem: 'Web',
        url: 'https://quality-intelligence.co',
        description:
          'AI-augmented expert support platform for regulated manufacturing. Routes quality issues from the production floor to specialists with AI triage, draft responses grounded in your knowledge base, and automatic knowledge capture.',
        publisher: { '@id': 'https://quality-intelligence.co/#organization' },
        audience: {
          '@type': 'Audience',
          audienceType:
            'Quality managers, production supervisors, and domain-expert consultants in pharmaceutical, medical device, and food manufacturing',
        },
      },
      {
        '@type': 'WebSite',
        '@id': 'https://quality-intelligence.co/#website',
        url: 'https://quality-intelligence.co',
        name: 'Ask QIEN',
        publisher: { '@id': 'https://quality-intelligence.co/#organization' },
      },
    ],
  }

  return (
    <>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    <div className="bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-100">

      {/* Hero */}
      <section className="mx-auto max-w-5xl px-6 pt-20 pb-24 text-center">
        <p className="inline-block rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-medium text-sky-700 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-300 mb-6">
          Built for regulated manufacturing
        </p>
        <h1 className="text-4xl font-bold tracking-tight text-zinc-950 dark:text-white sm:text-5xl lg:text-6xl">
          When the line stops,<br className="hidden sm:block" />
          your experts need to move fast.
        </h1>
        <p className="mt-6 mx-auto max-w-2xl text-lg text-zinc-600 dark:text-zinc-400 leading-relaxed">
          <BrandName /> routes quality issues from the production floor to your specialists — with AI that triages, summarizes,
          and drafts the answer before the expert even opens the ticket.
        </p>
        <p className="mt-3 mx-auto max-w-2xl text-sm text-zinc-500 dark:text-zinc-500">
          The name points to the role: a Quality Intelligence Expert Ninja, quietly working through the quality queue.
        </p>
        <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
          <Link
            href="/contact"
            className="inline-flex h-11 items-center justify-center rounded-xl bg-[var(--brand-green)] px-6 text-sm font-semibold text-white shadow transition hover:bg-[var(--brand-green-hover)]"
          >
            Request early access
          </Link>
          <Link
            href="/about"
            className="inline-flex h-11 items-center justify-center rounded-xl border border-zinc-300 px-6 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-900"
          >
            See how it works
          </Link>
        </div>
      </section>

      {/* Problem */}
      <section className="border-t border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div className="mx-auto max-w-5xl px-6 py-20">
          <div className="text-center mb-14">
            <h2 className="text-2xl font-bold text-zinc-950 dark:text-white sm:text-3xl">
              Quality teams are firefighting with the wrong tools
            </h2>
            <p className="mt-4 text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
              In pharmaceutical, medical device, and food manufacturing, quality issues are high-stakes and time-sensitive.
              But most teams still manage them over email and spreadsheets.
            </p>
          </div>
          <div className="grid gap-6 sm:grid-cols-3">
            {[
              {
                icon: '📧',
                title: 'Issues get buried in email',
                body: 'A line manager emails the quality team. It sits in an inbox. Production waits. The problem spreads.',
              },
              {
                icon: '🧠',
                title: 'Knowledge stays in people\'s heads',
                body: 'When your senior expert resolves a recurring validation failure, that solution lives only in their memory — or in a document nobody can find.',
              },
              {
                icon: '⌛',
                title: 'Experts spend time on admin, not judgment',
                body: 'Before they can even start solving, experts have to decode vague descriptions, ask follow-up questions, and write responses from scratch.',
              },
            ].map(({ icon, title, body }) => (
              <div key={title} className="rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
                <div className="text-2xl mb-3">{icon}</div>
                <h3 className="font-semibold text-zinc-950 dark:text-white mb-2">{title}</h3>
                <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="mx-auto max-w-5xl px-6 py-20">
        <div className="text-center mb-14">
          <h2 className="text-2xl font-bold text-zinc-950 dark:text-white sm:text-3xl">
            From floor to resolution in minutes, not days
          </h2>
          <p className="mt-4 text-zinc-600 dark:text-zinc-400 max-w-xl mx-auto">
            <BrandName /> brings structure and AI to the process your team already follows — without replacing how experts work.
          </p>
        </div>
        <div className="space-y-6">
          {[
            {
              step: '01',
              title: 'Structured submission',
              body: 'A line manager submits an issue through a guided form — department, affected system, date, priority, and a full description. AI checks the submission for completeness and asks clarifying questions if anything\'s missing.',
              tag: 'Line manager',
            },
            {
              step: '02',
              title: 'AI triage and summary',
              body: 'As soon as the ticket is complete, the AI pipeline fires: urgency is assessed, the issue is tagged against your knowledge base, and an expert-facing summary is generated so your specialist can understand the situation at a glance.',
              tag: 'AI pipeline',
            },
            {
              step: '03',
              title: 'Draft response, grounded in your KB',
              body: 'The AI searches your organization\'s knowledge base and drafts a response using relevant precedents. The expert sees the draft, sources, and any knowledge gaps — then edits and sends.',
              tag: 'Expert',
            },
            {
              step: '04',
              title: 'Knowledge capture',
              body: 'Every expert response is a candidate for your knowledge base. The AI proposes KB updates automatically, so your institutional knowledge grows with every ticket closed.',
              tag: 'Continuous improvement',
            },
          ].map(({ step, title, body, tag }) => (
            <div key={step} className="flex gap-6 rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
              <div className="shrink-0 font-mono text-sm font-bold text-zinc-300 dark:text-zinc-600 pt-0.5 w-7">{step}</div>
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <h3 className="font-semibold text-zinc-950 dark:text-white">{title}</h3>
                  <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-xs text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">{tag}</span>
                </div>
                <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">{body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Who it's for */}
      <section className="border-t border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/50">
        <div className="mx-auto max-w-5xl px-6 py-20">
          <div className="text-center mb-14">
            <h2 className="text-2xl font-bold text-zinc-950 dark:text-white sm:text-3xl">Built for regulated operations</h2>
            <p className="mt-4 text-zinc-600 dark:text-zinc-400 max-w-xl mx-auto">
              <BrandName /> is designed for manufacturing environments where quality decisions are high-stakes and
              every resolution needs to be documented.
            </p>
          </div>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {[
              { sector: 'Pharmaceutical & Biotech', detail: 'GMP deviations, validation queries, change control questions' },
              { sector: 'Medical Devices', detail: 'NCRs, CAPA management, supplier quality, design-change impact queries' },
              { sector: 'Food & Beverage', detail: 'HACCP non-conformances, allergen queries, audit findings' },
              { sector: 'Industrial Manufacturing', detail: 'Equipment failures, process deviations, safety incidents' },
            ].map(({ sector, detail }) => (
              <div key={sector} className="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                <h3 className="font-semibold text-zinc-950 dark:text-white text-sm mb-2">{sector}</h3>
                <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{detail}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Value props */}
      <section className="mx-auto max-w-5xl px-6 py-20">
        <div className="grid gap-8 sm:grid-cols-2">
          {[
            {
              title: 'Experts handle 3× more tickets',
              body: 'AI handles the intake, triage, and first-draft — so your senior people spend their time on judgment and sign-off, not paperwork.',
            },
            {
              title: 'No more "where did we handle this before?"',
              body: 'Every resolved ticket grows the knowledge base. The next similar issue arrives pre-answered.',
            },
            {
              title: 'Full audit trail, out of the box',
              body: 'Every submission, clarification, AI decision, and expert response is logged. Essential for regulated environments.',
            },
            {
              title: 'Works with your existing team',
              body: 'No new workflow to enforce. Line managers submit issues the same way. Experts respond through a clean inbox. The AI works in the background. The interface is available in English and Spanish — so your whole workforce can use it without friction.',
            },
          ].map(({ title, body }) => (
            <div key={title} className="flex gap-4">
              <div className="mt-1 shrink-0 h-5 w-5 rounded-full bg-sky-100 dark:bg-sky-400/20 flex items-center justify-center">
                <div className="h-2 w-2 rounded-full bg-sky-500 dark:bg-sky-400" />
              </div>
              <div>
                <h3 className="font-semibold text-zinc-950 dark:text-white mb-1">{title}</h3>
                <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">{body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="border-t border-zinc-100 dark:border-zinc-800">
        <div className="mx-auto max-w-3xl px-6 py-20 text-center">
          <h2 className="text-2xl font-bold text-zinc-950 dark:text-white sm:text-3xl">
            Ready to see it in action?
          </h2>
          <p className="mt-4 text-zinc-600 dark:text-zinc-400 max-w-lg mx-auto">
            We are working with a small number of manufacturing teams in early access.
            If your organization is dealing with the issues above, we would love to talk.
          </p>
          <Link
            href="/contact"
            className="mt-8 inline-block rounded-lg bg-[var(--brand-green)] px-8 py-3 text-sm font-semibold text-white shadow transition hover:bg-[var(--brand-green-hover)]"
          >
            Get in touch
          </Link>
        </div>
      </section>

    </div>
    </>
  )
}