// app.jsx — main shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2BA3E8",
  "theme": "dark",
  "density": "regular",
  "displayFont": "Geist",
  "showMarquee": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Geist":              { display: '"Geist", system-ui, sans-serif',          serif: '"Instrument Serif", Georgia, serif' },
  "Bricolage":          { display: '"Bricolage Grotesque", system-ui, sans-serif', serif: '"Instrument Serif", Georgia, serif' },
  "Space Grotesk":      { display: '"Space Grotesk", system-ui, sans-serif',  serif: '"Instrument Serif", Georgia, serif' },
};

/* ── Error boundary ─────────────────────────────────────────────
   Prevents a single rendering bug from blanking the page in
   production. Shows a graceful fallback with a way to contact us. */
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  componentDidCatch(error, info) {
    // Log to console; in production you'd send this to an error tracker
    if (typeof console !== "undefined") {
      console.error("[Yukaa] Render error:", error, info);
    }
  }
  render() {
    if (!this.state.hasError) return this.props.children;
    return (
      <div style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        textAlign: "center",
        background: "var(--bg, #0B0B0C)",
        color: "var(--fg, #F2F0EB)",
        fontFamily: '"Geist", system-ui, sans-serif',
      }}>
        <img src="assets/yukaa-logo.png" alt="Yukaa Media" style={{ width: 56, marginBottom: 24, opacity: 0.9 }} />
        <h1 style={{ fontSize: 28, margin: "0 0 12px", letterSpacing: "-0.02em" }}>Something went sideways.</h1>
        <p style={{ color: "var(--fg-mute, #9A9A95)", maxWidth: 480, lineHeight: 1.6, marginBottom: 24 }}>
          The site hit an unexpected error. Try reloading — if it keeps happening, reach us at{" "}
          <a href="mailto:info@yukaamedia.com" style={{ color: "var(--accent, #2BA3E8)" }}>info@yukaamedia.com</a>.
        </p>
        <button onClick={() => window.location.reload()} style={{
          background: "var(--accent, #2BA3E8)",
          color: "#fff",
          border: 0,
          padding: "12px 22px",
          borderRadius: 999,
          fontFamily: "inherit",
          fontWeight: 500,
          fontSize: 14,
          cursor: "pointer",
        }}>Reload page</button>
      </div>
    );
  }
}

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

  // apply tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-2", t.accent);
    // adjust accent-ink based on lightness (white if accent is dark/saturated, dark if light)
    const ink = isLightColor(t.accent) ? "#0B0B0C" : "#FFFFFF";
    r.style.setProperty("--accent-ink", ink);

    r.setAttribute("data-theme", t.theme);
    r.setAttribute("data-density", t.density);

    const fonts = FONT_MAP[t.displayFont] || FONT_MAP["Geist"];
    r.style.setProperty("--font-display", fonts.display);
    r.style.setProperty("--font-body", fonts.display);
  }, [t.accent, t.theme, t.density, t.displayFont]);

  return (
    <ErrorBoundary>
      <Nav />
      <Hero />
      {t.showMarquee && <Marquee />}
      <ProblemSection />
      <FixSection />
      <ServicesSection />
      <ResultsSection />
      <ProcessSection />
      <IndustriesSection />
      <PricingSection />
      <TestimonialsSection />
      <FAQSection />
      <FinalCTA />
      <FooterSection />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#2BA3E8", "#1A7CBE", "#6FC5F0", "#C8F751", "#FF6A55"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Display"
          value={t.displayFont}
          options={Object.keys(FONT_MAP)}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Industry marquee"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
      </TweaksPanel>
    </ErrorBoundary>
  );
}

function isLightColor(hex) {
  const c = hex.replace("#", "");
  if (c.length !== 6) return false;
  const r = parseInt(c.slice(0, 2), 16);
  const g = parseInt(c.slice(2, 4), 16);
  const b = parseInt(c.slice(4, 6), 16);
  // perceived luminance
  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return lum > 0.6;
}

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