// App shell for the Build vs Buy landing page.

const { useState } = React;

const BuildApp = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const ac = buildAccent(t.accentColor);
  const accent = ac.solid;
  const accentTint = ac.tint;
  const accentSoft = ac.soft;

  const Italic = ({ children, color }) => (
    <span style={{
      fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
      color: color || accent,
    }}>{children}</span>
  );

  return (
    <div style={{ minHeight: "100vh", background: "var(--av-canvas)", color: "var(--av-ink)", fontFamily: "var(--font-sans)" }}>
      <BuildNavBar />

      <BuildHeroSection Italic={Italic} t={t} accent={accent} />

      <BuildInsideSection t={t} Italic={Italic} />

      <BuildCostsSection accent={accent} Italic={Italic} t={t} />

      <BuildAlternativeSection accent={accent} Italic={Italic} t={t} />

      <BuildComparisonSection accent={accent} Italic={Italic} t={t} />

      <BuildClosingCTA t={t} accent={accent} accentTint={accentTint} />

      <footer className="bvb-footer" style={{
        maxWidth: 1320, margin: "0 auto", padding: "32px 40px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 12, color: "var(--av-ink-muted)", flexWrap: "wrap", gap: 16,
      }}>
        <span>© 2026 AlgoVerde</span>
        <span style={{ display: "flex", gap: 16 }}>
          <a href="https://algoverde.ai/privacy-policy" target="_blank" rel="noopener noreferrer"
            style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
          <a href="https://algoverde.ai/security" target="_blank" rel="noopener noreferrer"
            style={{ color: "inherit", textDecoration: "none" }}>Security</a>
        </span>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Eyebrow">
          <TweakText label="Text" value={t.eyebrowText}
            onChange={(v) => setTweak("eyebrowText", v)} />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakRadio label="Color" value={t.accentColor}
            options={[
              { value: "iris", label: "Iris" },
              { value: "ember", label: "Ember" },
              { value: "verde", label: "Verde" },
            ]}
            onChange={(v) => setTweak("accentColor", v)} />
        </TweakSection>
        <TweakSection label="CTA">
          <TweakSelect label="Button label" value={t.ctaLabel}
            options={[
              "Download the white paper",
              "Download the paper",
              "Get the white paper",
            ]}
            onChange={(v) => setTweak("ctaLabel", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

window.BuildApp = BuildApp;