const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "last-light",
  "marquee": true
}/*EDITMODE-END*/;

const PALETTES = {
  'last-light': {
    label: 'Last Light',
    '--bg': '#14101F',
    '--bg-2': '#1B1530',
    '--bg-3': '#241C42',
    '--coral': '#F2604A',
    '--coral-deep': '#D34A2F',
    '--mint': '#2BB39A',
    '--mint-bright': '#34D4B6',
    '--gold': '#F5C152',
    '--gold-deep': '#DEA836',
    '--pink': '#E84A9C',
    '--plum': '#6B2F7A',
  },
  'midnight-ember': {
    label: 'Midnight Ember',
    '--bg': '#0F1322',
    '--bg-2': '#161B33',
    '--bg-3': '#1F2748',
    '--coral': '#FF6B4A',
    '--coral-deep': '#E54A2F',
    '--mint': '#26B7C4',
    '--mint-bright': '#3FD4DC',
    '--gold': '#FFCB54',
    '--gold-deep': '#E8A82E',
    '--pink': '#FF5A9E',
    '--plum': '#5D2D80',
  },
  'forest-fever': {
    label: 'Forest Fever',
    '--bg': '#0F1A15',
    '--bg-2': '#152620',
    '--bg-3': '#1E3329',
    '--coral': '#F26B45',
    '--coral-deep': '#D34A2A',
    '--mint': '#52C094',
    '--mint-bright': '#7BE0B0',
    '--gold': '#F5B854',
    '--gold-deep': '#D89B2E',
    '--pink': '#E66888',
    '--plum': '#6B4030',
  },
  'cosmic-jazz': {
    label: 'Cosmic Jazz',
    '--bg': '#170F26',
    '--bg-2': '#1F1632',
    '--bg-3': '#2B1F47',
    '--coral': '#FF5482',
    '--coral-deep': '#DC3868',
    '--mint': '#48D2D2',
    '--mint-bright': '#6BE8E8',
    '--gold': '#FFD057',
    '--gold-deep': '#E8B53A',
    '--pink': '#C961FF',
    '--plum': '#7A2E9C',
  },
};

function applyTweaks(t) {
  const pal = PALETTES[t.palette] || PALETTES['last-light'];
  const root = document.documentElement;
  Object.entries(pal).forEach(([k, v]) => {
    if (k.startsWith('--')) root.style.setProperty(k, v);
  });
}

// ============ NAV ============
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          Front Range Cocktails<span className="dot">.</span>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#setup">The Setup</a>
          <a href="#menu">Menu</a>
          <a href="#book">Book</a>
        </div>
        <a href="#book" className="nav-cta">Book →</a>
      </div>
    </nav>
  );
}

// ============ GLOWING COUPE GLASS (hero focal) ============
function GlowingCoupe() {
  return (
    <svg viewBox="0 0 600 600" fill="none" className="glass-svg">
      <defs>
        <radialGradient id="liquid" cx="0.5" cy="0.55" r="0.5">
          <stop offset="0%" stopColor="#FFE89A" />
          <stop offset="30%" stopColor="#F5C152" />
          <stop offset="65%" stopColor="#F2604A" />
          <stop offset="100%" stopColor="#9B2D5E" />
        </radialGradient>
        <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#F5C152" stopOpacity="0.35" />
          <stop offset="60%" stopColor="#F2604A" stopOpacity="0.15" />
          <stop offset="100%" stopColor="#F2604A" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* outer halo */}
      <circle cx="300" cy="270" r="280" fill="url(#halo)" />

      {/* concentric guide rings (subtle) */}
      <g stroke="rgba(245, 193, 82, 0.18)" strokeWidth="1" fill="none">
        <circle cx="300" cy="270" r="220" />
        <circle cx="300" cy="270" r="180" />
        <circle cx="300" cy="270" r="140" />
        <circle cx="300" cy="270" r="100" />
      </g>

      {/* liquid sphere (the "sun" inside the glass) */}
      <circle cx="300" cy="270" r="200" fill="url(#liquid)" />

      {/* highlight crescent */}
      <path d="M 200 200 Q 250 150 320 145" stroke="rgba(255, 247, 220, 0.55)" strokeWidth="6" strokeLinecap="round" fill="none" />
      <path d="M 195 230 Q 230 200 270 195" stroke="rgba(255, 247, 220, 0.3)" strokeWidth="4" strokeLinecap="round" fill="none" />

      {/* coupe glass outline */}
      <g stroke="rgba(246, 239, 220, 0.55)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
        {/* bowl */}
        <path d="M 75 90 Q 300 580 525 90" />
        <line x1="75" y1="90" x2="525" y2="90" />
        {/* stem */}
        <line x1="300" y1="480" x2="300" y2="560" />
        {/* base */}
        <line x1="220" y1="568" x2="380" y2="568" />
        {/* garnish (cherry/twist on stick) */}
        <line x1="380" y1="90" x2="430" y2="40" />
        <circle cx="430" cy="32" r="10" fill="rgba(232, 74, 156, 0.85)" stroke="none" />
      </g>

      {/* sparkle stars */}
      <g fill="#F5C152">
        <path d="M 130 120 L 134 134 L 148 138 L 134 142 L 130 156 L 126 142 L 112 138 L 126 134 Z" />
        <path d="M 470 200 L 472 208 L 480 210 L 472 212 L 470 220 L 468 212 L 460 210 L 468 208 Z" />
        <path d="M 90 320 L 92 326 L 98 328 L 92 330 L 90 336 L 88 330 L 82 328 L 88 326 Z" />
      </g>
    </svg>
  );
}

