const { useState, useEffect, useRef } = React;

const PALETTES = {
  sand:    { bg: "#f6f1e8", surface: "#fbf8f2", ink: "#1a1814", muted: "#6b6253", line: "#e3dccd", accent: "#8a6f3f", accentInk: "#fbf8f2" },
  weiss:   { bg: "#ffffff", surface: "#f7f7f5", ink: "#111111", muted: "#666666", line: "#e6e6e3", accent: "#1a1a1a", accentInk: "#ffffff" },
  marine:  { bg: "#eef2f6", surface: "#f7fafc", ink: "#0a1f33", muted: "#4a5d70", line: "#cfd9e3", accent: "#1e3a5f", accentInk: "#f7fafc" },
  como:    { bg: "#f5f1e8", surface: "#faf6ec", ink: "#1c2a1f", muted: "#5a6a55", line: "#dcd5c2", accent: "#2d4a32", accentInk: "#faf6ec" }
};
const TYPO = {
  sans:    { display: "'Inter', sans-serif", body: "'Inter', sans-serif" },
  didone:  { display: "'Playfair Display', 'Bodoni Moda', Georgia, serif", body: "'Inter', sans-serif" },
  editorial: { display: "'Cormorant Garamond', Georgia, serif", body: "'Inter', sans-serif" }
};

const IMG = {
  hero: "photos/villa-pool-bay.jpg",
  villa1: "photos/villa-pool-loungers.jpg",
  location: "photos/villa-pool-islands.jpg"
};

// Galerie-Sektionen mit echten Bildern. Innenräume + Suiten sind Platzhalter,
// bis Innen-Fotos hochgeladen werden.
const GALLERY = {
  exterior: [
    { id: "ext-1", url: "photos/villa-aerial-front.jpg", aspect: "wide" },
    { id: "ext-2", url: "photos/villa-aerial-bay.jpg", aspect: "tall" },
    { id: "ext-3", url: "photos/villa-aerial-overview.jpg", aspect: "wide" },
    { id: "ext-4", url: "photos/villa-architecture.jpg", aspect: "square" },
    { id: "ext-5", url: "photos/villa-entrance.jpg", aspect: "square" }
  ],
  pool: [
    { id: "pool-1", url: "photos/villa-pool-bay.jpg", aspect: "wide" },
    { id: "pool-2", url: "photos/villa-pool-loungers.jpg", aspect: "tall" },
    { id: "pool-3", url: "photos/villa-pool-islands.jpg", aspect: "tall" },
    { id: "pool-4", url: "photos/villa-pool-side.jpg", aspect: "wide" },
    { id: "pool-5", url: "photos/villa-pool-distant.jpg", aspect: "square" }
  ],
  interior: [
    { id: "int-1", url: "photos/villa-living-pano.jpg", aspect: "wide" },
    { id: "int-2", url: "photos/villa-living-room.jpg", aspect: "square" },
    { id: "int-3", url: "photos/villa-staircase.jpg", aspect: "tall" },
    { id: "int-4", url: "photos/villa-kitchen-island.jpg", aspect: "wide" },
    { id: "int-5", url: "photos/villa-living-sea.jpg", aspect: "square" }
  ],
  bedrooms: [
    { id: "bed-1", url: "photos/villa-bedroom-master.jpg", aspect: "wide" },
    { id: "bed-2", url: "photos/villa-bedroom-seaview.jpg", aspect: "tall" },
    { id: "bed-3", url: "photos/villa-bedroom-sea.jpg", aspect: "square" },
    { id: "bed-4", url: "photos/villa-bedroom-orange.jpg", aspect: "square" },
    { id: "bed-5", url: "photos/villa-hallway.jpg", aspect: "wide" }
  ],
  details: [
    { id: "det-1", url: "photos/villa-bathroom-shower.jpg", aspect: "square" },
    { id: "det-2", url: "photos/villa-bath-detail.jpg", aspect: "tall" },
    { id: "det-3", url: "photos/villa-sofa-detail.jpg", aspect: "wide" },
    { id: "det-4", url: "photos/villa-dining-sea.jpg", aspect: "wide" },
    { id: "det-5", url: "photos/villa-swallows.jpg", aspect: "square" }
  ]
};

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [lang, setLang] = useState("en");
  const [scrolled, setScrolled] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const dict = window.I18N[lang];
  const palette = PALETTES[t.palette] || PALETTES.sand;
  const typo = TYPO[t.typo] || TYPO.serif;
  const cssVars = {
    "--bg": palette.bg, "--surface": palette.surface, "--ink": palette.ink,
    "--muted": palette.muted, "--line": palette.line, "--accent": palette.accent,
    "--accent-ink": palette.accentInk,
    "--font-display": typo.display, "--font-body": typo.body
  };
  const scrollTo = (id) => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };
  useEffect(() => {
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
    document.documentElement.lang = lang;
  }, [lang]);
  return (
    <div style={cssVars} className={"page " + (lang === "ar" ? "page--rtl" : "")}>
      <Nav dict={dict} lang={lang} setLang={setLang} scrolled={scrolled} scrollTo={scrollTo} menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Hero dict={dict} t={t} scrollTo={scrollTo}/>
      <QuickFacts dict={dict}/>
      <Villa dict={dict}/>
      <Features dict={dict} scrollTo={scrollTo}/>
      <LocationHero dict={dict}/>
      <LocationDetail dict={dict}/>
      <Gallery dict={dict}/>
      <Prices dict={dict}/>
      <Contact dict={dict} lang={lang} onSuccess={()=>setSubmitted(true)} submitted={submitted}/>
      <Footer dict={dict}/>
      {t.stickyBar && <StickyBar dict={dict} scrollTo={scrollTo}/>}
      <TweaksUI t={t} setTweak={setTweak}/>
    </div>
  );
}

