import React, { useState } from 'react';
import { 
  Calendar, MapPin, Users, Info, CheckCircle, Copy, Plane, Coffee, Hotel, 
  Phone, Mail, FileText, Upload, Heart, UserPlus, Shield, AlertCircle, ChevronRight, Printer
} from 'lucide-react';

const XiangqingOfficialForm = () => {
  const [activeTab, setActiveTab] = useState('itinerary'); // 'itinerary' or 'form'
  
  const [formData, setFormData] = useState({
    // 基本資料
    chineseName: '',
    englishName: '',
    gender: 'M',
    birthDate: '',
    lineId: '',
    phone: '',
    email: '',
    
    // 護照
    passportNumber: '',
    passportExpiry: '',
    hasPassportUpload: false, // 模擬上傳狀態

    // 需求
    roomType: 'twin',
    roommateName: '', // 指定同房
    dietary: 'none',
    dietaryNote: '',
    
    // 安全
    emergencyContact: '',
    emergencyPhone: '',
    emergencyRelation: '',
    healthIssues: '',
    agreeTerms: false
  });

  const [showModal, setShowModal] = useState(false);
  const [submittedData, setSubmittedData] = useState('');

  // 翔慶旅行社官方資訊 (Updated from oeoeo.com.tw)
  const agencyInfo = {
    fullName: "翔慶旅行社股份有限公司",
    shortName: "翔慶旅行社",
    license: "交觀甲字第7022號",
    qualityAssurance: "品保北1661",
    phone: "(02)2397-1277",
    phone2: "(02)6605-8155",
    fax: "(02)2393-3699",
    address: "10058台北市中正區新生南路一段6號10樓之2",
    email: "service@oeoeo.com.tw",
    representative: "古明正"
  };

  const tripDetails = {
    title: "宮城偶來（含鳴子溫泉步道）＋磐梯朝日國家公園 6日",
    subTitle: "翔慶旅行社｜客製化團體旅遊專家",
    date: "2025年4月下旬 (暫定 4/18~4/25)",
    airline: "長榮航空 (BR) 或 星宇航空 (JX)",
    highlights: [
      "鳴子溫泉路線：峽谷地形、稜線展望、絕美新綠",
      "奧松島路線：海岸、港灣、田園漁村風光",
      "五色沼自然探勝路：夢幻翡翠色湖水",
      "仙台市區購物與牛舌美食"
    ],
    pricing: [
      { range: "15-20 人", price: "NT$ 73,800" },
      { range: "21-25 人", price: "NT$ 69,800" },
      { range: "26-30 人", price: "NT$ 67,800" }
    ],
    supplements: {
      singleRoom: "NT$ 15,000",
      childNoBed: "扣 NT$ 4,000",
      tips: "NT$ 300 / 人 / 天"
    }
  };

  const itinerary = [
    { day: 1, title: "台北 / 仙台 - 市區散策", desc: "抵達仙台後，若時間許可前往榴岡公園賞晚櫻或仙台城跡。", stay: "仙台國際飯店 或同級", meals: "早：溫暖的家 / 午：機上 / 晚：燒肉吃到飽" },
    { day: 2, title: "鳴子溫泉 → 宮城偶來", desc: "重點步道！峽谷地形與山村景色，4月下旬新綠非常美。距離約10km。", stay: "鳴子溫泉", meals: "早：飯店 / 午：￥3000 / 晚：飯店會席料理" },
    { day: 3, title: "奧松島路線 → 瑞巖寺", desc: "海岸線經典路線，適合健行後的輕鬆步道。距離約9km。", stay: "松島 或 鹽竈", meals: "早：飯店 / 午：￥3000 / 晚：飯店會席料理" },
    { day: 4, title: "五色沼 → 裏磐梯溫泉", desc: "五色沼自然探勝路，湖水呈現強烈青藍/翡翠色。距離約4km。", stay: "裏磐梯", meals: "早：飯店 / 午：￥3000 / 晚：飯店會席料理" },
    { day: 5, title: "中瀬沼展望 → 仙台購物", desc: "眺望磐梯山與湖群。下午返回仙台市區自由購物。", stay: "仙台國際飯店 或同級", meals: "早：飯店 / 午：東北風味餐 / 晚：自理 (發代金￥2000)" },
    { day: 6, title: "仙台 / 台北", desc: "免稅店與一番町商店街最後採買，搭機返台。", stay: "溫暖的家", meals: "早：飯店 / 午：自理 / 晚：機上" }
  ];

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleFileUpload = () => {
    setFormData(prev => ({ ...prev, hasPassportUpload: true }));
    alert("已模擬圖片上傳成功！");
  };

  const isPassportValid = () => {
    if (!formData.passportExpiry) return true;
    const expiry = new Date(formData.passportExpiry);
    const today = new Date();
    const sixMonthsLater = new Date(today.setMonth(today.getMonth() + 6));
    return expiry > sixMonthsLater;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.agreeTerms) {
      alert("請勾選同意報名條款");
      return;
    }

    const summary = `
【${agencyInfo.shortName} 報名表】
行程：${tripDetails.title}
--------------------------------
[基本資料]
中文姓名: ${formData.chineseName}
英文姓名: ${formData.englishName}
性別: ${formData.gender === 'M' ? '男' : '女'}
生日: ${formData.birthDate}
Line ID: ${formData.lineId}
電話: ${formData.phone}
Email: ${formData.email}

[證件]
護照號碼: ${formData.passportNumber}
護照效期: ${formData.passportExpiry} ${!isPassportValid() ? '(注意：效期不足6個月)' : ''}
*護照照片: ${formData.hasPassportUpload ? '已附檔' : '未上傳'}

[需求]
房型: ${formData.roomType === 'single' ? '單人房 (補差價)' : formData.roomType === 'triple' ? '三人房' : '雙人房'}
同房親友: ${formData.roommateName || '無'}
飲食: ${formData.dietary} ${formData.dietaryNote ? `(${formData.dietaryNote})` : ''}

[安全資訊]
緊急聯絡人: ${formData.emergencyContact} (${formData.emergencyRelation})
緊急聯絡電話: ${formData.emergencyPhone}
健康狀況: ${formData.healthIssues || '良好'}
--------------------------------
    `.trim();
    
    setSubmittedData(summary);
    setShowModal(true);
  };

  const copyToClipboard = () => {
    const textArea = document.createElement("textarea");
    textArea.value = submittedData;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      alert(`資料已複製！請傳送給${agencyInfo.shortName}業務專員。`);
    } catch (err) {
      console.error('Unable to copy', err);
    }
    document.body.removeChild(textArea);
  };

  const handlePrint = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 pb-20 print:bg-white print:pb-0">
      {/* Brand Header */}
      <nav className="bg-white shadow-sm sticky top-0 z-30 print:hidden">
        <div className="max-w-4xl mx-auto px-4 py-3 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="bg-blue-800 text-white px-2 py-1 rounded font-bold text-lg">翔慶</div>
            <div className="hidden sm:block">
              <span className="text-xl font-bold text-gray-800 tracking-wide block leading-none">{agencyInfo.shortName}</span>
              <span className="text-xs text-gray-500 tracking-wider">客製化團體旅遊專家</span>
            </div>
            <div className="sm:hidden">
              <span className="text-lg font-bold text-gray-800 tracking-wide">{agencyInfo.shortName}</span>
            </div>
          </div>
          <a href={`tel:${agencyInfo.phone.replace(/[\(\)\-\s]/g, '')}`} className="flex items-center text-blue-700 font-bold text-sm bg-blue-50 px-3 py-2 rounded-full hover:bg-blue-100 transition">
            <Phone className="w-4 h-4 mr-1"/> 
            <span className="hidden sm:inline">聯絡我們</span>
            <span className="sm:hidden">撥打</span>
          </a>
        </div>
      </nav>

      {/* Hero */}
      <div className="bg-gradient-to-br from-blue-900 to-slate-800 text-white pt-10 pb-20 px-4 relative overflow-hidden print:bg-none print:text-black print:p-0 print:mb-4">
        {/* Background Pattern */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full blur-3xl transform translate-x-1/3 -translate-y-1/3 print:hidden"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-400 opacity-5 rounded-full blur-3xl transform -translate-x-1/3 translate-y-1/3 print:hidden"></div>
        
        <div className="max-w-4xl mx-auto text-center relative z-10 print:text-left">
          <span className="inline-block bg-white/10 backdrop-blur border border-white/20 text-blue-100 text-xs px-3 py-1 rounded-full mb-4 print:border-black print:text-black print:bg-transparent">
            {tripDetails.subTitle}
          </span>
          <h1 className="text-2xl sm:text-4xl font-bold mb-6 leading-tight tracking-tight shadow-sm print:shadow-none print:text-3xl print:mb-2">
            {tripDetails.title}
          </h1>
          <div className="flex justify-center flex-wrap gap-3 text-sm text-blue-100 print:text-black print:justify-start">
            <span className="flex items-center bg-black/20 px-3 py-1.5 rounded-lg print:bg-transparent print:p-0 print:mr-4"><Calendar className="w-4 h-4 mr-2 text-yellow-400 print:text-black"/> {tripDetails.date}</span>
            <span className="flex items-center bg-black/20 px-3 py-1.5 rounded-lg print:bg-transparent print:p-0"><Plane className="w-4 h-4 mr-2 text-yellow-400 print:text-black"/> {tripDetails.airline}</span>
          </div>
        </div>
      </div>

      {/* Main Content Area with Tabs */}
      <div className="max-w-4xl mx-auto px-4 -mt-10 relative z-20 print:mt-0">
        
        {/* Tabs - Hidden in Print */}
        <div className="flex shadow-lg rounded-t-xl overflow-hidden bg-white mb-0 border-b border-gray-100 print:hidden">
          <button 
            onClick={() => setActiveTab('itinerary')}
            className={`flex-1 py-4 text-center font-bold text-sm sm:text-base flex items-center justify-center transition-colors ${activeTab === 'itinerary' ? 'bg-white text-blue-800 border-b-4 border-blue-800' : 'bg-gray-50 text-gray-500 hover:bg-gray-100 border-b-4 border-transparent'}`}
          >
            <MapPin className={`w-4 h-4 mr-2 ${activeTab === 'itinerary' ? 'text-blue-600' : 'text-gray-400'}`} />
            行程與費用
          </button>
          <button 
            onClick={() => setActiveTab('form')}
            className={`flex-1 py-4 text-center font-bold text-sm sm:text-base flex items-center justify-center transition-colors ${activeTab === 'form' ? 'bg-white text-blue-800 border-b-4 border-blue-800' : 'bg-gray-50 text-gray-500 hover:bg-gray-100 border-b-4 border-transparent'}`}
          >
            <FileText className={`w-4 h-4 mr-2 ${activeTab === 'form' ? 'text-blue-600' : 'text-gray-400'}`} />
            填寫報名表
          </button>
        </div>

        <div className="bg-white shadow-xl rounded-b-xl min-h-[500px] print:shadow-none">
          
          {/* TAB 1: Itinerary */}
          {(activeTab === 'itinerary' || typeof window !== 'undefined' && window.matchMedia && window.matchMedia('print').matches) && (
            <div className={`p-6 sm:p-8 animate-fade-in ${activeTab !== 'itinerary' ? 'hidden print:block' : ''}`}>
              {/* Highlights */}
              <div className="mb-8 print:break-inside-avoid">
                <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
                  <span className="bg-emerald-100 p-1.5 rounded-full mr-3 print:hidden">
                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                  </span>
                  行程亮點
                </h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 print:grid-cols-2">
                  {tripDetails.highlights.map((h, i) => (
                    <div key={i} className="flex items-start p-3 rounded-lg text-sm text-gray-700 bg-gray-50 hover:bg-emerald-50 transition-colors border border-transparent hover:border-emerald-100 print:bg-transparent print:border-gray-200 print:border">
                      <ChevronRight className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0 text-emerald-500 print:text-black" />
                      {h}
                    </div>
                  ))}
                </div>
              </div>

              {/* Pricing */}
              <div className="mb-8 border-t border-gray-100 pt-6 print:break-inside-avoid">
                <h3 className="text-xl font-bold text-gray-800 mb-4 flex items-center">
                  <span className="bg-blue-100 p-1.5 rounded-full mr-3 print:hidden">
                    <Info className="w-5 h-5 text-blue-600" />
                  </span>
                  團費參考
                </h3>
                <div className="bg-white rounded-lg overflow-hidden border border-gray-200 shadow-sm print:border-gray-300">
                  <div className="grid grid-cols-3 bg-gray-50 p-3 text-xs font-bold text-gray-500 uppercase text-center tracking-wider print:bg-gray-100">
                    <div>每車人數</div>
                    <div className="col-span-2">團費 (NET)</div>
                  </div>
                  {tripDetails.pricing.map((p, i) => (
                    <div key={i} className="grid grid-cols-3 p-4 border-b border-gray-100 last:border-0 hover:bg-blue-50/30 transition text-sm items-center print:border-gray-200">
                      <div className="text-center font-bold text-gray-700">{p.range}</div>
                      <div className="col-span-2 text-center text-blue-700 font-bold text-lg print:text-black">{p.price}</div>
                    </div>
                  ))}
                </div>
                <div className="mt-4 bg-yellow-50 p-4 rounded-lg border border-yellow-100 print:bg-white print:border-gray-200">
                  <p className="text-sm font-bold text-yellow-800 mb-2 print:text-black">費用備註：</p>
                  <ul className="text-xs text-yellow-700 space-y-1 list-disc list-inside print:text-black">
                    <li>單人房差：{tripDetails.supplements.singleRoom}</li>
                    <li>司導小費：{tripDetails.supplements.tips}</li>
                    <li>小孩不佔床：{tripDetails.supplements.childNoBed}</li>
                  </ul>
                </div>
              </div>

              {/* Day by Day */}
              <div>
                <h3 className="text-xl font-bold text-gray-800 mb-6">每日行程概要</h3>
                <div className="space-y-0">
                  {itinerary.map((day, idx) => (
                    <div key={day.day} className="flex group relative pb-8 last:pb-0 print:pb-4 print:break-inside-avoid">
                      {/* Timeline Line */}
                      {idx !== itinerary.length - 1 && (
                        <div className="absolute top-8 left-[15px] bottom-0 w-0.5 bg-gray-200 group-hover:bg-blue-200 transition-colors print:border-l print:border-gray-300 print:bg-transparent"></div>
                      )}
                      
                      <div className="mr-5 flex flex-col items-center relative z-10">
                        <div className="w-8 h-8 rounded-full bg-white text-blue-800 flex items-center justify-center font-bold text-sm border-2 border-blue-600 shadow-sm group-hover:bg-blue-600 group-hover:text-white transition-all transform group-hover:scale-110 print:border-black print:text-black print:shadow-none">
                          {day.day}
                        </div>
                      </div>
                      <div className="flex-1 bg-white p-4 rounded-xl border border-gray-100 shadow-sm group-hover:shadow-md transition-all -mt-2 print:border-gray-200 print:shadow-none print:p-2">
                        <h4 className="font-bold text-gray-800 mb-1 text-lg">{day.title}</h4>
                        <p className="text-sm text-gray-600 mb-3 leading-relaxed">{day.desc}</p>
                        <div className="flex flex-wrap gap-3 text-xs">
                          <span className="flex items-center px-2 py-1 bg-indigo-50 text-indigo-700 rounded print:bg-transparent print:text-black print:border print:border-gray-300"><Hotel className="w-3 h-3 mr-1"/> {day.stay}</span>
                          <span className="flex items-center px-2 py-1 bg-orange-50 text-orange-700 rounded print:bg-transparent print:text-black print:border print:border-gray-300"><Coffee className="w-3 h-3 mr-1"/> {day.meals}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-10 text-center sticky bottom-4 z-20 print:hidden">
                <button 
                  onClick={() => setActiveTab('form')}
                  className="bg-blue-700 text-white font-bold py-3 px-10 rounded-full shadow-xl hover:bg-blue-800 transition transform hover:-translate-y-1 hover:shadow-2xl border-2 border-white/20 ring-4 ring-blue-700/20"
                >
                  前往填寫報名表
                </button>
              </div>
            </div>
          )}

          {/* TAB 2: Form */}
          {activeTab === 'form' && (
            <div className="p-6 sm:p-8 animate-fade-in bg-gray-50/30 print:hidden">
              <form onSubmit={handleSubmit} className="space-y-6">
                
                {/* Section 1: Basic Info */}
                <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                  <h4 className="font-bold text-gray-800 border-b border-gray-100 pb-3 mb-5 flex items-center">
                    <span className="bg-blue-100 p-1 rounded mr-2"><Users className="w-4 h-4 text-blue-600" /></span>
                    個人基本資料
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">中文姓名 <span className="text-red-500">*</span></label>
                      <input type="text" name="chineseName" required className="form-input" placeholder="王小明" value={formData.chineseName} onChange={handleInputChange} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">英文姓名 (同護照) <span className="text-red-500">*</span></label>
                      <input type="text" name="englishName" required className="form-input uppercase" placeholder="WANG, XIAO-MING" value={formData.englishName} onChange={handleInputChange} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">性別</label>
                      <div className="flex gap-4 mt-1">
                        <label className="flex items-center cursor-pointer bg-gray-50 px-4 py-2 rounded border border-gray-200 hover:bg-blue-50 hover:border-blue-200 transition">
                          <input type="radio" name="gender" value="M" checked={formData.gender === 'M'} onChange={handleInputChange} className="mr-2 text-blue-600 focus:ring-blue-500" /> 
                          <span className="text-sm">男</span>
                        </label>
                        <label className="flex items-center cursor-pointer bg-gray-50 px-4 py-2 rounded border border-gray-200 hover:bg-pink-50 hover:border-pink-200 transition">
                          <input type="radio" name="gender" value="F" checked={formData.gender === 'F'} onChange={handleInputChange} className="mr-2 text-pink-600 focus:ring-pink-500" /> 
                          <span className="text-sm">女</span>
                        </label>
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">出生年月日 <span className="text-red-500">*</span></label>
                      <input type="date" name="birthDate" required className="form-input" value={formData.birthDate} onChange={handleInputChange} />
                    </div>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-5">
                     <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">聯絡電話 <span className="text-red-500">*</span></label>
                      <input type="tel" name="phone" required className="form-input" placeholder="0912-345-678" value={formData.phone} onChange={handleInputChange} />
                    </div>
                     <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">Line ID <span className="text-blue-500 text-xs">(方便聯繫)</span></label>
                      <input type="text" name="lineId" className="form-input" placeholder="選填" value={formData.lineId} onChange={handleInputChange} />
                    </div>
                  </div>
                  <div className="mt-5">
                    <label className="block text-xs font-bold text-gray-500 mb-1.5">Email <span className="text-red-500">*</span></label>
                    <input type="email" name="email" required className="form-input" placeholder="example@mail.com" value={formData.email} onChange={handleInputChange} />
                  </div>
                </div>

                {/* Section 2: Passport */}
                <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                  <h4 className="font-bold text-gray-800 border-b border-gray-100 pb-3 mb-5 flex items-center">
                     <span className="bg-blue-100 p-1 rounded mr-2"><Shield className="w-4 h-4 text-blue-600" /></span>
                    護照與證件
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                     <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">護照號碼</label>
                      <input type="text" name="passportNumber" className="form-input uppercase" placeholder="例如: 312345678" value={formData.passportNumber} onChange={handleInputChange} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">護照效期 (需六個月以上)</label>
                      <input type="date" name="passportExpiry" className={`form-input ${!isPassportValid() ? 'border-red-500 bg-red-50' : ''}`} value={formData.passportExpiry} onChange={handleInputChange} />
                      {!isPassportValid() && <p className="text-red-500 text-xs mt-1 flex items-center"><AlertCircle className="w-3 h-3 mr-1"/> 效期可能不足</p>}
                    </div>
                  </div>
                  <div className="mt-5">
                    <label className="block text-xs font-bold text-gray-500 mb-2">上傳護照照片 (有照片面)</label>
                    <div 
                      onClick={handleFileUpload}
                      className={`border-2 border-dashed rounded-xl p-8 flex flex-col items-center justify-center cursor-pointer transition-all ${formData.hasPassportUpload ? 'border-emerald-500 bg-emerald-50' : 'border-gray-300 hover:border-blue-400 hover:bg-blue-50/50'}`}
                    >
                      {formData.hasPassportUpload ? (
                        <>
                          <CheckCircle className="w-10 h-10 text-emerald-500 mb-3" />
                          <span className="text-sm text-emerald-700 font-bold">已模擬上傳成功</span>
                        </>
                      ) : (
                        <>
                          <Upload className="w-10 h-10 text-gray-400 mb-3" />
                          <span className="text-sm text-gray-600 font-medium">點擊此處上傳圖片 (模擬)</span>
                          <span className="text-xs text-gray-400 mt-1">支援 JPG, PNG, PDF 檔案</span>
                        </>
                      )}
                    </div>
                  </div>
                </div>

                {/* Section 3: Preferences */}
                <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                  <h4 className="font-bold text-gray-800 border-b border-gray-100 pb-3 mb-5 flex items-center">
                    <span className="bg-blue-100 p-1 rounded mr-2"><Hotel className="w-4 h-4 text-blue-600" /></span>
                    住宿與飲食需求
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">房型需求</label>
                      <div className="relative">
                        <select name="roomType" className="form-select appearance-none" value={formData.roomType} onChange={handleInputChange}>
                          <option value="twin">雙人房 (兩小床)</option>
                          <option value="double">雙人房 (一大床)</option>
                          <option value="single">單人房 (需補差價)</option>
                          <option value="triple">三人房 (加床)</option>
                        </select>
                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                          <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                        </div>
                      </div>
                    </div>
                    <div>
                       <label className="block text-xs font-bold text-gray-500 mb-1.5">指定同房親友姓名</label>
                       <div className="relative">
                         <UserPlus className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
                         <input type="text" name="roommateName" className="form-input pl-10" placeholder="若無免填" value={formData.roommateName} onChange={handleInputChange} />
                       </div>
                    </div>
                  </div>
                  <div className="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">特殊飲食</label>
                      <div className="relative">
                        <select name="dietary" className="form-select appearance-none" value={formData.dietary} onChange={handleInputChange}>
                          <option value="none">無特殊需求</option>
                          <option value="vegetarian-whole">全素</option>
                          <option value="vegetarian-egg">蛋奶素</option>
                          <option value="no-beef">不吃牛</option>
                          <option value="no-pork">不吃豬</option>
                          <option value="seafood-allergy">海鮮過敏</option>
                          <option value="other">其他 (請備註)</option>
                        </select>
                        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                          <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                        </div>
                      </div>
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">飲食備註說明</label>
                      <input type="text" name="dietaryNote" className="form-input" placeholder="例如：對花生嚴重過敏" value={formData.dietaryNote} onChange={handleInputChange} />
                    </div>
                  </div>
                </div>

                {/* Section 4: Emergency & Health */}
                <div className="bg-white p-6 rounded-xl border border-orange-200 shadow-sm">
                  <h4 className="font-bold text-gray-800 border-b border-orange-100 pb-3 mb-5 flex items-center">
                    <span className="bg-orange-100 p-1 rounded mr-2"><Heart className="w-4 h-4 text-orange-600" /></span>
                    安全與緊急聯絡人
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">緊急聯絡人姓名 <span className="text-red-500">*</span></label>
                      <input type="text" name="emergencyContact" required className="form-input" value={formData.emergencyContact} onChange={handleInputChange} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">關係 <span className="text-red-500">*</span></label>
                      <input type="text" name="emergencyRelation" required className="form-input" placeholder="例如: 父子" value={formData.emergencyRelation} onChange={handleInputChange} />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-500 mb-1.5">緊急聯絡電話 <span className="text-red-500">*</span></label>
                      <input type="tel" name="emergencyPhone" required className="form-input" value={formData.emergencyPhone} onChange={handleInputChange} />
                    </div>
                  </div>
                  <div className="mt-5">
                     <label className="block text-xs font-bold text-gray-500 mb-1.5">個人健康狀況聲明 (針對健行行程)</label>
                     <textarea name="healthIssues" className="form-input h-24 resize-none" placeholder="若有高血壓、心臟病、氣喘或近期手術，請務必告知，以便領隊留意。" value={formData.healthIssues} onChange={handleInputChange}></textarea>
                  </div>
                </div>

                {/* Terms */}
                <div className="flex items-start space-x-3 pt-4 px-2">
                  <input 
                    type="checkbox" 
                    id="terms" 
                    name="agreeTerms" 
                    checked={formData.agreeTerms} 
                    onChange={handleInputChange} 
                    className="mt-1 w-5 h-5 text-blue-600 rounded focus:ring-blue-500 border-gray-300"
                  />
                  <label htmlFor="terms" className="text-sm text-gray-600 cursor-pointer select-none leading-relaxed">
                    我已確認以上資料正確無誤，並同意 <span className="text-blue-600 underline hover:text-blue-800">報名須知與個資使用條款</span>。
                  </label>
                </div>

                <div className="flex gap-4">
                  <button
                    type="submit"
                    className="flex-1 bg-blue-700 text-white font-bold py-4 px-4 rounded-xl shadow-lg hover:bg-blue-800 transition duration-300 flex items-center justify-center text-lg hover:shadow-xl transform active:scale-95"
                  >
                    <Copy className="w-5 h-5 mr-2" />
                    產生完整報名資料
                  </button>
                </div>
              </form>
            </div>
          )}
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-12 mt-20 border-t border-slate-800 print:hidden">
        <div className="max-w-4xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div>
              <h5 className="text-white font-bold text-lg mb-4">{agencyInfo.fullName}</h5>
              <div className="space-y-2 text-sm">
                <p className="flex items-start"><MapPin className="w-4 h-4 mr-2 mt-1 flex-shrink-0 text-slate-500"/> {agencyInfo.address}</p>
                <p className="flex items-center"><Phone className="w-4 h-4 mr-2 text-slate-500"/> {agencyInfo.phone} / {agencyInfo.phone2}</p>
                <p className="flex items-center"><Mail className="w-4 h-4 mr-2 text-slate-500"/> {agencyInfo.email}</p>
              </div>
            </div>
            <div className="md:text-right">
              <h5 className="text-white font-bold text-lg mb-4">公司資訊</h5>
              <div className="space-y-2 text-sm">
                 <p>代表人：{agencyInfo.representative}</p>
                 <p>{agencyInfo.license}</p>
                 <p>{agencyInfo.qualityAssurance}</p>
              </div>
            </div>
          </div>
          <div className="border-t border-slate-800 pt-8 text-center text-xs text-slate-600">
            <p>© 2025 {agencyInfo.shortName} All rights reserved.</p>
          </div>
        </div>
      </footer>

      {/* Modal */}
      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4 backdrop-blur-sm animate-fade-in print:hidden">
          <div className="bg-white rounded-xl shadow-2xl max-w-lg w-full overflow-hidden animate-fade-in-up">
            <div className="bg-blue-700 px-6 py-4 flex items-center justify-between text-white">
              <h3 className="font-bold text-lg flex items-center"><CheckCircle className="w-5 h-5 mr-2"/> 報名資料彙整成功</h3>
              <button onClick={() => setShowModal(false)} className="hover:text-gray-200 transition">✕</button>
            </div>
            <div className="p-6">
              <p className="text-sm text-gray-600 mb-3">請複製下方內容，透過 Line 或 Email 傳送給您的業務窗口。</p>
              <div className="bg-slate-100 p-4 rounded-lg text-xs font-mono text-slate-700 whitespace-pre-wrap max-h-60 overflow-y-auto mb-5 border border-slate-200 shadow-inner">
                {submittedData}
              </div>
              <div className="flex gap-3">
                <button onClick={copyToClipboard} className="flex-1 bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 flex justify-center items-center transition shadow-md">
                  <Copy className="w-4 h-4 mr-2" /> 複製資料
                </button>
                <button onClick={() => setShowModal(false)} className="flex-1 bg-gray-100 text-gray-700 font-bold py-3 rounded-lg hover:bg-gray-200 transition border border-gray-300">
                  關閉
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Global Styles */}
      <style>{`
        .form-input {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid #e2e8f0;
          border-radius: 0.5rem;
          outline: none;
          transition: all 0.2s;
          background-color: #f8fafc;
        }
        .form-input:focus {
          border-color: #3b82f6;
          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          background-color: #ffffff;
        }
        .form-select {
          width: 100%;
          padding: 0.75rem 1rem;
          border: 1px solid #e2e8f0;
          border-radius: 0.5rem;
          outline: none;
          background-color: #f8fafc;
          cursor: pointer;
        }
        .form-select:focus {
          border-color: #3b82f6;
          background-color: #ffffff;
        }
        @keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .animate-fade-in {
          animation: fade-in 0.3s ease-out forwards;
        }
        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
          animation: fade-in-up 0.3s ease-out forwards;
        }
        @media print {
          @page { margin: 1cm; }
          body { -webkit-print-color-adjust: exact; }
        }
      `}</style>
    </div>
  );
};

export default XiangqingOfficialForm;