import React, { useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  ArrowRight,
  BadgeCheck,
  Banknote,
  CheckCircle2,
  Clock3,
  MessageCircle,
  PackageCheck,
  ShieldCheck,
  Smartphone,
  Sparkles,
  Star,
  Truck,
} from "lucide-react";
import "./styles.css";

const whatsappNumber = "34600000000";

const brands = ["Apple", "Samsung", "Xiaomi", "Google", "Huawei", "OPPO"];

const conditions = [
  "Nuevo o como nuevo",
  "Usado con marcas normales",
  "Pantalla rota",
  "Bateria desgastada",
  "No enciende",
];

function App() {
  const [form, setForm] = useState({
    brand: "Apple",
    model: "",
    storage: "128GB",
    condition: "Usado con marcas normales",
    name: "",
  });

  const whatsappText = useMemo(() => {
    const lines = [
      "Hola, quiero vender mi movil.",
      `Marca: ${form.brand}`,
      `Modelo: ${form.model || "Pendiente"}`,
      `Capacidad: ${form.storage}`,
      `Estado: ${form.condition}`,
      `Nombre: ${form.name || "Pendiente"}`,
    ];

    return encodeURIComponent(lines.join("\n"));
  }, [form]);

  const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${whatsappText}`;

  function updateField(event) {
    const { name, value } = event.target;
    setForm((current) => ({ ...current, [name]: value }));
  }

  return (
    <main>
      <header className="site-header">
        <a className="brand" href="#inicio" aria-label="TasaTuMovil.es inicio">
          <span className="brand-mark">
            <Smartphone size={22} />
          </span>
          <span>TasaTuMovil.es</span>
        </a>

        <nav aria-label="Principal">
          <a href="#como-funciona">Como funciona</a>
          <a href="#tasacion">Tasacion</a>
          <a href="#faq">FAQ</a>
        </nav>

        <a className="header-cta" href={whatsappUrl}>
          WhatsApp
        </a>
      </header>

      <section className="hero" id="inicio">
        <div className="hero-copy">
          <p className="eyebrow">
            <Sparkles size={16} />
            Compra de moviles usados en Espana
          </p>
          <h1>Vende tu movil hoy con una tasacion rapida y clara.</h1>
          <p className="hero-text">
            Dinos que movil tienes, revisamos el estado y te damos una oferta
            sin rodeos. Si te encaja, gestionamos la recogida y el pago.
          </p>
          <div className="hero-actions">
            <a className="primary-button" href="#tasacion">
              Tasar mi movil <ArrowRight size={18} />
            </a>
            <a className="secondary-button" href={whatsappUrl}>
              <MessageCircle size={18} /> Hablar por WhatsApp
            </a>
          </div>
          <div className="trust-row">
            <span>
              <ShieldCheck size={18} /> Proceso seguro
            </span>
            <span>
              <Clock3 size={18} /> Respuesta rapida
            </span>
            <span>
              <Banknote size={18} /> Pago directo
            </span>
          </div>
        </div>

        <div className="hero-visual" aria-label="Vista previa de moviles">
          <div className="phone phone-back">
            <span />
          </div>
          <div className="phone phone-front">
            <div className="screen-top" />
            <div className="screen-card">
              <span>Tasacion estimada</span>
              <strong>hasta 620 EUR</strong>
            </div>
            <div className="screen-list">
              <p />
              <p />
              <p />
            </div>
          </div>
          <div className="floating-badge">
            <BadgeCheck size={20} />
            Oferta revisada
          </div>
        </div>
      </section>

      <section className="logos" aria-label="Marcas aceptadas">
        {brands.map((brand) => (
          <span key={brand}>{brand}</span>
        ))}
      </section>

      <section className="steps" id="como-funciona">
        <div className="section-heading">
          <p>Como funciona</p>
          <h2>De la tasacion al pago en tres pasos.</h2>
        </div>

        <div className="step-grid">
          <article>
            <Smartphone />
            <h3>1. Envia los datos</h3>
            <p>
              Marca, modelo, capacidad y estado real del movil. Cuanto mas
              claro, mas rapida sera la oferta.
            </p>
          </article>
          <article>
            <MessageCircle />
            <h3>2. Recibe una oferta</h3>
            <p>
              Revisamos tu solicitud y te contactamos por WhatsApp con una
              valoracion provisional.
            </p>
          </article>
          <article>
            <PackageCheck />
            <h3>3. Cobras tu movil</h3>
            <p>
              Si aceptas, coordinamos entrega o recogida y cerramos el pago de
              forma sencilla.
            </p>
          </article>
        </div>
      </section>

      <section className="quote-section" id="tasacion">
        <div className="quote-copy">
          <p className="eyebrow dark">
            <Truck size={16} />
            Tasacion online
          </p>
          <h2>Empieza con una oferta provisional.</h2>
          <p>
            Este formulario deja preparado un mensaje de WhatsApp. Cambiaremos
            el numero provisional cuando me pases tu telefono real.
          </p>

          <div className="benefits">
            <span>
              <CheckCircle2 size={18} /> Sin compromiso
            </span>
            <span>
              <CheckCircle2 size={18} /> Aceptamos moviles con golpes
            </span>
            <span>
              <CheckCircle2 size={18} /> Ideal para particulares y tiendas
            </span>
          </div>
        </div>

        <form className="quote-form" onSubmit={(event) => event.preventDefault()}>
          <label>
            Marca
            <select name="brand" value={form.brand} onChange={updateField}>
              {brands.map((brand) => (
                <option key={brand} value={brand}>
                  {brand}
                </option>
              ))}
            </select>
          </label>

          <label>
            Modelo
            <input
              name="model"
              value={form.model}
              onChange={updateField}
              placeholder="Ej. iPhone 14 Pro"
            />
          </label>

          <label>
            Capacidad
            <select name="storage" value={form.storage} onChange={updateField}>
              <option>64GB</option>
              <option>128GB</option>
              <option>256GB</option>
              <option>512GB</option>
              <option>1TB</option>
            </select>
          </label>

          <label>
            Estado
            <select
              name="condition"
              value={form.condition}
              onChange={updateField}
            >
              {conditions.map((condition) => (
                <option key={condition} value={condition}>
                  {condition}
                </option>
              ))}
            </select>
          </label>

          <label>
            Tu nombre
            <input
              name="name"
              value={form.name}
              onChange={updateField}
              placeholder="Ej. Alejandro"
            />
          </label>

          <a className="form-submit" href={whatsappUrl}>
            Enviar tasacion por WhatsApp <ArrowRight size={18} />
          </a>
        </form>
      </section>

      <section className="proof">
        <div>
          <Star size={24} />
          <strong>Valoracion honesta</strong>
          <p>Te diremos si compensa venderlo, repararlo o esperar.</p>
        </div>
        <div>
          <ShieldCheck size={24} />
          <strong>Sin letra pequena</strong>
          <p>Oferta clara segun modelo, estado, bateria y accesorios.</p>
        </div>
        <div>
          <Banknote size={24} />
          <strong>Pago sencillo</strong>
          <p>Proceso directo para que no pierdas tiempo con anuncios.</p>
        </div>
      </section>

      <section className="faq" id="faq">
        <div className="section-heading">
          <p>Preguntas frecuentes</p>
          <h2>Lo importante antes de vender.</h2>
        </div>
        <div className="faq-list">
          <details>
            <summary>Compramos moviles rotos?</summary>
            <p>
              Si. Pantalla rota, bateria gastada, golpes o problemas de
              encendido. La oferta depende del estado real.
            </p>
          </details>
          <details>
            <summary>La tasacion es definitiva?</summary>
            <p>
              Primero damos una valoracion provisional. La oferta final se
              confirma al revisar el movil y comprobar que coincide con los
              datos enviados.
            </p>
          </details>
          <details>
            <summary>Puedo vender varios moviles?</summary>
            <p>
              Si. La web esta pensada tambien para lotes de particulares,
              tiendas o empresas que renuevan dispositivos.
            </p>
          </details>
        </div>
      </section>

      <footer>
        <div>
          <strong>TasaTuMovil.es</strong>
          <p>Compra de moviles usados, rapida y transparente.</p>
        </div>
        <a href={whatsappUrl}>Pedir tasacion</a>
      </footer>
    </main>
  );
}

createRoot(document.getElementById("root")).render(<App />);