/* V2 — How It Works, Journal, About, Contact */

function PageHeroV2({ eyebrow, title, italic, intro }) {
  return (
    <section style={{ background: 'var(--v2-cream-2)', borderBottom: '1px solid var(--v2-line)' }}>
      <div style={{ maxWidth: 900, margin: '0 auto', padding: 'clamp(64px,9vw,140px) clamp(20px,4vw,56px)', textAlign: 'center' }}>
        <div className="v2-up" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>{eyebrow}</div>
        <h1 className="v2-up v2-d1" style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(2.4rem,5.2vw,4.4rem)', letterSpacing: '-0.02em', lineHeight: 1.02, margin: '14px 0 0', color: 'var(--v2-ink)' }}>
          {title} {italic && <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>{italic}</span>}
        </h1>
        {intro && <p className="v2-up v2-d2" style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--v2-ink-2)', margin: '28px auto 0', maxWidth: 58 + 'ch' }}>{intro}</p>}
      </div>
    </section>
  );
}

/* ================= HOW IT WORKS ================= */
function HowV2({ onNav }) {
  const steps = [
    { n: '01', ic: 'compass', t: 'Choose your focus', d: 'Pick a goal — glow, sleep, recovery, focus, long-term health. Not sure? Our AI guide will ask you a few questions and suggest a starter kit.' },
    { n: '02', ic: 'package', t: 'We keep it clear', d: 'Every order arrives with clear labeling, simple next steps and no confusion. A start-here card walks you through step one.' },
    { n: '03', ic: 'heart-pulse', t: 'Feel the shift', d: 'We\'ll check in with tips along the way, and our team is one message away for anything you\'re unsure about.' },
    { n: '04', ic: 'refresh-ccw', t: 'Refine as you go', d: 'Wellness isn\'t a single order. Log what feels good, tweak the routine, come back for what worked. We\'re in this for the long game.' },
  ];
  const quality = [
    { ic: 'shield-check', t: 'Independently tested', d: 'Every batch is tested for purity and identity by independent partners before release.' },
    { ic: 'package', t: 'Clear labeling', d: 'Products arrive with straightforward labels and simple next steps.' },
    { ic: 'leaf', t: 'Clean formulas', d: 'No fillers, no theater. Just the compound, the standard preservative where needed, and clear labeling.' },
    { ic: 'file-text', t: 'CoA on request', d: 'Certificates of analysis are available on request, matched to the lot.' },
  ];
  const faqs = [
    ['Do I need a doctor?', 'For general wellness use, no — but if you have a health condition, are pregnant, or take medication, please talk to your provider before adding anything new.'],
    ['What if it doesn\'t work for me?', 'Reach out. Wellness is personal — we\'ll help you troubleshoot, swap products, or step you off if it isn\'t the right fit. We\'d rather have a happy customer than a stuck one.'],
    ['Is this legal?', 'Yes, for research and wellness use. My Vital Cell products are not intended to diagnose, treat, cure, or prevent any disease.'],
    ['How do I store what I get?', 'Refrigerate lyophilized (freeze-dried) peptides. Once reconstituted, store them as directed on the card. It\'s simpler than it sounds.'],
    ['Can I return something?', 'If any products arrive damaged or broken, they can be returned for a replacement product. No other returns are offered. Contact us within 2 business days of delivery with your order number and photos, and we\'ll take care of it.'],
  ];

  return (
    <div>
      <PageHeroV2 eyebrow="How it works" title="Wellness," italic="uncomplicated." intro="No jargon. Just four steps between picking a goal and feeling the difference." />

      {/* Steps */}
      <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 20 }} className="v2-grid-2">
          {steps.map((s) => (
            <div key={s.n} style={{ background: '#fff', border: '1px solid var(--v2-line)', borderRadius: 22, padding: '32px 32px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
                <span style={{ width: 44, height: 44, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={s.ic} style={{ width: 20, height: 20 }}></i>
                </span>
                <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--v2-muted)' }}>{s.n}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 24, letterSpacing: '-0.01em', margin: '0 0 10px', color: 'var(--v2-ink)' }}>{s.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <button className="v2-btn primary" onClick={() => window.dispatchEvent(new CustomEvent('mvc-cta-open', { detail: { view: 'builder' } }))}>
            Start Here →
          </button>
          <div style={{ fontSize: 13, color: 'var(--v2-muted)', marginTop: 12 }}>
            A few quick questions, a personalized plan — free, no pressure.
          </div>
        </div>
      </section>

      {/* Watch: reconstitution demo */}
      <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'clamp(28px,4vw,64px)', alignItems: 'center' }} className="v2-grid-2">
          <div>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Watch · 90 sec</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.02em', margin: '10px 0 16px', color: 'var(--v2-ink)' }}>
              How to reconstitute, <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>step by step.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-muted)', margin: '0 0 18px', maxWidth: '48ch' }}>
              A short walkthrough of mixing your peptide with bacteriostatic water — the exact motions, the vial angle, and how to store it after. If a picture is worth a thousand words, a two-minute video saves you a dozen searches.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 15, lineHeight: 1.55, color: 'var(--v2-ink-2)' }}>
              <li>• Prep, angle and inject solvent along the vial wall</li>
              <li>• Swirl gently — never shake</li>
              <li>• Refrigerate 2–8 °C and use within the window on your card</li>
            </ul>
          </div>
          <div style={{ position: 'relative', maxWidth: 360, width: '100%', margin: '0 auto', aspectRatio: '9 / 16', borderRadius: 22, overflow: 'hidden', background: '#0b0b10', boxShadow: '0 30px 80px -30px rgba(0,0,0,0.35)', border: '1px solid var(--v2-line)' }}>
            <video
              src="/__l5e/assets-v1/901a0ef0-a3e3-4298-ae46-e521413b59c0/reconstitution.mp4"
              poster="/__l5e/assets-v1/d266e3ca-05a0-40b1-8347-139a79d547fa/reconstitution-poster.jpg"
              controls
              playsInline
              preload="metadata"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </div>
        </div>
      </section>

      {/* Quality moved to the Learn page */}


      {/* FAQ */}
      <section>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Common questions</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.6rem)', letterSpacing: '-0.02em', margin: '10px 0 0', color: 'var(--v2-ink)' }}>
              The stuff people ask.
            </h2>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            {faqs.map(([q, a]) => (
              <details key={q} style={{ background: '#fff', border: '1px solid var(--v2-line)', borderRadius: 18, padding: '20px 24px' }}>
                <summary style={{ cursor: 'pointer', fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 18, letterSpacing: '-0.01em', color: 'var(--v2-ink)', listStyle: 'none', display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                  <span>{q}</span>
                  <span style={{ color: 'var(--v2-accent)', fontSize: 20, lineHeight: 1 }}>+</span>
                </summary>
                <p style={{ marginTop: 12, marginBottom: 0, fontSize: 15, lineHeight: 1.7, color: 'var(--v2-muted)' }}>{a}</p>
              </details>
            ))}
          </div>
          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <button className="v2-btn primary" onClick={() => onNav('contact')}>Still have questions? Chat with us</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================= LEARN (Science + Quality + Journal) ================= */
function InsightsV2({ onNav }) {
  const posts = window.VC_JOURNAL || [];
  const [feature, ...rest] = posts;
  const softenTitle = (t) => t
    .replace(/for researchers/gi, 'in plain words')
    .replace(/research is heading/gi, 'science is going')
    .replace(/certificate of analysis/gi, 'a certificate of analysis');
  const softenExcerpt = (t) => t
    .replace(/researchers?/gi, 'you')
    .replace(/protocols?/gi, 'routines')
    .replace(/research tools?/gi, 'wellness tools');

  const standards = [
    { ic: 'shield-check', t: 'Independently tested', d: 'Every batch is tested for purity and identity by independent partners before release.' },
    { ic: 'package', t: 'Clear labeling', d: 'Products arrive with straightforward labels and simple next steps.' },
    { ic: 'leaf', t: 'Clean formulas', d: 'No fillers, no theater. Just the compound, the standard preservative where needed, and clear labeling.' },
    { ic: 'file-text', t: 'CoA on request', d: 'Certificates of analysis are available on request, matched to the lot.' },
  ];

  const pillars = [
    { ic: 'atom', t: 'The science, simplified', d: 'Peptides are short chains of amino acids — the same building blocks your body already uses to tell cells what to do. We stick to compounds with a real research trail.' },
    { ic: 'microscope', t: 'How we vet a compound', d: 'Peer-reviewed studies first, human-relevant data second, marketing language never. If the evidence is thin, we say so — or we don’t carry it.' },
    { ic: 'book-open', t: 'What the label shows', d: 'Purity, mass, batch and lot — the details that help you compare products clearly.' },
  ];

  return (
    <div>
      <PageHeroV2 eyebrow="Learn" title="The science," italic="in plain words." intro="What’s inside the bottle, how we know it works, and honest reads on peptides and cells — written to be useful, not to impress you." />

      {/* Standards / Quality */}
      <section style={{ background: '#fff', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ maxWidth: 620, marginBottom: 40 }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Our standards</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.02em', margin: '10px 0 16px', color: 'var(--v2-ink)' }}>
              What <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>premium</span> actually means here.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>
              We don’t use the word lightly. Here’s what’s behind every bottle.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }} className="v2-grid-4">
            {standards.map((q) => (
              <div key={q.t} style={{ padding: '24px 24px', background: 'var(--v2-cream)', borderRadius: 18, border: '1px solid var(--v2-line)' }}>
                <i data-lucide={q.ic} style={{ width: 22, height: 22, color: 'var(--v2-accent)' }}></i>
                <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 18, letterSpacing: '-0.01em', margin: '16px 0 8px', color: 'var(--v2-ink)' }}>{q.t}</div>
                <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--v2-muted)', margin: 0 }}>{q.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Science pillars */}
      <section style={{ background: 'var(--v2-cream-2)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ maxWidth: 620, marginBottom: 40 }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>The science</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.02em', margin: '10px 0 16px', color: 'var(--v2-ink)' }}>
              Real research, <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>plainly explained.</span>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {pillars.map((p) => (
              <div key={p.t} style={{ padding: '28px 28px', background: '#fff', borderRadius: 22, border: '1px solid var(--v2-line)' }}>
                <span style={{ width: 44, height: 44, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={p.ic} style={{ width: 20, height: 20 }}></i>
                </span>
                <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 20, letterSpacing: '-0.01em', margin: '18px 0 8px', color: 'var(--v2-ink)' }}>{p.t}</div>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Journal — featured */}
      {feature && (
        <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,90px) clamp(20px,4vw,56px) 0' }}>
          <div style={{ marginBottom: 28 }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>The journal</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.6rem)', letterSpacing: '-0.02em', margin: '10px 0 0', color: 'var(--v2-ink)' }}>
              Short reads, <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>honest science.</span>
            </h2>
          </div>
          <article className="v2-card v2-grid-2" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 0, cursor: 'pointer' }}
                   onClick={() => onNav('compounds')}>
            <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden' }}>
              <img src={feature.img} alt={feature.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ padding: 'clamp(28px,4vw,56px)' }}>
              <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Featured</div>
              <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.6rem,2.6vw,2.2rem)', letterSpacing: '-0.02em', lineHeight: 1.1, margin: '14px 0 16px', color: 'var(--v2-ink)' }}>{softenTitle(feature.title)}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>{softenExcerpt(feature.excerpt)}</p>
            </div>
          </article>
        </section>
      )}

      <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(48px,6vw,90px) clamp(20px,4vw,56px) clamp(64px,8vw,110px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
          {rest.map((post) => (
            <article key={post.slug} className="v2-card">
              <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden' }}>
                <img src={post.img} alt={post.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '22px 24px 26px' }}>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>{post.kicker}</div>
                <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 19, letterSpacing: '-0.01em', lineHeight: 1.25, margin: '10px 0 8px', color: 'var(--v2-ink)' }}>{softenTitle(post.title)}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--v2-muted)', margin: 0 }}>{softenExcerpt(post.excerpt)}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}



