/* Variant A — Karten-Stil mit Bildern, Intro-Seite und CTA-Seite.
   Ablauf: Intro → 10 Fragen (je Bild + Frage) → Kontakt → Danke/CTA. */

const VariantA = () => {
  // step: -1 = Intro, 0..9 = Fragen, 10 = Kontakt, 11 = Danke/CTA
  const [step, setStep] = React.useState(-1);
  const [answers, setAnswers] = React.useState({});
  const [contact, setContact] = React.useState({ name: '', position: '', company: '', email: '' });
  const [aiOutcome, setAiOutcome] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const isIntro = step === -1;
  const isQuestion = step >= 0 && step < TOTAL_Q;
  const isContact = step === TOTAL_Q;
  const isDone = step === TOTAL_Q + 1;

  const q = isQuestion ? ALL_QUESTIONS[step] : null;
  const block = q ? QUIZ_BLOCKS.find((b) => b.id === q.blockId) : null;

  const contactComplete = contact.name.trim() && contact.email.trim() && contact.company.trim();

  const select = (score) => {
    setAnswers((a) => ({ ...a, [q.id]: score }));
    setTimeout(() => setStep((s) => s + 1), 300);
  };

  const progressPct = Math.round(Math.max(step, 0) / TOTAL_Q * 100);

  return (
    <div style={vaStyles.root}>
      {/* Top bar */}
      <header style={vaStyles.topbar}>
        <div style={vaStyles.topbarInner}>
        <img src={window.__resources.logo} alt="Communicate 365" style={{ height: 32 }} />
        {!isIntro && !isDone &&
          <span style={vaStyles.counter}>
            {isContact ? 'Fast geschafft' : `Frage ${step + 1} / ${TOTAL_Q}`}
          </span>
          }
        </div>
      </header>

      {/* Progress — nur während Fragen + Kontakt */}
      {!isIntro && !isDone &&
      <div style={vaStyles.progressTrack}>
          <div style={{ ...vaStyles.progressFill, width: isContact ? '100%' : `${progressPct}%` }} />
        </div>
      }

      <main style={vaStyles.main}>
        {isIntro && <IntroScreen onStart={() => setStep(0)} />}

        {isQuestion &&
        <div style={vaStyles.card} key={step}>
            <div style={vaStyles.cardInner}>
              <div style={vaStyles.cardCopy}>
                <div style={vaStyles.blockBadge}>
                  <span style={vaStyles.blockNum}>0{block.num}</span>
                  <span style={{ ...vaStyles.blockTitle, fontSize: "13px" }}>{block.title}</span>
                </div>
                <h2 style={{ ...vaStyles.qH, fontSize: "45px" }}>{q.text}</h2>
                <div style={vaStyles.answers}>
                  {q.answers.map((a, i) => {
                  const selected = answers[q.id] === a.score;
                  return (
                    <button
                      key={i}
                      style={{ ...vaStyles.answer, ...(selected ? vaStyles.answerSelected : {}) }}
                      onClick={() => select(a.score)}
                      onMouseEnter={(e) => {if (!selected) e.currentTarget.style.borderColor = '#000';}}
                      onMouseLeave={(e) => {if (!selected) e.currentTarget.style.borderColor = 'rgba(0,0,0,0.12)';}}>
                      
                        <span style={vaStyles.answerLetter}>{String.fromCharCode(65 + i)}</span>
                        <span style={{ ...vaStyles.answerText, fontSize: "17px" }}>{a.text}</span>
                        <span style={{ ...vaStyles.answerCheck, opacity: selected ? 1 : 0 }}>
                          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l4 4 8-9" /></svg>
                        </span>
                      </button>);

                })}
                </div>
              </div>
              <div style={vaStyles.cardImage}>
                <img src={q.image} alt="" style={vaStyles.img} />
              </div>
            </div>
            <div style={vaStyles.navRow}>
              <button
              style={{ ...vaStyles.navBtn, ...(step === 0 ? vaStyles.navBtnDisabled : {}) }}
              disabled={step === 0}
              onClick={() => setStep((s) => s - 1)}>
              ← Zurück</button>
              <span style={vaStyles.navHint}>Klick eine Antwort — wir springen automatisch weiter.</span>
            </div>
          </div>
        }

        {loading && (
          <div style={{
            width: '100%', maxWidth: 1180, textAlign: 'center', padding: '64px 24px',
            fontFamily: "'Prompt', sans-serif"
          }}>
            <div style={{
              width: 56, height: 56, margin: '0 auto 24px',
              border: '4px solid #EEEDEC', borderTopColor: '#FF9D00',
              borderRadius: '50%', animation: 'spin 1s linear infinite',
            }} />
            <h2 style={{
              fontWeight: 600, fontSize: 28, margin: '0 0 8px', color: '#000'
            }}>
              Ihre Auswertung wird erstellt …
            </h2>
            <p style={{
              fontWeight: 300, fontSize: 18, color: '#4A4A48', margin: 0
            }}>
              Unsere KI analysiert gerade Ihre Antworten. Das dauert nur einen Moment.
            </p>
            <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
          </div>
        )}
        {isContact && !loading &&
        <div style={vaStyles.card}>
            <div style={vaStyles.cardInner}>
              <div style={vaStyles.cardCopy}>
                <div style={vaStyles.blockBadge}>
                  <span style={vaStyles.blockNum}>✦</span>
                  <span style={vaStyles.blockTitle}>Deine Auswertung</span>
                </div>
                <h2 style={{ ...vaStyles.qH, color: 'rgb(0, 0, 0)' }}>
                  Fast geschafft!
                </h2>
                <p style={vaStyles.contactLead}>
                  Du bekommst deine persönliche Auswertung per E-Mail — mit konkreten nächsten Schritten.
                  Kein Newsletter, kein Blabla.
                </p>
                <form style={vaStyles.form} onSubmit={async (e) => {
                  e.preventDefault();
                  if (!contactComplete || loading) return;
                  const total = Object.values(answers).reduce((a, b) => a + b, 0);
                  const outcome = getOutcome(total).id;
                  setLoading(true);
                  try {
                    const r = await fetch('/api/submit', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify({
                        name: contact.name,
                        position: contact.position,
                        company: contact.company,
                        email: contact.email,
                        answers,
                        total,
                        outcome,
                      }),
                    });
                    const data = await r.json();
                    setAiOutcome(data);
                  } catch (err) {
                    console.error('Submit-Fehler:', err);
                    setAiOutcome({ _fallback: true });
                  } finally {
                    setLoading(false);
                    setStep((s) => s + 1);
                  }
                }}>
                  <div style={vaStyles.formGrid}>
                    <FormField label="Vollständiger Name" value={contact.name} onChange={(v) => setContact((c) => ({ ...c, name: v }))} placeholder="Max Mustermann" required />
                    <FormField label="Position" value={contact.position} onChange={(v) => setContact((c) => ({ ...c, position: v }))} placeholder="z. B. IT-Leitung" />
                    <FormField label="Unternehmen" value={contact.company} onChange={(v) => setContact((c) => ({ ...c, company: v }))} placeholder="Firma GmbH" required />
                    <FormField label="E-Mail-Adresse" value={contact.email} onChange={(v) => setContact((c) => ({ ...c, email: v }))} placeholder="du@firma.de" type="email" required />
                  </div>
                  <div style={{ ...vaStyles.navRow, marginTop: 28 }}>
                    <button type="button" style={vaStyles.navBtn} onClick={() => setStep((s) => s - 1)}>← Zurück</button>
                    <button type="submit" style={{ ...vaStyles.primaryBtn, ...(contactComplete ? {} : vaStyles.primaryBtnDisabled) }} disabled={!contactComplete}>
                      Auswertung erhalten →
                    </button>
                  </div>
                </form>
              </div>
              <div style={vaStyles.cardImage}>
                <img src={window.__resources.contactForm} alt="" style={vaStyles.img} />
              </div>
            </div>
          </div>
        }

        {isDone && <DoneScreenA answers={answers} contact={contact} aiOutcome={aiOutcome} />}
      </main>
    </div>);

};

