import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

export default function GoldSilverBuyerLanding() {
  const [form, setForm] = useState({ name: "", phone: "", email: "", note: "" });
  const [status, setStatus] = useState(null);
  const [goldPrice, setGoldPrice] = useState(null);
  const [silverPrice, setSilverPrice] = useState(null);
  const [gramsGold, setGramsGold] = useState(0);
  const [gramsSilver, setGramsSilver] = useState(0);
  const [estimatedGold, setEstimatedGold] = useState(0);
  const [estimatedSilver, setEstimatedSilver] = useState(0);

  useEffect(() => {
    fetchPrices();
  }, []);

  async function fetchPrices() {
    try {
      const res = await fetch("https://api.metals.dev/v1/latest?api_key=demo&base=USD&symbols=XAU,XAG");
      const data = await res.json();
      const gold = data?.metals?.XAU || 0;
      const silver = data?.metals?.XAG || 0;
      setGoldPrice(gold);
      setSilverPrice(silver);
    } catch (err) {
      console.error("Price fetch error", err);
      setGoldPrice(null);
      setSilverPrice(null);
    }
  }

  useEffect(() => {
    if (goldPrice && gramsGold) {
      const val = (goldPrice / 31.1035) * gramsGold;
      setEstimatedGold(val);
    }
  }, [goldPrice, gramsGold]);

  useEffect(() => {
    if (silverPrice && gramsSilver) {
      const val = (silverPrice / 31.1035) * gramsSilver;
      setEstimatedSilver(val);
    }
  }, [silverPrice, gramsSilver]);

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((s) => ({ ...s, [name]: value }));
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus({ type: "sending", message: "שולח..." });
    try {
      const res = await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        setStatus({ type: "success", message: "תודה! נחזור אליך בהקדם." });
        setForm({ name: "", phone: "", email: "", note: "" });
      } else {
        throw new Error();
      }
    } catch {
      setStatus({ type: "error", message: "אירעה שגיאה בשליחה, אנא נסה שוב." });
    }
  }

  return (
    <main className="min-h-screen bg-gradient-to-br from-yellow-50 via-white to-gray-100 text-gray-900">
      <header className="bg-gradient-to-r from-yellow-400 via-amber-300 to-yellow-200 shadow">
        <div className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-800">קניית זהב וכסף | buygold-silver.co.il</h1>
          <nav className="hidden md:flex gap-6 text-sm font-medium">
            <a href="#why" className="hover:text-amber-700">למה אנחנו</a>
            <a href="#calculator" className="hover:text-amber-700">מחשבון</a>
            <a href="#contact" className="hover:text-amber-700">צור קשר</a>
          </nav>
        </div>
      </header>

      <section className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
        <div>
          <motion.h2 initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="text-4xl font-extrabold leading-tight text-gray-800">
            קונים זהב וכסף במזומן או בהעברה – במהירות, אמינות ומקצועיות.
          </motion.h2>
          <p className="mt-4 text-lg text-gray-700">
            מתמחים ברכישת מטילי זהב, תכשיטים, מטבעות, וכלי כסף – בתמחור שקוף ותשלום מיידי.
          </p>
          <a href="#contact" className="mt-6 inline-block bg-amber-600 text-white px-6 py-3 rounded-xl shadow hover:bg-amber-700 transition">
            השאירו פרטים ונחזור אליכם
          </a>
        </div>
        <img src="https://images.unsplash.com/photo-1611171712356-9e1e7c06a41f" alt="מטילי זהב" className="rounded-2xl shadow-lg object-cover w-full h-80" />
      </section>

      <section id="why" className="bg-white py-12">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h3 className="text-3xl font-semibold mb-8">למה לבחור בנו</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-6 bg-amber-50 rounded-xl shadow">
              <h4 className="text-xl font-semibold mb-2">מקצועיות</h4>
              <p>מומחים עם ניסיון של שנים בשוק ההשקעות והמתכות היקרות.</p>
            </div>
            <div className="p-6 bg-amber-50 rounded-xl shadow">
              <h4 className="text-xl font-semibold mb-2">אמינות</h4>
              <p>שקיפות מלאה בתמחור, הצעות הוגנות, ותיעוד מלא של כל עסקה.</p>
            </div>
            <div className="p-6 bg-amber-50 rounded-xl shadow">
              <h4 className="text-xl font-semibold mb-2">שירות אישי</h4>
              <p>יחס חם ואדיב, תיאום גמיש בבית הלקוח או במשרד.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="calculator" className="max-w-6xl mx-auto px-6 py-16">
        <h3 className="text-3xl font-semibold text-center mb-8">מחשבון זהב וכסף בזמן אמת</h3>
        <div className="grid md:grid-cols-2 gap-8">
          <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
            {goldPrice ? (
              <>
                <h4 className="text-xl font-semibold mb-4">מחשבון זהב</h4>
                <p className="text-gray-700">מחיר זהב עכשווי (דולר לאונקיה): <span className="font-semibold">${goldPrice.toFixed(2)}</span></p>
                <div className="mt-4">
                  <label className="block mb-2">הזן משקל זהב (בגרמים):</label>
                  <input type="number" value={gramsGold} onChange={(e) => setGramsGold(Number(e.target.value))} className="border rounded-md p-2 w-40 text-center" />
                </div>
                {gramsGold > 0 && (
                  <p className="mt-4 text-lg font-medium text-amber-700">ערך משוער: ${(estimatedGold).toFixed(2)} דולר</p>
                )}
              </>
            ) : (
              <p className="text-gray-500">טוען נתוני מחיר זהב...</p>
            )}
          </div>

          <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
            {silverPrice ? (
              <>
                <h4 className="text-xl font-semibold mb-4">מחשבון כסף</h4>
                <p className="text-gray-700">מחיר כסף עכשווי (דולר לאונקיה): <span className="font-semibold">${silverPrice.toFixed(2)}</span></p>
                <div className="mt-4">
                  <label className="block mb-2">הזן משקל כסף (בגרמים):</label>
                  <input type="number" value={gramsSilver} onChange={(e) => setGramsSilver(Number(e.target.value))} className="border rounded-md p-2 w-40 text-center" />
                </div>
                {gramsSilver > 0 && (
                  <p className="mt-4 text-lg font-medium text-amber-700">ערך משוער: ${(estimatedSilver).toFixed(2)} דולר</p>
                )}
              </>
            ) : (
              <p className="text-gray-500">טוען נתוני מחיר כסף...</p>
            )}
          </div>
        </div>
      </section>

      <section id="contact" className="bg-amber-50 py-16">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h3 className="text-3xl font-semibold mb-6">צור קשר לקבלת הצעה</h3>
          <form onSubmit={handleSubmit} className="grid gap-4 text-right">
            <input name="name" value={form.name} onChange={handleChange} placeholder="שם מלא" className="p-3 rounded-md border" />
            <input name="phone" value={form.phone} onChange={handleChange} placeholder="טלפון" className="p-3 rounded-md border" />
            <input name="email" value={form.email} onChange={handleChange} placeholder="אימייל (לא חובה)" className="p-3 rounded-md border" />
            <textarea name="note" value={form.note} onChange={handleChange} placeholder="פרטים נוספים" className="p-3 rounded-md border" />
            <button type="submit" className="bg-amber-600 text-white py-3 rounded-md hover:bg-amber-700 transition">
              שלח פרטים
            </button>
            {status && <p className={`text-sm ${status.type === 'error' ? 'text-red-600' : 'text-green-700'}`}>{status.message}</p>}
          </form>
        </div>
      </section>

      <footer className="bg-gray-900 text-gray-200 py-8">
        <div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <p>© {new Date().getFullYear()} buygold-silver.co.il — כל הזכויות שמורות</p>
          <div className="flex gap-4 text-sm">
            <a href="tel:+972501234567" className="hover:text-amber-400">טלפון</a>
            <a href="mailto:info@buygold-silver.co.il" className="hover:text-amber-400">מייל</a>
          </div>
        </div>
      </footer>
    </main>
  );
}