/* ===== Mazurski Brzask — section components ===== */
const { useState, useEffect, useRef } = React;
const PLOTS = window.MB_PLOTS || [];

/* Polish plural for "działka" */
function plDz(n) {
  const a = n % 10,b = n % 100;
  if (n === 1) return "działka";
  if (a >= 2 && a <= 4 && !(b >= 12 && b <= 14)) return "działki";
  return "działek";
}
const zl = (n) => n.toLocaleString('pl-PL') + " zł";

function Logo({ className }) {
  return <span className={"brandlogo " + (className || "")} aria-label="Mazurski Brzask"
  dangerouslySetInnerHTML={{ __html: window.MB_LOGO_SVG }} />;
}

/* ---------- NAV ---------- */
function Nav() {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => {setSolid(window.scrollY > window.innerHeight * 0.72);};
    onScroll();window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav show" + (solid ? " solid" : "")}>
      <a className={"brand" + (solid ? " green" : "")} href="#top"><Logo /></a>
      <div className="nav-links">
        <a href="#inwestycja">Inwestycja</a>
        <a href="#lokalizacja">Lokalizacja</a>
        <a href="#dzialki">Działki</a>
        <a className="btn btn-primary" href="#kontakt">Kontakt</a>
      </div>
    </nav>);
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-media">
        <video autoPlay muted loop playsInline
          style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 30%'}}>
          <source src="uploads/dji_fly_20260514_121619_0_1778949306985_video_cache_1.mp4" type="video/mp4"/>
        </video>
        <div className="hero-dawn" />
      </div>
      <div className="hero-scrim" />
      <div className="hero-grain" />

      <div className="hero-inner">
        <h1 className="display d-xxl reveal d1">Obudź się<br />bliżej natury.</h1>
        <p className="lead reveal d2">Kameralne działki na Mazurach, otoczone lasami, jeziorami i spokojem, którego coraz trudniej szukać gdzie indziej.
        </p>
        <div className="hero-cta reveal d3">
          <a className="btn btn-light" href="#dzialki">Zobacz działki <IconArrowRight /></a>
          <a className="btn btn-on-dark" href="#inwestycja">Poznaj inwestycję</a>
        </div>
      </div>
      <a className="hero-scroll" href="#inwestycja" aria-label="Przewiń w dół">
        <span>Mazurski Brzask</span><span className="mouse" />
      </a>
    </header>);

}