const LANGS = [
  { code: "en", cc: "gb", label: "English" },
  { code: "de", cc: "de", label: "Deutsch" },
  { code: "tr", cc: "tr", label: "Türkçe" },
  { code: "ru", cc: "ru", label: "Русский" },
  { code: "ar", cc: "sa", label: "العربية" },
  { code: "zh", cc: "cn", label: "中文" },
];
const Flag = ({ cc, alt }) => (
  <img className="flag" src={`https://flagcdn.com/w40/${cc}.png`} srcSet={`https://flagcdn.com/w80/${cc}.png 2x`} alt={alt || cc} width="20" height="14"/>
);

function LangSwitcher({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const current = LANGS.find(l => l.code === lang) || LANGS[0];
  return (
    <div className="nav__lang" ref={ref}>
      <button className="nav__lang-toggle" onClick={() => setOpen(o=>!o)} aria-haspopup="listbox" aria-expanded={open}>
        <Flag cc={current.cc} alt={current.label}/>
        <span className="nav__lang-caret">▾</span>
      </button>
      {open && (
        <ul className="nav__lang-menu" role="listbox">
          {LANGS.map(l => (
            <li key={l.code}>
              <button className={"nav__lang-opt" + (l.code===lang?" on":"")} onClick={()=>{ setLang(l.code); setOpen(false); }} aria-label={l.label}>
                <Flag cc={l.cc} alt={l.label}/>
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function Nav({ dict, lang, setLang, scrolled, scrollTo, menuOpen, setMenuOpen }) {
  const items = [["villa","villa"],["features","features"],["location","location"],["gallery","gallery"],["prices","prices"],["contact","contact"]];
  return (
    <nav className={"nav " + (scrolled ? "nav--scrolled" : "")}>
      <div className="nav__inner">
        <div className="nav__left">
          <a className="nav__brand" onClick={() => window.scrollTo({top:0,behavior:"smooth"})}>VILLA Yasmin</a>
          <a className="nav__gallery-link" onClick={()=>scrollTo("gallery")}>{dict.nav.gallery}</a>
        </div>
        <div className="nav__center">
          <span className="nav__mark">Y</span>
        </div>
        <div className="nav__right">
          <LangSwitcher lang={lang} setLang={setLang}/>
          <button className="nav__burger" onClick={()=>setMenuOpen(!menuOpen)} aria-label="menu">
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="nav__mobile">
          {items.map(([k,id]) => <a key={id} onClick={()=>scrollTo(id)}>{dict.nav[k]}</a>)}
        </div>
      )}
    </nav>
  );
}

function Hero({ dict, t, scrollTo }) {
  const split = t.heroLayout === "split";
  const [muted, setMuted] = useState(true);
  return (
    <header className={"hero " + (split ? "hero--split" : "hero--full")}>
      <div className="hero__media">
        <video className="hero__video" src="hero-video.mp4" autoPlay muted={muted} loop playsInline poster={IMG.hero}/>
        <div className="hero__veil"/>
      </div>
      <div className="hero__content">
        <div className="hero__inner">
          <p className="eyebrow eyebrow--light">{dict.hero.eyebrow}</p>
          <h1 className="display">{dict.hero.title}</h1>
          <p className="hero__sub">{dict.hero.subtitle}</p>
          <div className="hero__cta">
            <button className="btn btn--primary" onClick={()=>scrollTo("contact")}>{dict.hero.cta}</button>
            <button className="btn btn--ghost" onClick={()=>scrollTo("gallery")}>{dict.hero.ctaSecondary} →</button>
          </div>
        </div>
        <button className="hero__audio" onClick={()=>setMuted(!muted)} aria-label="audio">
          {muted ? "🔇 Audio On" : "🔊 Audio Off"}
        </button>
        <div className="hero__scroll"><span/></div>
      </div>
    </header>
  );
}

function QuickFacts({ dict }) {
  const items = [
    { v: "4", l: dict.quickFacts.bedrooms },
    { v: "8", l: dict.quickFacts.guests },
    { v: "400", l: dict.quickFacts.size, suf: "m²" },
    { v: "∞", l: dict.quickFacts.pool }
  ];
  return (
    <section className="qfacts">
      <div className="container qfacts__grid">
        {items.map((i, idx) => (
          <div key={idx} className="qfacts__cell">
            <div className="qfacts__v">{i.v}<span>{i.suf}</span></div>
            <div className="qfacts__l">{i.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Villa({ dict }) {
  return (
    <section id="villa" className="section">
      <div className="container">
        <div className="editorial">
          <p className="eyebrow">{dict.villa.eyebrow}</p>
          <h2 className="mega">{dict.villa.title}</h2>
        </div>
        <div className="two-col two-col--text-led">
          <div><p className="lead">{dict.villa.lead}</p></div>
          <div><p className="body">{dict.villa.p2}</p></div>
        </div>
        <div className="bigshot">
          <image-slot id="villa-hero" placeholder="" src={IMG.villa1}></image-slot>
        </div>
      </div>
    </section>
  );
}

function Features({ dict, scrollTo }) {
  // Map feature index -> gallery section anchor
  const targets = ["gal-pool","gal-exterior","gal-exterior","gal-details","gal-exterior","gal-interior"];
  const thumbs = [
    "photos/villa-pool-bay.jpg",
    "photos/villa-pool-loungers.jpg",
    "photos/villa-entrance.jpg",
    "photos/villa-bathroom-shower.jpg",
    "https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=800&q=80",
    "https://images.unsplash.com/photo-1528207776546-365bb710ee93?w=800&q=80"
  ];
  return (
    <section id="features" className="section section--alt">
      <div className="container">
        <div className="editorial">
          <p className="eyebrow">{dict.features.eyebrow}</p>
          <h2 className="mega">{dict.features.title}</h2>
        </div>
        <div className="features__grid">
          {dict.features.items.map((f, i) => (
            <a key={i} className="feature feature--clickable" onClick={()=>scrollTo(targets[i])}>
              <div className="feature__thumb"><img src={thumbs[i]} alt=""/></div>
              <div className="feature__num">{String(i+1).padStart(2,"0")}</div>
              <h3 className="feature__title">{f.title}</h3>
              <p className="feature__desc">{f.desc}</p>
              <span className="feature__cta">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function LocationHero({ dict }) {
  return (
    <section id="location" className="loc-hero">
      <div className="loc-hero__bg">
        <image-slot id="loc-hero" placeholder="" src={IMG.location}></image-slot>
        <div className="loc-hero__veil"/>
      </div>
      <div className="loc-hero__content">
        <p className="eyebrow eyebrow--light">{dict.location.eyebrow}</p>
        <h2 className="hugetype">{dict.location.title.toUpperCase()}</h2>
        <p className="loc-hero__tag">{dict.location.tagline}</p>
      </div>
    </section>
  );
}

function LocationDetail({ dict }) {
  return (
    <section className="section">
      <div className="container">
        <div className="two-col two-col--text-led" style={{marginBottom: "80px"}}>
          <div>
            <p className="lead">{dict.location.lead}</p>
            {dict.location.address && <p className="loc-address">{dict.location.address}</p>}
          </div>
          <div><p className="body">{dict.location.story}</p></div>
        </div>

        <div className="loc-grid">
          <LocBlock title={dict.location.distancesTitle} items={dict.location.distances} dist/>
          <LocBlock title={dict.location.beachClubsTitle} items={dict.location.beachClubs}/>
          <LocBlock title={dict.location.marinasTitle} items={dict.location.marinas}/>
          <LocBlock title={dict.location.diningTitle} items={dict.location.dining}/>
          <LocBlock title={dict.location.culturalTitle} items={dict.location.cultural} wide/>
        </div>

        <div className="loc-map">
          <iframe
            src="https://www.openstreetmap.org/export/embed.html?bbox=27.225%2C36.985%2C27.290%2C37.040&amp;layer=mapnik&amp;marker=37.0210%2C27.2570"
            style={{border:0, width:"100%", height:"480px"}}
            loading="lazy"
            title="Turgutreis Karte"
          />
        </div>
      </div>
    </section>
  );
}

function LocBlock({ title, items, dist, wide }) {
  return (
    <div className={"loc-block " + (wide?"loc-block--wide":"")}>
      <h3 className="loc-block__title">{title}</h3>
      <ul className="loc-block__list">
        {items.map((it, i) => (
          <li key={i} className={dist?"loc-list__row":"loc-block__item"}>
            {dist ? (
              <>
                <span>{it.label}</span>
                <span className="loc-list__v">{it.value}</span>
              </>
            ) : (
              <>
                <div className="loc-block__name">{it.name}</div>
                <div className="loc-block__desc">{it.desc}</div>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

function Gallery({ dict }) {
  const order = ["exterior","pool","interior","bedrooms","details"];
  return (
    <section id="gallery" className="section section--alt">
      <div className="container">
        <div className="editorial">
          <p className="eyebrow">{dict.gallery.eyebrow}</p>
          <h2 className="mega">{dict.gallery.title}</h2>
        </div>
        {order.map(key => (
          <div key={key} id={"gal-"+key} className="gal-section">
            <h3 className="gal-section__title">{dict.gallery.sections[key]}</h3>
            <div className="gallery">
              {GALLERY[key].map(s => (
                <div key={s.id} className={"gallery__cell gallery__cell--"+s.aspect+(s.placeholder?" gallery__cell--placeholder":"")}>
                  <image-slot id={s.id} placeholder={s.placeholder?"Bild hochladen":""} src={s.url}></image-slot>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Prices({ dict }) {
  return (
    <section id="prices" className="section">
      <div className="container">
        <div className="editorial editorial--center">
          <p className="eyebrow">{dict.prices.eyebrow}</p>
          <h2 className="mega">{dict.prices.title}</h2>
        </div>
        <div className="prices">
          {dict.prices.seasons.map((s, i) => (
            <div key={i} className="price-card">
              <div className="price-card__months">{s.months}</div>
              <div className="price-card__price">{s.price}</div>
            </div>
          ))}
        </div>
        <p className="prices__note">{dict.prices.note}</p>
      </div>
    </section>
  );
}

function ymd(d) {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${day}`;
}

function DateRangePicker({ dict, lang, value, onChange }) {
  const today = new Date(); today.setHours(0,0,0,0);
  const todayStr = ymd(today);
  const [open, setOpen] = useState(false);
  const [hover, setHover] = useState(null);
  const [view, setView] = useState(new Date(today.getFullYear(), today.getMonth(), 1));
  const ref = useRef(null);
  const { start, end, flex } = value;
  const locale = lang === 'ar' ? 'ar' : lang;

  useEffect(() => {
    function onDocClick(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    }
    if (open) document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, [open]);

  function pickDay(d) {
    const ds = ymd(d);
    if (!start || (start && end)) { onChange({ start: ds, end: null, flex }); return; }
    if (ds <= start) { onChange({ start: ds, end: null, flex }); return; }
    onChange({ start, end: ds, flex });
  }
  function setFlex(n) { onChange({ start, end, flex: n }); }
  function reset() { onChange({ start: null, end: null, flex: 0 }); }

  function fmt(s) {
    if (!s) return null;
    const d = new Date(s + 'T00:00:00');
    return d.toLocaleDateString(locale, { day: 'numeric', month: 'short', year: 'numeric' });
  }

  const buttonText = start && end
    ? `${fmt(start)} → ${fmt(end)}`
    : start ? `${fmt(start)} → …` : dict.contact.datesPlaceholder;

  function buildMonth(viewDate) {
    const y = viewDate.getFullYear(), m = viewDate.getMonth();
    const first = new Date(y, m, 1);
    const dow = (first.getDay() + 6) % 7;
    const daysInMonth = new Date(y, m + 1, 0).getDate();
    const cells = [];
    for (let i = 0; i < dow; i++) cells.push(null);
    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
    return cells;
  }

  function weekdayLabels() {
    const base = new Date(2024, 0, 1); // Monday
    const out = [];
    for (let i = 0; i < 7; i++) {
      const d = new Date(base); d.setDate(base.getDate() + i);
      out.push(d.toLocaleDateString(locale, { weekday: 'short' }));
    }
    return out;
  }

  function renderMonth(viewDate) {
    const cells = buildMonth(viewDate);
    const monthLabel = viewDate.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
    const wk = weekdayLabels();
    return (
      <div className="drp__month">
        <div className="drp__month-label">{monthLabel}</div>
        <div className="drp__weekdays">{wk.map((w,i)=><span key={i}>{w}</span>)}</div>
        <div className="drp__grid">
          {cells.map((d, i) => {
            if (!d) return <span key={i} className="drp__cell drp__cell--empty"/>;
            const ds = ymd(d);
            const past = ds < todayStr;
            const isStart = ds === start;
            const isEnd = ds === end;
            const inRange = start && end && ds > start && ds < end;
            const inHover = start && !end && hover && ds > start && ds <= hover;
            const cls = ['drp__cell'];
            if (past) cls.push('drp__cell--past');
            if (isStart) cls.push('drp__cell--start');
            if (isEnd) cls.push('drp__cell--end');
            if (inRange || inHover) cls.push('drp__cell--in');
            return (
              <button type="button" key={i} className={cls.join(' ')} disabled={past}
                onClick={() => pickDay(d)}
                onMouseEnter={() => setHover(ds)}>{d.getDate()}</button>
            );
          })}
        </div>
      </div>
    );
  }

  const nextView = new Date(view.getFullYear(), view.getMonth() + 1, 1);
  const prevView = new Date(view.getFullYear(), view.getMonth() - 1, 1);
  const canPrev = ymd(prevView) >= ymd(new Date(today.getFullYear(), today.getMonth(), 1));
  const flexOpts = [0, 1, 2, 3, 7];

  return (
    <div className="drp" ref={ref}>
      <button type="button" className="drp__trigger" onClick={() => setOpen(o=>!o)}>
        <span>{buttonText}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>
      </button>
      {open && (
        <div className="drp__pop">
          <div className="drp__nav">
            <button type="button" className="drp__nav-btn" disabled={!canPrev} onClick={() => setView(prevView)} aria-label="Prev">‹</button>
            <button type="button" className="drp__nav-btn" onClick={() => setView(nextView)} aria-label="Next">›</button>
          </div>
          <div className="drp__months">
            {renderMonth(view)}
            {renderMonth(nextView)}
          </div>
          <div className="drp__flex">
            <span className="drp__flex-label">{dict.contact.flexLabel}:</span>
            {flexOpts.map(n => (
              <button type="button" key={n}
                className={'drp__flex-chip' + (flex === n ? ' is-active' : '')}
                onClick={() => setFlex(n)}>
                {n === 0 ? dict.contact.flexNone : dict.contact.flexDays.replace('{n}', n)}
              </button>
            ))}
          </div>
          <div className="drp__actions">
            <button type="button" className="drp__link" onClick={reset}>{dict.contact.clear}</button>
            <button type="button" className="btn btn--sm btn--primary" onClick={() => setOpen(false)} disabled={!start || !end}>{dict.contact.apply}</button>
          </div>
        </div>
      )}
    </div>
  );
}

function Contact({ dict, lang, onSuccess, submitted }) {
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [dates, setDates] = useState({ start: null, end: null, flex: 0 });

  async function handleSubmit(e) {
    e.preventDefault();
    if (sending) return;
    if (!dates.start || !dates.end) {
      setError(dict.contact.datesPlaceholder);
      return;
    }
    setSending(true);
    setError(null);
    const form = e.target;
    const data = new FormData(form);
    data.set('checkin', dates.start);
    data.set('checkout', dates.end);
    data.set('flex', String(dates.flex));
    try {
      const res = await fetch("kontakt.php", { method: "POST", body: data });
      let payload = null;
      try { payload = await res.json(); } catch (_) {}
      if (!res.ok || !payload || !payload.ok) {
        throw new Error((payload && payload.error) || "send_failed");
      }
      onSuccess();
    } catch (err) {
      setError(dict.contact.error);
      setSending(false);
    }
  }

  const honeypotStyle = {
    position: "absolute", left: "-10000px", top: "auto",
    width: "1px", height: "1px", overflow: "hidden", opacity: 0
  };

  return (
    <section id="contact" className="section section--dark">
      <div className="container">
        <div className="editorial">
          <p className="eyebrow eyebrow--light">{dict.contact.eyebrow}</p>
          <h2 className="mega mega--light">{dict.contact.title}</h2>
        </div>
        <div className="two-col two-col--text-led" style={{marginBottom:"40px"}}>
          <div><p className="lead lead--light">{dict.contact.lead}</p></div>
          <div></div>
        </div>
        {submitted ? (
          <div className="form-thanks">
            <div className="form-thanks__mark">✓</div>
            <p>{dict.contact.thanks}</p>
          </div>
        ) : (
          <form className="form" onSubmit={handleSubmit}>
            <div className="form__row">
              <label><span>{dict.contact.name}</span><input name="name" type="text" required/></label>
              <label><span>{dict.contact.email}</span><input name="email" type="email" required/></label>
            </div>
            <div className="form__row">
              <label><span>{dict.contact.phone}</span><input name="phone" type="tel"/></label>
              <label><span>{dict.contact.guests}</span>
                <select name="guests" defaultValue="2">{[2,3,4,5,6,7,8].map(n => <option key={n} value={n}>{n}</option>)}</select>
              </label>
            </div>
            <label className="form__dates">
              <span>{dict.contact.datesLabel}</span>
              <DateRangePicker dict={dict} lang={lang} value={dates} onChange={setDates}/>
            </label>
            <label><span>{dict.contact.message}</span><textarea name="message" rows="3"></textarea></label>
            <div style={honeypotStyle} aria-hidden="true">
              <label>Website<input type="text" name="website" tabIndex="-1" autoComplete="off"/></label>
            </div>
            {error && (
              <div role="alert" style={{color:"#ff8a8a",marginBottom:"12px",textAlign:"center",fontSize:"0.95em"}}>
                {error}
              </div>
            )}
            <button type="submit" className="btn btn--primary btn--block" disabled={sending}>
              {sending ? dict.contact.sending : dict.contact.submit}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

function Footer({ dict }) {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div>{dict.footer.tagline}</div>
        <p className="footer__rights">{dict.footer.rights}</p>
      </div>
    </footer>
  );
}

function StickyBar({ dict, scrollTo }) {
  return (
    <div className="sticky">
      <div className="sticky__inner">
        <div className="sticky__txt">
          <strong>Villa Yasmin</strong>
          <span className="muted">·</span>
          <span>{dict.sticky.from}</span>
        </div>
        <button className="btn btn--primary btn--sm" onClick={()=>scrollTo("contact")}>{dict.sticky.check}</button>
      </div>
    </div>
  );
}

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Farbpalette" />
      <TweakRadio label="Palette" value={t.palette} options={["sand","weiss","marine","como"]} onChange={(v)=>setTweak("palette", v)} />
      <TweakSection label="Hero-Layout" />
      <TweakRadio label="Layout" value={t.heroLayout} options={["full","split"]} onChange={(v)=>setTweak("heroLayout", v)} />
      <TweakSection label="Typografie" />
      <TweakSelect label="Schrift" value={t.typo} options={["sans","didone","editorial"]} onChange={(v)=>setTweak("typo", v)} />
      <TweakSection label="Buchungsleiste" />
      <TweakToggle label="Sticky-Bar" value={t.stickyBar} onChange={(v)=>setTweak("stickyBar", v)} />
    </TweaksPanel>
  );
}

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