// app.jsx — Iron & Ink composition + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "inkblue",
  "headingStyle": "editorial",
  "showSerifAccents": true,
  "grain": true
}/*EDITMODE-END*/;

// Accent palettes — base color + lighter highlight + deep + glow-rgba + ink-rgba
const ACCENTS = {
  copper:   { a:'#c87a4a', a2:'#e9a06a', deep:'#7d3f1c', glow:'rgba(200,122,74,.55)', ink:'rgba(200,122,74,.16)' },
  gold:     { a:'#c8a35a', a2:'#e6c688', deep:'#7d5d20', glow:'rgba(200,163,90,.5)',  ink:'rgba(200,163,90,.14)' },
  inkblue:  { a:'#6e8fb8', a2:'#a3bbd9', deep:'#2f4a6b', glow:'rgba(110,143,184,.55)', ink:'rgba(110,143,184,.16)' },
  molten:   { a:'#e26a36', a2:'#f5945f', deep:'#8a2e10', glow:'rgba(226,106,54,.6)',   ink:'rgba(226,106,54,.18)' },
};

function applyAccent(name) {
  const c = ACCENTS[name] || ACCENTS.copper;
  const r = document.documentElement.style;
  r.setProperty('--accent',      c.a);
  r.setProperty('--accent-2',    c.a2);
  r.setProperty('--accent-deep', c.deep);
  r.setProperty('--accent-glow', c.glow);
  r.setProperty('--accent-ink',  c.ink);
}

function applyHeadingStyle(style) {
  // Swap display font
  const root = document.documentElement.style;
  if (style === 'industrial') {
    root.setProperty('--display-font', '"Big Shoulders Display", "Manrope", sans-serif');
  } else if (style === 'editorial') {
    root.setProperty('--display-font', '"Instrument Serif", "Big Shoulders Display", serif');
  }
  // Push override via stylesheet
  let el = document.getElementById('display-font-override');
  if (!el) {
    el = document.createElement('style');
    el.id = 'display-font-override';
    document.head.appendChild(el);
  }
  if (style === 'industrial') {
    el.textContent = `.display{ font-family:"Big Shoulders Display","Manrope",sans-serif !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:-.01em !important; line-height:.88 !important; }`;
  } else {
    el.textContent = `.display{ font-family:"Instrument Serif","Big Shoulders Display",serif !important; font-weight:400 !important; text-transform:none !important; letter-spacing:-.015em !important; line-height:1.02 !important; font-style:normal !important; }
    .display em, .display .it{ font-style:italic !important; }`;
  }
}

function applySerifAccents(on) {
  let el = document.getElementById('serif-accent-toggle');
  if (!el) {
    el = document.createElement('style');
    el.id = 'serif-accent-toggle';
    document.head.appendChild(el);
  }
  el.textContent = on ? '' : `.display em, .display .it{ font-style:normal !important; font-family:inherit !important; color:var(--accent) !important; }`;
}

function applyGrain(on) {
  document.body.style.setProperty('--grain-display', on ? '' : 'none');
  let el = document.getElementById('grain-toggle');
  if (!el) {
    el = document.createElement('style');
    el.id = 'grain-toggle';
    document.head.appendChild(el);
  }
  el.textContent = on ? '' : `body::before{ display:none !important }`;
}

/* Reveal-on-scroll hook */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  React.useEffect(() => { applyHeadingStyle(t.headingStyle); }, [t.headingStyle]);
  React.useEffect(() => { applySerifAccents(t.showSerifAccents); }, [t.showSerifAccents]);
  React.useEffect(() => { applyGrain(t.grain); }, [t.grain]);

  useReveal();

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <div className="reveal"><About/></div>
        <div className="reveal"><Services/></div>
        <div className="reveal"><Work/></div>
        <div className="reveal"><Process/></div>
        <div className="reveal"><Metrics/></div>
        <div className="reveal"><Testimonials/></div>
        <div className="reveal"><Contact/></div>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Brand"/>
        <TweakColor
          label="Accent"
          value={ACCENTS[t.accent].a}
          options={[ACCENTS.copper.a, ACCENTS.gold.a, ACCENTS.inkblue.a, ACCENTS.molten.a]}
          onChange={(hex) => {
            const name = Object.keys(ACCENTS).find(k => ACCENTS[k].a === hex) || 'copper';
            setTweak('accent', name);
          }}
        />
        <TweakSection label="Typography"/>
        <TweakRadio
          label="Heading style"
          value={t.headingStyle}
          options={['industrial', 'editorial']}
          onChange={(v) => setTweak('headingStyle', v)}
        />
        <TweakToggle
          label="Italic serif accents"
          value={t.showSerifAccents}
          onChange={(v) => setTweak('showSerifAccents', v)}
        />
        <TweakSection label="Surface"/>
        <TweakToggle
          label="Film grain"
          value={t.grain}
          onChange={(v) => setTweak('grain', v)}
        />
      </TweaksPanel>
    </>
  );
}

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