export default function Home() {
  return (
    <main className="bg-[#faf8f5] text-stone-800 min-h-screen">
      
      {/* หน้าปก Responsive Hero Banner */}
      <section className="relative min-h-[50vh] sm:min-h-[60vh] md:min-h-[70vh] flex items-center justify-center bg-black px-4 py-16">
        <img src="https://images.unsplash.com/photo-1605235889708-3232bb82a7a9?q=80&w=2000" 
             className="absolute inset-0 w-full h-full object-cover opacity-60" />
        <div className="relative z-10 text-center text-white max-w-4xl mx-auto">
          <h1 className="text-4xl sm:text-6xl md:text-7xl font-bold mb-4 drop-shadow-lg tracking-wider font-serif">fleur d'or</h1>
          <p className="text-base sm:text-xl md:text-2xl font-light leading-relaxed px-2">
            มนต์เสน่ห์สีทองแห่งขุนเขา: รากเหง้าประวัติศาสตร์ นวัตกรรมคุณค่า และความงามจาก "ดอกบัวตอง" แม่ฮ่องสอน
          </p>
        </div>
      </section>

      {/* ประวัติความเป็นมา */}
      <section className="max-w-5xl mx-auto py-12 sm:py-16 md:py-24 px-4 sm:px-6 md:px-8 text-center">
        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8a6b32] mb-6 tracking-wide font-serif">ประวัติความเป็นมา</h2>
        <p className="text-sm sm:text-base md:text-lg text-stone-600 leading-relaxed mb-4 max-w-3xl mx-auto">
          เบื้องหลังความงามของดอกบัวตอง (Mexican Sunflower) มีจุดเริ่มต้นจากมิชชันนารีชาวเม็กซิกัน 
          ที่เดินทางมาเผยแผ่ศาสนาและให้ความช่วยเหลือชุมชนบนภูเขาสูงในจังหวัดแม่ฮ่องสอน
        </p>
        <p className="text-sm sm:text-base md:text-lg text-stone-600 leading-relaxed max-w-3xl mx-auto">
          ด้วยความคิดถึงบ้านเกิด จึงนำเมล็ดพันธุ์มาปลูกไว้ จนกาลเวลาผ่านไป เมล็ดได้กระจายไปทั่วผืนป่า 
          กลายเป็นความงดงามที่หาชมไม่ได้จากจังหวัดอื่น และถูกยกให้เป็น "ดอกไม้ประจำจังหวัดแม่ฮ่องสอน"
        </p>
      </section>

    </main>
  );
}

      <section className="max-w-5xl mx-auto py-10 sm:py-16 px-4 sm:px-6 md:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
          <div className="w-full overflow-hidden rounded-2xl shadow-lg">
            <img src="https://images.unsplash.com/photo-1632551571216-92cba7234661?q=80&w=800" 
                 className="w-full h-64 sm:h-80 md:h-96 object-cover hover:scale-105 transition duration-500" />
          </div>
          <div className="text-left">
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8a6b32] mb-4 font-serif">พื้นที่พบและการจัดการ</h2>
            <p className="text-sm sm:text-base md:text-lg text-stone-600 leading-relaxed mb-4">
              ทุ่งดอกบัวตองจะบานสะพรั่งสุดลูกหูลูกตาในช่วงเดือน พฤศจิกายนถึงธันวาคม ของทุกปี 
              ดึงดูดนักท่องเที่ยวและสร้างรายได้สู่จังหวัดแม่ฮ่องสอน
            </p>
            <p className="text-sm sm:text-base md:text-lg text-stone-600 leading-relaxed">
              อย่างไรก็ตาม ในเชิงนิเวศวิทยา บัวตองถือเป็น พืชต่างถิ่นรุกราน (Alien Invasive Species) 
              ที่เพิ่มความเสี่ยงไฟป่า เราจึงนำแนวคิดการตัดแต่งควบคุมมาเปลี่ยนวัชพืชให้เป็นสารสกัดทรงคุณค่า
            </p>
          </div>
        </div>
      </section>

      <section className="bg-white py-12 sm:py-16 md:py-20">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 md:px-8">
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8a6b32] text-center mb-8 sm:mb-12 font-serif">คุณสมบัติและงานวิจัย</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
            <div className="bg-[#faf8f5] p-6 sm:p-8 rounded-2xl border border-stone-200 shadow-sm">
              <h3 className="text-xl sm:text-2xl font-bold text-[#8a6b32] mb-3 sm:mb-4">🌿 นวัตกรรมสารสกัด</h3>
              <p className="text-stone-600 text-sm sm:text-base mb-3 leading-relaxed">จากการควบคุมวัชพืชสู่สารสกัดทรงคุณค่า พบว่าอุดมไปด้วยสารออกฤทธิ์สำคัญ ได้แก่:</p>
              <ul className="list-disc pl-5 text-stone-700 space-y-1 sm:space-y-2 text-sm sm:text-base font-medium">
                <li>Sesquiterpene Lactones</li>
                <li>Flavonoids</li>
                <li>Phenolics</li>
              </ul>
            </div>
            <div className="bg-[#faf8f5] p-6 sm:p-8 rounded-2xl border border-stone-200 shadow-sm">
              <h3 className="text-xl sm:text-2xl font-bold text-[#8a6b32] mb-3 sm:mb-4">🔬 งานวิจัยรองรับ</h3>
              <p className="text-stone-600 text-sm sm:text-base leading-relaxed">
                การวิจัยระบุชัดเจนว่าสารสกัดจากดอกบัวตองมีฤทธิ์เด่นในการ ต้านอนุมูลอิสระ ต้านการอักเสบ และต้านเชื้อแบคทีเรีย 
                ซึ่งมีประสิทธิภาพไม่ด้อยไปกว่าพืชสมุนไพรยอดนิยมที่ใช้ในเวชสำอางทั่วไป เช่น ใบบัวบก
              </p>
            </div>
          </div>
        </div>
      </section>

