import Link from 'next/link'
import BrandName from '@/app/BrandName'

const LINKEDIN_URL = 'https://www.linkedin.com/company/quality-intelligence/'

export const metadata = {
  title: 'Company',
  description: 'Quality Intelligence is an early-stage company building the operating system for quality teams in regulated manufacturing. Learn who we are and why we built Ask QIEN.',
  openGraph: {
    title: 'Quality Intelligence — Company',
    description: 'Building the operating system for quality teams in regulated manufacturing.',
    url: 'https://quality-intelligence.co/company',
    type: 'website',
  },
  alternates: {
    canonical: 'https://quality-intelligence.co/company',
  },
}

export default function CompanyPage() {
  return (
    <div className="bg-white dark:bg-zinc-950 text-zinc-950 dark:text-zinc-100">

      {/* Header */}
      <section className="mx-auto max-w-3xl px-6 pt-16 pb-12">
        <p className="text-xs font-semibold uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-3">
          Quality Intelligence Ltd
        </p>
        <h1 className="text-4xl font-bold tracking-tight text-zinc-950 dark:text-white">
          We are building the operating system for quality teams.
        </h1>
        <p className="mt-5 text-lg text-zinc-600 dark:text-zinc-400 leading-relaxed">
          Quality Intelligence is an early-stage company founded with one focus: making expert knowledge
          in regulated manufacturing accessible when and where it is needed most.
        </p>
      </section>

      {/* Mission */}
      <section className="border-t border-zinc-100 dark:border-zinc-800">
        <div className="mx-auto max-w-3xl px-6 py-14">
          <h2 className="text-xl font-bold text-zinc-950 dark:text-white mb-5">Our mission</h2>
          <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed mb-4">
            In regulated manufacturing, quality is not a department — it is the foundation that everything else rests on.
            When a production line stops, or a deviation is raised, or an audit question lands in the wrong inbox, the
            difference between a swift resolution and a prolonged disruption comes down to one thing: getting the right
            knowledge to the right person in time.
          </p>
          <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed mb-4">
            We believe that AI should not replace the expert — it should make the expert&apos;s judgment available to
            more of the organization, more of the time. <BrandName /> is our first product in service of that idea:
            an AI-augmented ticketing and knowledge system that brings structure to how quality issues are raised,
            triaged, answered, and learned from.
          </p>
          <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
            We are starting in pharmaceutical and medical device manufacturing, where the stakes are highest and the
            gap between what teams know and what gets documented is widest. Over time, we intend to bring the same
            approach to every regulated industry that runs on expert judgment.
          </p>
        </div>
      </section>

      {/* Team */}
      <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-3xl px-6 py-14">
          <h2 className="text-xl font-bold text-zinc-950 dark:text-white mb-8">The team</h2>
          <div className="grid gap-8 sm:grid-cols-2">

            <div className="rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
              <div className="h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-lg font-bold text-zinc-600 dark:text-zinc-400 mb-4">
                JL
              </div>
              <h3 className="font-semibold text-zinc-950 dark:text-white">James Lopez</h3>
              <p className="text-xs text-zinc-400 dark:text-zinc-500 mb-3">Co-founder & CEO</p>
              <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
                Brings experience at the intersection of software engineering and regulated industry operations.
                James built <BrandName /> from a direct understanding of how expert knowledge gets lost in busy
                manufacturing environments — and the cost of that loss.
              </p>
            </div>

            <div className="rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
              <div className="h-12 w-12 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-lg font-bold text-zinc-600 dark:text-zinc-400 mb-4">
                QL
              </div>
              <h3 className="font-semibold text-zinc-950 dark:text-white">Co-founder</h3>
              <p className="text-xs text-zinc-400 dark:text-zinc-500 mb-3">Co-founder & Industry Lead</p>
              <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
                Deep background in regulated manufacturing quality systems. Brings frontline understanding of
                how quality teams actually work, what the regulatory environment demands, and where existing
                tools fall short. Shapes the product&apos;s domain logic and customer relationships.
              </p>
            </div>

          </div>
        </div>
      </section>

      {/* Where we are */}
      <section className="border-t border-zinc-100 dark:border-zinc-800">
        <div className="mx-auto max-w-3xl px-6 py-14">
          <h2 className="text-xl font-bold text-zinc-950 dark:text-white mb-5">Where we are</h2>
          <div className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed space-y-4">
            <p>
              <BrandName /> is live and in early access with its first customer — a manufacturing team using the
              platform today for real quality issue management. We are using this phase to refine the product
              around genuine operational workflows before opening to additional customers.
            </p>
            <p>
              We are actively looking to work with a small number of quality teams in pharmaceutical, medical
              device, and food manufacturing who are willing to be close partners in shaping the direction
              of the product. If your team is dealing with the problems <BrandName /> solves, we would value
              a conversation.
            </p>
          </div>

          <div className="mt-8 flex items-center gap-4">
            <Link
              href="/contact"
              className="rounded-lg bg-[var(--brand-green)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-[var(--brand-green-hover)]"
            >
              Get in touch
            </Link>
            <a
              href={LINKEDIN_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-100 transition"
            >
              <LinkedInIcon className="h-4 w-4" />
              Follow us on LinkedIn
            </a>
          </div>
        </div>
      </section>

      {/* Values */}
      <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-3xl px-6 py-14">
          <h2 className="text-xl font-bold text-zinc-950 dark:text-white mb-8">What we stand for</h2>
          <div className="grid gap-6 sm:grid-cols-3">
            {[
              {
                title: 'Expert judgment first',
                body: 'AI handles the repetitive parts. Experts own the decisions. We will never build a feature that obscures who is responsible for an answer.',
              },
              {
                title: 'Built for audit',
                body: <>Regulated industries live and die by documentation. Everything in <BrandName /> is logged, versioned, and retrievable. Always.</>,
              },
              {
                title: 'Simple until it needs to be complex',
                body: 'The best quality systems are the ones people actually use. We default to the simplest interface that serves the job, and add complexity only when the work demands it.',
              },
            ].map(({ title, body }) => (
              <div key={title}>
                <h3 className="font-semibold text-zinc-950 dark:text-white text-sm mb-2">{title}</h3>
                <p className="text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed">{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

    </div>
  )
}

function LinkedInIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  )
}