import * as TabsPrimitive from "@radix-ui/react-tabs";
import Link from "next/link";
import React, { JSX } from "react";

// Utility styles
const STYLES = {
  tabTrigger:
    "flex shrink-0 items-center h-[45px] px-5 font-medium text-[16px] text-[#3E3E3E] outline-none hover:text-primary data-[state=active]:text-primary data-[state=active]:border-b-2 data-[state=active]:border-primary",
  tabContent: "grow rounded-b-md p-5 outline-none",
  label:
    "text-[16px] md:text-[18px] text-[#3E3E3E] font-semibold tracking-wide",
  paragraph:
    "mt-2 text-neutral-black-70 text-[16px] md:text-[18px] tracking-wide leading-snug",
  link: "text-primary font-bold",
};

// Tab content data
const TAB_CONTENT: Record<string, { title: string; content: JSX.Element }> = {
  "file-specifications": {
    title: "File Specifications",
    content: (
      <ul>
        <li className="mb-5">
          <label className={STYLES.label}>
            What are the recommended file formats?
          </label>
          <p className={STYLES.paragraph}>
            PDF, JPG, JPEG, PNG, TIF, TIFF, EPS, Illustrator
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            What is the maximum allowed file size to upload?
          </label>
          <p className={STYLES.paragraph}>
            200MB. If your file is larger than 200 MB, please contact{" "}
            <Link href="/contact" className={STYLES.link}>
              Customer Service
            </Link>{" "}
            for assistance.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            What are the artwork requirements?
          </label>
          <p className={STYLES.paragraph}>
            We require artworks to be in CMYK color space and have a minimum
            resolution of 300dpi. A 0.125&quot; bleed from each side of artwork
            is required for most products. We will convert files submitted in
            RGB color space to CMYK before printing and minor color shifts may
            occur.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            Are there File Setup Templates available for download?
          </label>
          <p className={STYLES.paragraph}>
            Yes. Please visit our File Setup Templates page to{" "}
            <Link href="/templates" className={STYLES.link}>
              Download Templates
            </Link>{" "}
            for your preferred design software.
          </p>
        </li>
      </ul>
    ),
  },

  proofing: {
    title: "Proofing",
    content: (
      <ul>
        <li className="mb-5">
          <label className={STYLES.label}>What is a PDF proof?</label>
          <p className={STYLES.paragraph}>
            A PDF proof is a document we prepare upon your request, so you can
            check details like trim lines, folding lines, and colors before we
            begin printing your order.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            How long does it take for PDF proofs to get ready?
          </label>
          <p className={STYLES.paragraph}>
            If you request a PDF proof, it will be ready within 6 hours after
            you place your order. You will receive an email notification once
            your proof is ready. You will need to go to <em>Your Account</em> to
            review and approve your proof so we can continue processing your
            order.
            <span className="block mt-2 text-sm text-gray-600">
              Note: On rare occasions, we find issues in your files that require
              further input from you. In such cases, our experts will contact
              you within 24 business hours.
            </span>
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            Will requesting a PDF proof delay my order?
          </label>
          <p className={STYLES.paragraph}>
            Possibly. Proofs approved before <strong>5PM PST</strong> will go
            into the printing queue that day. Proofs approved after 5PM PST will
            go into the printing queue the following day.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            What if I find a problem in my PDF proof?
          </label>
          <p className={STYLES.paragraph}>
            If you notice any issues in your PDF proof, you can reject it and
            request a new one with additional comments or submit a new file. You
            can always contact{" "}
            <Link href="/contact" className={STYLES.link}>
              Customer Service
            </Link>{" "}
            if you need further assistance.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>
            Do you correct possible spelling errors in my artwork?
          </label>
          <p className={STYLES.paragraph}>
            No. We do not change text or art. We only fix print-related
            technical issues found in your file.
          </p>
        </li>
      </ul>
    ),
  },

  "learning-center": {
    title: "Learning Center",
    content: (
      <ul>
        <li className="mb-5">
          <label className={STYLES.label}>What is bleed?</label>
          <p className={STYLES.paragraph}>
            A bleed is when an image extends beyond the trim edge of the
            product. Add <strong>1/8&quot; (.125&quot;)</strong> to each side.
            For example, a 2&quot; x 3.5&quot; business card should be{" "}
            <strong>2.25&quot; x 3.75&quot;</strong> with bleed.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>What is safe zone?</label>
          <p className={STYLES.paragraph}>
            Safe area is the <strong>1/8&quot;</strong> margin we require
            between the trim line and any critical design elements.
          </p>
        </li>
        <li className="mb-5">
          <label className={STYLES.label}>What is CMYK?</label>
          <p className={STYLES.paragraph}>
            CMYK stands for{" "}
            <strong>Cyan, Magenta, Yellow, and Key (Black)</strong>. These four
            colors are used in full-color offset printing to reproduce a wide
            range of colors.
          </p>
        </li>
      </ul>
    ),
  },
};

// Main component
export default function Page() {
  return (
    <TabsPrimitive.Root
      className="flex w-full flex-col category-tabs mt-8"
      defaultValue="file-specifications"
    >
      <TabsPrimitive.List
        className="flex shrink-0 border-b border-mauve6 overflow-x-auto scrollbar lg:justify-center"
        aria-label="Product information tabs"
      >
        {Object.entries(TAB_CONTENT).map(([key, { title }]) => (
          <TabsPrimitive.Trigger
            key={key}
            className={STYLES.tabTrigger}
            value={key}
          >
            {title}
          </TabsPrimitive.Trigger>
        ))}
      </TabsPrimitive.List>

      {Object.entries(TAB_CONTENT).map(([key, { content }]) => (
        <TabsPrimitive.Content
          key={key}
          className={STYLES.tabContent}
          value={key}
          tabIndex={-1}
        >
          {content}
        </TabsPrimitive.Content>
      ))}
    </TabsPrimitive.Root>
  );
}