/* eslint-disable */
/* Shared chrome for both Dusko landing pages.
   Exposes: window.DuskoShell — { Nav, Clients, Booking, Contact, Footer, Tweaks, SectionLabel,
            useReveal, useTweaks, TWEAKS_DEFAULTS, DISPLAY_FONTS, mountApp(Content) } */

const { useState, useEffect, useRef } = React;

const DUSKO_TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Inter Tight",
  "displayWeight": 500,
  "accent": "#c2410c",
  "background": "#f6f4ef"
}/*EDITMODE-END*/;

const DISPLAY_FONTS = {
  "Inter Tight":   '"Inter Tight", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif',
  "Space Grotesk": '"Space Grotesk", "Inter Tight", -apple-system, sans-serif',
  "Helvetica":     '"Helvetica Neue", Helvetica, Arial, sans-serif',
};

/* ---------- Reveal-on-scroll ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Section header ---------- */
function SectionLabel({ num, label }) {
  return (
    <div className="section-label reveal">
      <span className="num">{num}</span>
      <span>{label}</span>
      <span className="rule"></span>
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav({ onContact, onBook, audienceLabel, otherHref, otherLabel }) {
  return (
    <nav className="nav container">
      <a href="#top" className="brand">
        <span className="dot"></span>
        <span>Dusko</span>
        <span className="brand-aud">/ {audienceLabel}</span>
      </a>
      <div className="nav-links">
        <a className="nav-secondary" href={otherHref}>{otherLabel}</a>
        <a className="nav-secondary" href="#reframe">why</a>
        <a className="nav-secondary" href="#what">what</a>
        <a className="nav-secondary" href="#model">model</a>
        <a href="#" onClick={(e) => { e.preventDefault(); onBook(); }}>book</a>
        <a href="#" onClick={(e) => { e.preventDefault(); onContact(); }}>contact</a>
      </div>
    </nav>
  );
}

/* ---------- Clients band ---------- */
function Clients() {
  return (
    <section className="clients container">
      <div className="clients-inner">
        <span className="clients-label">Trusted by — 03</span>
        <div className="clients-list">
          <span className="c">Tara Downs Gallery</span>
          <span className="c">1&#8209;800&#8209;STRIPER</span>
          <span className="c">Priority Print Solutions</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="foot container">
      <span>© 2026 Dusko</span>
      <a href="mailto:hello@dusko.ai">hello@dusko.ai</a>
    </footer>
  );
}

/* ---------- Booking ---------- */
const SLOTS = ["09:00", "09:30", "10:00", "10:30", "11:00", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"];
const MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const WK = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
function nextDays(n) {
  const out = []; const today = new Date();
  let i = 1;
  while (out.length < n && i < 30) {
    const d = new Date(today); d.setDate(today.getDate() + i);
    const wd = d.getDay();
    if (wd !== 0 && wd !== 6) out.push(d);
    i++;
  }
  return out;
}

function Booking({ open, onClose }) {
  const days = React.useMemo(() => nextDays(8), [open]);
  const [step, setStep] = useState(1);
  const [day, setDay] = useState(null);
  const [slot, setSlot] = useState(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [biz, setBiz] = useState('');
  const [confirmed, setConfirmed] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');
  const [meetLink, setMeetLink] = useState('');

  useEffect(() => {
    if (open) {
      setStep(1); setDay(null); setSlot(null);
      setName(''); setEmail(''); setBiz(''); setConfirmed(false);
      setSubmitting(false); setErrorMsg(''); setMeetLink('');
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }
  }, [open, onClose]);

  const fmtDay = (d) => d ? `${WK[d.getDay()]} ${MONTHS[d.getMonth()]} ${d.getDate()}` : null;

  const submit = async (e) => {
    e.preventDefault();
    if (!name || !email || submitting) return;
    setSubmitting(true);
    setErrorMsg('');
    const dayStr = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`;
    try {
      const res = await fetch('/api/book', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ day: dayStr, slot, name, email, biz }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        setErrorMsg(data.error || 'Something went wrong. Please try again or email hello@dusko.ai.');
        setSubmitting(false);
        return;
      }
      setMeetLink(data.meetLink || '');
      setConfirmed(true);
    } catch {
      setErrorMsg('Network error. Please try again or email hello@dusko.ai.');
      setSubmitting(false);
    }
  };

  return (
    <div className={"overlay " + (open ? "open" : "")} onClick={onClose}>
      <div className="overlay-card wide" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>Close ✕</button>

        {!confirmed ? (
          <>
            <div className="booking-head">
              <div>
                <h3>Book a call</h3>
                <p className="sub" style={{ marginBottom: 0 }}>30 minutes. No deck, no pitch — just a real conversation about your operation.</p>
              </div>
              <span className="meta">PT · 30 MIN</span>
            </div>

            <div className="stepper">
              <span className={"s " + (step === 1 ? "active" : "")}><span className="n">01</span> When</span>
              <span className="sep">—</span>
              <span className={"s " + (step === 2 ? "active" : "")}><span className="n">02</span> Who</span>
            </div>

            {step === 1 ? (
              <>
                <div className="booking-grid">
                  <div>
                    <p className="clients-label" style={{ marginBottom: 14 }}>Select a day</p>
                    <div className="day-list">
                      {days.map((d, i) => (
                        <button
                          key={i}
                          className={"day " + (day && day.getTime() === d.getTime() ? "sel" : "")}
                          onClick={() => { setDay(d); setSlot(null); }}
                        >
                          <span>{WK[d.getDay()]}</span>
                          <span className="num">{d.getDate()}</span>
                          <span>{MONTHS[d.getMonth()]}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                  <div>
                    <p className="clients-label" style={{ marginBottom: 14 }}>{day ? "Select a time" : "— pick a day to see times"}</p>
                    {day ? (
                      <div className="slots">
                        {SLOTS.map(s => (
                          <button key={s} className={"slot " + (slot === s ? "sel" : "")} onClick={() => setSlot(s)}>{s}</button>
                        ))}
                      </div>
                    ) : (
                      <div style={{ height: 1, background: 'var(--rule-soft)' }}></div>
                    )}
                  </div>
                </div>

                <div className="booking-summary">
                  <span className="when">
                    {day ? fmtDay(day) : <span className="placeholder">No day selected</span>}
                    <span className="accent-dot">{day ? "." : ""}</span>
                    {slot ? <span> &nbsp;·&nbsp; {slot}</span> : null}
                  </span>
                  <button className="submit" disabled={!day || !slot} onClick={() => setStep(2)}>
                    <span>Continue</span><span className="arrow">→</span>
                  </button>
                </div>
              </>
            ) : (
              <form onSubmit={submit}>
                <div className="booking-grid">
                  <div>
                    <div className="field"><label>Name</label><input value={name} onChange={(e) => setName(e.target.value)} autoFocus /></div>
                    <div className="field"><label>Email</label><input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
                  </div>
                  <div>
                    <div className="field"><label>Tell us about your business</label><textarea rows="4" value={biz} onChange={(e) => setBiz(e.target.value)} /></div>
                  </div>
                </div>
                {errorMsg ? (
                  <div role="alert" style={{ marginTop: 16, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--accent)' }}>
                    {errorMsg}
                  </div>
                ) : null}
                <div className="booking-summary">
                  <span className="when">
                    {fmtDay(day)}<span className="accent-dot">.</span> &nbsp;·&nbsp; {slot}
                  </span>
                  <div style={{ display:'flex', gap: 24, alignItems:'baseline' }}>
                    <button type="button" onClick={() => setStep(1)} disabled={submitting} style={{ background:'none', border: 0, cursor: submitting ? 'default' : 'pointer', fontFamily:'var(--mono)', fontSize: 11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--fg-mute)', opacity: submitting ? 0.5 : 1 }}>← Back</button>
                    <button className="submit" disabled={!name || !email || submitting}>
                      <span>{submitting ? 'Booking…' : 'Confirm'}</span><span className="arrow">→</span>
                    </button>
                  </div>
                </div>
              </form>
            )}
          </>
        ) : (
          <>
            <div className="booking-head">
              <div>
                <h3>You're booked<span style={{ color: 'var(--accent)' }}>.</span></h3>
                <p className="sub" style={{ marginBottom: 0 }}>A calendar invite is on its way to {email}.</p>
              </div>
              <span className="meta">Confirmed</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 12 }}>
              <div>
                <div className="clients-label" style={{ marginBottom: 8 }}>When</div>
                <div className="sent">{fmtDay(day)} · {slot}</div>
              </div>
              <div>
                <div className="clients-label" style={{ marginBottom: 8 }}>Who</div>
                <div className="sent">{name}</div>
              </div>
              <div>
                <div className="clients-label" style={{ marginBottom: 8 }}>Where</div>
                <div className="sent">
                  {meetLink ? (
                    <a href={meetLink} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none', borderBottom: '1px solid var(--accent)' }}>Google Meet →</a>
                  ) : 'Video link — sent'}
                </div>
              </div>
            </div>
            <div style={{ marginTop: 36 }}>
              <button className="submit" onClick={onClose}><span>Done</span><span className="arrow">→</span></button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ---------- Contact overlay ---------- */
function Contact({ open, onClose }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [note, setNote] = useState('');
  const [sent, setSent] = useState(false);
  const firstFieldRef = useRef(null);

  useEffect(() => {
    if (open) {
      setSent(false);
      setTimeout(() => firstFieldRef.current && firstFieldRef.current.focus(), 320);
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }
  }, [open, onClose]);

  const submit = (e) => {
    e.preventDefault();
    if (!name || !email) return;
    setSent(true);
  };

  return (
    <div className={"overlay " + (open ? "open" : "")} onClick={onClose}>
      <div className="overlay-card" onClick={(e) => e.stopPropagation()}>
        <button className="close" onClick={onClose}>Close ✕</button>
        {!sent ? (
          <>
            <h3>Let's talk<span style={{ color:'var(--accent)' }}>.</span></h3>
            <p className="sub">Tell us a little about your business. We'll write back within two business days.</p>
            <form onSubmit={submit}>
              <div className="field">
                <label>Name</label>
                <input ref={firstFieldRef} value={name} onChange={(e) => setName(e.target.value)} />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
              </div>
              <div className="field">
                <label>What does your business do?</label>
                <textarea rows="3" value={note} onChange={(e) => setNote(e.target.value)} />
              </div>
              <button className="submit" disabled={!name || !email}>
                <span>Send</span><span className="arrow">→</span>
              </button>
            </form>
          </>
        ) : (
          <>
            <h3>Received.</h3>
            <p className="sent">
              Thank you, {name.split(' ')[0]}.<br />
              We'll be in touch shortly.
            </p>
            <div style={{ marginTop: 32 }}>
              <button className="submit" onClick={onClose}>
                <span>Close</span><span className="arrow">→</span>
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ---------- Tweaks ---------- */
function Tweaks({ tweaks, setTweak }) {
  const TP = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakSelect = window.TweakSelect;
  const TweakColor = window.TweakColor;
  const TweakSlider = window.TweakSlider;
  if (!TP) return null;
  return (
    <TP title="Tweaks">
      <TweakSection title="Type">
        <TweakSelect
          label="Display"
          value={tweaks.displayFont}
          options={Object.keys(DISPLAY_FONTS)}
          onChange={(v) => setTweak('displayFont', v)}
        />
        {TweakSlider ? (
          <TweakSlider
            label="Weight"
            value={tweaks.displayWeight}
            min={500} max={800} step={100}
            onChange={(v) => setTweak('displayWeight', v)}
          />
        ) : null}
      </TweakSection>
      <TweakSection title="Color">
        <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
        <TweakColor label="Background" value={tweaks.background} onChange={(v) => setTweak('background', v)} />
      </TweakSection>
    </TP>
  );
}

/* ---------- App shell ---------- */
function makeApp(Content, audience) {
  return function App() {
    const tweaksHook = (window.useTweaks ? window.useTweaks(DUSKO_TWEAKS_DEFAULTS) : [DUSKO_TWEAKS_DEFAULTS, () => {}]);
    const [tweaks, setTweak] = tweaksHook;
    const [contactOpen, setContactOpen] = useState(false);
    const [bookOpen, setBookOpen] = useState(false);

    useReveal();

    useEffect(() => {
      const r = document.documentElement;
      r.style.setProperty('--accent', tweaks.accent);
      r.style.setProperty('--bg', tweaks.background);
      r.style.setProperty('--display', DISPLAY_FONTS[tweaks.displayFont] || DISPLAY_FONTS["Inter Tight"]);
      document.querySelectorAll('.hero h1, h2.section-title, .lede, .reason h3, .item .item-title, .model-quote, .overlay-card h3, .sent')
        .forEach(el => { el.style.fontWeight = String(tweaks.displayWeight || 600); });
    }, [tweaks]);

    // Booking is wired to /api/book (Cloudflare Pages Function → Google Calendar).
    // Contact has no backend yet — keep it routed to mailto:hello@dusko.ai.
    const onContact = () => { setContactOpen(false); window.location.href = 'mailto:hello@dusko.ai'; };
    const onBook = () => setBookOpen(true);

    return (
      <div className="page">
        <Nav
          onContact={onContact}
          onBook={onBook}
          audienceLabel={audience.label}
          otherHref={audience.otherHref}
          otherLabel={audience.otherLabel}
        />
        <Content onContact={onContact} onBook={onBook} />
        <Contact open={contactOpen} onClose={() => setContactOpen(false)} />
        <Booking open={bookOpen} onClose={() => setBookOpen(false)} />
        <Tweaks tweaks={tweaks} setTweak={setTweak} />
      </div>
    );
  };
}

window.DuskoShell = {
  Nav, Clients, Booking, Contact, Footer, Tweaks, SectionLabel,
  useReveal, makeApp, DISPLAY_FONTS, DUSKO_TWEAKS_DEFAULTS,
};