function Contact() {
  // Build a 4-week mock calendar starting from today, weekdays only
  const today = new Date();
  const monthName = today.toLocaleDateString("en-AU", { month: "long", year: "numeric" });
  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const startDow = firstOfMonth.getDay(); // 0 Sun .. 6 Sat
  const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const todayDate = today.getDate();
  const [selected, setSelected] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);

  // Random-ish "available" days — only weekdays, only future
  const isAvailable = (d) => {
    if (!d || d < todayDate) return false;
    const date = new Date(today.getFullYear(), today.getMonth(), d);
    const dow = date.getDay();
    if (dow === 0 || dow === 6) return false;
    return true;
  };

  const slots = ["09:00", "10:30", "13:00", "14:30", "15:30", "16:00"];

  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="reveal">
            <span className="eyebrow">Let's chat</span>
            <h2 className="h-section">
              Free 30-minute<br/>chat. No deck. No pitch.
            </h2>
            <p className="body-lg">
              Tell us where AI feels stuck, what your team's already trying, and what you wish
              someone would just <em>do</em> for you. We'll tell you whether we can help — and if
              we can't, we'll point you to someone who can.
            </p>
            <ul className="contact-perks">
              {[
                "Real conversation with Steven, not a sales rep",
                "We'll review your stack before the call",
                "You leave with a one-page opportunity map — even if you don't hire us",
              ].map((t, i) => (
                <li key={i}>
                  <span className="check">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7"/></svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          <div className="contact-card reveal delay-1">
            <div className="cal-head">
              <button className="cal-nav" aria-label="Previous month">‹</button>
              <span className="cal-month">{monthName}</span>
              <button className="cal-nav" aria-label="Next month">›</button>
            </div>
            <div className="cal-dow">
              {["S","M","T","W","T","F","S"].map((d, i) => <span key={i}>{d}</span>)}
            </div>
            <div className="cal-grid">
              {cells.map((d, i) => (
                <button
                  key={i}
                  className={
                    "cal-day"
                    + (d === todayDate ? " today" : "")
                    + (selected === d ? " selected" : "")
                  }
                  disabled={!isAvailable(d)}
                  onClick={() => { setSelected(d); setSelectedTime(null); }}
                >
                  {d ?? ""}
                </button>
              ))}
            </div>

            <div className="time-slots">
              {slots.map((s) => (
                <button
                  key={s}
                  className={"time-slot" + (selectedTime === s ? " selected" : "")}
                  onClick={() => setSelectedTime(s)}
                  disabled={!selected}
                >
                  {s}
                </button>
              ))}
            </div>

            <button className="book-btn" disabled={!selected || !selectedTime}>
              {selected && selectedTime
                ? `Book ${monthName.split(" ")[0]} ${selected} at ${selectedTime}`
                : "Pick a day and time"
              }
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;