/* global React, ReactDOM */
const { useEffect, useState } = React;

const MAP_EMBED = `<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.8888503617477!2d139.60549939999999!3d35.728952!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018ee7e8b9baaab%3A0x5c3558cf059ba348!2z5qCq5byP5Lya56S-5aSp6YeO5bel5YuZ5bqX!5e0!3m2!1sja!2sjp!4v1779142585301!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="株式会社天野工務店 所在地マップ"></iframe>`;

function App() {
  const defaults = window.__TWEAK_DEFAULTS || { palette: 'navy', showHeroPattern: true, serifHeadings: true };
  const [t, setTweak] = window.useTweaks ? window.useTweaks(defaults) : [defaults, () => {}];

  useEffect(() => { window.applyPalette(t.palette); }, [t.palette]);
  window.useReveal();

  return (
    <>
      <Nav />
      <Hero />
      <About />
      <Philosophy />
      <Services />
      <Works />
      <Voice />
      <FAQ />
      <Access mapEmbed={MAP_EMBED} />
      <Contact />
      <Footer />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="カラーパレット">
            <window.TweakRadio
              label="配色"
              value={t.palette}
              onChange={v => setTweak('palette', v)}
              options={[
                { value: 'navy', label: 'Navy' },
                { value: 'charcoal', label: 'Charcoal' },
                { value: 'forest', label: 'Forest' },
              ]}
            />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 8 }}>
              {Object.entries(window.PALETTES).map(([key, p]) => (
                <button key={key} onClick={() => setTweak('palette', key)} style={{
                  padding: 0, border: t.palette === key ? '2px solid #1c1c1c' : '1px solid #d0d0d0',
                  background: '#fff', cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', overflow: 'hidden',
                }}>
                  <div style={{ display: 'flex', height: 28 }}>
                    <div style={{ flex: 1, background: p.primary }} />
                    <div style={{ flex: 1, background: p.accent }} />
                    <div style={{ flex: 1, background: p.bg }} />
                  </div>
                  <div style={{ fontSize: 10, padding: '4px 6px', letterSpacing: '0.05em' }}>{p.name}</div>
                </button>
              ))}
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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