/* Intro / Titelseite */
const IntroScreen = ({ onStart }) =>
<div style={introStyles.wrap}>
    <div style={introStyles.copy}>
      <div style={{ ...introStyles.eyebrow, fontSize: "15px" }}>Realitätscheck · 10 Fragen · 2 Minuten</div>
      <h1 style={{ ...introStyles.h, color: 'rgb(0, 0, 0)' }}>
        Wie <span style={{ color: '#FF9D00' }}>digital</span> arbeitet Ihr Unternehmen wirklich?
      </h1>
      <p style={{ ...introStyles.sub, color: "rgb(0, 0, 0)" }}>
        Beantworten Sie 10 kurze Fragen — und Sie wissen in 2 Minuten, wo das größtes Potenzial liegt.
      </p>
      <div style={introStyles.pills}>
        <span style={{ ...introStyles.pill, fontSize: "15px" }}><span style={introStyles.pillNum}>01</span> Nutzung & Potenzial</span>
        <span style={{ ...introStyles.pill, fontSize: "15px" }}><span style={introStyles.pillNum}>02</span> Grundlagen & KI-Readiness</span>
        <span style={{ ...introStyles.pill, fontSize: "15px" }}><span style={introStyles.pillNum}>03</span> Befähigung & Leitplanken</span>
      </div>
      <button style={introStyles.cta} onClick={onStart}>Jetzt starten →</button>
      <div style={introStyles.meta}>
        <span style={introStyles.metaItem}>{"\n"}</span>
        <span style={introStyles.metaItem}>{"\n"}</span>
        <span style={introStyles.metaItem}>{"\n"}</span>
      </div>
    </div>
    <div style={introStyles.art}>
      <img src={window.__resources.heroReality} alt="" style={{ width: '100%', height: 'auto', display: 'block' }} />
    </div>
  </div>;


