// App.jsx
const ORDER_URL = '#';

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "photo-bg",
  "energy": "balanced",
  "density": "normal",
  "displayFont": "Alfa Slab One",
  "accentRed": "#D7141A"
}/*EDITMODE-END*/;

const FONT_OPTIONS = [
  { label: 'Alfa Slab One', stack: "'Alfa Slab One', Georgia, serif" },
  { label: 'Bowlby One SC', stack: "'Bowlby One SC', Georgia, serif", gf: 'Bowlby+One+SC' },
  { label: 'Anton', stack: "'Anton', Impact, sans-serif", gf: 'Anton' },
  { label: 'Ultra', stack: "'Ultra', Georgia, serif", gf: 'Ultra' },
];

const useFontLoader = (font) => {
  React.useEffect(() => {
    if (!font.gf) return;
    const id = 'gf-' + font.gf;
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = `https://fonts.googleapis.com/css2?family=${font.gf}&display=swap`;
    document.head.appendChild(link);
  }, [font.gf]);
};

const BackToTop = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => { setVisible(window.scrollY > 500); ticking = false; });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!visible) return null;
  return (
    <button className="psd-back-top" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} aria-label="Back to top">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <polyline points="18 15 12 9 6 15" />
      </svg>
    </button>
  );
};

const App = () => {
  const t = TWEAK_DEFAULTS;

  const openOrder = React.useCallback(() => window.open(ORDER_URL, '_blank', 'noopener'), []);

  const currentFont = FONT_OPTIONS.find(f => f.label === t.displayFont) || FONT_OPTIONS[0];
  useFontLoader(currentFont);

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-energy', t.energy);
    r.setAttribute('data-density', t.density);
    r.style.setProperty('--psd-display-stack', currentFont.stack);
    r.style.setProperty('--psd-red', t.accentRed);
    r.style.setProperty('--psd-red-deep', shade(t.accentRed, -0.22));
  }, [t.energy, t.density, currentFont.stack, t.accentRed]);

  // Scroll-reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll('.psd-reveal');
    if (!els.length) return;

    if (typeof IntersectionObserver === 'undefined') {
      els.forEach(el => el.classList.add('psd-reveal--visible'));
      return;
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add('psd-reveal--visible');
        observer.unobserve(entry.target);
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -48px 0px' });

    els.forEach(el => {
      // stagger siblings that share the same parent
      const siblings = [...el.parentElement.children].filter(c => c.classList.contains('psd-reveal'));
      const idx = siblings.indexOf(el);
      if (idx > 0) el.style.setProperty('--reveal-delay', `${idx * 90}ms`);
      observer.observe(el);
    });

    return () => observer.disconnect();
  }, []);

  return (
    <React.Fragment>
      <a href="#main-content" className="psd-skip-link">Skip to main content</a>
      <Nav onOrder={openOrder} />
      <main id="main-content">
        <Hero onOrder={openOrder} variant={t.heroVariant} />
        <Menu />
        <Gallery />
        <About />
        <Visit />
        <Reviews />
        <Footer onOrder={openOrder} />
      </main>
      <BackToTop />
    </React.Fragment>
  );
};

function shade(hex, amt) {
  const c = hex.replace('#', '');
  const num = parseInt(c, 16);
  let r = (num >> 16) & 0xff, g = (num >> 8) & 0xff, b = num & 0xff;
  r = Math.max(0, Math.min(255, Math.round(r + r * amt)));
  g = Math.max(0, Math.min(255, Math.round(g + g * amt)));
  b = Math.max(0, Math.min(255, Math.round(b + b * amt)));
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
}

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