/* App — composition root. Wires Tweaks panel + placeholder modal for trial/demo/pricing. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "featuredPlan": "pro",
  "animSpeed": 1,
  "density": "normal",
  "accentEmphasis": "balanced"
}/*EDITMODE-END*/;

function PlaceholderModal({ open, title, message, onClose }) {
  if (!open) return null;
  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      style={{
        position:"fixed", inset:0, zIndex:200,
        background:"rgba(2, 8, 15, 0.72)", backdropFilter:"blur(6px)",
        display:"flex", alignItems:"center", justifyContent:"center", padding:20,
        animation:"fadeIn 200ms var(--ease-out)",
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          width:"min(520px, 100%)", padding:"32px 28px",
          background:"linear-gradient(180deg, rgba(14,36,64,1), rgba(8,26,46,1))",
          border:"1px solid rgba(56,229,232,0.30)", borderRadius:20,
          boxShadow:"0 32px 80px rgba(0,0,0,0.6), 0 0 40px rgba(56,229,232,0.15)",
          display:"grid", gap:14,
        }}
      >
        <div style={{display:"flex", alignItems:"center", gap:12}}>
          <span className="ico-halo ico-cyan"><I.Sparkle/></span>
          <h3 style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:22, color:"var(--fg-1)"}}>{title}</h3>
        </div>
        <p style={{color:"var(--fg-2)", fontSize:15, lineHeight:1.55}}>{message}</p>
        <div style={{display:"flex", gap:10, justifyContent:"flex-end", marginTop:8}}>
          <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = React.useState(null);

  // Reflect density on <body> so CSS rules apply
  React.useEffect(() => {
    document.body.setAttribute("data-density", t.density || "normal");
  }, [t.density]);

  const handleLogin = () => {
    // Open the app for existing subscribers
    window.open("https://app.deltaisuite.com", "_blank", "noopener,noreferrer");
  };
  const handleTrial = () => setModal({
    title: "Tu prueba gratis está casi lista",
    message: "Conectaremos el formulario de registro en el siguiente paso. Por ahora, este botón es un placeholder — cuando definamos el flujo (registro inline / WhatsApp / signup en la plataforma) lo enlazo.",
  });
  const handleDemo = () => setModal({
    title: "Demo de 30 segundos",
    message: "Acá va a ir el video de demo (autoplay, sin sonido). Subime el archivo o un link de Vimeo/YouTube y lo conecto.",
  });
  const handleSelectPlan = (plan) => setModal({
    title: `Plan ${plan.name}`,
    message: `Acá conectamos el checkout — Mercado Pago / Stripe / link externo según definamos. Plan elegido: ${plan.name} (${plan.vol}). Decime cómo querés cobrar y lo enlazo.`,
  });

  return (
    <React.Fragment>
      <div className="atmosphere" aria-hidden="true">
        <div className="glow-m" />
        <div className="glow-c" />
        <div className="glow-r" />
        <div className="dots" />
      </div>

      <Nav onLogin={handleLogin} onTrial={handleTrial} />
      <main>
        <Hero onTrial={handleTrial} onDemo={handleDemo} />
        <MetricsStrip />
        <Products />
        <FlowSection speed={Number(t.animSpeed) || 1} />
        <Benefits />
        <Testimonials />
        <Pricing featuredKey={t.featuredPlan} onSelect={handleSelectPlan} />
        <Trust />
        <FinalCTA onTrial={handleTrial} onDemo={handleDemo} />
        <LandingFooter />
      </main>

      <PlaceholderModal
        open={!!modal}
        title={modal?.title}
        message={modal?.message}
        onClose={() => setModal(null)}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Plan destacado" subtitle="Cuál muestra el ribbon de 'Más vendido'.">
          <TweakRadio
            value={t.featuredPlan}
            onChange={v => setTweak("featuredPlan", v)}
            options={[
              {value:"discovery", label:"Discovery"},
              {value:"pro",       label:"Pro"},
              {value:"elite",     label:"Elite"},
            ]}
          />
        </TweakSection>
        <TweakSection title="Velocidad del flujo" subtitle="Animación de los 3 pasos.">
          <TweakSlider
            min={0.5} max={1.8} step={0.1}
            value={Number(t.animSpeed)}
            onChange={v => setTweak("animSpeed", Number(v))}
            unit="x"
          />
        </TweakSection>
        <TweakSection title="Densidad" subtitle="Espacio vertical entre secciones.">
          <TweakRadio
            value={t.density}
            onChange={v => setTweak("density", v)}
            options={[
              {value:"compact",  label:"Compacta"},
              {value:"normal",   label:"Normal"},
              {value:"spacious", label:"Espaciosa"},
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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