// PersonaApp — AI Personas Evidence landing page.

const { useState, useRef } = React;

const PersonaApp = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const formRef = useRef(null);

  const ac = personaAccent(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>
  );

  const scrollToForm = () => {
    if (formRef.current) {
      const top = formRef.current.getBoundingClientRect().top + window.scrollY - window.innerHeight / 2 + formRef.current.offsetHeight / 2;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

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

      <PersonaHeroSection
        Italic={Italic} t={t} accent={accent}
        scrollToForm={scrollToForm} formRef={formRef}
      />

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

      <PersonaEvidenceSection
        accent={accent} accentSoft={accentSoft}
        Italic={Italic} t={t} scrollToForm={scrollToForm}
      />

      <PersonaClosingCTA
        t={t} accent={accent} accentTint={accentTint}
        scrollToForm={scrollToForm}
      />

      <footer className="persona-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={[
              "Get the white paper",
              "Download the paper",
              "Read the evidence",
              "Send me the paper",
            ]}
            onChange={(v) => setTweak("ctaLabel", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

window.PersonaApp = PersonaApp;