const introStyles = {
  wrap: { width: '100%', maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' },
  copy: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 0 },
  eyebrow: { fontSize: 13, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF9D00', marginBottom: 20 },
  h: { fontFamily: "'Prompt', sans-serif", fontWeight: 600, fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', textWrap: 'balance' },
  sub: { fontFamily: "'Prompt', sans-serif", fontWeight: 300, fontSize: 22, lineHeight: 1.5, color: '#4A4A48', margin: '0 0 32px', textWrap: 'pretty', maxWidth: 560 },
  pills: { display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 32, alignItems: 'center' },
  pill: { display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 18px 8px 8px', background: '#EEEDEC', borderRadius: 9999, fontSize: 14, fontWeight: 500, color: '#000' },
  pillNum: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 26, height: 26, borderRadius: '50%', background: '#fff', color: '#FF9D00', fontWeight: 600, fontSize: 12, letterSpacing: '-0.01em' },
  cta: { fontFamily: "'Prompt', sans-serif", fontWeight: 500, fontSize: 17, padding: '18px 38px', background: '#FF9D00', color: '#fff', border: 0, borderRadius: 9999, cursor: 'pointer', marginBottom: 20 },
  ctaInline: { fontFamily: "'Prompt', sans-serif", fontWeight: 500, fontSize: 15, padding: '10px 22px', background: '#FF9D00', color: '#fff', border: 0, borderRadius: 9999, cursor: 'pointer' },
  meta: { display: 'flex', flexWrap: 'wrap', gap: 22, fontSize: 13, color: '#4A4A48', fontWeight: 300 },
  metaItem: {},
  art: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
};

const vaStyles = {
  root: { height: '100%', display: 'flex', flexDirection: 'column', background: '#fff', fontFamily: "'Prompt', sans-serif" },
  topbar: { padding: '22px 64px', borderBottom: '1px solid rgba(0,0,0,0.04)' },
  topbarInner: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', maxWidth: 1180, margin: '0 auto' },
  counter: { fontSize: 13, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8A8A88' },
  progressTrack: { height: 4, background: '#EEEDEC' },
  progressFill: { height: '100%', background: '#FF9D00', transition: 'width 360ms cubic-bezier(0.22,1,0.36,1)' },
  main: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 64px' },
  card: { width: '100%', maxWidth: 1180, background: '#fff', borderRadius: 40, padding: '44px 48px', boxShadow: '0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04)' },
  cardInner: { display: 'grid', gridTemplateColumns: '1.25fr 0.75fr', gap: 48, alignItems: 'center' },
  cardCopy: { display: 'flex', flexDirection: 'column' },
  cardImage: { background: '#EEEDEC', borderRadius: 40, padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', aspectRatio: '1 / 1', overflow: 'hidden' },
  img: { width: '100%', height: '100%', objectFit: 'contain', display: 'block' },
  blockBadge: { display: 'inline-flex', alignItems: 'center', gap: 12, padding: '8px 18px 8px 8px', background: '#EEEDEC', borderRadius: 9999, marginBottom: 22, alignSelf: 'flex-start' },
  blockNum: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: '50%', background: '#FF9D00', color: '#fff', fontWeight: 600, fontSize: 13 },
  blockTitle: { fontSize: 13, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#4A4A48' },
  qH: { fontFamily: "'Prompt', sans-serif", fontWeight: 600, fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.015em', margin: '0 0 28px', textWrap: 'balance' },
  answers: { display: 'flex', flexDirection: 'column', gap: 12 },
  answer: { display: 'grid', gridTemplateColumns: '38px 1fr 24px', alignItems: 'center', gap: 16, textAlign: 'left', padding: '16px 20px', background: '#fff', border: '1.5px solid rgba(0,0,0,0.12)', borderRadius: 20, cursor: 'pointer', fontFamily: 'inherit', transition: 'border-color 140ms, background 140ms' },
  answerSelected: { background: '#FFF6E8', borderColor: '#FF9D00' },
  answerLetter: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, borderRadius: '50%', background: '#EEEDEC', fontWeight: 600, fontSize: 13, color: '#000' },
  answerText: { fontFamily: 'inherit', fontWeight: 300, fontSize: 17, lineHeight: 1.4, color: '#000' },
  answerCheck: { color: '#FF9D00', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'opacity 140ms' },
  navRow: { marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 },
  navBtn: { fontFamily: 'inherit', fontWeight: 500, fontSize: 17, padding: '12px 22px', background: 'transparent', border: 0, borderRadius: 9999, cursor: 'pointer', color: '#000' },
  navBtnDisabled: { opacity: 0.3, cursor: 'not-allowed' },
  navHint: { fontSize: 13, color: '#8A8A88', fontWeight: 300 },
  primaryBtn: { fontFamily: 'inherit', fontWeight: 500, fontSize: 17, padding: '16px 32px', background: '#FF9D00', color: '#fff', border: 0, borderRadius: 9999, cursor: 'pointer' },
  primaryBtnDisabled: { opacity: 0.35, cursor: 'not-allowed' },
  contactLead: { fontSize: 22, lineHeight: 1.5, color: '#4A4A48', fontWeight: 300, margin: '0 0 24px', maxWidth: 520 },
  form: { display: 'flex', flexDirection: 'column', gap: 18 },
  formGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }
};

/* Shared form field */
const FormField = ({ label, value, onChange, placeholder, type = 'text', required }) =>
<label style={ffStyles.label}>
    <span style={ffStyles.labelText}>{label}{required && <span style={{ color: '#FF9D00' }}> *</span>}</span>
    <input
    type={type}
    value={value}
    onChange={(e) => onChange(e.target.value)}
    placeholder={placeholder}
    required={required}
    style={ffStyles.input}
    onFocus={(e) => e.target.style.borderColor = '#FF9D00'}
    onBlur={(e) => e.target.style.borderColor = 'rgba(0,0,0,0.12)'} />
  
  </label>;

const ffStyles = {
  label: { display: 'flex', flexDirection: 'column', gap: 6 },
  labelText: { fontFamily: "'Prompt', sans-serif", fontWeight: 500, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#4A4A48' },
  input: { fontFamily: "'Prompt', sans-serif", fontWeight: 300, fontSize: 17, padding: '13px 18px', borderRadius: 20, border: '1.5px solid rgba(0,0,0,0.12)', outline: 'none', color: '#000', background: '#fff', transition: 'border-color 140ms' }
};

/* Abschlussseite mit CTA für Erstgespräch */
const DoneScreenA = ({ answers, contact, aiOutcome }) => {
  const total = Object.values(answers).reduce((a, b) => a + b, 0);
  const max = MAX_SCORE;
  const outcome = getOutcome(total);
  const firstName = contact.name.split(' ')[0] || 'Sie';

  return (
    <div style={doneAStyles.wrap}>
      <div style={doneAStyles.copy}>
        <div style={{ ...doneAStyles.eyebrow, color: "rgb(138, 138, 136)" }}>Ihr Ergebnis · {firstName}</div>
        <h1 style={doneAStyles.h}>
          <span style={{ ...doneAStyles.scoreNum, fontSize: "60px" }}>{total}</span>
          <span style={{ ...doneAStyles.scoreOf, fontWeight: "600", fontSize: "60px", color: "rgb(0, 0, 0)" }}> / {max} Punkten</span>
        </h1>
        <h2 style={{ ...doneAStyles.sub, fontSize: "22px" }}>
          {outcome.id === 'high' ? 'Stark aufgestellt — aber sicher?' : null}
          {outcome.id === 'mid' ? 'Sie sind auf dem Weg.' : null}
          {outcome.id === 'low' ? 'Ihr Potenzial liegt noch brach.' : null}
        </h2>

        <p style={{ ...doneAStyles.body, color: "rgb(0, 0, 0)" }}>{outcome.body}</p>

        <button style={doneAStyles.cta}>Kostenloses Erstgespräch buchen →</button>
        <div style={doneAStyles.ctaMeta}>30 Min · online via Teams · unverbindlich</div>
      </div>

      <div style={doneAStyles.art}>
        <img src={window.__resources.doneCta} alt="" style={{ width: '100%', height: 'auto', display: 'block' }} />
      </div>
      {aiOutcome && !aiOutcome._fallback && (
        <div style={{ gridColumn: '1 / -1', maxWidth: 700, marginTop: 16 }}>
          {aiOutcome.einleitung && (
            <p style={{
              fontFamily: "'Prompt', sans-serif",
              fontWeight: 300,
              fontSize: 18,
              lineHeight: 1.55,
              color: '#000',
              margin: '0 0 24px',
              textWrap: 'pretty',
            }}>
              {aiOutcome.einleitung}
            </p>
          )}

          {aiOutcome.staerken?.length > 0 && (
            <>
              <h3 style={{
                fontFamily: "'Prompt', sans-serif",
                fontWeight: 600,
                fontSize: 22,
                lineHeight: 1.2,
                letterSpacing: '-0.01em',
                color: '#000',
                margin: '0 0 12px',
              }}>
                Ihre Stärken
              </h3>
              <ul style={{
                margin: '0 0 24px',
                paddingLeft: 22,
                fontFamily: "'Prompt', sans-serif",
                fontWeight: 300,
                fontSize: 18,
                lineHeight: 1.55,
                color: '#000',
              }}>
                {aiOutcome.staerken.map((s, i) => (
                  <li key={i} style={{ marginBottom: 8 }}>{s}</li>
                ))}
              </ul>
            </>
          )}

          {aiOutcome.schwaechen?.length > 0 && (
            <>
              <h3 style={{
                fontFamily: "'Prompt', sans-serif",
                fontWeight: 600,
                fontSize: 22,
                lineHeight: 1.2,
                letterSpacing: '-0.01em',
                color: '#000',
                margin: '0 0 12px',
              }}>
                Ihre größten Hebel
              </h3>
              <ul style={{
                margin: '0 0 24px',
                paddingLeft: 22,
                fontFamily: "'Prompt', sans-serif",
                fontWeight: 300,
                fontSize: 18,
                lineHeight: 1.55,
                color: '#000',
              }}>
                {aiOutcome.schwaechen.map((s, i) => (
                  <li key={i} style={{ marginBottom: 8 }}>{s}</li>
                ))}
              </ul>
            </>
          )}

          {aiOutcome.abschluss && (
            <p style={{
              fontFamily: "'Prompt', sans-serif",
              fontWeight: 500,
              fontSize: 18,
              lineHeight: 1.55,
              color: '#000',
              margin: 0,
              textWrap: 'pretty',
            }}>
              {aiOutcome.abschluss}
            </p>
          )}
        </div>
      )}

      <div style={{
        gridColumn: '1 / -1',
        background: '#FFF6E8',
        borderRadius: 24,
        padding: '28px 32px',
        marginTop: 32,
        maxWidth: 700,
      }}>
        <div style={{
          fontFamily: "'Prompt', sans-serif",
          fontSize: 13,
          fontWeight: 500,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: '#FF9D00',
          marginBottom: 12,
        }}>
          Bereit?
        </div>
        <h3 style={{
          fontFamily: "'Prompt', sans-serif",
          fontWeight: 600,
          fontSize: 26,
          lineHeight: 1.15,
          letterSpacing: '-0.015em',
          color: '#000',
          margin: '0 0 12px',
        }}>
          Vereinbaren Sie jetzt Ihr <span style={{ color: '#FF9D00' }}>Erstgespräch</span>.
        </h3>
        <p style={{
          fontFamily: "'Prompt', sans-serif",
          fontWeight: 300,
          fontSize: 17,
          lineHeight: 1.5,
          color: '#4A4A48',
          margin: '0 0 20px',
        }}>
          30 Minuten, kostenfrei, online via Teams — wir zeigen Ihnen die zwei wirksamsten Hebel für Ihr Unternehmen.
        </p>
        <button style={doneAStyles.cta}>Kostenloses Erstgespräch buchen →</button>
      </div>
    </div>);

};
const doneAStyles = {
  wrap: { width: '100%', maxWidth: 1180, margin: '0 auto', padding: '0 24px', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' },
  copy: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' },
  eyebrow: { fontSize: 13, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF9D00', marginBottom: 20 },

  h: { fontFamily: "'Prompt', sans-serif", fontWeight: 600, fontSize: 96, lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 14px', color: '#000', display: 'flex', alignItems: 'baseline', flexWrap: 'wrap' },
  scoreNum: { color: '#FF9D00', fontVariantNumeric: 'tabular-nums' },
  scoreOf: { color: '#8A8A88', fontWeight: 300, fontSize: 44, letterSpacing: '-0.01em', marginLeft: 12 },

  sub: { fontFamily: "'Prompt', sans-serif", fontWeight: 600, fontSize: 34, lineHeight: 1.15, letterSpacing: '-0.015em', margin: '0 0 24px', textWrap: 'balance', color: '#000' },

  body: { fontFamily: "'Prompt', sans-serif", fontWeight: 300, fontSize: 22, lineHeight: 1.5, color: '#4A4A48', margin: '0 0 36px', textWrap: 'pretty', maxWidth: 560 },

  cta: { fontFamily: "'Prompt', sans-serif", fontWeight: 500, fontSize: 17, padding: '18px 38px', background: '#FF9D00', color: '#fff', border: 0, borderRadius: 9999, cursor: 'pointer', marginBottom: 14 },
  ctaMeta: { fontFamily: "'Prompt', sans-serif", fontWeight: 300, fontSize: 13, color: '#8A8A88', letterSpacing: '0.04em' },

  art: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
};

Object.assign(window, { VariantA, FormField, DoneScreenA });