/* global React, Icon */

const FJ_PHOTOS = {
  slider1: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider01.jpg",
  slider2: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg",
  arne:    "https://www.frederiksen-jepsen.dk/tl_files/materiale/medarbejderfotos/Arne_Frederiksen.jpg",
  thomas:  "https://www.frederiksen-jepsen.dk/tl_files/materiale/medarbejderfotos/Thomas_Jepsen.jpg",
};

const HERO_WORDS = ["Tagmester", "Tømrer", "Vinduesmester", "Bygmester"];

const HERO_SLIDES = [
  { img: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg", tag: "Nyt tag · Sønderborg" },
  { img: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider01.jpg", tag: "Tilbygning · Gråsten" },
  { img: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg", tag: "Vinduer · Augustenborg" },
  { img: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider01.jpg", tag: "Kvist · Nordborg" },
];

const HERO_BADGES = [
  { src: "./assets/badges/byg-garanti.jpg",                              alt: "Byg-Garanti" },
  { src: "./assets/badges/unnamed-1.jpg",                                alt: "Facebook Reviews" },
  { src: "./assets/badges/monier-tagpartner.jpg",                        alt: "Monier Tagpartner™" },
  { src: "./assets/badges/velux-dagslys-raadgiver.png",                  alt: "VELUX Dagslys-rådgiver" },
  { src: "./assets/badges/how-to-get-more-google-reviews-768x383-1.png", alt: "Google Reviews" },
  { src: "./assets/badges/velfac-vinduesmester.png",                     alt: "VELFAC VinduesMester" },
  { src: "./assets/badges/di-byggeri.jpg",                               alt: "DI Byggeri" },
  { src: "./assets/badges/trustpilot-logo.png",                         alt: "Trustpilot" },
];

function Hero({ onSubmitQuote }) {
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", message: "" });
  const [focused, setFocused] = React.useState(null);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [svcIdx, setSvcIdx] = React.useState(0);
  const [animKey, setAnimKey] = React.useState(0);
  const [slideIdx, setSlideIdx] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setSvcIdx(i => (i + 1) % HERO_WORDS.length);
      setAnimKey(k => k + 1);
    }, 2600);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    const id = setInterval(() => setSlideIdx(i => (i + 1) % HERO_SLIDES.length), 3800);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero__bg" aria-hidden="true">
        <picture>
          <source media="(max-width: 960px)" srcSet="./assets/hero-mobile.png" />
          <img src="./assets/hero-desktop.png" alt="" />
        </picture>
        <div className="hero__overlay" />
      </div>
      <div className="container hero__inner">
        <div className="hero__copy">
          <div className="hero__badges">
            <span className="hero__chip"><Icon name="shield-check" size={14} stroke="#3A8F4A" />Byg-Garanti</span>
            <span className="hero__chip"><Icon name="award" size={14} stroke="#C9A24A" />Monier Tagpartner™</span>
            <span className="hero__chip"><Icon name="map-pin" size={14} stroke="#E5AC31" />Sønderborg &amp; Als</span>
          </div>
          <h1 className="hero__h1">
            <span className="hero__h1-pre">Din lokale</span>
            <span className="hero__h1-service" key={animKey}>{HERO_WORDS[svcIdx]}</span>
            <span className="hero__h1-post">i Sønderjylland.</span>
          </h1>
          <p className="hero__lede">
            Vi har specialiseret os i nye tage, nye vinduer og om- og tilbygninger. <strong>Kig forbi vores showroom på Bülowsvej.</strong> Se, rør og betjen dine nye vinduer, og mærk dit nye tag før du beslutter dig.
          </p>
          <div className="hero__ctas">
            <a href="tel:+4574486994" className="btn-cta">
              <Icon name="phone" size={18} stroke="#fff"/>
              Ring 74 48 69 94
            </a>
            <a href="#work" className="btn-outline">Se vores arbejde</a>
          </div>

          <div className="hero__slider-outer">
            <button className="hero__slider-arrow" onClick={() => setSlideIdx(i => (i - 1 + HERO_SLIDES.length) % HERO_SLIDES.length)} aria-label="Forrige">
              <img src="./assets/icons/arrow-left-svgrepo-com.svg" className="hero__slider-arrow-icon" alt="" />
            </button>
            <div className="hero__slider">
              <div className="hero__slider-track" style={{ transform: `translateX(-${slideIdx * 100}%)` }}>
                {HERO_SLIDES.map((s, i) => (
                  <div key={i} className="hero__slide">
                    <img src={s.img} alt={s.tag} referrerPolicy="no-referrer" />
                    <div className="hero__slide-overlay" />
                    <span className="hero__slide-tag">
                      <Icon name="map-pin" size={11} stroke="#E5AC31" />
                      {s.tag}
                    </span>
                  </div>
                ))}
              </div>
              <div className="hero__slider-dots">
                {HERO_SLIDES.map((_, i) => (
                  <button key={i} className={"hero__slider-dot" + (slideIdx === i ? " hero__slider-dot--on" : "")} onClick={() => setSlideIdx(i)} aria-label={`Slide ${i + 1}`} />
                ))}
              </div>
            </div>
            <button className="hero__slider-arrow" onClick={() => setSlideIdx(i => (i + 1) % HERO_SLIDES.length)} aria-label="Næste">
              <img src="./assets/icons/arrow-right-svgrepo-com.svg" className="hero__slider-arrow-icon" alt="" />
            </button>
          </div>
        </div>

        <div className="hero__form-col">
          <div className="hero__owners-float">
            <img src="./assets/0wner-hero-cutout.png" alt="Arne og Thomas" />
          </div>
          <div className="hero__form-wrap" id="quote">
            <div className="hero__form card-panel">
              <div className="hero__form-head">
                <div className="hero__form-eyebrow">Bliv kontaktet</div>
                <h2 className="hero__form-h2">Få et uforpligtende tilbud</h2>
                <div className="hero__form-sub">2 minutter · vi ringer tilbage samme dag</div>
              </div>
              <div className="hero__fields-row">
                <div className="hero__field">
                  <label>Navn</label>
                  <input value={form.name} placeholder="Dit fulde navn" onChange={e => set("name", e.target.value)}
                         onFocus={() => setFocused("name")} onBlur={() => setFocused(null)}
                         className={focused === "name" ? "focus" : ""}/>
                </div>
                <div className="hero__field">
                  <label>Telefon</label>
                  <input value={form.phone} placeholder="+45 …" inputMode="tel" onChange={e => set("phone", e.target.value)}
                         onFocus={() => setFocused("phone")} onBlur={() => setFocused(null)}
                         className={focused === "phone" ? "focus" : ""}/>
                </div>
              </div>
              <div className="hero__field">
                <label>E-mail</label>
                <input value={form.email} placeholder="din@mail.dk" inputMode="email" onChange={e => set("email", e.target.value)}
                       onFocus={() => setFocused("email")} onBlur={() => setFocused(null)}
                       className={focused === "email" ? "focus" : ""}/>
              </div>
              <div className="hero__field">
                <label>Besked</label>
                <textarea value={form.message} placeholder="Fortæl kort om dit projekt…" rows={3} onChange={e => set("message", e.target.value)}
                          onFocus={() => setFocused("message")} onBlur={() => setFocused(null)}
                          className={focused === "message" ? "focus" : ""}/>
              </div>
              <button className="btn-cta hero__submit" onClick={() => onSubmitQuote(form)}>
                Send forespørgsel
                <Icon name="arrow-right" size={16} stroke="#fff" />
              </button>
              <div className="hero__form-foot">
                <Icon name="shield-check" size={14} stroke="#3A8F4A" />
                Ingen spam. Dine oplysninger bliver hos os.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="hero__ticker-wrap" aria-hidden="true">
        <div className="hero__ticker-track">
          {[...HERO_BADGES, ...HERO_BADGES].map((b, i) => (
            <img key={i} src={b.src} alt={b.alt} className={"hero__ticker-img" + (b.alt === "Google Reviews" ? " hero__ticker-img--lg" : "")} />
          ))}
        </div>
      </div>
      <style>{`
        .hero { position: relative; overflow: hidden; padding: 32px 0 172px; min-height: 680px; margin: 0 10px; border-radius: 24px 24px 24px 0; }
        .hero__bg { position: absolute; inset: 0; z-index: 0; background: #0B1118; overflow: hidden; }
        .hero__bg picture { display: block; width: 100%; height: 100%; }
        .hero__bg img { position: absolute; left: 0; right: 0; top: -18%; width: 100%; height: 120%; object-fit: cover; object-position: center top; filter: saturate(0.88) brightness(0.72); }
        .hero__overlay {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(11,17,24,0.75) 0%, rgba(11,17,24,0.35) 40%, rgba(11,17,24,0.9) 100%),
                      linear-gradient(90deg, rgba(11,17,24,0.82) 0%, rgba(11,17,24,0.1) 65%);
        }
        .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; padding-bottom: 0; max-width: none; padding-left: 30px; padding-right: 30px; }

        /* Left copy */
        .hero__copy { align-self: start; padding-top: 8px; }
        .hero__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
        .hero__chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(11,17,24,0.7); border: 1px solid rgba(255,255,255,0.18); font-size: 13px; font-weight: 500; color: #F4F1EC; }
        .hero__h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 22px; color: #F4F1EC; line-height: 1; }
        .hero__h1-pre,
        .hero__h1-post { display: block; font-size: clamp(54px, 6.5vw, 92px); font-weight: 700; color: #F4F1EC; line-height: 0.95; }
        .hero__h1-service {
          display: block;
          font-size: clamp(54px, 6.5vw, 92px);
          font-weight: 800;
          color: var(--accent);
          line-height: 0.95;
          animation: svcFlip 0.42s cubic-bezier(0.22,1,0.36,1) both;
        }
        @keyframes svcFlip {
          from { opacity: 0; transform: translateY(18px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .hero__lede { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: rgba(244,241,236,0.72); margin: 0 0 28px; max-width: 50ch; }
        .hero__lede strong { color: #F4F1EC; font-weight: 600; }
        .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
        .hero__trustrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .hero__badge { height: 52px; width: auto; border-radius: 4px; background: #fff; padding: 6px 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); object-fit: contain; }
        .hero__badge--wide { padding: 4px 14px; }

        /* Form column — owners flush above card, form lower via align-items: end on grid */
        .hero__form-col { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

        .hero__owners-float {
          flex-shrink: 0;
          filter: drop-shadow(0 4px 12px rgba(0,0,0,0.28));
          text-align: center;
        }
        .hero__owners-float img {
          width: 90%;
          height: auto;
          display: block;
          margin: 0 auto;
        }

        .hero__form-wrap { position: relative; width: 100%; }
        .hero__form { padding: 20px; border-radius: var(--radius-xl); background: rgba(20,28,38,0.96); backdrop-filter: blur(6px); }
        .hero__form-head { margin-bottom: 12px; }
        .hero__form-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
        .hero__form-h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; text-transform: uppercase; margin: 4px 0 3px; letter-spacing: -0.005em; color: #F4F1EC; }
        .hero__form-sub { font-family: var(--font-body); font-size: 12px; color: rgba(244,241,236,0.55); }
        .hero__fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
        .hero__fields-row .hero__field { margin-bottom: 0; }
        .hero__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
        .hero__field label { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,241,236,0.45); }
        .hero__field input, .hero__field textarea {
          font-family: var(--font-body); font-size: 14px; color: #0B1118;
          background: #FFFFFF;
          border: 1px solid rgba(11,17,24,0.18);
          border-radius: 4px; padding: 9px 12px; outline: none;
          transition: border-color var(--dur-fast) var(--ease-snappy), box-shadow var(--dur-fast) var(--ease-snappy);
        }
        .hero__field textarea { resize: none; }
        .hero__field input.focus, .hero__field textarea.focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(229,172,49,0.28); }
        .hero__submit { width: 100%; justify-content: center; margin-top: 4px; padding: 13px; }
        .hero__form-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: rgba(244,241,236,0.45); }

        /* ── PROJECT SLIDER ── */
        .hero__slider-outer { display: flex; align-items: center; gap: 10px; }
        .hero__slider-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; background: rgba(11,17,24,0.55); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 150ms var(--ease-snappy); }
        .hero__slider-arrow:hover { background: rgba(11,17,24,0.9); }
        .hero__slider-arrow-icon { width: 16px; height: 16px; display: block; filter: brightness(0) invert(1); }
        .hero__slider { position: relative; flex: 1; border-radius: 14px; overflow: hidden; height: 170px; max-width: 300px; }
        .hero__slider-track { display: flex; height: 100%; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
        .hero__slide { position: relative; flex: 0 0 100%; height: 100%; }
        .hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .hero__slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,17,24,0.72) 0%, transparent 55%); }
        .hero__slide-tag { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #F4F1EC; background: rgba(11,17,24,0.55); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 4px; }
        .hero__slider-dots { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 5px; z-index: 2; }
        .hero__slider-dot { width: 5px; height: 5px; border-radius: 999px; background: rgba(244,241,236,0.38); border: none; cursor: pointer; padding: 0; transition: background 200ms var(--ease-snappy), width 200ms var(--ease-snappy); }
        .hero__slider-dot--on { background: var(--accent); width: 16px; }

        /* ── BADGE TICKER ── */
        .hero__ticker-wrap {
          position: absolute; bottom: 0; left: 0;
          width: clamp(400px, 54%, 700px);
          height: 162px;
          background: #fff;
          border-radius: 0 24px 0 0;
          overflow: hidden;
          z-index: 3;
        }

        .hero__ticker-wrap::before {
          content: ''; position: absolute; left: 0; top: 0;
          width: 60px; height: 100%;
          background: linear-gradient(to left, transparent, #fff);
          z-index: 2; pointer-events: none;
        }
        .hero__ticker-wrap::after {
          content: ''; position: absolute; right: 0; top: 0;
          width: 80px; height: 100%;
          background: linear-gradient(to right, transparent, #fff);
          z-index: 2; pointer-events: none;
        }
        .hero__ticker-track {
          display: flex; align-items: center; gap: 0;
          padding: 0; height: 100%;
          width: max-content;
          animation: tickerScroll 26s linear infinite;
        }
        @keyframes tickerScroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .hero__ticker-img {
          height: 82px; width: auto; object-fit: contain; flex-shrink: 0; display: block; margin-right: 48px;
        }
        .hero__ticker-img--lg { height: 108px; }

        @media (max-width: 960px) {
          .hero { padding: 36px 0 0; min-height: auto; }
          .hero__inner { grid-template-columns: 1fr; gap: 28px; align-items: start; padding-bottom: 40px; }
          .hero__copy { align-self: auto; text-align: center; padding-top: 0; }
          .hero__badges { justify-content: center; }
          .hero__ctas { justify-content: center; }
          .hero__lede { margin-left: auto; margin-right: auto; }
          .hero__h1-pre, .hero__h1-post, .hero__h1-service { font-size: clamp(28px, 8.5vw, 54px); }
          .hero__badge { height: 40px; }
          .hero__form { border-radius: var(--radius-xl); }
          .hero__ticker-wrap {
            position: static;
            width: 100%;
            border-radius: 0;
          }
          .hero__ticker-wrap::before,
          .hero__ticker-wrap::after { display: none; }
        }
      `}</style>
    </section>
  );
}

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