/**
 * DateBlock — burgundy section: photo + 29.05.2027 + intro copy.
 * A compact countdown sits BELOW the date (secondary to it) alongside a
 * one-tap "add to calendar" (.ics) link. The closing divider's layout is
 * Tweakable via the `divider` prop.
 */
const { useEffect: useEffectD, useState: useStateD, useRef: useRefD } = React;

function diff(target, now) {
  const ms = Math.max(0, target - now);
  const day = 86_400_000;
  return {
    days: Math.floor(ms / day),
    hours: Math.floor(ms % day / 3_600_000),
    minutes: Math.floor(ms % 3_600_000 / 60_000),
    seconds: Math.floor(ms % 60_000 / 1_000)
  };
}
function pad(n) {return String(n).padStart(2, "0");}

/* Compact, secondary countdown — visually subordinate to the big date. */
function CountdownInline({ date }) {
  const [t, setT] = useStateD(null);
  const target = useRefD(new Date(date).getTime());
  useEffectD(() => {
    const tick = () => setT(diff(target.current, Date.now()));
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
  const cells = [
  { label: "Tage", v: t ? t.days : "—" },
  { label: "Std", v: t ? pad(t.hours) : "—" },
  { label: "Min", v: t ? pad(t.minutes) : "—" }];

  return (
    <div className="date-countdown" aria-label="Countdown bis zur Hochzeit">
      {cells.map((c, i) =>
      <span key={c.label} className="cd-cell">
          <span className="cd-num">{c.v}</span>
          <span className="cd-label">{c.label}</span>
          {i < cells.length - 1 && <span className="cd-sep" aria-hidden="true">·</span>}
        </span>
      )}
    </div>);
}

/* One-tap calendar link. On mobile the .ics download is offered to the OS,
   which routes it straight into the default calendar app. */
function CalLink({ date }) {
  const handle = (e) => {
    e.preventDefault();
    const start = new Date(date);
    const end = new Date(start.getTime() + 10 * 3_600_000); // ~all-day celebration
    const ics = window.buildIcs({
      title: "Kathy & Christian — Hochzeit",
      description: "Save the Date — Kathy & Christian heiraten.",
      location: "Eisenstadt / Sigleß, Burgenland",
      start,
      end,
      uid: "save-the-date@kathychristian.wedding"
    });
    window.downloadIcs("kathy-christian-save-the-date.ics", ics);
  };
  return (
    <a href="#" className="cal-link" onClick={handle}>
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="3" y="4.5" width="18" height="16" rx="2" />
        <path d="M3 9h18M8 2.5v4M16 2.5v4M12 13v4M10 15h4" />
      </svg>
      Zum Kalender hinzufügen
    </a>);

}

function DateBlock({ dateDisplay, intro, date, showCountdown, divider = "below-text", flourish }) {
  return (
    <section
      className="section section-burgundy date-block"
      id="datum"
      data-screen-label="02 Datum">

      <div className="inner">
        <div className="photo-frame photo-frame--wide reveal">
          <image-slot id="date-photo" placeholder="Foto · Kathy & Christian" shape="rect"></image-slot>
        </div>
        <div className="copy reveal">
          <Flourish name={flourish} className="flourish--inline" />
          <div className="big-date">{dateDisplay}</div>
          <p>{intro.line1}</p>
          <p className="intro-light">{intro.line2}</p>
          {showCountdown && <CountdownInline date={date} />}
          <CalLink date={date} />
        </div>
      </div>

      <SectionDivider variant={divider} />
    </section>);
}

if (typeof window !== "undefined") window.DateBlock = DateBlock;