// === WaitlistForm.jsx ===
// Waitlist form — submits email to Formspree.
// Replace FORMSPREE_ID with your form ID from formspree.io/register
// e.g. if your endpoint is https://formspree.io/f/xabc1234 → set FORMSPREE_ID = 'xabc1234'
const FORMSPREE_ID = 'xojywqow';
const FORMSPREE_URL = 'https://formspree.io/f/' + FORMSPREE_ID;

const WaitlistForm = ({ size = 'md', dark = false, fullWidth = false, quizAnswers = null }) => {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | submitting | success | error
  const isBig = size === 'lg';
  const inputPad = isBig ? '18px 20px' : '14px 16px';
  const btnPad = isBig ? '18px 26px' : '14px 22px';
  const fontSize = isBig ? 16 : 15;

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setState('submitting');
    const payload = {
      email,
      source: 'US waitlist — coming soon page',
    };
    if (quizAnswers) {
      payload.quiz_q1 = quizAnswers[0];
      payload.quiz_q2 = quizAnswers[1];
    }
    fetch(FORMSPREE_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload),
    })
      .then(function(res) { setState(res.ok ? 'success' : 'error'); })
      .catch(function() { setState('error'); });
  };

  if (state === 'success') {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '16px 20px', borderRadius: 12,
        background: dark ? 'rgba(255,255,255,0.08)' : 'var(--viteezy-teal-50)',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'var(--viteezy-teal-200)'}`,
        maxWidth: fullWidth ? 'none' : 520,
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: 999, background: 'var(--viteezy-teal-500)',
          color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 14, flexShrink: 0,
        }}>✓</div>
        <div>
          <div style={{ font: '600 15px/1.3 "Sofia Pro"', color: dark ? '#fff' : 'var(--ink-900)' }}>
            You're on the list.
          </div>
          <div style={{ font: '400 13px/1.4 "Sofia Pro"', color: dark ? 'rgba(255,255,255,0.7)' : 'var(--ink-500)', marginTop: 2 }}>
            We'll email you the morning of May 15.
          </div>
        </div>
      </div>
    );
  }

  if (state === 'error') {
    return (
      <div style={{
        padding: '14px 18px', borderRadius: 12,
        background: '#FFF0F0', border: '1px solid #FFCDD2',
        font: '400 14px/1.4 "Sofia Pro"', color: '#C62828',
        maxWidth: fullWidth ? 'none' : 520,
      }}>
        Something went wrong. Try again or email <a href="mailto:hello@viteezy.com" style={{ color: 'inherit' }}>hello@viteezy.com</a>.
        <button onClick={() => setState('idle')} style={{ marginLeft: 10, cursor: 'pointer', background: 'none', border: 'none', color: '#C62828', font: '600 14px/1 "Sofia Pro"', textDecoration: 'underline' }}>Retry</button>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex', gap: 8, maxWidth: fullWidth ? 'none' : 520, width: '100%'
    }}>
      <input
        type="email"
        placeholder="Your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        style={{
          flex: 1,
          font: `400 ${fontSize}px/1 "Sofia Pro"`,
          padding: inputPad,
          border: `1px solid ${dark ? 'rgba(255,255,255,0.22)' : 'var(--ink-200)'}`,
          borderRadius: 12,
          background: dark ? 'rgba(255,255,255,0.06)' : '#fff',
          color: dark ? '#fff' : 'var(--ink-900)',
          outline: 'none',
          minWidth: 0,
        }}
      />
      <button
        type="submit"
        disabled={state === 'submitting'}
        style={{
          font: `600 ${fontSize}px/1 "Sofia Pro"`,
          padding: btnPad,
          background: 'var(--viteezy-teal-500)',
          color: '#fff',
          border: 0,
          borderRadius: 12,
          cursor: 'pointer',
          whiteSpace: 'nowrap',
          boxShadow: '0 2px 6px rgba(14,24,22,0.05)',
          opacity: state === 'submitting' ? 0.6 : 1,
          transition: 'opacity 120ms',
        }}
      >
        {state === 'submitting' ? 'Joining…' : 'Join the waitlist'}
      </button>
    </form>
  );
};

window.WaitlistForm = WaitlistForm;


// === Countdown.jsx ===
// Countdown to May 15, 2026 (US public launch).
const Countdown = ({ dark = false, compact = false }) => {
  const target = new Date('2026-05-15T09:00:00-04:00').getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff / 3600000) % 24);
  const mins = Math.floor((diff / 60000) % 60);
  const secs = Math.floor((diff / 1000) % 60);

  const units = [
    { n: days, l: 'days' },
    { n: hours, l: 'hrs' },
    { n: mins, l: 'min' },
    { n: secs, l: 'sec' },
  ];

  const bg = dark ? 'rgba(255,255,255,0.06)' : 'var(--paper-0)';
  const border = dark ? 'rgba(255,255,255,0.12)' : 'var(--ink-100)';
  const numColor = dark ? '#fff' : 'var(--ink-900)';
  const lblColor = dark ? 'rgba(255,255,255,0.6)' : 'var(--ink-500)';

  return (
    <div style={{
      display: 'inline-flex',
      gap: compact ? 6 : 10,
      padding: compact ? '10px 12px' : '14px 18px',
      background: bg,
      border: `1px solid ${border}`,
      borderRadius: 16,
    }}>
      {units.map((u, i) => (
        <React.Fragment key={u.l}>
          <div style={{ textAlign: 'center', minWidth: compact ? 44 : 54 }}>
            <div style={{
              font: `700 ${compact ? 22 : 30}px/1 "Sofia Pro"`,
              letterSpacing: '-0.02em',
              color: numColor,
              fontVariantNumeric: 'tabular-nums',
            }}>{String(u.n).padStart(2, '0')}</div>
            <div style={{
              font: '600 10px/1 "Sofia Pro"',
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: lblColor,
              marginTop: 6,
            }}>{u.l}</div>
          </div>
          {i < units.length - 1 && (
            <div style={{
              alignSelf: 'center',
              color: dark ? 'rgba(255,255,255,0.2)' : 'var(--ink-200)',
              font: '300 20px/1 "Sofia Pro"',
            }}>·</div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

window.Countdown = Countdown;


// === QuizTease.jsx ===
// Interactive 2-question quiz tease. After completion, captures email + quiz answers
// and submits both to Formspree alongside the waitlist form.
const QUIZ = [
  {
    q: 'What\u2019s your #1 health goal?',
    choices: ['More steady energy', 'Better sleep', 'Stronger immunity', 'Sharper focus'],
  },
  {
    q: 'How often do you feel tired by 3pm?',
    choices: ['Every day', 'A few times a week', 'Rarely', 'Never'],
  },
];

// Map answer combos to a suggested plan
const PLAN_MAP = {
  'More steady energy': { name: 'The Steady Day', supplements: ['B-Complex', 'CoQ10', 'Omega-3', 'Magnesium', 'D3+K2'] },
  'Better sleep':       { name: 'The Wind-Down',  supplements: ['Ashwagandha KSM-66', 'Magnesium', 'Omega-3', 'Vitamin C'] },
  'Stronger immunity':  { name: 'The Shield',     supplements: ['Vitamin C', 'Zinc', 'D3+K2', 'Elderberry', 'Probiotic'] },
  'Sharper focus':      { name: 'The Clear Head', supplements: ['Lion\'s Mane', 'Omega-3', 'B-Complex', 'Magnesium', 'Ginkgo'] },
};

const QuizTease = () => {
  const [step, setStep] = React.useState(0);
  const [picks, setPicks] = React.useState([null, null]);
  const [pickLabels, setPickLabels] = React.useState([null, null]);
  const isDone = picks.every(p => p !== null);
  const current = QUIZ[step];

  const plan = isDone ? (PLAN_MAP[pickLabels[0]] || PLAN_MAP['More steady energy']) : null;

  const pick = (i, label) => {
    const nextPicks = [...picks]; nextPicks[step] = i; setPicks(nextPicks);
    const nextLabels = [...pickLabels]; nextLabels[step] = label; setPickLabels(nextLabels);
    setTimeout(() => {
      if (step < QUIZ.length - 1) setStep(step + 1);
    }, 180);
  };

  return (
    <div style={{
      background: 'var(--paper-0)',
      border: '1px solid var(--ink-100)',
      borderRadius: 24,
      padding: 32,
      boxShadow: '0 8px 24px rgba(14,24,22,0.06), 0 2px 6px rgba(14,24,22,0.04)',
      maxWidth: 560,
      width: '100%',
      boxSizing: 'border-box',
    }}>
      {/* Progress bar */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
        <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
          Quiz preview · {Math.min(step + 1, QUIZ.length)} of {QUIZ.length}
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {QUIZ.map((_, i) => (
            <div key={i} style={{
              width: 28, height: 4, borderRadius: 2,
              background: i < step || isDone ? 'var(--viteezy-teal-500)' : i === step ? 'var(--viteezy-teal-300)' : 'var(--ink-100)',
              transition: 'background 220ms',
            }} />
          ))}
        </div>
      </div>

      {!isDone ? (
        <>
          <div style={{ font: '600 22px/1.2 "Sofia Pro"', color: 'var(--ink-900)', letterSpacing: '-0.015em' }}>
            {current.q}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 20 }}>
            {current.choices.map((c, i) => {
              const selected = picks[step] === i;
              return (
                <button key={i} onClick={() => pick(i, c)} style={{
                  font: '500 15px/1.3 "Sofia Pro"',
                  textAlign: 'left',
                  padding: '16px 18px',
                  background: selected ? 'var(--viteezy-teal-50)' : '#fff',
                  color: 'var(--ink-900)',
                  border: `1px solid ${selected ? 'var(--viteezy-teal-500)' : 'var(--ink-200)'}`,
                  borderRadius: 12,
                  cursor: 'pointer',
                  transition: 'border-color 120ms, background 120ms',
                }}>{c}</button>
              );
            })}
          </div>
        </>
      ) : (
        <div>
          <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
            Your preview plan
          </div>
          <div style={{ font: '600 24px/1.15 "Sofia Pro"', color: 'var(--ink-900)', letterSpacing: '-0.02em', marginTop: 10 }}>
            {plan.name}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
            {plan.supplements.map(p => (
              <span key={p} style={{
                padding: '6px 10px', borderRadius: 999,
                background: 'var(--viteezy-teal-50)', color: 'var(--viteezy-teal-700)',
                font: '600 12px/1 "Sofia Pro"',
              }}>{p}</span>
            ))}
          </div>

          {/* Email capture — quiz answers passed through to Formspree */}
          <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--ink-100)' }}>
            <div style={{ font: '500 13px/1.4 "Sofia Pro"', color: 'var(--ink-700)', marginBottom: 12 }}>
              Get notified when your personalized plan is ready on May 15:
            </div>
            <WaitlistForm
              size="md"
              quizAnswers={[
                `${QUIZ[0].q}: ${pickLabels[0]}`,
                `${QUIZ[1].q}: ${pickLabels[1]}`,
              ]}
            />
          </div>

          <button onClick={() => { setStep(0); setPicks([null, null]); setPickLabels([null, null]); }} style={{
            marginTop: 14,
            font: '600 12px/1 "Sofia Pro"',
            padding: '8px 14px',
            background: 'transparent',
            border: '1px solid var(--ink-200)',
            borderRadius: 999,
            color: 'var(--ink-500)',
            cursor: 'pointer',
          }}>Retake quiz</button>
        </div>
      )}
    </div>
  );
};

window.QuizTease = QuizTease;


// === Bundles.jsx ===
// Scroll-reveal hook — fades + slides element in when it enters the viewport
const useReveal = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
};

// Two product paths: Personalized Sachets (subscription) + Standup Pouches (individual)

const POUCHES = [
  { tag: 'Immunity', title: 'Vitamin D3+K2', desc: 'Supports bone density, immunity and mood. D3 + K2 for optimal absorption.', image: 'assets/product-vitd.png' },
  { tag: 'Omega-3', title: 'Algae-Based Omega-3', desc: 'Algae-derived EPA+DHA. Sustainably sourced, no fishy aftertaste.', image: 'assets/ingredient-fishoil.png' },
  { tag: 'Cleanse', title: 'Detox', desc: 'Spirulina-based daily detox. Binds toxins, supports liver and gut health.', image: 'assets/ingredient-spirulina.png' },
  { tag: 'Recovery', title: 'Sleep', desc: 'Lavender, chamomile and melatonin precursors. Drift off, stay asleep.', image: 'assets/product-sleep.png' },
  { tag: "Men's Health", title: "Men's Vitality", desc: 'Maca root + zinc + B-complex. Stamina, testosterone balance, focus.', image: 'assets/product-maca.jpg' },
  { tag: "Women's Health", title: 'Women Hormone Balance', desc: 'Pomegranate, lavender and adaptogens for cycle balance and calm.', image: 'assets/product-hormone.jpg' },
  { tag: 'Performance', title: 'Energy', desc: 'B-vitamins, CoQ10 and citrus bioflavonoids. Sustained energy, no crash.', image: 'assets/product-energy.jpg' },
  { tag: 'Kids', title: "Children's Multivitamin", desc: 'Vitamin D, B-complex and iron in child-safe doses. Supports growth and focus.', image: 'assets/product-kids.jpg' },
];

const Bundles = () => {
  const [refSachet, visibleSachet] = useReveal();
  const [refPouch, visiblePouch] = useReveal();
  const revealStyle = (visible, delay = 0) => ({
    opacity: visible ? 1 : 0,
    transform: visible ? 'translateY(0)' : 'translateY(40px)',
    transition: `opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s`,
  });
  return (
  <div>
    <div style={{ textAlign: 'center', marginBottom: 56 }}>
      <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
        Two ways to get Viteezy
      </div>
      <div style={{ font: '600 40px/1.1 "Sofia Pro"', letterSpacing: '-0.025em', color: 'var(--ink-900)', marginTop: 12 }}>
        Personalized sachets or<br /><span style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 400 }}>individual pouches.</span>
      </div>
    </div>

    {/* Path 1 — Personalized Sachets */}
    <div ref={refSachet} style={{
      ...revealStyle(visibleSachet, 0),
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
      borderRadius: 24, overflow: 'hidden', marginBottom: 16,
      border: '1px solid var(--ink-100)',
      boxShadow: '0 2px 8px rgba(14,24,22,0.06)',
    }}>
      <div style={{
        backgroundImage: 'url(assets/lifestyle-welcome.jpg)', backgroundSize: 'cover', backgroundPosition: 'center',
        minHeight: 360,
      }} />
      <div style={{ padding: '48px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: 'var(--paper-0)' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: 'var(--viteezy-teal-50)', border: '1px solid var(--viteezy-teal-200)', width: 'fit-content' }}>
          <span style={{ font: '600 10px/1 "Sofia Pro"', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>Subscription</span>
        </div>
        <h2 style={{ font: '600 32px/1.1 "Sofia Pro"', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '16px 0 0' }}>
          Personalized daily sachets
        </h2>
        <p style={{ font: '400 15px/1.6 "Sofia Pro"', color: 'var(--ink-700)', margin: '12px 0 0' }}>
          Take a short quiz. We match you with 1–2 daily sachets with 4–7 supplements each with your name on it. Delivered monthly on a 1–3 month subscription.
        </p>
        <ul style={{ margin: '18px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {['Quiz-matched to your goals', 'Your name on every sachet', '1, 2 or 3-month plans', 'Adjust or cancel anytime'].map(f => (
            <li key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, font: '500 14px/1.3 "Sofia Pro"', color: 'var(--ink-700)' }}>
              <span style={{ width: 18, height: 18, borderRadius: 999, background: 'var(--viteezy-teal-500)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>✓</span>
              {f}
            </li>
          ))}
        </ul>
      </div>
    </div>

    {/* Path 2 — Standup Pouches */}
    <div ref={refPouch} style={{
      ...revealStyle(visiblePouch, 0.15),
      border: '1px solid var(--ink-100)', borderRadius: 24, padding: '40px 44px',
      background: 'var(--paper-0)',
      boxShadow: '0 2px 8px rgba(14,24,22,0.06)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 32 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: 'var(--ink-100)', border: '1px solid var(--ink-200)', width: 'fit-content' }}>
            <span style={{ font: '600 10px/1 "Sofia Pro"', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-700)' }}>Buy individually</span>
          </div>
          <h2 style={{ font: '600 32px/1.1 "Sofia Pro"', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '16px 0 0' }}>
            Standup pouches
          </h2>
          <p style={{ font: '400 15px/1.6 "Sofia Pro"', color: 'var(--ink-700)', margin: '10px 0 0', maxWidth: 480 }}>
            Our scientifically developed, custom formulated products — each available as a standalone standup pouch. No quiz required. Buy the ones you know you need.
          </p>
        </div>
      </div>

      {/* 4+4 product grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {POUCHES.map((p, i) => (
          <div key={p.title} ref={(el) => { if (el) { const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.style.opacity = 1; el.style.transform = 'translateY(0)'; obs.disconnect(); } }, { threshold: 0.15 }); obs.observe(el); } }} style={{
            borderRadius: 20, overflow: 'hidden',
            border: '1px solid var(--ink-100)',
            background: 'var(--paper-0)',
            opacity: 0, transform: 'translateY(32px)',
            transition: `opacity 0.6s ease ${i * 0.08}s, transform 0.6s ease ${i * 0.08}s`,
          }}>
            <div style={{
              aspectRatio: '1 / 1',
              backgroundImage: `url(${p.image})`, backgroundSize: 'cover', backgroundPosition: 'center',
            }} />
            <div style={{ padding: '16px 18px' }}>
              <div style={{ font: '600 10px/1 "Sofia Pro"', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>{p.tag}</div>
              <div style={{ font: '600 17px/1.2 "Sofia Pro"', color: 'var(--ink-900)', marginTop: 6, letterSpacing: '-0.01em' }}>{p.title}</div>
              <div style={{ font: '400 12px/1.5 "Sofia Pro"', color: 'var(--ink-500)', marginTop: 5 }}>{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

window.Bundles = Bundles;


// === Differentiators.jsx ===
// Three-up "why Viteezy" section.
const DIFFS = [
  {
    n: '01',
    t: 'Personalized, not assumed.',
    d: 'A 2-minute quiz — built with a expert — maps your goals and lifestyle to 4 to 7 supplements.',
  },
  {
    n: '02',
    t: 'Clean ingredients, nothing extra.',
    d: 'No artificial fillers, no synthetic binders. Just what the quiz says you need, sourced for absorption.',
  },
  {
    n: '03',
    t: 'One sachet a day.',
    d: 'Delivered as a monthly roll. No pill organizers. No stacking conflicts. No guessing.',
  },
];

const Differentiators = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
    {DIFFS.map(d => (
      <div key={d.n} style={{
        background: 'var(--paper-0)',
        border: '1px solid var(--ink-100)',
        borderRadius: 20,
        padding: 32,
      }}>
        <div style={{
          font: '500 14px/1 "Sofia Pro"',
          color: 'var(--viteezy-teal-700)',
          fontFeatureSettings: '"tnum"',
        }}>{d.n}</div>
        <div style={{
          font: '600 22px/1.25 "Sofia Pro"',
          color: 'var(--ink-900)',
          letterSpacing: '-0.015em',
          marginTop: 24,
        }}>{d.t}</div>
        <div style={{
          font: '400 15px/1.55 "Sofia Pro"',
          color: 'var(--ink-500)',
          marginTop: 10,
        }}>{d.d}</div>
      </div>
    ))}
  </div>
);

window.Differentiators = Differentiators;


// === SocialProof.jsx ===
// Dutch-origin social proof section.
// US audiences trust European wellness provenance — lean into "from the Netherlands" specifically.
const STATS = [
  { n: '1M+', l: 'daily sachets taken' },
  { n: '30,000+', l: 'Dutch & Belgian subscribers' },
  { n: '4.5★', l: '2,699 reviews' },
  { n: '2019', l: 'founded in Amsterdam, NL' },
];

const SocialProof = () => (
  <div style={{
    background: 'var(--paper-100)',
    borderRadius: 24,
    padding: '56px 48px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    {/* Subtle NL flag stripes as a decorative accent top-right */}
    <div aria-hidden style={{
      position: 'absolute', top: 0, right: 0, width: 120, height: 4,
      display: 'flex',
    }}>
      <div style={{ flex: 1, background: '#AE1C28' }} />
      <div style={{ flex: 1, background: '#FFFFFF' }} />
      <div style={{ flex: 1, background: '#21468B' }} />
    </div>

    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', marginBottom: 44 }}>
      <div style={{ maxWidth: 560 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: '#fff', border: '1px solid var(--ink-200)' }}>
          {/* Mini NL flag */}
          <span style={{ display: 'inline-flex', flexDirection: 'column', width: 14, height: 10, borderRadius: 2, overflow: 'hidden', border: '1px solid rgba(14,24,22,0.08)' }}>
            <span style={{ flex: 1, background: '#AE1C28' }} />
            <span style={{ flex: 1, background: '#fff' }} />
            <span style={{ flex: 1, background: '#21468B' }} />
          </span>
          <span style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-700)' }}>
            Made in the Netherlands
          </span>
        </div>
        <div style={{ font: '600 36px/1.12 "Sofia Pro"', color: 'var(--ink-900)', letterSpacing: '-0.025em', marginTop: 18, textWrap: 'balance' }}>
          Europe's personalized vitamin brand, <span style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 400 }}>now coming stateside.</span>
        </div>
      </div>
      <div style={{ font: '400 15px/1.6 "Sofia Pro"', color: 'var(--ink-700)', maxWidth: 380 }}>
        Viteezy started in 2019 out of Bussum, a small town outside Amsterdam. Four years later, more than thirty thousand people across the Netherlands and Belgium take a Viteezy sachet every morning. We're bringing the same personalized plans, clean ingredients, and European wellness standards to the US.
      </div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {STATS.map(s => (
        <div key={s.l} style={{ borderTop: '1px solid var(--ink-200)', paddingTop: 20 }}>
          <div style={{ font: '600 40px/1 "Sofia Pro"', letterSpacing: '-0.025em', color: 'var(--ink-900)' }}>{s.n}</div>
          <div style={{ font: '500 13px/1.4 "Sofia Pro"', color: 'var(--ink-500)', marginTop: 8 }}>{s.l}</div>
        </div>
      ))}
    </div>

    {/* Welcome kit photo — the "what you actually get" moment */}
    <div style={{
      marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 28,
      alignItems: 'stretch',
    }}>
      <div style={{
        borderRadius: 20, overflow: 'hidden',
        backgroundImage: 'url(assets/lifestyle-welcome.jpg)', backgroundSize: 'cover', backgroundPosition: 'center',
        minHeight: 260,
      }} />
      <div style={{
        background: '#fff', borderRadius: 20, padding: '32px 36px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
          The welcome kit
        </div>
        <div style={{ font: '600 26px/1.2 "Sofia Pro"', letterSpacing: '-0.02em', color: 'var(--ink-900)', marginTop: 12 }}>
          Every member gets the same box Dutch subscribers get.
        </div>
        <div style={{ font: '400 14px/1.55 "Sofia Pro"', color: 'var(--ink-500)', marginTop: 12 }}>
          A 30 to 90-day sachet strip personalized to your quiz, a tin box, and a welcome card. Shipped from our US fulfillment center starting May 15.
        </div>
      </div>
    </div>

    <div style={{
      marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--ink-200)',
      display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', justifyContent: 'space-between',
    }}>
      <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-500)' }}>
        As featured in Dutch press
      </div>
      {['Quote', 'Volkskrant', 'Elle NL', 'Sprout', 'FD'].map(p => (
        <div key={p} style={{
          font: '500 20px/1 "Sofia Pro"', color: 'var(--ink-300)', letterSpacing: '-0.015em',
          fontStyle: p === 'Elle NL' ? 'italic' : 'normal',
        }}>{p}</div>
      ))}
    </div>
  </div>
);

window.SocialProof = SocialProof;


// === DutchStory.jsx ===
// Dutch-origin editorial section — the café flyer photo IS the story.
// "Geef €10 korting" (Dutch: "Give €10 off") visible in the photo is genuine proof of EU operation.

const DutchStory = () => (
  <section style={{
    display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0,
    borderRadius: 32, overflow: 'hidden', background: 'var(--ink-900)',
  }}>
    {/* Left: editorial copy on dark */}
    <div style={{
      padding: '72px 56px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      color: '#fff', minHeight: 520,
    }}>
      <div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.16)' }}>
          <span style={{ display: 'inline-flex', flexDirection: 'column', width: 14, height: 10, borderRadius: 2, overflow: 'hidden' }}>
            <span style={{ flex: 1, background: '#AE1C28' }} />
            <span style={{ flex: 1, background: '#fff' }} />
            <span style={{ flex: 1, background: '#21468B' }} />
          </span>
          <span style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-300)' }}>
            The Dutch story
          </span>
        </div>
        <h2 style={{
          font: '600 48px/1.08 "Sofia Pro"', letterSpacing: '-0.03em',
          margin: '24px 0 0', textWrap: 'balance',
        }}>
          Four years in the wild,<br />
          <span style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 400, color: 'var(--viteezy-teal-300)' }}>
            before your first sachet.
          </span>
        </h2>
        <p style={{ font: '400 16px/1.65 "Sofia Pro"', color: 'rgba(255,255,255,0.72)', margin: '24px 0 0', maxWidth: 440 }}>
          Viteezy started in 2019 in Amsterdam — a small town half an hour from Amsterdam. We spent six years refining the quiz, ingredients, and sourcing in the Netherlands and Belgium before ever considering a US launch.
        </p>
        <p style={{ font: '400 16px/1.65 "Sofia Pro"', color: 'rgba(255,255,255,0.72)', margin: '14px 0 0', maxWidth: 440 }}>
          So when you take the quiz on May 15, you're not a guinea pig. You're the thirty-thousandth-and-first person on a plan that already works.
        </p>
      </div>

      <div style={{
        marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.12)',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
      }}>
        {[
          { n: '2019', l: 'Founded · Amsterdam, NL' },
          { n: '🇳🇱 🇧🇪', l: 'Nederland & België' },
          { n: 'EU-GMP', l: 'Manufacturing standard' },
        ].map(s => (
          <div key={s.l}>
            <div style={{ font: '600 22px/1 "Sofia Pro"', letterSpacing: '-0.01em', color: '#fff' }}>{s.n}</div>
            <div style={{ font: '500 12px/1.4 "Sofia Pro"', color: 'rgba(255,255,255,0.5)', marginTop: 6 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>

    {/* Right: café flyer photo — literal Dutch-language proof */}
    <div style={{
      position: 'relative', minHeight: 520,
      backgroundImage: 'url(assets/lifestyle-cafe.jpg)',
      backgroundSize: 'cover', backgroundPosition: 'center',
    }}>

    </div>
  </section>
);

window.DutchStory = DutchStory;


// === Footer.jsx ===


// === Hero.jsx ===

const Hero = () => (
  <section style={{
    padding: '48px 40px 80px',
    display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center',
  }}>
    <div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px', borderRadius: 999, background: 'var(--paper-100)', border: '1px solid var(--ink-200)' }}>
        <span style={{ display: 'inline-flex', flexDirection: 'column', width: 16, height: 12, borderRadius: 2, overflow: 'hidden', border: '1px solid rgba(14,24,22,0.08)' }}>
          <span style={{ flex: 1, background: '#AE1C28' }} />
          <span style={{ flex: 1, background: '#fff' }} />
          <span style={{ flex: 1, background: '#21468B' }} />
        </span>
        <span style={{ font: '600 13px/1 "Sofia Pro"', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-700)' }}>
          Loved in the Netherlands · Coming soon to the US
        </span>
      </div>
      <h1 style={{
        font: '600 64px/1.04 "Sofia Pro"', letterSpacing: '-0.035em', color: 'var(--ink-900)',
        margin: '20px 0 0', textWrap: 'balance',
      }}>
        Supplements built<br />
        <span style={{ fontFamily: 'Fraunces', fontStyle: 'italic', fontWeight: 400 }}>around you.</span>
      </h1>
      <p style={{ font: '400 18px/1.55 "Sofia Pro"', color: 'var(--ink-700)', margin: '20px 0 0', maxWidth: 520 }}>
        Personalized daily sachets on subscription, or scientifically formulated single products in standup pouches — two ways to get exactly what your body needs.
      </p>
      <div style={{ marginTop: 28 }}>
        <div className="waitlist-glow" style={{ padding: 4, background: 'linear-gradient(135deg, rgba(0,171,150,0.12), rgba(0,171,150,0.04))', borderRadius: 14 }}>
          <WaitlistForm size="lg" />
        </div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 8, font: '500 13px/1.4 "Sofia Pro"', color: 'var(--ink-700)' }}>
          <span style={{ display: 'inline-flex', width: 18, height: 18, borderRadius: 999, background: 'var(--viteezy-teal-500)', color: '#fff', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>✦</span>
          Join now and get <strong style={{ color: 'var(--viteezy-teal-700)' }}>&nbsp;$5–$15 off your first subscription</strong> — first 1,000 members only.
        </div>
      </div>
      <div style={{ marginTop: 28, display: 'flex', gap: 32, alignItems: 'center' }}>
        <div>
          <div style={{ font: '600 28px/1 "Sofia Pro"', letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>1M+</div>
          <div style={{ font: '500 12px/1.3 "Sofia Pro"', color: 'var(--ink-500)', marginTop: 4 }}>sachets taken in EU</div>
        </div>
        <div style={{ width: 1, height: 36, background: 'var(--ink-200)' }} />
        <div>
          <div style={{ font: '600 28px/1 "Sofia Pro"', letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>4.5★</div>
          <div style={{ font: '500 12px/1.3 "Sofia Pro"', color: 'var(--ink-500)', marginTop: 4 }}>2,699 reviews</div>
        </div>
      </div>
    </div>
    {/* Bento grid: beach lifestyle + placeholder for second upload */}
    <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 12, height: 560 }}>
      <div style={{
        borderRadius: 24, overflow: 'hidden',
        backgroundImage: 'url(assets/lifestyle-beach.jpg)', backgroundSize: 'cover', backgroundPosition: 'center',
        position: 'relative',
        boxShadow: '0 8px 24px rgba(14,24,22,0.10)',
      }}>
        <div style={{
          position: 'absolute', left: 16, bottom: 16,
          background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)',
          padding: '10px 14px', borderRadius: 10,
          font: '500 12px/1.4 "Sofia Pro"', color: 'var(--ink-900)',
          maxWidth: 200,
        }}>
          <div style={{ font: '600 10px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)', marginBottom: 5 }}>
            Member · Lisa, Amsterdam
          </div>
          "I used to forget. Now it's just breakfast."
        </div>
      </div>
      <div style={{
        borderRadius: 24, overflow: 'hidden',
        backgroundImage: 'url(assets/lifestyle-welcome.jpg)', backgroundSize: 'cover', backgroundPosition: 'center top',
        boxShadow: '0 8px 24px rgba(14,24,22,0.10)',
        display: 'flex', alignItems: 'flex-end',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', left: 16, bottom: 16,
          background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)',
          padding: '10px 14px', borderRadius: 10,
          font: '600 10px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--viteezy-teal-700)',
        }}>
          The welcome kit
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;


// === App.jsx ===
const TWEAKS = /*EDITMODE-BEGIN*/{
  "showCountdownStrip": true
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweaks] = React.useState(TWEAKS);
  const [editMode, setEditMode] = React.useState(false);

  // Tweaks host wiring
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const updateTweak = (key, value) => {
    const next = { ...tweaks, [key]: value };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: value } }, '*');
  };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--paper-50)' }}>
      {/* Top notice strip */}
      {tweaks.showCountdownStrip && (
        <div style={{
          background: 'var(--ink-900)',
          color: '#fff',
          padding: '10px 40px',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
          font: '500 12px/1 "Sofia Pro"', letterSpacing: '0.02em',
        }}>
          <span style={{ display: 'inline-flex', flexDirection: 'column', width: 14, height: 10, borderRadius: 2, overflow: 'hidden' }}>
            <span style={{ flex: 1, background: '#AE1C28' }} />
            <span style={{ flex: 1, background: '#fff' }} />
            <span style={{ flex: 1, background: '#21468B' }} />
          </span>
          <span style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-300)' }}>
            Dutch personalized vitamins
          </span>
          <span style={{ color: 'rgba(255,255,255,0.4)' }}>·</span>
          <span>Landing in the US May 15, 2026 · Waitlist open</span>
        </div>
      )}

      {/* Nav */}
      <nav style={{
        padding: '20px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        maxWidth: 1200, margin: '0 auto', width: '100%', boxSizing: 'border-box',
      }}>
        <img src="assets/viteezy-logo.png" style={{ height: 176, display: 'block' }} alt="Viteezy" />
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <a href="https://viteezy.nl" style={{ font: '500 13px/1 "Sofia Pro"', color: 'var(--ink-700)', borderBottom: 0 }}>
            Viteezy EU ↗
          </a>
          <a href="#waitlist" style={{
            font: '600 13px/1 "Sofia Pro"', color: '#fff',
            background: 'var(--viteezy-teal-500)', padding: '10px 16px', borderRadius: 999,
            borderBottom: 0,
          }}>Join waitlist</a>
        </div>
      </nav>

      {/* Hero */}
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Hero />
      </div>

      {/* Differentiators */}
      <section style={{ padding: '64px 40px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
            Why Viteezy
          </div>
          <div style={{ font: '600 36px/1.1 "Sofia Pro"', letterSpacing: '-0.025em', color: 'var(--ink-900)', marginTop: 12, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
            A simpler way to actually take your vitamins.
          </div>
        </div>
        <Differentiators />
      </section>

      {/* Dutch story — full-bleed editorial, before bundles */}
      <section style={{ padding: '24px 40px 64px', maxWidth: 1200, margin: '0 auto' }}>
        <DutchStory />
      </section>

      {/* Bundles / two-path section */}
      <section style={{ padding: '80px 40px', maxWidth: 1200, margin: '0 auto' }}>
        <Bundles />
      </section>

      {/* Quiz tease */}
      <section style={{
          padding: '96px 40px',
          maxWidth: 1200, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
        }}>
          <div>
            <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
              The quiz
            </div>
            <h2 style={{ font: '600 40px/1.1 "Sofia Pro"', letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '14px 0 0' }}>
              Built by a expert.
            </h2>
            <p style={{ font: '400 16px/1.55 "Sofia Pro"', color: 'var(--ink-700)', margin: '18px 0 0', maxWidth: 440 }}>
              Eighteen questions on lifestyle, goals, and health. Each one mapped to specific, scientifically-grounded recommendations. Try a two-question preview.
            </p>
          </div>
          <div style={{ justifySelf: 'end', width: '100%', maxWidth: 480 }}>
            <QuizTease />
          </div>
        </section>

      {/* Social proof */}
      <section style={{ padding: '64px 40px 96px', maxWidth: 1200, margin: '0 auto' }}>
        <SocialProof />
      </section>

      {/* Final waitlist CTA */}
      <section id="waitlist" style={{
        padding: '96px 40px',
        maxWidth: 1200, margin: '0 auto', textAlign: 'center',
      }}>
        <div style={{ font: '600 11px/1 "Sofia Pro"', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--viteezy-teal-700)' }}>
          Join the US waitlist
        </div>
        <h2 style={{ font: '600 48px/1.05 "Sofia Pro"', letterSpacing: '-0.03em', color: 'var(--ink-900)', margin: '16px 0 0', maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
          Be the first to take the quiz on May 15.
        </h2>
        <p style={{ font: '400 16px/1.55 "Sofia Pro"', color: 'var(--ink-500)', margin: '18px auto 0', maxWidth: 480 }}>
          First 1,000 members on the list get $5–$15 off their first subscription.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <WaitlistForm size="lg" />
        </div>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <Countdown />
        </div>
      </section>


      {/* Tweaks panel */}
      {editMode && (
        <div style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 999,
          background: '#fff', border: '1px solid var(--ink-200)', borderRadius: 16,
          padding: 20, width: 240,
          boxShadow: '0 20px 50px rgba(14,24,22,0.15)',
        }}>
          <div style={{ font: '600 13px/1 "Sofia Pro"', color: 'var(--ink-900)', marginBottom: 16 }}>Tweaks</div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
            <input type="checkbox" checked={tweaks.showCountdownStrip} onChange={(e) => updateTweak('showCountdownStrip', e.target.checked)} />
            <span style={{ font: '500 13px/1 "Sofia Pro"', color: 'var(--ink-900)' }}>Top notice strip</span>
          </label>
        </div>
      )}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);