/* ================= ABOUT ================= */
function AboutV2({ onNav }) {
  const values = [
    { ic: 'heart',    t: 'Care',      d: 'We treat every customer like a friend — because we\'d rather build a company we\'d want to buy from.' },
    { ic: 'target',   t: 'Honesty',   d: 'No hype, no health promises we can\'t keep. We tell you what we know, and where the questions still are.' },
    { ic: 'sparkles', t: 'Craft',     d: 'Every batch, every card, every email — we sweat the details so wellness feels effortless on your end.' },
  ];
  return (
    <div>
      <PageHeroV2 eyebrow="About us" title="Wellness that actually" italic="fits your life." intro="My Vital Cell was started by a small team who thought good peptides shouldn't require a chemistry degree — or a $2,000 clinic visit. So we made them simple." />

      {/* Split story */}
      <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)',
                        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,80px)', alignItems: 'center' }} className="v2-grid-2">
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Our story</div>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.6rem)', letterSpacing: '-0.02em', margin: '10px 0 20px', color: 'var(--v2-ink)' }}>
            Built for researchers of health at its deepest level.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: 0 }}>
            Peptides — the small molecules that tell your cells what to do — have been quietly shaping the frontier of wellness for a decade.
            Until recently, using them meant navigating a maze of clinics, gatekeepers, and confusing jargon.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: '16px 0 0' }}>
            We started My Vital Cell to change that. Fewer promises. Cleaner formulas. A team that answers when you write.
            Everything you need to try something new — and nothing you don’t.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: '16px 0 0' }}>
            We're based in <strong>Phoenix, Arizona</strong> — that's our HQ and where every order ships from,
            usually the next business day. We accept Zelle at (602) 471-2152.
          </p>
        </div>
        <div style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 32, overflow: 'hidden', background: '#e8e0cf' }}>
          <img src="/vital/img/products/mvc-lifestyle.png" alt="My Vital Cell lifestyle"
               style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </section>

      {/* Values */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>What we hold to</div>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.6rem)', letterSpacing: '-0.02em', margin: '10px 0 40px', color: 'var(--v2-ink)' }}>Three things, always.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {values.map((v) => (
              <div key={v.t} style={{ padding: '30px 28px', background: 'var(--v2-cream)', border: '1px solid var(--v2-line)', borderRadius: 22 }}>
                <span style={{ width: 44, height: 44, borderRadius: 999, background: '#fff', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={v.ic} style={{ width: 20, height: 20 }}></i>
                </span>
                <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.01em', margin: '18px 0 10px', color: 'var(--v2-ink)' }}>{v.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quote */}
      <section>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: 'clamp(56px,7vw,120px) clamp(20px,4vw,56px)', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontStyle: 'italic', fontSize: 'clamp(1.6rem,2.8vw,2.2rem)', lineHeight: 1.4, color: 'var(--v2-ink)', letterSpacing: '-0.01em' }}>
            "We want you to feel great in your body — and to understand what you’re putting in it. That’s the whole thing."
          </div>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', marginTop: 24 }}>— The My Vital Cell team</div>
          <div style={{ marginTop: 32 }}>
            <button className="v2-btn primary" onClick={() => onNav('contact')}>Get in touch</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================= CONTACT ================= */
