/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const { useState, useEffect } = React;

// =========================================================
// Booking modal
// =========================================================
function BookingModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    name: '', email: '', company: '', stage: 'Idea',
    project: 'Smart contract', notes: '', slot: '',
  });

  useEffect(() => {
    if (!open) { setStep(0); return; }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  // Generate next 6 weekdays Tue-Thu
  const slots = [];
  const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  let cursor = new Date();
  while (slots.length < 8) {
    cursor.setDate(cursor.getDate() + 1);
    const wd = cursor.getDay();
    if (wd >= 2 && wd <= 4) {
      slots.push({
        d: `${days[wd]} ${months[cursor.getMonth()]} ${cursor.getDate()}`,
        t: ['10:00', '14:30'][slots.length % 2],
      });
    }
  }

  const submit = () => setStep(2);
  const canNext = data.name && data.email && data.project;

  return (
    <div className="modal-veil" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="close" onClick={onClose} aria-label="Close">×</button>

        {step === 0 && (
          <>
            <span className="eyebrow">/ step 1 of 2 — about you</span>
            <h3 style={{ marginTop: 8 }}>Let's <em>talk shop.</em></h3>
            <p className="lead">Two minutes. I read every form myself, no SDR funnel.</p>
            <div className="form-grid">
              <div className="field">
                <label>Your name</label>
                <input value={data.name} onChange={set('name')} placeholder="Ada Lovelace" />
              </div>
              <div className="field">
                <label>Work email</label>
                <input value={data.email} onChange={set('email')} placeholder="ada@company.com" type="email" />
              </div>
              <div className="field">
                <label>Company</label>
                <input value={data.company} onChange={set('company')} placeholder="Acme Co." />
              </div>
              <div className="field">
                <label>Stage</label>
                <select value={data.stage} onChange={set('stage')}>
                  <option>Idea</option>
                  <option>Prototype</option>
                  <option>In production</option>
                  <option>Already deployed</option>
                </select>
              </div>
              <div className="field full">
                <label>What are you trying to build?</label>
                <select value={data.project} onChange={set('project')}>
                  <option>Smart contract</option>
                  <option>Full dApp (contract + frontend)</option>
                  <option>Token launch</option>
                  <option>NFT / membership</option>
                  <option>Audit / security review</option>
                  <option>Not sure yet</option>
                </select>
              </div>
              <div className="field full">
                <label>Anything to add? (optional)</label>
                <textarea value={data.notes} onChange={set('notes')} placeholder="One paragraph is plenty." />
              </div>
            </div>
            <div className="modal-foot">
              <span className="note">No newsletter. No CRM. Just me reading this.</span>
              <button className="btn btn-primary" disabled={!canNext} onClick={() => setStep(1)} style={{ opacity: canNext ? 1 : 0.5 }}>
                Pick a time
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <span className="eyebrow">/ step 2 of 2 — pick a slot</span>
            <h3 style={{ marginTop: 8 }}>Grab a <em>30-min window.</em></h3>
            <p className="lead">All times shown in your local timezone. Reschedule any time from the email confirmation.</p>
            <div className="slot-grid">
              {slots.map((s, i) => {
                const key = `${s.d} · ${s.t}`;
                return (
                  <button
                    key={i}
                    className="slot"
                    data-active={data.slot === key}
                    onClick={() => setData((d) => ({ ...d, slot: key }))}
                  >
                    <div style={{ fontSize: 11, opacity: 0.7, marginBottom: 2 }}>{s.d}</div>
                    <div style={{ fontWeight: 600 }}>{s.t}</div>
                  </button>
                );
              })}
            </div>
            <div className="modal-foot">
              <button className="btn btn-ghost" onClick={() => setStep(0)}>← Back</button>
              <button className="btn btn-primary" disabled={!data.slot} onClick={submit} style={{ opacity: data.slot ? 1 : 0.5 }}>
                Confirm booking
              </button>
            </div>
          </>
        )}

        {step === 2 && (
          <div className="success">
            <div className="check">✓</div>
            <h3>You're <em>on the calendar.</em></h3>
            <p>Confirmation + Meet link sent to <b style={{ color: 'var(--text)' }}>{data.email || 'your inbox'}</b>.</p>
            <p style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)' }}>
              {data.slot || 'Slot reserved'} · 30 min · Google Meet
            </p>
            <button className="btn btn-primary" style={{ marginTop: 22 }} onClick={onClose}>
              Done
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// =========================================================
// Nav
// =========================================================
function Nav({ onBook }) {
  return (
    <header className="nav" id="top">
      <div className="wrap nav-inner">
        <a className="brand" href="#top">
          <span className="glyph">⌬</span>
          <span className="word"><b>Super</b> <i>Dapps</i></span>
        </a>
        <nav className="nav-links">
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#work">Work</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="https://github.com" onClick={(e) => e.preventDefault()}>GitHub ↗</a>
          <button className="btn btn-primary" onClick={onBook}>
            Book demo
          </button>
        </div>
      </div>
    </header>
  );
}

// =========================================================
// Accent palettes (curated)
// =========================================================
const ACCENTS = {
  'acid':    { color: '#d4ff3a', label: 'Acid' },
  'cobalt':  { color: '#5a8cff', label: 'Cobalt' },
  'coral':   { color: '#ff7d5a', label: 'Coral' },
  'mint':    { color: '#5ce6b8', label: 'Mint' },
};

// =========================================================
// App
// =========================================================
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "acid",
  "heroVariant": "terminal",
  "mode": "dark"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const [showBook, setShowBook] = useState(false);

  // Apply tweaks to root
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', ACCENTS[t.accent]?.color || ACCENTS.acid.color);
    root.setAttribute('data-mode', t.mode);
    root.setAttribute('data-hero', t.heroVariant);
  }, [t]);

  // ⌘K shortcut to open booking
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setShowBook(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <Nav onBook={() => setShowBook(true)} />
      <Hero heroVariant={t.heroVariant} onBook={() => setShowBook(true)} />
      <Services />
      <StackMarquee />
      <Process />
      <Work />
      <StatsStrip />
      <FAQ />
      <CTA onBook={() => setShowBook(true)} />
      <Footer />

      <BookingModal open={showBook} onClose={() => setShowBook(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Color"
          value={ACCENTS[t.accent]?.color}
          options={Object.values(ACCENTS).map((a) => a.color)}
          onChange={(hex) => {
            const key = Object.keys(ACCENTS).find((k) => ACCENTS[k].color === hex) || 'acid';
            setTweak('accent', key);
          }}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={[
            { value: 'terminal', label: 'Terminal' },
            { value: 'split',    label: 'Block' },
            { value: 'bands',    label: 'Marquee' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.mode}
          options={[
            { value: 'dark',  label: 'Dark' },
            { value: 'light', label: 'Light' },
          ]}
          onChange={(v) => setTweak('mode', v)}
        />
      </TweaksPanel>
    </>
  );
}

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