// ============ HERO ============
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-focal">
        <div className="glow" />
        <GlowingCoupe />
      </div>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow eyebrow">Private Bartending · Erie, Colorado</div>

            <h1>
              <span className="line cream">You host.</span>
              <span className="line coral">I shake.</span>
              <span className="line mint">Cheers<span className="period">.</span></span>
            </h1>

            <p className="hero-sub">
              Custom cocktail menus, the full mobile bar, and a bartender who actually
              knows the craft. <strong>You handle the night — I'll handle the drinks.</strong>
            </p>

            <div className="btn-row">
              <a href="#book" className="btn btn-primary">Book the Bar<span className="ar">→</span></a>
              <a href="#menu" className="btn">See the List</a>
            </div>

            <div className="hero-meta">
              <div className="cell">
                <strong>Years</strong>
                <span className="val">Eight</span>
              </div>
              <div className="cell">
                <strong>Home Base</strong>
                <span className="val">Erie, CO</span>
              </div>
              <div className="cell">
                <strong>Specialty</strong>
                <span className="val">Tiki & more</span>
              </div>
            </div>
          </div>
          <div />
        </div>
      </div>
    </section>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = [
    { t: 'Cocktails on call', c: 'cream' },
    { t: 'Booking spring 2026', c: 'coral' },
    { t: 'Erie · Boulder · Denver', c: 'mint' },
    { t: 'Tiki & beyond', c: 'gold' },
    { t: 'Custom menus', c: 'cream' },
    { t: 'You host. I pour.', c: 'coral' },
  ];
  const row = (k) => (
    <span key={k} style={{ display: 'inline-flex', gap: 40, alignItems: 'center' }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span className={it.c}>{it.t}</span>
          <span className="dot">✦</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">{row('a')}{row('b')}</div>
    </div>
  );
}