function ContactV2({ onNav }) {
  return (
    <div>
      <PageHeroV2 eyebrow="Contact" title="Come say" italic="hi." intro="Whether it's a product question, a first-time nerve, or a shipping issue — real humans read every message." />

      <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(48px,6vw,96px) clamp(20px,4vw,56px)',
                        display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 'clamp(28px,5vw,72px)' }} className="v2-grid-2">
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Reach out</div>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.4rem)', letterSpacing: '-0.02em', margin: '10px 0 20px', color: 'var(--v2-ink)' }}>
            We’re around.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: '0 0 32px' }}>
            Fastest response is through the AI guide at the bottom-right of the site — it handles most
            questions in seconds, and hands off to a human when you’d rather chat with one.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 15, color: 'var(--v2-ink)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide="mail" style={{ width: 18, height: 18 }}></i>
              </span>
              myvitalcell@gmail.com
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide="message-circle" style={{ width: 18, height: 18 }}></i>
              </span>
              Live chat · 7 days a week · 9–7 PT
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                <i data-lucide="map-pin" style={{ width: 18, height: 18 }}></i>
              </span>
              Phoenix, AZ — our HQ and shipping origin
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                <i data-lucide="phone" style={{ width: 18, height: 18 }}></i>
              </span>
              <a href="tel:+16026377231" style={{ color: 'inherit', textDecoration: 'none' }}>+1 (602) 637-7231</a>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                <i data-lucide="wallet" style={{ width: 18, height: 18 }}></i>
              </span>
              Zelle accepted · (602) 471-2152
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--v2-cream-2)', color: 'var(--v2-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                <i data-lucide="package" style={{ width: 18, height: 18 }}></i>
              </span>
              Shipping questions? Include your order number.
            </div>
            <div>
              <a onClick={() => onNav('policy')} style={{ cursor: 'pointer', fontSize: 14.5, fontWeight: 600, color: 'var(--v2-accent)', textDecoration: 'none' }}>Read the shipping &amp; return policy →</a>
            </div>

          </div>
          <div style={{ marginTop: 40, position: 'relative', aspectRatio: '5/3', borderRadius: 22, overflow: 'hidden' }}>
            <img src="/vital/img/products/mvc-recovery-hero.png" alt="Vials" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>

        <form onSubmit={(e) => e.preventDefault()} style={{ background: '#fff', border: '1px solid var(--v2-line)', borderRadius: 22, padding: 'clamp(28px,4vw,44px)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <Field label="Your name" placeholder="Jane" />
            <Field label="Email" type="email" placeholder="you@email.com" />
            <div style={{ gridColumn: '1 / -1' }}>
              <label style={labelSx}>What's on your mind?</label>
              <select style={inputSx} defaultValue="">
                <option value="" disabled>Pick one…</option>
                <option>Product question</option>
                <option>Order or shipping</option>
                <option>Just curious</option>
                <option>Press or partnership</option>
                <option>Something else</option>
              </select>
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <label style={labelSx}>Message</label>
              <textarea rows={5} placeholder="Tell us what you’re thinking…" style={{ ...inputSx, resize: 'vertical' }} />
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <button className="v2-btn primary" style={{ width: '100%' }}>Send message</button>
            </div>
            <div style={{ gridColumn: '1 / -1', fontSize: 12, lineHeight: 1.6, color: 'var(--v2-muted)' }}>
              By sending, you agree to hear back from a real person. We won’t share your info — that’s a promise.
            </div>
          </div>
        </form>
      </section>
    </div>
  );
}

const labelSx = { display: 'block', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--v2-ink)', marginBottom: 8 };
const inputSx = { width: '100%', boxSizing: 'border-box', padding: '13px 16px', borderRadius: 12, border: '1px solid var(--v2-line)', background: 'var(--v2-cream)', fontFamily: 'var(--font-body-v2)', fontSize: 14.5, color: 'var(--v2-ink)', outline: 'none' };
function Field({ label, type = 'text', placeholder }) {
  return (
    <div>
      <label style={labelSx}>{label}</label>
      <input type={type} placeholder={placeholder} style={inputSx} />
    </div>
  );
}

/* ================= SHIPPING & RETURN POLICY ================= */
function PolicyV2({ onNav }) {
  const h2 = { fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.5rem,3vw,2.1rem)', letterSpacing: '-0.01em', color: 'var(--v2-ink)', margin: '0 0 14px' };
  const h3 = { fontFamily: 'var(--font-body-v2)', fontWeight: 700, fontSize: 15, letterSpacing: '0.02em', color: 'var(--v2-ink)', margin: '26px 0 10px' };
  const p  = { fontSize: 16, lineHeight: 1.75, color: 'var(--v2-ink-2)', margin: '0 0 16px' };
  const card = { background: '#fff', border: '1px solid var(--v2-line)', borderRadius: 22, padding: 'clamp(24px,4vw,44px)', marginBottom: 24 };
  const li = { fontSize: 15.5, lineHeight: 1.7, color: 'var(--v2-ink-2)', marginBottom: 10 };

  return (
    <div>
      <PageHeroV2
        eyebrow="Shipping & Returns"
        title="Shipping and return"
        italic="policy."
        intro="Updated October 9, 2025 · Applies to myvitalcell.com. Shipped from our home base in Phoenix, Arizona."
      />

      <section style={{ maxWidth: 880, margin: '0 auto', padding: 'clamp(40px,6vw,88px) clamp(18px,4vw,56px)' }}>
        <p style={p}>
          Thank you for shopping with My Vital Cell. The following shipping and return policy applies to
          all orders placed through myvitalcell.com.
        </p>

        <div style={card}>
          <h2 style={h2}>1. Shipping policy</h2>
          <p style={p}>You can trust that your order will be quickly processed and safely delivered.</p>
          <p style={p}>
            We ship anywhere in the United States from Phoenix, Arizona, using the carrier and service that
            offers the best reliability for your address. When you place an order, we estimate delivery dates
            based on the availability of your items, the shipping method selected, and your shipment's destination.
          </p>
          <p style={p}>Items in stock typically ship out the following business day after purchase.</p>
          <h3 style={h3}>a. Shipping charges</h3>
          <p style={{ ...p, marginBottom: 0 }}>
            Shipping charges are determined by the weight of your order and the shipping method selected,
            excluding applicable sales tax.
          </p>
        </div>

        <div style={card}>
          <h2 style={h2}>2. Payment methods</h2>
          <p style={p}>
            We accept <strong>Zelle</strong> as a payment method. Send payment to{' '}
            <a href="tel:+16024712152" className="v2-link" style={{ color: 'var(--v2-accent)', fontWeight: 600, textDecoration: 'none' }}>(602) 471-2152</a>{' '}
            and include your order number in the memo so we can match your payment quickly.
          </p>
          <p style={{ ...p, marginBottom: 0 }}>
            Once your Zelle payment is confirmed, your order moves into processing and ships from Phoenix, Arizona.
          </p>
        </div>

        <div style={card}>
          <h2 style={h2}>3. Returns, exchanges and cancellations</h2>
          <p style={p}>Our goal is to ensure your complete satisfaction with your purchase.</p>

          <h3 style={h3}>Return policy</h3>
          <p style={p}>
            If any products arrive damaged or broken, they can be returned for a replacement product.
            No other returns are offered. Where a replacement is not available, the value of the returned
            items is issued as in-store credit (excluding shipping charges) when the return is made within
            14 days of the purchase date.
          </p>
          <p style={p}>
            Any claim for a damaged order or missing items must be received within 2 business days of receipt
            of the package. Send the claim to{' '}
            <a href="mailto:myvitalcell@gmail.com" style={{ color: 'var(--v2-accent)', textDecoration: 'none' }}>myvitalcell@gmail.com</a>{' '}
            and include your order number, photos of the damage, and tracking information.
          </p>
          <p style={p}>
            If the following conditions are not met, My Vital Cell reserves the right to charge a 15% restocking
            fee or refuse the return:
          </p>
          <ul style={{ paddingLeft: 22, margin: '0 0 16px' }}>
            <li style={li}>the items must be returned for replacement or exchange within 14 days of the original purchase</li>
            <li style={li}>items and packaging must be received in new condition</li>
            <li style={li}>the original manufacturer's packaging must not be damaged</li>
            <li style={li}>packaging must include all original items</li>
            <li style={li}>the Return Authorization Number must be clearly marked on the shipping box</li>
            <li style={li}>the return package must include a copy of the original invoice or sales receipt</li>
          </ul>
          <p style={p}>
            Before returning a package, contact My Vital Cell to receive a Return Authorization Number to place on
            the returning package. You can call the number below or email myvitalcell@gmail.com. If you have an
            exchange for the same dollar amount as the original purchase, no additional shipping or handling
            charges will be incurred. Please mail your package in a prepaid, insured, traceable method to the
            address below.
          </p>

          <h3 style={h3}>Cancellations</h3>
          <p style={{ ...p, marginBottom: 0 }}>
            If you would like to cancel your order, you can do so provided the order has not yet shipped. If the
            item has already shipped, the order cannot be canceled — see our return policy above.
          </p>
        </div>

        <div style={{ ...card, background: 'var(--v2-cream-2)' }}>
          <h2 style={h2}>Contact us</h2>
          <p style={p}>If you have any questions about returning an item, contact us:</p>
          <div style={{ fontSize: 16, lineHeight: 1.9, color: 'var(--v2-ink)' }}>
            <div style={{ fontWeight: 700 }}>My Vital Cell</div>
            <div>Phoenix, AZ</div>
            <div><a href="tel:+16026377231" style={{ color: 'var(--v2-accent)', textDecoration: 'none' }}>+1 (602) 637-7231</a></div>
            <div>Zelle: <a href="tel:+16024712152" style={{ color: 'var(--v2-accent)', textDecoration: 'none' }}>(602) 471-2152</a></div>
            <div><a href="mailto:myvitalcell@gmail.com" style={{ color: 'var(--v2-accent)', textDecoration: 'none' }}>myvitalcell@gmail.com</a></div>
          </div>
          <div style={{ marginTop: 26, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="v2-btn primary" onClick={() => onNav('contact')}>Contact us</button>
            <button className="v2-btn secondary" onClick={() => onNav('compounds')}>Back to shop</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageHeroV2, HowV2, InsightsV2, AboutV2, ContactV2, PolicyV2 });