/* ---------- ABOUT / OPIS ---------- */
function About() {
  const minPrice = PLOTS.length ? Math.min(...PLOTS.map((p) => p.price)) : 0;
  return (
    <section className="section" id="inwestycja">
      <div className="wrap split">
        <div className="split-text">
          <span className="eyebrow reveal">Inwestycja</span>
          <h2 className="display d-xl reveal d1">Miejsce dla tych,<br />którzy szukają więcej<br />niż adresu</h2>
          <div className="reveal d2" style={{ marginTop: '1.6rem', maxWidth: '42ch' }}>
            <p>Mazurski&nbsp;Brzask to kameralna inwestycja położona w&nbsp;miejscowości <strong>Plichta</strong>,
              w&nbsp;gminie Łukta — regionie od wieków słynącym z&nbsp;wyjątkowej przyrody, czystych jezior
              i&nbsp;rozległych lasów. To miejsce stworzone z&nbsp;myślą o&nbsp;osobach, które chcą mieć własny
              fragment Mazur: na dom, rekreację, wypoczynek lub przyszłą inwestycję.</p>
            <p>Tuż obok leży <strong>Rezerwat Sosny Taborskiej</strong> — jedno z&nbsp;najbardziej
              wyjątkowych miejsc przyrodniczych Warmii i&nbsp;Mazur. Rosną tu smukłe sosny sięgające
              nawet 40 metrów, których drewno uznano na wystawie paryskiej w&nbsp;1900&nbsp;r. za
              <em>najlepszy surowiec sosnowy świata</em>. Najstarsze okazy liczą ponad 270 lat.
              Miejsce totalnego wyciszenia — dosłownie za płotem.</p>
          </div>
          <div className="stats reveal d3">
            <div className="stat"><div className="n num">{PLOTS.length}</div><div className="l">{plDz(PLOTS.length)} w ofercie</div></div>
            <div className="stat"><div className="n num">od {minPrice ? minPrice / 1000 + ' tys.' : '—'}</div><div className="l">cena w zł</div></div>
          </div>
        </div>
        <div className="reveal d2" style={{alignSelf:'stretch', display:'flex'}}>
          <div style={{width:'100%', minHeight:'780px', flex:'1', borderRadius:'18px', overflow:'hidden', boxShadow:'var(--shadow-sm)'}}>
            <img src="uploads/zdjeciedrzewa2.jpg" alt="Sosny Taborskie — Mazurski Brzask"
              style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center top', display:'block'}}/>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- CHARAKTER ---------- */
function Character() {
  const items = [
  [IconPin, "Działki w miejscowości Plichta, gmina Łukta"],
  [IconForest, "Otoczenie lasów, jezior i terenów zielonych"],
  [IconLeaf, "Kameralny charakter inwestycji"],
  [IconRoad, "Dobry dojazd do Ostródy i Olsztyna"],
  [IconTrend, "Potencjał rekreacyjny i inwestycyjny"],
  [IconMap, "Możliwość wyboru konkretnej działki z mapy"]];

  return (
    <section className="section tight bg-cream">
      <div className="wrap split rev">
        <div className="split-text">
          <span className="eyebrow reveal">Charakter terenu</span>
          <h2 className="display d-lg reveal d1">Kameralny teren<br />wśród zieleni</h2>
          <p className="reveal d2" style={{ marginTop: '1.4rem', maxWidth: '44ch' }}>
            Działki o&nbsp;wygodnych powierzchniach zaprojektowano z&nbsp;myślą o&nbsp;prywatności,
            wypoczynku i&nbsp;swobodnym zagospodarowaniu przestrzeni. To propozycja dla osób, które
            nie szukają gęstej zabudowy, lecz harmonii z&nbsp;krajobrazem i&nbsp;poczucia, że naprawdę
            są „poza miastem”.</p>
          <ul className="wyroz reveal d2">
            {items.map(([Ico, t], i) =>
            <li key={i}><span className="ic"><Ico /></span>{t}</li>
            )}
          </ul>
        </div>
        <div className="reveal d1" style={{alignSelf:'stretch', display:'flex'}}>
          <div style={{width:'100%', minHeight:'780px', flex:'1', borderRadius:'18px', overflow:'hidden', boxShadow:'var(--shadow-sm)'}}>
            <img src="uploads/AdobeStock_199081568 kopia.jpg" alt="Brzeg jeziora — Mazurski Brzask"
              style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center', display:'block'}}/>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- ZALETY ---------- */
function Advantages() {
  const adv = [
  [IconLeaf, "Czysta, chroniona przyroda", "Gmina Łukta wyróżnia się wyjątkowo dużym udziałem obszarów chronionego krajobrazu — urozmaicona rzeźba terenu, niski poziom zanieczyszczeń i naturalny charakter."],
  [IconLake, "Bliskość jezior", "W okolicy liczne jeziora — m.in. Szeląg, Tabórz, Isąg, Marąg i Długie. Idealne dla kąpieli, żeglowania, wędkowania, kajaków i spacerów nad wodą."],
  [IconForest, "Lasy dookoła", "Okoliczne lasy tworzą naturalną przestrzeń do spacerów, jazdy rowerem, grzybobrania i aktywnego wypoczynku. Miejsce, w którym można naprawdę zwolnić."],
  [IconRoad, "Spokój z dobrym dojazdem", "Plichta łączy atmosferę mazurskiej wsi z dostępem do większych ośrodków. W pobliżu Ostróda i Olsztyn — na weekend i na dłużej."],
  [IconTrend, "Potencjał najmu i rekreacji", "W gminie działa turystyka agroturystyczna, co potwierdza rekreacyjny potencjał regionu. Działka może być prywatną przestrzenią i przemyślaną inwestycją."]];

  return (
    <section className="section" id="zalety">
      <div className="wrap">
        <div style={{ maxWidth: '56ch' }}>
          <span className="eyebrow reveal">Zalety lokalizacji</span>
          <h2 className="display d-xl reveal d1">Mazury w&nbsp;swojej<br />spokojniejszej odsłonie</h2>
        </div>
        <div className="adv-grid">
          {adv.map(([Ico, h, p], i) =>
          <div className={"adv reveal d" + (i % 3 + 1)} key={i}>
              <span className="ic"><Ico /></span>
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CTA ---------- */
function CTA() {
  return (
    <section className="section bg-forest" id="cta">
      <div className="wrap" style={{ textAlign: 'center', maxWidth: '820px' }}>
        <div className="cta-mark reveal" dangerouslySetInnerHTML={{__html: window.MB_LOGOMARK_SVG}}/>
        <h2 className="display d-xl reveal d1">Zarezerwuj swój<br />fragment Mazur</h2>
        <p className="lead reveal d2" style={{ margin: '1.4rem auto 0', maxWidth: '58ch' }}>
          Inwestuj w&nbsp;miejsce z&nbsp;duszą — spokojne, zielone i&nbsp;położone w&nbsp;jednej
          z&nbsp;najpiękniejszych części północnej Polski. Skontaktuj się z&nbsp;nami, aby poznać
          dostępne działki, ceny i&nbsp;szczegóły zakupu.</p>
        <div className="reveal d3" style={{ marginTop: '2.4rem', display: 'flex', gap: '14px', flexWrap: 'wrap', justifyContent: 'center' }}>
          <a className="btn btn-light" href="#kontakt">Zapytaj o dostępność <IconArrowRight /></a>
          <a className="btn btn-on-dark" href="#kontakt"><IconCalendar /> Umów rozmowę</a>
          <a className="btn btn-on-dark" href="#dzialki"><IconDownload /> Pobierz kartę działki</a>
        </div>
      </div>
    </section>);

}

/* ---------- KONTAKT + FORM ---------- */
function Contact() {
  const [mode, setMode] = useState('phone'); // phone | email
  const [val, setVal] = useState('');
  const [name, setName] = useState('');
  const [plotNr, setPlotNr] = useState('');
  const [consent, setConsent] = useState(false);
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState('');

  useEffect(()=>{
    const handler = (e)=>{ setPlotNr(e.detail.nr); };
    window.addEventListener('mb:plot-select', handler);
    // also pick up if already set before mount
    if(window.__mbPlot) setPlotNr(window.__mbPlot);
    return ()=>window.removeEventListener('mb:plot-select', handler);
  },[]);

  const submit = async (e) => {
    e.preventDefault();
    if (!val.trim()) {setErr(mode === 'phone' ? 'Podaj numer telefonu.' : 'Podaj adres e-mail.');return;}
    if (mode === 'email' && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(val)) {setErr('Sprawdź adres e-mail.');return;}
    if (mode === 'phone' && val.replace(/\D/g, '').length < 7) {setErr('Sprawdź numer telefonu.');return;}
    if (!consent) {setErr('Zaznacz zgodę na kontakt.');return;}
    setErr(''); setSending(true);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name, contact: val, contactType: mode, plots: plotNr }),
      });
      if (res.ok) { setSent(true); }
      else { setErr('Coś poszło nie tak. Spróbuj ponownie lub zadzwoń.'); }
    } catch { setErr('Błąd połączenia. Spróbuj ponownie.'); }
    setSending(false);
  };

  return (
    <section className="section bg-cream" id="kontakt">
      <div className="wrap contact-grid">
        <div className="split-text">
          <span className="eyebrow reveal">Kontakt</span>
          <h2 className="display d-lg reveal d1">Porozmawiajmy<br />o Twojej działce</h2>
          <p className="reveal d2" style={{ marginTop: '1.3rem', maxWidth: '40ch' }}>
            Masz pytania o&nbsp;dostępność, ceny lub możliwości zakupu? Odpowiemy na wszystkie
            i&nbsp;pomożemy wybrać działkę najlepiej dopasowaną do Twoich planów.</p>
          <div className="contact-list reveal d2">
            <a className="cline" href="tel:+48509919101"><span className="ic"><IconPhone /></span>
              <span><span className="cl-l">Telefon</span><span className="cl-v num">509 919 101</span></span></a>
            <a className="cline" href="tel:+48509346605"><span className="ic"><IconPhone /></span>
              <span><span className="cl-l">Telefon</span><span className="cl-v num">509 346 605</span></span></a>
            <a className="cline" href="mailto:wojciech@paciejewski.com"><span className="ic"><IconMail /></span>
              <span><span className="cl-l">E-mail</span><span className="cl-v">wojciech@paciejewski.com</span></span></a>

          </div>
        </div>

        <div className="reveal d1">
          <div className="form-card">
            {!sent ?
            <form onSubmit={submit} noValidate>
                <div className="form-head">
                  <h3 className="display d-md">Oddzwonimy do&nbsp;Ciebie</h3>
                  <p className="muted" style={{ fontSize: '1rem', margin: '.5rem 0 0' }}>Zostaw numer telefonu lub e-mail — odezwiemy się z&nbsp;ofertą działek.</p>
                </div>
                <div className="seg" role="tablist">
                  <button type="button" className={mode === 'phone' ? 'on' : ''} onClick={() => {setMode('phone');setErr('');}}><IconPhone /> Telefon</button>
                  <button type="button" className={mode === 'email' ? 'on' : ''} onClick={() => {setMode('email');setErr('');}}><IconMail /> E-mail</button>
                </div>
                <label className="fl">Imię <span className="opt">(opcjonalnie)</span>
                  <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Jak się do Ciebie zwracać?" />
                </label>
                <label className="fl">{mode === 'phone' ? 'Numer telefonu' : 'Adres e-mail'}
                  <input
                  type={mode === 'phone' ? 'tel' : 'email'}
                  inputMode={mode === 'phone' ? 'tel' : 'email'}
                  value={val} onChange={(e) => {setVal(e.target.value);setErr('');}}
                  placeholder={mode === 'phone' ? 'np. 600 100 200' : 'np. jan@przyklad.pl'} />
                </label>
                <label className="fl">Działki które Cię interesują <span className="opt">(opcjonalnie)</span>
                  <input value={plotNr} onChange={e=>setPlotNr(e.target.value)}
                    placeholder="np. 07, 12, 15"/>
                </label>
                <label className="check">
                  <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
                  <span>Wyrażam zgodę na kontakt w&nbsp;sprawie oferty działek Mazurski&nbsp;Brzask.</span>
                </label>
                {err && <div className="err">{err}</div>}
                <button className="btn btn-primary" type="submit" disabled={sending} style={{ width: '100%', justifyContent: 'center' }}>
                  {sending ? 'Wysyłanie…' : (mode === 'phone' ? 'Proszę o kontakt' : 'Wyślij zgłoszenie')} {!sending && <IconArrowRight />}
                </button>
              </form> :

            <div className="form-done">
                <span className="done-ic"><IconCheck /></span>
                <h3 className="display d-md">Dziękujemy{name ? `, ${name}` : ''}!</h3>
                <p className="muted">Odezwiemy się na <strong style={{ color: 'var(--forest)' }}>{val}</strong> najszybciej, jak to możliwe.</p>
                <button className="btn btn-ghost" onClick={() => {setSent(false);setVal('');setName('');setConsent(false);}}>Wyślij kolejne zgłoszenie</button>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <a className="brand" href="#top"><Logo /></a>
        <div className="footer-grid">
          <div className="col" style={{ maxWidth: '34ch' }}>
            <p>Kameralne działki rekreacyjno-budowlane w&nbsp;Plichcie. Cisza, natura i&nbsp;przestrzeń w&nbsp;sercu warmińsko-mazurskiej przyrody.</p>
          </div>
          <div className="col">
            <h4>Nawigacja</h4>
            <a href="#inwestycja">Inwestycja</a>
            <a href="#lokalizacja">Lokalizacja</a>
            <a href="#dzialki">Mapa działek</a>
            <a href="#kontakt">Kontakt</a>
          </div>
          <div className="col">
            <h4>Kontakt</h4>
            <a href="tel:+48509919101" className="num">509 919 101</a>
            <a href="tel:+48509346605" className="num">509 346 605</a>
            <a href="mailto:wojciech@paciejewski.com">wojciech@paciejewski.com</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Mazurski Brzask. Wszelkie prawa zastrzeżone.</span>
          <span>Wizualizacja poglądowa — nie stanowi oferty w rozumieniu Kodeksu cywilnego.</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Logo, Nav, Hero, About, Character, Advantages, CTA, Contact, Footer, plDz, zl, PLOTS });