// Medway MSS — App shell, scroll-spy, i18n, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1ea34d",
  "headingWeight": 500,
  "showGrid": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { name: 'Medway green', v: '#1ea34d' },
  { name: 'Deep green',  v: '#15803d' },
  { name: 'Clinical blue', v: '#2563eb' },
  { name: 'Deep teal',  v: '#0e7490' },
  { name: 'Slate',      v: '#475569' },
  { name: 'Crimson',    v: '#b91c1c' },
];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { lang, setLang, t } = useI18n();
  const [active, setActive] = React.useState('home');
  const isMobile = useIsMobile();

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  React.useEffect(() => {
    const ids = ['home', 'about', 'products', 'industries', 'contact'];
    const onScroll = () => {
      const y = window.scrollY + 140;
      let cur = 'home';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  return (
    <div style={{ background: 'var(--bg)', minHeight: '100vh' }}>
      <Nav active={active} onNav={onNav} accent={tweaks.accent} lang={lang} setLang={setLang} t={t} />
      <Hero accent={tweaks.accent} onNav={onNav} t={t} />
      <About accent={tweaks.accent} t={t} />
      <Products accent={tweaks.accent} t={t} lang={lang} />
      <Industries accent={tweaks.accent} t={t} />
      <Contact accent={tweaks.accent} t={t} lang={lang} />
      <Footer accent={tweaks.accent} onNav={onNav} t={t} />
      {isMobile && (
        <a
          href="https://wa.me/22890712020"
          target="_blank"
          rel="noopener"
          aria-label="WhatsApp"
          style={{
            position: 'fixed',
            right: 18,
            bottom: 18,
            zIndex: 70,
            width: 54,
            height: 54,
            borderRadius: '50%',
            background: '#25D366',
            color: '#fff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 12px 28px rgba(0,0,0,0.22)',
            textDecoration: 'none',
          }}
        >
          <I name="message-circle" size={26} stroke={2.1} color="#fff" />
        </a>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent colour">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {ACCENT_PRESETS.map((p) => {
              const isActive = tweaks.accent === p.v;
              return (
                <button key={p.v} onClick={() => setTweak('accent', p.v)} style={{
                  padding: '10px 8px',
                  border: isActive ? '1.5px solid #171717' : '1px solid #e5e5e5',
                  background: '#fff', borderRadius: 6, cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                  fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#525252',
                }}>
                  <span style={{ width: 24, height: 24, background: p.v, borderRadius: 4 }} />
                  {p.name}
                </button>
              );
            })}
          </div>
        </TweakSection>
        <TweakSection title="Typography">
          <TweakRadio
            label="Heading weight"
            value={tweaks.headingWeight}
            options={[
              { label: 'Light', value: 400 },
              { label: 'Medium', value: 500 },
              { label: 'Bold', value: 700 },
            ]}
            onChange={(v) => setTweak('headingWeight', v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Hero grid backdrop" value={tweaks.showGrid} onChange={(v) => setTweak('showGrid', v)} />
        </TweakSection>
      </TweaksPanel>

      <style dangerouslySetInnerHTML={{ __html: `
        section h1, section h2 { font-weight: ${tweaks.headingWeight} !important; }
        ${tweaks.showGrid ? '' : '#home div[aria-hidden] { display: none !important; }'}
      `}} />
    </div>
  );
}

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