// ============ ABOUT ============
function About() {
  return (
    <section id="about">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Section / 01 — About Lyndon</div>
            <h2>Eight years <span className="accent">behind</span> the bar.</h2>
          </div>
          <div className="meta">№ 01<br/><strong>Profile</strong></div>
        </div>

        <div className="about-grid">
          <div className="bio-card">
            <div className="monogram">L</div>
            <div className="bio-foot">
              <div>
                <span style={{ opacity: 0.7 }}>Owner · Bartender</span>
                <strong>Lyndon Moller</strong>
              </div>
              <span>Est. 2017</span>
            </div>
          </div>

          <div className="about-copy">
            <p className="lede">
              The best parties have someone behind the bar who actually <span className="accent">cares</span> what's
              in your hand — not someone phoning it in.
            </p>
            <p>
              I'm Lyndon. I've spent eight years behind the stick — the last few running bar
              programs and dialing in menus glass by glass. Front Range Cocktails is the
              version of that craft you can hire for a night: I show up with the bar, the ice,
              the tools, and a menu we've designed together — and you get to host without
              touching a shaker.
            </p>
            <p>
              <strong>Home base is tiki</strong> — rum, citrus, a little theater — but my
              bar-manager years mean I can build a program for almost any room. Garden weddings,
              corporate holidays, low-ABV brunches, classic-cocktail birthdays. Whatever the
              night calls for.
            </p>

            <div className="stat-row">
              <div className="stat"><div className="num">8</div><div className="lbl">Years Behind<br/>the Bar</div></div>
              <div className="stat"><div className="num">100+</div><div className="lbl">Custom Menus<br/>Designed</div></div>
              <div className="stat"><div className="num">1</div><div className="lbl">Bartender,<br/>Your Whole Night</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ SETUP / SERVICES ============
const SetupIcon = ({ kind }) => {
  const wrap = (c) => (
    <svg viewBox="0 0 72 72" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{c}</svg>
  );
  switch (kind) {
    case 'menu': return wrap(<>
      <rect x="14" y="8" width="44" height="58" rx="2" />
      <line x1="20" y1="20" x2="52" y2="20" />
      <line x1="20" y1="28" x2="46" y2="28" />
      <line x1="20" y1="38" x2="52" y2="38" />
      <line x1="20" y1="46" x2="44" y2="46" />
      <line x1="20" y1="56" x2="50" y2="56" />
      <path d="M24 13 Q26 10 28 13" />
      <circle cx="54" cy="14" r="1.6" fill="currentColor" />
    </>);
    case 'bar': return wrap(<>
      <path d="M16 12 L56 12 L46 32 L26 32 Z" />
      <line x1="36" y1="32" x2="36" y2="58" />
      <line x1="24" y1="62" x2="48" y2="62" />
      <path d="M36 58 Q36 62 42 62" />
      <line x1="48" y1="10" x2="58" y2="4" />
      <circle cx="58" cy="4" r="2.2" fill="currentColor" />
    </>);
    case 'mocktail': return wrap(<>
      <path d="M16 22 L24 62 L48 62 L56 22 Z" />
      <line x1="16" y1="22" x2="56" y2="22" />
      <path d="M20 36 Q36 44 52 36" strokeDasharray="2 3" />
      <path d="M28 12 Q36 6 44 12" />
      <line x1="36" y1="10" x2="36" y2="22" />
      <circle cx="44" cy="12" r="2.6" />
    </>);
    case 'consult': return wrap(<>
      <circle cx="28" cy="32" r="16" />
      <line x1="40" y1="44" x2="60" y2="64" />
      <line x1="18" y1="32" x2="38" y2="32" />
      <line x1="28" y1="22" x2="28" y2="42" />
    </>);
  }
  return null;
};

function Setup() {
  const services = [
    { num: '01', c: 'c1', kind: 'menu', title: 'Custom Menus', body: 'We meet, talk theme + tastes + headcount, and I design a menu that fits the night — three to six signatures, each with a story.', tags: ['Tiki', 'Classic', 'Seasonal', 'Themed'] },
    { num: '02', c: 'c2', kind: 'bar', title: 'Full Bar Setup', body: 'I roll up with everything: bar, glassware, ice, tools, garnish, mixers. You just show me where to set up.', tags: ['Mobile bar', 'Glassware', 'Ice', 'Garnish'] },
    { num: '03', c: 'c3', kind: 'mocktail', title: 'NA & Mocktails', body: 'Every menu I build includes a real NA option — not just a club soda. Spirit-free drinks that get the same shake, same care.', tags: ['Zero-proof', 'Family', 'Dry'] },
    { num: '04', c: 'c4', kind: 'consult', title: 'Bar Consulting', body: 'Eight years of bar-management know-how for venues, pop-ups, and restaurants — menu engineering, costing, training, build sheets.', tags: ['Menus', 'Training', 'Costing'] },
  ];

  return (
    <section id="setup">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Section / 02 — The Setup</div>
            <h2>What I <span className="accent-mint">bring</span> to your night.</h2>
          </div>
          <div className="meta">№ 02<br/><strong>Services</strong></div>
        </div>

        <div className="setup-grid">
          {services.map((s) => (
            <div key={s.num} className={`setup-card ${s.c}`}>
              <div className="setup-num">№ {s.num}</div>
              <div className="setup-icon"><SetupIcon kind={s.kind} /></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="setup-tags">
                {s.tags.map((t) => <span key={t} className="tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>

        <div className="included">
          <div className="label">In the <em>kit</em>, every time</div>
          <ul>
            <li>Mobile bar</li>
            <li>Glassware</li>
            <li>Premium ice</li>
            <li>Tools & shakers</li>
            <li>Fresh garnish</li>
            <li>Custom menu print</li>
            <li>Mixers & syrups</li>
            <li>Good vibes only</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ============ MENU ============
function Menu() {
  const drinks = [
    { no: '01', c: 'c1', glass: 'Tiki Mug', name: 'Volcano Daisy', spirit: 'Aged Rum · Lime · Falernum', notes: 'Aged Jamaican rum, fresh lime, house falernum, allspice dram, lit lime shell. Tiki at its loudest.', Glass: TikiMug },
    { no: '02', c: 'c2', glass: 'Rocks', name: 'Smoke Signal', spirit: 'Mezcal · Lime · Honey', notes: 'Espadín mezcal, charred-honey syrup, lime, a whisper of habanero. Smoked salt rim.', Glass: Rocks },
    { no: '03', c: 'c3', glass: 'Highball', name: 'Garden Spritz', spirit: 'Gin · Elderflower · Soda', notes: 'Boulder gin, elderflower, white grape, lemon, sparkling. Cucumber ribbon, garden basil.', Glass: Highball },
  ];

  return (
    <section className="menu-section" id="menu">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Section / 03 — Sample Menu</div>
            <h2>Just a taste — <span className="accent-gold">yours will differ.</span></h2>
          </div>
          <div className="meta">Three pours<br/><strong>Spring · 2026</strong></div>
        </div>

        <div className="menu-grid">
          {drinks.map((d) => (
            <div key={d.no} className={`drink-card ${d.c}`}>
              <div className="drink-art">
                <d.Glass />
              </div>
              <div className="drink-body">
                <div className="top">
                  <span>№ {d.no}</span>
                  <span className="glass">{d.glass}</span>
                </div>
                <h3>{d.name}</h3>
                <div className="spirit">{d.spirit}</div>
                <div className="notes">{d.notes}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="menu-foot">
          <span className="dot">✦</span> Every event gets a menu made just for it <span className="dot">✦</span>
        </div>
      </div>
    </section>
  );
}

// ============ BOOKING ============
function Booking() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    name: '', email: '', phone: '',
    eventType: '', date: '', guests: '',
    location: '', notes: ''
  });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const subject = `New booking inquiry — ${form.name || 'Front Range Cocktails'}`;
    const lines = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      `Phone: ${form.phone || '—'}`,
      ``,
      `Event Type: ${form.eventType || '—'}`,
      `Date: ${form.date || '—'}`,
      `Guest Count: ${form.guests || '—'}`,
      `Location / City: ${form.location || '—'}`,
      ``,
      `Notes:`,
      form.notes || '—',
    ];
    const body = lines.join('\n');
    window.location.href =
      `mailto:bookus@frontrangecocktails.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  return (
    <section id="book">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">Section / 04 — Book the Bar</div>
            <h2>Tell me about <span className="accent">your night.</span></h2>
          </div>
          <div className="meta">Reply within<br/><strong>1–2 days</strong></div>
        </div>

        <div className="book-grid">
          <div className="book-info">
            <p className="lede2">
              You bring the <span className="accent">people.</span> I'll bring the <span className="accent-mint">bar.</span>
            </p>

            <div className="contact-card">
              <h4>Direct Lines</h4>
              <div className="contact-line">
                <span className="lbl">Call</span>
                <a href="tel:+17202022354">(720) 202-2354</a>
              </div>
              <div className="contact-line">
                <span className="lbl">Email</span>
                <a href="mailto:bookus@frontrangecocktails.com">bookus@frontrangecocktails.com</a>
              </div>
              <div className="contact-line">
                <span className="lbl">Based</span>
                <span>Erie, CO — Front Range</span>
              </div>
              <div className="contact-line">
                <span className="lbl">Hours</span>
                <span>By appointment, 7 days</span>
              </div>
            </div>
          </div>

          <div className="form">
            {sent ? (
              <div className="form-success">
                <div className="check">✓</div>
                <h3>Your email is on its way.</h3>
                <p>Your default mail app should have opened with everything pre-filled — just hit send. If it didn't, drop a note to <a href="mailto:bookus@frontrangecocktails.com">bookus@frontrangecocktails.com</a>.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="form-title">Book the <span className="accent">bar</span>.</div>
                <p className="form-sub">A few details and I'll come back with availability, a menu starting point, and a quote.</p>
                <div className="form-grid">
                  <div className="field">
                    <label>Name</label>
                    <input type="text" required value={form.name} onChange={upd('name')} placeholder="Your full name" />
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input type="tel" value={form.phone} onChange={upd('phone')} placeholder="(___) ___-____" />
                  </div>
                  <div className="field full">
                    <label>Email</label>
                    <input type="email" required value={form.email} onChange={upd('email')} placeholder="you@email.com" />
                  </div>
                  <div className="field">
                    <label>Event Type</label>
                    <select required value={form.eventType} onChange={upd('eventType')}>
                      <option value="">— Select —</option>
                      <option>Private Party</option>
                      <option>Wedding</option>
                      <option>Birthday</option>
                      <option>Corporate</option>
                      <option>Holiday Party</option>
                      <option>Pop-up</option>
                      <option>Bachelor/Bachelorette</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="field">
                    <label>Date</label>
                    <input type="date" value={form.date} onChange={upd('date')} />
                  </div>
                  <div className="field">
                    <label>Guest Count</label>
                    <input type="text" value={form.guests} onChange={upd('guests')} placeholder="Approx." />
                  </div>
                  <div className="field">
                    <label>Location / City</label>
                    <input type="text" value={form.location} onChange={upd('location')} placeholder="Erie, Boulder, Denver…" />
                  </div>
                  <div className="field full">
                    <label>Tell me about it</label>
                    <textarea rows="3" value={form.notes} onChange={upd('notes')} placeholder="Vibe, theme, favorite spirits, anything to know…" />
                  </div>
                </div>
                <div className="form-foot">
                  <div className="reply">Reply within 1–2 days</div>
                  <button type="submit" className="btn btn-primary">Send Inquiry<span className="ar">→</span></button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-big">
          Cheers to <span className="coral">the nights</span><br/>
          we'll <span className="mint">remember<span className="gold">.</span></span>
        </div>

        <div className="foot-inner">
          <div>
            <h4>Front Range Cocktails</h4>
            <div className="foot-tag">
              "Let me handle the drinks, you enjoy the night." Mobile bar service across
              the Colorado Front Range.
            </div>
          </div>
          <div className="foot-col">
            <h4>Direct</h4>
            <ul>
              <li>(720) 202-2354</li>
              <li>bookus@frontrangecocktails.com</li>
              <li>Erie, Colorado</li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Site</h4>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#setup">The Setup</a></li>
              <li><a href="#menu">Menu</a></li>
              <li><a href="#book">Book</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Front Range Cocktails · Lyndon Moller</span>
          <span>Made on the Front Range ✦</span>
        </div>
      </div>
    </footer>
  );
}

// ============ TWEAKS ============
function Tweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <TweakSelect
          label="Mood"
          value={tweaks.palette}
          onChange={(v) => setTweak('palette', v)}
          options={['last-light', 'midnight-ember', 'forest-fever', 'cosmic-jazz']}
        />
      </TweakSection>
      <TweakSection label="Bits">
        <TweakToggle
          label="Marquee"
          value={tweaks.marquee}
          onChange={(v) => setTweak('marquee', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ============ APP ============
function App() {
  const [tweaksLive, setTweaksLive] = useState(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(TWEAK_DEFAULTS); }, []);
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data && e.data.type === '__edit_mode_set_keys' && e.data.edits) {
        setTweaksLive((t) => ({ ...t, ...e.data.edits }));
      }
    };
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, []);
  return (
    <>
      <Nav />
      <Hero />
      {tweaksLive.marquee && <Marquee />}
      <About />
      <Setup />
      <Menu />
      <Booking />
      <Footer />
      <Tweaks />
    </>
  );
}

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