// App composer for ColaFish — light editorial direction.

window.cfScrollTo = function (id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.pageYOffset - 60;
  window.scrollTo({ top: y, behavior: 'smooth' });
};

// Earth-tone phase progression — never falls to black.
const PHASE_COLORS = {
  hero:    '#FAF7F1', // cream
  pilares: '#F4EFE6', // paper
  marcas:  '#E8DFCD', // sand
  metrics: '#EFE8DA', // mist
  contact: '#EFE8DA', // mist
  footer:  '#DCD3BF', // stone
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pillarLayout": "editorial",
  "accent": "#7a8c6f",
  "showRail": true,
  "showCue": true,
  "showTextures": false,
  "typeSystem": "newsreader"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#a8825a',  // bronze
  '#7a8c6f',  // moss
  '#6e8a96',  // ocean
  '#9c6a55',  // clay
];

const TYPE_OPTIONS = [
  { value: 'instrument', label: 'Instrument' },
  { value: 'bodoni',     label: 'Bodoni' },
  { value: 'newsreader', label: 'Newsreader' },
  { value: 'bricolage',  label: 'Bricolage' },
];

function App() {
  const [activeSection, setActiveSection] = React.useState('hero');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Accent CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.accent]);

  // Typography system — toggles via data-type attribute
  React.useEffect(() => {
    document.documentElement.setAttribute('data-type', tweaks.typeSystem);
  }, [tweaks.typeSystem]);

  // Phase tint driver — drives the underlying #phase-tint background.
  // Each section has its own surface color too, so this is a fallback for
  // areas between sections and the canvas blending.
  React.useEffect(() => {
    const tint = document.getElementById('phase-tint');
    if (!tint) return;
    tint.style.backgroundColor = PHASE_COLORS[activeSection] || PHASE_COLORS.hero;
  }, [activeSection]);

  React.useEffect(() => {
    document.body.classList.toggle('hide-cue', !tweaks.showCue);
  }, [tweaks.showCue]);

  // Observe sections
  React.useEffect(() => {
    const ids = ['hero', 'pilares', 'marcas', 'contact'];
    const map = new Map();
    const obs = new IntersectionObserver((entries) => {
      for (const e of entries) map.set(e.target.id, e.intersectionRatio);
      let best = 'hero', bestR = 0;
      for (const [id, r] of map) if (r > bestR) { bestR = r; best = id; }
      if (bestR > 0.18) setActiveSection(best);
    }, { threshold: [0, 0.18, 0.35, 0.6, 0.85] });
    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav activeSection={activeSection} onNavClick={(id) => window.cfScrollTo(id)} />
      {tweaks.showRail && <Rail activeSection={activeSection} />}
      <main>
        <Hero />

        {tweaks.showTextures && (
          <TextureBand
            src={PHOTOS.texture1}
            caption={<>"Lo que sostiene a las personas, debe sostener al planeta."</>}
            meta="Capa 02 · Origen humano"
            fallbackGradient="linear-gradient(160deg, #6e7d63 0%, #3d4a3a 100%)" />
        )}

        <Pilares variant={tweaks.pillarLayout} />

        {tweaks.showTextures && (
          <TextureBand
            src={PHOTOS.texture2}
            caption={<>Trazabilidad desde el origen.<br/>Mar Caribe, 4°N 73°W.</>}
            meta="Capa 03 · Biotecnología marina"
            fallbackGradient="linear-gradient(160deg, #8a9aa0 0%, #4d5d63 100%)" />
        )}

        <Marcas />
        <Metrics />
        <Contact />
        <Footer />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Tipografía">
          <TweakSelect
            label="Sistema tipográfico"
            value={tweaks.typeSystem}
            options={TYPE_OPTIONS}
            onChange={(v) => setTweak('typeSystem', v)}
          />
        </TweakSection>
        <TweakSection label="Composición">
          <TweakRadio
            label="Pilares — layout"
            value={tweaks.pillarLayout}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'cards', label: 'Cards' },
            ]}
            onChange={(v) => setTweak('pillarLayout', v)}
          />
          <TweakToggle
            label="Bandas fotográficas"
            value={tweaks.showTextures}
            onChange={(v) => setTweak('showTextures', v)}
          />
          <TweakToggle
            label="Rail lateral"
            value={tweaks.showRail}
            onChange={(v) => setTweak('showRail', v)}
          />
          <TweakToggle
            label="Indicador de scroll"
            value={tweaks.showCue}
            onChange={(v) => setTweak('showCue', v)}
          />
        </TweakSection>
        <TweakSection label="Acento">
          <TweakColor
            label="Tono"
            value={tweaks.accent}
            options={ACCENT_OPTIONS}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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