/* global React */

function Field({ label, options, value, onChange }) {
  return (
    <div className="flex flex-col gap-1 px-5 py-3 flex-1 min-w-0" style={{ minWidth: 0 }}>
      <span className="eyebrow" style={{ color: "var(--burgundy)", fontSize: "0.58rem", letterSpacing: "0.18em" }}>{label}</span>
      <div className="select-wrap pr-5">
        <select className="gcb-field font-sans" value={value} onChange={(e) => onChange(e.target.value)}>
          {options.map((o, i) => (
            <option key={i} value={o}>{o}</option>
          ))}
        </select>
      </div>
    </div>
  );
}

function SearchBar({ t }) {
  const [op, setOp] = React.useState(t.opOptions[0]);
  const [zone, setZone] = React.useState(t.zoneOptions[0]);
  const [type, setType] = React.useState(t.typeOptions[0]);
  const [price, setPrice] = React.useState(t.priceOptions[0]);

  // keep selections valid when language changes
  React.useEffect(() => { setOp(t.opOptions[0]); setZone(t.zoneOptions[0]); setType(t.typeOptions[0]); setPrice(t.priceOptions[0]); }, [t]);

  return (
    <div
      className="mx-auto w-full"
      style={{
        maxWidth: 1000,
        background: "rgba(248,244,237,0.95)",
        backdropFilter: "blur(8px)",
        boxShadow: "0 30px 70px -30px rgba(0,0,0,0.55)",
        borderRadius: 4,
      }}
    >
      <div className="flex flex-col md:flex-row md:items-stretch">
        <Field label={t.opLabel} options={t.opOptions} value={op} onChange={setOp} />
        <div className="hidden md:block" style={{ width: 1, background: "var(--line)" }} />
        <Field label={t.zoneLabel} options={t.zoneOptions} value={zone} onChange={setZone} />
        <div className="hidden md:block" style={{ width: 1, background: "var(--line)" }} />
        <Field label={t.typeLabel} options={t.typeOptions} value={type} onChange={setType} />
        <div className="hidden md:block" style={{ width: 1, background: "var(--line)" }} />
        <Field label={t.priceLabel} options={t.priceOptions} value={price} onChange={setPrice} />
        <button
          className="btn-primary font-sans flex items-center justify-center gap-2 m-2 md:m-3"
          style={{ borderRadius: 3, padding: "0 30px", minHeight: 56, letterSpacing: "0.12em", textTransform: "uppercase", fontSize: "0.72rem", fontWeight: 600, whiteSpace: "nowrap" }}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
          </svg>
          {t.search}
        </button>
      </div>
    </div>
  );
}

function Hero({ t }) {
  const HERO_URL = "https://images.unsplash.com/photo-1504512485720-7d83a16ee930?q=80&w=2400&auto=format&fit=crop";
  return (
    <section id="top" className="relative" style={{ minHeight: "92vh" }}>
      {/* image layer with warm fallback */}
      <div className="absolute inset-0 overflow-hidden" style={{ background: "linear-gradient(160deg, #c98a5c 0%, #7A2424 60%, #5C1A1A 100%)" }}>
        <img
          src={HERO_URL}
          alt="Costa Brava al atardecer"
          className="hero-img w-full h-full"
          style={{ objectFit: "cover", objectPosition: "center 55%" }}
          onError={(e) => { e.currentTarget.style.display = "none"; }}
        />
      </div>
      {/* gradient overlays for legibility */}
      <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(42,20,20,0.55) 0%, rgba(42,20,20,0.28) 32%, rgba(60,22,22,0.42) 66%, rgba(92,26,26,0.92) 100%)" }} />
      <div className="absolute inset-0" style={{ background: "radial-gradient(105% 72% at 50% 46%, rgba(18,8,8,0.42) 0%, rgba(18,8,8,0.12) 48%, transparent 70%)" }} />

      {/* content */}
      <div className="relative z-10 mx-auto flex flex-col items-center px-6" style={{ maxWidth: 1340, minHeight: "92vh", justifyContent: "center", paddingTop: 70, paddingBottom: 70 }}>
        <div className="text-center" style={{ maxWidth: 920 }}>
          <div className="flex items-center justify-center gap-4 mb-7">
            <span className="rule-gold" style={{ background: "var(--gold)" }} />
            <span className="eyebrow" style={{ color: "var(--gold)", letterSpacing: "0.32em" }}>Costa Brava · Girona · Est. 1985</span>
            <span className="rule-gold" style={{ background: "var(--gold)" }} />
          </div>
          <h1
            className="font-serif reveal in"
            style={{ color: "#fff", fontWeight: 500, lineHeight: 1.02, fontSize: "clamp(2.8rem, 6.4vw, 6rem)", textShadow: "0 4px 40px rgba(0,0,0,0.35)" }}
          >
            {t.heroTitle}
          </h1>
          <p
            className="font-serif mx-auto mt-7"
            style={{ color: "rgba(248,244,237,0.92)", fontStyle: "italic", fontWeight: 400, fontSize: "clamp(1.05rem, 1.9vw, 1.5rem)", lineHeight: 1.5, maxWidth: 660, textShadow: "0 2px 20px rgba(0,0,0,0.4)" }}
          >
            {t.heroSub}
          </p>
        </div>

        <div className="w-full mt-12">
          <SearchBar t={t} />
        </div>
      </div>

      {/* scroll hint */}
      <div className="absolute z-10" style={{ bottom: 22, left: "50%", transform: "translateX(-50%)", textAlign: "center" }}>
        <p className="eyebrow" style={{ color: "rgba(248,244,237,0.7)", fontSize: "0.56rem", marginBottom: 6 }}>{t.scrollHint}</p>
        <span style={{ display: "inline-block", width: 1, height: 30, background: "rgba(248,244,237,0.5)" }} />
      </div>
    </section>
  );
}

Object.assign(window, { Hero, SearchBar });