"use client";

import Link from "next/link";
import { HelpCircle, MessageSquare, Mail, ChevronRight } from "lucide-react";

const FAQ_ITEMS = [
  {
    question: "Sample Question 1?",
    answer:
      "This is a sample answer for frequently asked question 1. Replace this with actual content when available.",
  },
  {
    question: "Sample Question 2?",
    answer:
      "This is a sample answer for frequently asked question 2. Replace this with actual content when available.",
  },
  {
    question: "Sample Question 3?",
    answer:
      "This is a sample answer for frequently asked question 3. Replace this with actual content when available.",
  },
  {
    question: "Sample Question 4?",
    answer:
      "This is a sample answer for frequently asked question 4. Replace this with actual content when available.",
  },
];

/**
 * PublicSupportView - Public FAQ and support landing page
 */
export function PublicSupportView() {
  return (
    <div className="max-w-4xl mx-auto space-y-16">
      {/* Header */}
      <div className="text-center space-y-4">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-2 text-primary">
          <HelpCircle className="h-8 w-8" />
        </div>
        <h1 className="text-3xl font-bold text-foreground">How Can We Help?</h1>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          Questions about our services? Our English-speaking team is ready to assist. Find answers
          below or reach out directly.
        </p>
      </div>

      {/* Contact Options */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Link
          href="/contact"
          className="group bg-card rounded-2xl border border-border p-6 hover:border-primary/50 hover:shadow-md transition-all duration-300"
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center flex-shrink-0 text-primary">
              <Mail className="h-6 w-6" />
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
                Send us a message
              </h3>
              <p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
                Fill out our contact form and we'll get back to you within 24 hours.
              </p>
            </div>
            <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors mt-1" />
          </div>
        </Link>

        <a
          href="mailto:support@assist-solutions.jp"
          className="group bg-card rounded-2xl border border-border p-6 hover:border-primary/50 hover:shadow-md transition-all duration-300"
        >
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center flex-shrink-0 text-blue-500">
              <MessageSquare className="h-6 w-6" />
            </div>
            <div className="flex-1 min-w-0">
              <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
                Email Support
              </h3>
              <p className="text-sm text-muted-foreground mt-1.5 leading-relaxed truncate">
                support@assist-solutions.jp
              </p>
            </div>
            <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors mt-1" />
          </div>
        </a>
      </div>

      {/* FAQ Section */}
      <div className="space-y-6">
        <h2 className="text-2xl font-semibold text-foreground text-center">
          Frequently Asked Questions
        </h2>
        <div className="bg-card rounded-2xl border border-border divide-y divide-border">
          {FAQ_ITEMS.map((item, index) => (
            <details key={index} className="group">
              <summary className="flex items-center justify-between cursor-pointer list-none p-6 hover:bg-muted/30 transition-colors">
                <span className="font-medium text-foreground pr-4 group-hover:text-primary transition-colors">
                  {item.question}
                </span>
                <ChevronRight className="h-5 w-5 text-muted-foreground group-open:rotate-90 transition-transform flex-shrink-0" />
              </summary>
              <div className="px-6 pb-6 pt-0">
                <p className="text-muted-foreground text-sm leading-relaxed">{item.answer}</p>
              </div>
            </details>
          ))}
        </div>
      </div>

      {/* Existing Customer */}
      <div className="text-center pt-8 border-t border-border">
        <p className="text-muted-foreground">
          Already have an account?{" "}
          <Link
            href="/auth/login"
            className="font-semibold text-primary hover:text-primary/80 hover:underline transition-colors"
          >
            Sign in
          </Link>{" "}
          to access your dashboard and support cases.
        </p>
      </div>
    </div>
  );
}

export default PublicSupportView;
