import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { CheckCircle, Phone, Mail, MapPin, ArrowRight, Zap, Settings, Shield, Clock, Star } from "lucide-react"

export default function EMSLandingPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="bg-white shadow-sm border-b sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="text-2xl font-bold text-blue-900">TechEMS</div>
          <div className="flex gap-4">
            <Button variant="outline" size="sm">
              <Phone className="w-4 h-4 mr-2" />
              03-1234-5678
            </Button>
            <Button size="sm" className="bg-orange-500 hover:bg-orange-600">
              お問い合わせ
            </Button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-700 text-white py-20">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <Badge className="mb-4 bg-orange-500 hover:bg-orange-600">電子機器製造受託サービス</Badge>
              <h1 className="text-4xl lg:text-5xl font-bold mb-6 leading-tight">
                設計から部品調達・基板製造・実装・組立まで、
                <span className="text-orange-400">ワンストップ</span>
              </h1>
              <p className="text-xl mb-8 text-blue-100">レーザー加工・UVプリントにも対応。小ロット・短納期も柔軟対応</p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button size="lg" className="bg-orange-500 hover:bg-orange-600 text-lg px-8">
                  <ArrowRight className="w-5 h-5 mr-2" />
                  無料見積もり依頼
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="text-white border-white hover:bg-white hover:text-blue-900 text-lg px-8 bg-transparent"
                >
                  資料ダウンロード
                </Button>
              </div>
            </div>
            <div className="relative">
              <img
                src="/placeholder.svg?height=400&width=600"
                alt="電子機器製造の様子"
                className="rounded-lg shadow-2xl"
              />
              <div className="absolute -bottom-6 -left-6 bg-white text-blue-900 p-4 rounded-lg shadow-lg">
                <div className="text-2xl font-bold">15年+</div>
                <div className="text-sm">製造実績</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service Strengths */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">選ばれる3つの強み</h2>
            <p className="text-xl text-gray-600">お客様のニーズに応える、確かな技術力と対応力</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Settings className="w-8 h-8 text-blue-600" />
                </div>
                <CardTitle className="text-xl">ワンストップ対応力</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <CardDescription className="text-base mb-4">
                  部品調達から基板製造、組立、配線、調整、試験まで一括受託
                </CardDescription>
                <ul className="text-sm text-gray-600 space-y-2">
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    工程ごとのアウトソース不要
                  </li>
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    大幅なコスト削減を実現
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Zap className="w-8 h-8 text-orange-600" />
                </div>
                <CardTitle className="text-xl">レーザー加工・UVプリント</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <CardDescription className="text-base mb-4">
                  高精度レーザー加工と高付加価値UVプリント技術
                </CardDescription>
                <ul className="text-sm text-gray-600 space-y-2">
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    精密加工技術
                  </li>
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    高品質印刷対応
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Clock className="w-8 h-8 text-green-600" />
                </div>
                <CardTitle className="text-xl">柔軟なカスタム対応</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <CardDescription className="text-base mb-4">小ロット・短納期から大量生産まで柔軟に対応</CardDescription>
                <ul className="text-sm text-gray-600 space-y-2">
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    最短3日納期
                  </li>
                  <li className="flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                    1個からの小ロット対応
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Service Flow */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">対応サービス工程フロー</h2>
            <p className="text-xl text-gray-600">設計から完成品まで、全工程をサポート</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { step: "01", title: "部品調達", desc: "最適な部品を効率的に調達" },
              { step: "02", title: "基板製造・実装", desc: "高品質な基板製造と実装" },
              { step: "03", title: "組立・配線", desc: "精密な組立と配線作業" },
              { step: "04", title: "調整・試験", desc: "各種試験による品質保証" },
            ].map((item, index) => (
              <Card key={index} className="relative border-2 border-blue-100 hover:border-blue-300 transition-colors">
                <CardHeader className="text-center">
                  <div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-lg font-bold">
                    {item.step}
                  </div>
                  <CardTitle className="text-lg">{item.title}</CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <CardDescription>{item.desc}</CardDescription>
                </CardContent>
                {index < 3 && (
                  <div className="hidden lg:block absolute -right-3 top-1/2 transform -translate-y-1/2">
                    <ArrowRight className="w-6 h-6 text-blue-400" />
                  </div>
                )}
              </Card>
            ))}
          </div>

          <div className="mt-12 bg-blue-50 rounded-lg p-8">
            <h3 className="text-2xl font-bold text-center mb-6">特殊加工サービス</h3>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="flex items-center space-x-4">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                  <Zap className="w-6 h-6 text-orange-600" />
                </div>
                <div>
                  <h4 className="font-semibold">レーザー加工</h4>
                  <p className="text-gray-600">高精度な切断・穴あけ・マーキング</p>
                </div>
              </div>
              <div className="flex items-center space-x-4">
                <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                  <Star className="w-6 h-6 text-purple-600" />
                </div>
                <div>
                  <h4 className="font-semibold">UVプリント</h4>
                  <p className="text-gray-600">高品質な印刷・マーキング技術</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">なぜTechEMSが選ばれるのか</h2>
            <p className="text-xl text-gray-600">他社との違いを数字で実証</p>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="space-y-6">
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <CheckCircle className="w-5 h-5 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">ワンストップ一貫体制</h3>
                    <p className="text-gray-600">
                      複数業者への発注が不要。管理コストを大幅削減し、短納期・高品質を実現
                    </p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Clock className="w-5 h-5 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">短納期対応</h3>
                    <p className="text-gray-600">最短3日納期を実現。緊急案件にも柔軟に対応いたします</p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <Shield className="w-5 h-5 text-orange-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2">品質保証体制</h3>
                    <p className="text-gray-600">ISO9001認証取得。厳格な品質管理で不良率0.1%以下を維持</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-6">
              <Card className="text-center p-6 border-0 shadow-lg">
                <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
                <div className="text-gray-600">顧客満足度</div>
              </Card>
              <Card className="text-center p-6 border-0 shadow-lg">
                <div className="text-3xl font-bold text-green-600 mb-2">3日</div>
                <div className="text-gray-600">最短納期</div>
              </Card>
              <Card className="text-center p-6 border-0 shadow-lg">
                <div className="text-3xl font-bold text-orange-600 mb-2">0.1%</div>
                <div className="text-gray-600">不良率</div>
              </Card>
              <Card className="text-center p-6 border-0 shadow-lg">
                <div className="text-3xl font-bold text-purple-600 mb-2">500+</div>
                <div className="text-gray-600">取引実績</div>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-r from-blue-600 to-blue-700 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold mb-6">まずはお気軽にご相談ください</h2>
          <p className="text-xl mb-8 text-blue-100">
            専門スタッフが丁寧にヒアリングし、最適なソリューションをご提案いたします
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-orange-500 hover:bg-orange-600 text-lg px-8">
              <Phone className="w-5 h-5 mr-2" />
              電話で相談（03-1234-5678）
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-white border-white hover:bg-white hover:text-blue-900 text-lg px-8 bg-transparent"
            >
              <Mail className="w-5 h-5 mr-2" />
              メールで問い合わせ
            </Button>
          </div>
          <p className="mt-4 text-blue-200">営業時間：平日 9:00-18:00 / 土日祝日も対応可能</p>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">よくあるご質問</h2>
            <p className="text-xl text-gray-600">お客様からよくいただくご質問にお答えします</p>
          </div>

          <div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="space-y-4">
              <AccordionItem value="item-1" className="border rounded-lg px-6">
                <AccordionTrigger className="text-left">どんな製品に対応可能ですか？</AccordionTrigger>
                <AccordionContent>
                  産業機器、医療機器、通信機器、自動車関連部品など、幅広い電子機器に対応しております。
                  小型精密機器から大型制御盤まで、お客様のニーズに合わせて柔軟に対応いたします。
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="item-2" className="border rounded-lg px-6">
                <AccordionTrigger className="text-left">小ロット・短納期は対応できますか？</AccordionTrigger>
                <AccordionContent>
                  はい、1個からの小ロット生産に対応しており、最短3日での納期も可能です。
                  試作品や緊急案件にも柔軟に対応いたします。まずはお気軽にご相談ください。
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="item-3" className="border rounded-lg px-6">
                <AccordionTrigger className="text-left">品質保証や検査体制はどうなっていますか？</AccordionTrigger>
                <AccordionContent>
                  ISO9001認証を取得し、厳格な品質管理体制を構築しております。
                  電気試験、機能試験、信頼性試験など、各種検査を実施し、不良率0.1%以下を維持しています。
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="item-4" className="border rounded-lg px-6">
                <AccordionTrigger className="text-left">見積もりはどのくらいで出してもらえますか？</AccordionTrigger>
                <AccordionContent>
                  図面や仕様書をいただければ、通常2-3営業日以内に詳細見積もりをご提出いたします。
                  概算見積もりであれば、当日中にご回答することも可能です。
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="item-5" className="border rounded-lg px-6">
                <AccordionTrigger className="text-left">設計段階からの相談は可能ですか？</AccordionTrigger>
                <AccordionContent>
                  はい、設計段階からのご相談も承っております。
                  製造性を考慮した設計提案や、コスト最適化のアドバイスなど、豊富な経験を活かしてサポートいたします。
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="text-2xl font-bold mb-4">TechEMS</div>
              <p className="text-gray-400 mb-4">電子機器製造受託サービスのリーディングカンパニー</p>
              <div className="flex space-x-4">
                <Button size="sm" className="bg-orange-500 hover:bg-orange-600">
                  お問い合わせ
                </Button>
              </div>
            </div>

            <div>
              <h3 className="font-semibold mb-4">サービス</h3>
              <ul className="space-y-2 text-gray-400">
                <li>部品調達</li>
                <li>基板製造・実装</li>
                <li>組立・配線</li>
                <li>レーザー加工</li>
                <li>UVプリント</li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">会社情報</h3>
              <ul className="space-y-2 text-gray-400">
                <li className="flex items-center">
                  <MapPin className="w-4 h-4 mr-2" />
                  東京都港区○○1-2-3
                </li>
                <li className="flex items-center">
                  <Phone className="w-4 h-4 mr-2" />
                  03-1234-5678
                </li>
                <li className="flex items-center">
                  <Mail className="w-4 h-4 mr-2" />
                  info@techems.co.jp
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">営業時間</h3>
              <ul className="space-y-2 text-gray-400">
                <li>平日：9:00-18:00</li>
                <li>土日祝：対応可能</li>
                <li>（事前予約制）</li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400">© 2024 TechEMS. All rights reserved.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <a href="#" className="text-gray-400 hover:text-white">
                プライバシーポリシー
              </a>
              <a href="#" className="text-gray-400 hover:text-white">
                利用規約
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}