export default function Home() {
  const products = [
    { 
      id: 1, 
      name: "fleur d'or Bua Tong Serum", 
      desc: "เซรั่มบำรุงผิวที่อุดมไปด้วย Flavonoids มีฤทธิ์ต้านการอักเสบ ดูแลผิวพรรณอย่างอ่อนโยนและปลอดภัย", 
      img: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?q=80&w=400" 
    },
    { 
      id: 2, 
      name: "fleur d'or Anti-oxidant Cream", 
      desc: "ครีมบำรุงพร้อมสารต้านอนุมูลอิสระจากดอกบัวตอง ป้องกันแบคทีเรียและช่วยสร้างอาชีพให้ชุมชนแม่ฮ่องสอน", 
      img: "https://images.unsplash.com/photo-1608248593842-8d76db9ee606?q=80&w=400" 
    }
  ];

  return (
    <!-- ... โค้ด section อื่นๆ ... -->
    
      <section className="max-w-6xl mx-auto py-12 sm:py-16 md:py-24 px-4 sm:px-6 md:px-8">
        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#8a6b32] text-center mb-8 sm:mb-12 font-serif">ผลิตภัณฑ์ของเรา</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8 max-w-3xl mx-auto">
          {products.map((item) => (
            <div key={item.id} className="bg-white rounded-2xl shadow-sm border border-stone-200 overflow-hidden hover:shadow-md transition flex flex-col">
              <img src={item.img} className="w-full h-48 sm:h-64 object-cover" />
              <div className="p-5 sm:p-6 flex-1 flex flex-col justify-between">
                <div>
                  <h3 className="font-bold text-lg sm:text-xl text-stone-800 font-serif">{item.name}</h3>
                  <p className="text-stone-600 mt-2 leading-relaxed text-xs sm:text-sm">{item.desc}</p>
                </div>
                <button className="mt-4 w-full py-2.5 rounded-full border border-[#8a6b32] text-[#8a6b32] text-xs sm:text-sm uppercase tracking-wider hover:bg-[#8a6b32] hover:text-white transition">
                  ดูรายละเอียด
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>
  /* ... </main> */