// app.jsx
// Top-level wiring: TweaksPanel + DesignCanvas with desktop + mobile artboards.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": 0,
  "heroLayout": "mockup",
  "ctaColor": "cyan",
  "density": "regular",
  "sectionOrder": "explain-first",
  "dosStyle": "light"
}/*EDITMODE-END*/;

const HEADLINE_LABELS = [
  "De pequeña a empresa sólida.",
  "Ordena tu negocio. Crece sin miedo.",
  "Tu empresa, lista para crecer en serio.",
  "Profesionaliza sin perder tu esencia.",
];

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

  // DCSection filters children by `c.type === DCArtboard`, so DCArtboard
  // MUST be a direct child — we can't wrap it in a custom component.
  // Heights are measured live via AutoSize (inside the artboard) so density
  // / section-order / hero-layout changes never crop the footer.
  const [desktopH, setDesktopH] = React.useState(4400);
  const [mobileH,  setMobileH]  = React.useState(5600);

  return (
    <>
      <DesignCanvas>
        <DCSection
          id="landing-v1"
          title="Vig-ia Empresarial — Landing v1"
          subtitle="Recreación fiel del Figma, ahora editable. Desktop + Mobile lado a lado.">

          <DCArtboard id="desktop" label="Desktop · 1280" width={1280} height={desktopH}>
            <AutoSize width={1280} onHeight={setDesktopH}>
              <Landing variant="desktop" tweaks={t} />
            </AutoSize>
          </DCArtboard>

          <DCArtboard id="mobile" label="Mobile · 390" width={390} height={mobileH}>
            <AutoSize width={390} onHeight={setMobileH}>
              <Landing variant="mobile" tweaks={t} />
            </AutoSize>
          </DCArtboard>

        </DCSection>
      </DesignCanvas>

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect
          label="Headline"
          value={t.headline}
          options={HEADLINE_LABELS.map((l, i) => ({ value: i, label: l }))}
          onChange={(v) => setTweak("headline", Number(v))}
        />
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={[
            { value: "mockup", label: "Mockup" },
            { value: "centered", label: "Centrado" },
            { value: "stats", label: "Con números" },
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />

        <TweakSection label="Branding" />
        <TweakRadio
          label="Color del CTA"
          value={t.ctaColor}
          options={[
            { value: "cyan", label: "Cyan" },
            { value: "blue", label: "Azul" },
            { value: "navy", label: "Navy" },
          ]}
          onChange={(v) => setTweak("ctaColor", v)}
        />

        <TweakSection label="Composición" />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={[
            { value: "compact", label: "Compacta" },
            { value: "regular", label: "Regular" },
            { value: "aireada", label: "Aireada" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Qué va primero después del hero"
          value={t.sectionOrder}
          options={[
            { value: "explain-first", label: "Qué hacemos" },
            { value: "pain-first", label: "Preguntas dolor" },
          ]}
          onChange={(v) => setTweak("sectionOrder", v)}
        />
        <TweakRadio
          label="Estilo 'Dos formas'"
          value={t.dosStyle}
          options={[
            { value: "light", label: "Tarjetas claras" },
            { value: "dark", label: "Tarjetas oscuras" },
          ]}
          onChange={(v) => setTweak("dosStyle", v)}
        />
      </TweaksPanel>
    </>
  );
}

// ── Auto-sizing helper ───────────────────────────────────────────
// Renders children at a fixed width and reports back the measured height,
// so the wrapping <DCArtboard> can grow with density / section-order tweaks
// (the artboard card has overflow:hidden, so undersizing crops the footer).
function AutoSize({ width, children, onHeight }) {
  const ref = React.useRef(null);
  const lastH = React.useRef(0);

  React.useLayoutEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver((entries) => {
      for (const e of entries) {
        const next = Math.ceil(e.contentRect.height);
        if (next > 0 && Math.abs(next - lastH.current) > 1) {
          lastH.current = next;
          onHeight(next);
        }
      }
    });
    ro.observe(ref.current);
    return () => ro.disconnect();
  }, [onHeight]);

  return (
    <div ref={ref} style={{ width, background: '#fff' }}>
      {children}
    </div>
  );
}

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