// Fluentra landing — root app. Mounts all sections + tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "showDemo": true,
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENTS = {
  indigo: { primary: "#6366F1", primary2: "#818CF8", accent: "#22D3EE", accent2: "#67E8F9" },
  emerald: { primary: "#10B981", primary2: "#34D399", accent: "#A7F3D0", accent2: "#6EE7B7" },
  rose:    { primary: "#F43F5E", primary2: "#FB7185", accent: "#FDA4AF", accent2: "#FECDD3" },
  amber:   { primary: "#F59E0B", primary2: "#FBBF24", accent: "#FDE68A", accent2: "#FCD34D" },
};

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error('[ErrorBoundary]', error, info);
  }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',minHeight:'100vh',background:'var(--bg)',color:'var(--ink)',fontFamily:"'Geist',sans-serif",padding:24}}>
          <div style={{textAlign:'center',maxWidth:420}}>
            <h2 style={{margin:'0 0 12px',fontSize:22}}>Something went wrong</h2>
            <p style={{margin:0,color:'var(--ink-dim)',fontSize:14,lineHeight:1.5}}>
              The application encountered an unexpected error. Please refresh the page to try again.
            </p>
            <button onClick={()=>window.location.reload()} style={{marginTop:20,padding:'10px 18px',borderRadius:8,background:'var(--primary)',color:'#fff',border:'none',cursor:'pointer',fontWeight:500,fontFamily:"inherit"}}>
              Refresh page
            </button>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

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

  // Apply accent palette via CSS variables on :root
  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.indigo;
    const r = document.documentElement.style;
    r.setProperty("--primary", a.primary);
    r.setProperty("--primary-2", a.primary2);
    r.setProperty("--accent", a.accent);
    r.setProperty("--accent-2", a.accent2);
  }, [t.accent]);

  // Reveal-on-scroll
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <Hero/>
      <HowItWorks/>
      <Features/>
      {t.showDemo && <Demo/>}
      <UseCases/>
      <Pricing/>
      <Footer/>

      <TweaksPanel title="Fluentra · Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Accent" value={t.accent}
            options={["indigo","emerald","rose","amber"]}
            onChange={(v) => setTweak("accent", v)}/>
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle label="Show live demo" value={t.showDemo}
            onChange={(v) => setTweak("showDemo", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<ErrorBoundary><App/></ErrorBoundary>);