/* global React, ReactDOM, Nav, Footer, Home, Inventory, Detail, StickyCTA, LeadForm, LeadModalHost, VEHICLES */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "asphalt",
  "accent": "#b8482a",
  "hero": "editorial",
  "motion": true
}/*EDITMODE-END*/;

function FinancePage({ setPage }) {
  return (
    <div className="container" style={{ padding: '64px 0 120px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 72, alignItems: 'start' }} className="finance-grid">
        <div>
          <span className="eyebrow">Financing · 01</span>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 6.4vw, 92px)', lineHeight: 0.93, marginTop: 20, letterSpacing: '-0.025em' }}>
            We work with banks<br/>that <em style={{ color: 'var(--accent)' }}>understand trucks.</em>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-mute)', marginTop: 24, maxWidth: 560 }}>
            Start with your name and phone. The lot will call you back, talk through the vehicle, and finish the real application with the right lender path.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden', marginTop: 36, maxWidth: 560 }}>
            {[
              { v: 'Fast', l: 'First step' },
              { v: 'Human', l: 'Follow-up' },
              { v: '$0', l: 'To ask' },
            ].map(s => (
              <div key={s.l} style={{ background: 'var(--bg)', padding: '20px 18px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontFamily: 'var(--display)', fontSize: 30, letterSpacing: '-0.015em', lineHeight: 1 }}>{s.v}</span>
                <span className="mono" style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg-dim)' }}>{s.l}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
            <a href="tel:540-450-5373" className="btn">Rather call? (540) 450-5373</a>
            <button className="btn btn-ghost" onClick={() => setPage('inventory')}>Browse first</button>
          </div>
        </div>
        <div style={{ border: '1px solid var(--line)', borderRadius: 8, padding: '32px 30px', background: 'var(--bg-2)', position: 'sticky', top: 100 }}>
          <LeadForm intent="finance" idPrefix="fin" />
        </div>
      </div>
    </div>
  );
}

function AboutPage({ setPage }) {
  return (
    <div className="container" style={{ padding: '64px 0 120px' }}>
      <div style={{ maxWidth: 720 }}>
        <span className="eyebrow">About · 01</span>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.93, marginTop: 20, letterSpacing: '-0.025em' }}>
          Winchester lot.<br/>Current feed.<br/><em style={{ color: 'var(--accent)' }}>Fast follow-up.</em>
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-mute)', marginTop: 24, maxWidth: 600 }}>
          American Dream Motors is a Winchester used-car lot focused on trucks, SUVs, vans, and value cars. The site is built around the current inventory feed, quick contact, and simple follow-up from the sales desk.
        </p>
        <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => setPage('inventory')}>See the lot <span className="btn-arrow">→</span></button>
          <a href="tel:540-450-5373" className="btn">Call the lot</a>
        </div>
      </div>
    </div>
  );
}

function App() {
  const t = TWEAK_DEFAULTS;
  const [page, setPage] = useState('home');
  const [activeVehicle, setActiveVehicle] = useState(VEHICLES[0]);
  const [favorites, setFavorites] = useState(new Set());

  const openVehicle = (v) => {
    setActiveVehicle(v);
    setPage('detail');
    window.dd && window.dd.track('vehicle_open', { id: v.id, make: v.make, model: v.model });
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
    window.__currentPage = page;
    if (window.dd) window.dd.resetScroll();
  }, [page]);

  const toggleFav = (id) => {
    setFavorites(s => {
      const n = new Set(s);
      n.has(id) ? n.delete(id) : n.add(id);
      return n;
    });
  };

  // apply theme + accent + motion
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.body.classList.remove('theme-asphalt', 'theme-sand');
    document.body.classList.add('theme-' + t.theme);
    document.documentElement.style.setProperty('--motion-on', t.motion ? '1' : '0');
  }, [t.theme, t.accent, t.motion]);

  return (
    <div className={'theme-' + t.theme} style={{ minHeight: '100vh', background: 'var(--bg)', color: 'var(--fg)' }} data-screen-label={`American Dream Motors — ${page}`}>
      <Nav page={page} setPage={setPage} />
      <main key={page} className="rise">
        {page === 'home'      && <Home setPage={setPage} openVehicle={openVehicle} hero={t.hero} />}
        {page === 'inventory' && <Inventory openVehicle={openVehicle} favorites={favorites} toggleFav={toggleFav} />}
        {page === 'detail'    && <Detail vehicle={activeVehicle} setPage={setPage} openVehicle={openVehicle} />}
        {page === 'finance'   && <FinancePage setPage={setPage} />}
        {page === 'about'     && <AboutPage setPage={setPage} />}
      </main>
      <Footer setPage={setPage} />
      <StickyCTA setPage={setPage} />
      <LeadModalHost />
      <div className="grain-overlay" aria-hidden="true"></div>
    </div>
  );
}

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