/* global React */
const { useState, useEffect } = React;

const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DOW = ["S","M","T","W","T","F","S"];

function buildMonth(y, m) {
  const first = new Date(y, m, 1);
  const start = new Date(y, m, 1 - first.getDay());
  return Array.from({ length: 42 }, (_, i) => {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    return d;
  });
}
const dayKey = d => d.toISOString().slice(0, 10);

function generateSlots(date) {
  const dow = date.getDay();
  if (dow === 0 || dow === 6) return [];
  const today = new Date(); today.setHours(0,0,0,0);
  if (date < today) return [];
  const seed = date.getDate() * 31 + date.getMonth() * 7;
  return [
    { time: "9:00 am", dur: "15 min", who: "Bryan", taken: seed % 7 === 0 },
    { time: "9:30 am", dur: "15 min", who: "Bryan", taken: false },
    { time: "10:15 am", dur: "15 min", who: "Bryan", taken: seed % 5 === 0 },
    { time: "11:00 am", dur: "15 min", who: "Devin", taken: false },
    { time: "1:00 pm", dur: "15 min", who: "Bryan", taken: seed % 4 === 0 },
    { time: "2:30 pm", dur: "15 min", who: "Devin", taken: false },
    { time: "3:15 pm", dur: "15 min", who: "Bryan", taken: seed % 3 === 0 },
    { time: "4:00 pm", dur: "15 min", who: "Devin", taken: false },
    { time: "4:45 pm", dur: "15 min", who: "Bryan", taken: false },
  ];
}

function Nav() {
  return (
    <nav className="nav">
      <a href="index.html" className="wordmark">
        <span className="seed"></span>
        Harvest
      </a>
      <div className="nav-links"></div>
      <a href="index.html" className="nav-cta">← Home</a>
    </nav>
  );
}

function TalkHero() {
  return (
    <section className="talk-hero">
      <div className="host-chip">
        <span className="avatar">B</span>
        <span>Bryan · co-founder · talks to every new user</span>
      </div>
      <h1>Fifteen minutes,<br/><em>founder to founder</em>.</h1>
      <p>No deck. No salesperson. We'll open your account together and decide on the spot whether Harvest is right for you.</p>
    </section>
  );
}

function Steps({ step }) {
  const stepIdx = step === "pick" ? 0 : step === "confirm" ? 1 : 2;
  const labels = ["Pick a time", "Your details", "Confirmed"];
  return (
    <div className="booker-steps">
      {labels.map((l, i) => (
        <div key={i} className={"step" + (i === stepIdx ? " active" : "") + (i < stepIdx ? " done" : "")}>
          <span className="num">{i < stepIdx ? "✓" : i + 1}</span>
          <span>{l}</span>
        </div>
      ))}
    </div>
  );
}

function Calendar({ selected, onSelect }) {
  const today = new Date();
  const [view, setView] = useState({ y: today.getFullYear(), m: today.getMonth() });
  const cells = buildMonth(view.y, view.m);
  const minView = today.getFullYear() * 12 + today.getMonth();
  const cur = view.y * 12 + view.m;

  return (
    <div>
      <div className="cal-head">
        <div className="cal-month">{MONTHS[view.m]} {view.y}</div>
        <div className="cal-nav">
          <button disabled={cur <= minView} onClick={() => setView(v => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 })}>‹</button>
          <button onClick={() => setView(v => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 })}>›</button>
        </div>
      </div>
      <div className="cal-grid">
        {DOW.map((d, i) => <div className="cal-dow" key={"dow" + i}>{d}</div>)}
        {cells.map((d, i) => {
          const inMonth = d.getMonth() === view.m;
          const slots = generateSlots(d);
          const has = slots.length > 0 && inMonth;
          const isSel = selected && dayKey(d) === dayKey(selected);
          return (
            <button
              key={i}
              className={"cal-day" + (has ? " has-slots" : "") + (isSel ? " selected" : "")}
              disabled={!has}
              onClick={() => onSelect(d)}
              style={{ opacity: inMonth ? 1 : 0.25 }}
            >
              {d.getDate()}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function Slots({ date, onPick }) {
  if (!date) {
    return (
      <div className="slots-pane">
        <div className="slots-head">PICK A DAY</div>
        <div className="slots-empty">Choose a date to see open times.</div>
      </div>
    );
  }
  const slots = generateSlots(date);
  const fmt = date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
  const open = slots.filter(s => !s.taken).length;
  return (
    <div className="slots-pane">
      <div className="slots-head">{open} OPEN · 15 MINUTES EACH</div>
      <div className="slots-date">{fmt}</div>
      <div className="slots-list">
        {slots.length === 0 && <div className="slots-empty">Closed for bookings.</div>}
        {slots.map((s, i) => (
          <button key={i} className={"slot" + (s.taken ? " taken" : "")} disabled={s.taken} onClick={() => !s.taken && onPick(s)}>
            <div>
              <div className="time">{s.time}</div>
              <div className="meta">with {s.who}</div>
            </div>
            <span className="pick">{s.taken ? "Taken" : "Pick →"}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function Confirm({ date, slot, onBack, onSubmit }) {
  const [form, setForm] = useState({ name: "", email: "", company: "", spend: "$1k–5k / mo", note: "" });
  const fmt = date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
  return (
    <form className="confirm-step" onSubmit={e => { e.preventDefault(); onSubmit({ ...form, date: fmt, time: slot.time, host: slot.who }); }}>
      <div className="confirm-summary">
        <div className="lbl">YOU'RE BOOKING</div>
        <div className="when"><strong>{fmt}</strong><br/>at {slot.time}</div>
        <div className="row"><span>Duration</span><span>{slot.dur}</span></div>
        <div className="row"><span>With</span><span>{slot.who}</span></div>
        <div className="row"><span>Format</span><span>Video or phone</span></div>
        <div className="row"><span>Cost</span><span>$0</span></div>
      </div>
      <div className="confirm-form">
        <label>Your name
          <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Jane Founder" />
        </label>
        <label>Email
          <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="jane@yourstartup.com" />
        </label>
        <label>What are you building?
          <input value={form.company} onChange={e => setForm({...form, company: e.target.value})} placeholder="One line is plenty" />
        </label>
        <label>Current ad spend
          <select value={form.spend} onChange={e => setForm({...form, spend: e.target.value})}>
            <option>Not yet</option>
            <option>Under $1k / mo</option>
            <option>$1k–5k / mo</option>
            <option>$5k–25k / mo</option>
            <option>$25k+ / mo</option>
          </select>
        </label>
        <label>Anything we should know?
          <textarea value={form.note} onChange={e => setForm({...form, note: e.target.value})} placeholder="Honest beats polished." />
        </label>
        <div className="confirm-actions">
          <button type="button" className="btn-back" onClick={onBack}>← Change time</button>
          <button type="submit" className="btn-primary">Confirm <span className="arrow">→</span></button>
        </div>
      </div>
    </form>
  );
}

function Done({ booking }) {
  return (
    <div className="done-step">
      <div className="done-bloom"></div>
      <h2>See you <em>soon</em>.</h2>
      <div className="when-line"><strong>{booking.date}</strong> at <strong>{booking.time}</strong><br/>with {booking.host}</div>
      <div className="small">Calendar invite sent to {booking.email}</div>
      <a className="back" href="index.html">← Back to Harvest</a>
    </div>
  );
}

function TalkApp() {
  const [step, setStep] = useState("pick");
  const [date, setDate] = useState(null);
  const [slot, setSlot] = useState(null);
  const [booking, setBooking] = useState(null);

  return (
    <div className="talk-page">
      <Nav />
      <TalkHero />
      <div className="booker">
        <Steps step={step} />
        {step === "pick" && (
          <div className="pick-grid">
            <Calendar selected={date} onSelect={setDate} />
            <Slots date={date} onPick={s => { setSlot(s); setStep("confirm"); }} />
          </div>
        )}
        {step === "confirm" && (
          <Confirm
            date={date}
            slot={slot}
            onBack={() => setStep("pick")}
            onSubmit={b => {
              setBooking(b);
              setStep("done");
              fetch("/api/contact", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(b),
              }).catch(err => console.error("contact submit failed", err));
            }}
          />
        )}
        {step === "done" && <Done booking={booking} />}
      </div>
    </div>
  );
}

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