// jasmine-body.jsx — Product showcase, Houston Creator's Lab, storylines, Level III.
// All mobile-first. Both variants share these sections — only Hero and the
// other-Lifestyles cross-nav differ across A and B.

// ─────────────────────────────────────────────────────────────
// ProductShowcase — three core curriculum products as an editorial trio.
// AI Prompts product visibly carries the Creator's Lab anchor.
// ─────────────────────────────────────────────────────────────
const PRODUCTS = [
  {
    no: '02',
    eyebrow: 'Volume 02',
    title: 'A Beginner\u2019s Guide to Effective AI Prompts',
    blurb: 'Plain-language instruction for the AI you keep meaning to actually use. The artifact every Resident receives upon entering the Houston Creator\u2019s Lab.',
    anchor: 'Anchored at the Houston Creator\u2019s Lab',
    swatch: 'linear-gradient(140deg, var(--ld-pearl-100) 0%, var(--ld-pearl-200) 100%)',
    accent: 'gold',
  },
  {
    no: '03',
    eyebrow: 'Volume 03',
    title: 'The Living Digitally\u2122 Social Media Planner',
    blurb: 'Plan with intention. The discipline tool, not the teacher. Where the brand stops being almost.',
    anchor: 'Print + digital, refilled quarterly',
    swatch: 'linear-gradient(150deg, var(--ld-navy-700) 0%, var(--ld-navy-600) 100%)',
    accent: 'aqua',
  },
  {
    no: '04',
    eyebrow: 'Volume 04',
    title: 'The Living Digitally\u2122 Social Media Tracker',
    blurb: 'See what\u2019s working, simply. The operator\u2019s view \u2014 data-aware, performance-aware, quietly informative.',
    anchor: 'Companion to the Planner',
    swatch: 'linear-gradient(160deg, var(--ld-aqua-300) 0%, var(--ld-aqua) 100%)',
    accent: 'navy',
  },
];

const ProductShowcase = ({ variant }) => (
  <section data-screen-label={`${variant} · 04 Curriculum`} style={{
    background: 'var(--ld-pearl-50)',
    padding: '64px 24px 72px',
  }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>The Core Curriculum</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.01em',
      color: 'var(--ld-navy)',
      margin: '14px 0 12px',
    }}>
      A set in five volumes.<br />
      <em style={{ fontStyle: 'italic' }}>Three of them are how a builder begins.</em>
    </h2>

    {/* Stacked volume cards on mobile */}
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 36 }}>
      {PRODUCTS.map((p) => {
        const onDark = p.accent === 'aqua';
        const fg = onDark ? 'var(--ld-pearl-100)' : 'var(--ld-navy)';
        const fg2 = onDark ? 'rgba(235,221,197,0.78)' : 'var(--ld-ink-2)';
        const eyebrowColor = onDark
          ? 'var(--ld-aqua)'
          : (p.accent === 'navy' ? 'var(--ld-navy)' : 'var(--ld-bronze)');
        return (
          <article key={p.no} style={{
            background: p.swatch,
            border: onDark ? '1px solid rgba(235,221,197,0.18)' : '1px solid var(--ld-line)',
            borderRadius: 2,
            padding: '24px 22px 26px',
            position: 'relative',
            boxShadow: '0 4px 16px rgba(13,27,61,0.06)',
          }}>
            {/* Big roman numeral, faint */}
            <div style={{
              position: 'absolute', right: 18, top: 14,
              fontFamily: 'var(--font-display)', fontWeight: 300,
              fontSize: 72, lineHeight: 1, letterSpacing: '-0.02em',
              color: onDark ? 'rgba(235,221,197,0.16)' : 'rgba(13,27,61,0.08)',
            }}>{p.no}</div>

            <div style={{
              fontFamily: 'var(--font-body)', fontWeight: 600,
              fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: eyebrowColor,
            }}>{p.eyebrow}</div>

            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 22, lineHeight: 1.18, letterSpacing: '-0.005em',
              color: fg, margin: '8px 0 12px', maxWidth: '88%',
            }}>{p.title}</h3>

            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6,
              color: fg2, margin: 0,
            }}>{p.blurb}</p>

            <div style={{
              marginTop: 22, paddingTop: 14,
              borderTop: onDark ? '1px solid rgba(235,221,197,0.2)' : '1px solid var(--ld-line)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                fontFamily: 'var(--font-body)', fontWeight: 500,
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: fg2,
              }}>{p.anchor}</span>
              <a href="#" style={{
                fontFamily: 'var(--font-body)', fontWeight: 600,
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: fg, borderBottom: `1px solid ${onDark ? 'var(--ld-aqua)' : 'var(--ld-gold)'}`,
                paddingBottom: 2,
              }}>Open →</a>
            </div>
          </article>
        );
      })}
    </div>

    {/* Closing framing — Volumes 01 and 05 acknowledged without listing */}
    <p style={{
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 17, lineHeight: 1.5,
      color: 'var(--ld-ink-2)', margin: '32px 0 0', maxWidth: 480,
    }}>
      Volumes 01 and 05 — The 30 Day Digital Reset and the 7 Days Living
      Digitally Mindset Prompts — round out the full Core Curriculum,
      delivered with every Level of the Signature Program.
    </p>
  </section>
);

// ─────────────────────────────────────────────────────────────
// CreatorsLab — Houston Creator's Lab as a real place.
// ─────────────────────────────────────────────────────────────
const CreatorsLab = ({ variant }) => (
  <section id="lab" data-screen-label={`${variant} · 05 Creator's Lab`} data-ground="navy" style={{
    background: 'var(--ld-navy)', color: 'var(--ld-pearl-100)',
    padding: '0 0 64px',
  }}>
    {/* Full-bleed photo header */}
    <div style={{
      position: 'relative',
      height: 360,
      backgroundImage: 'url(assets/space-jasmine-creators-lab.png)',
      backgroundSize: 'cover',
      backgroundPosition: '42% 35%',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(13,27,61,0) 50%, rgba(13,27,61,0.85) 100%)',
      }} />
      <div style={{
        position: 'absolute', left: 24, bottom: 24, right: 24,
      }}>
        {/* Location eyebrow removed per direction. The lab headline now
            anchors the photograph on its own. */}
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.01em',
          color: 'var(--ld-pearl-100)', margin: 0,
        }}>The Builder's Lab.</h2>
      </div>
    </div>

    <div style={{ padding: '32px 24px 0' }}>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7,
        color: 'rgba(235,221,197,0.82)', margin: 0,
      }}>
        Your Builder's Lab might be a studio. Or a table at the local
        library. Or the couch in your living room. The place doesn't make
        the builder.<br /><br />
        It's the space women build in when they already know what they're
        building and need clarity and structure. Execution outperforms the
        planning loop every time. Don't wait until you are ready — become a
        Resident today.
      </p>

      {/* The neon glyph callout */}
      <div style={{
        marginTop: 28, padding: '20px 18px',
        border: '1px solid rgba(95,224,230,0.35)',
        background: 'rgba(95,224,230,0.06)',
        borderRadius: 2,
        display: 'flex', flexDirection: 'column', gap: 6,
      }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 24, lineHeight: 1.1, color: 'var(--ld-aqua)',
          textShadow: '0 0 18px rgba(95,224,230,0.35)',
        }}>Living Digitally™ Builder's Lab</div>
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'rgba(235,221,197,0.7)',
        }}>By appointment + open hours in the Band app</div>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// Storylines — three editorial vignettes, NOT a Q&A. Each one names a
// Jasmine-specific barrier and answers in her register.
// ─────────────────────────────────────────────────────────────
const STORYLINES = [
  {
    head: 'My vision isn\u2019t the problem; my systems are.',
    body: 'Right. That’s why this work is about infrastructure, not inspiration. Living Digitally™ doesn’t teach you what to build — you already know. It builds the systems underneath it.',
  },
  {
    head: 'Is this professional enough for what I\u2019m building?',
    body: 'It is. The Curriculum is print-grade. The Creator’s Lab is a real address. The Level III cohort is seven Residents at a time. Premium-tier from first contact, not late-tier as a retrofit.',
  },
  {
    head: 'Will this help me build a real business, not just a side hustle?',
    body: 'Yes — because the assumption is that you already have one. You arrived with a vision and an operation. We hand you the machine the operation has been missing.',
  },
];

const Storylines = ({ variant }) => (
  <section data-screen-label={`${variant} · 06 Storylines`} style={{
    background: 'var(--ld-pearl-50)',
    padding: '64px 24px',
  }}>
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
      color: 'var(--ld-aqua-700)',
    }}>The thoughts you arrived with</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 36, lineHeight: 1.08, letterSpacing: '-0.01em',
      color: 'var(--ld-navy)',
      margin: '14px 0 0',
    }}>
      Three quiet questions,<br />
      <em style={{ fontStyle: 'italic' }}>answered.</em>
    </h2>

    <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column' }}>
      {STORYLINES.map((s, i) => (
        <article key={i} style={{
          borderTop: '1px solid var(--ld-line)',
          paddingTop: 26, paddingBottom: 26,
        }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--ld-aqua-700)', marginBottom: 12,
          }}>{`No. ${i + 1}`}</div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 24, lineHeight: 1.25,
            color: 'var(--ld-navy)', margin: 0,
          }}>"{s.head}"</h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.65,
            color: 'var(--ld-ink-2)', marginTop: 14, marginBottom: 0,
          }}>{s.body}</p>
        </article>
      ))}
      <div style={{ borderTop: '1px solid var(--ld-line)' }} />
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// LevelIII — Access tier, navy ground, aqua-forward. Set entirely as
// flowing editorial statements per Lacey's note. No glossary card, no
// three-row temporal arc, no numeric figures grid. The submitted copy
// is the section.
// ─────────────────────────────────────────────────────────────
const LevelIII = ({ variant }) => (
  <section id="enroll" data-screen-label={`${variant} · 07 Level III`} data-ground="navy" style={{
    background: 'var(--ld-navy)', color: 'var(--ld-pearl-100)',
    padding: '72px 24px 80px',
    position: 'relative', overflow: 'hidden',
  }}>
    {/* Soft aqua activation glow, top-right */}
    <div style={{
      position: 'absolute', top: -160, right: -160, width: 360, height: 360,
      borderRadius: 360,
      background: 'radial-gradient(circle, rgba(95,224,230,0.22) 0%, rgba(95,224,230,0) 70%)',
      pointerEvents: 'none',
    }} />

    {/* ── Preamble — sits ABOVE the section eyebrow ──────────
        The opening line of the Access pitch was moved up out of the body
        so it reads as a section opener — a quiet bridge from the Builder's
        Lab into the doorway, before the "Level III · Access" label and
        Roman III hit. */}
    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.75,
      color: 'rgba(235,221,197,0.88)', margin: '0 0 32px',
    }}>
      To experience The Tech Lifestyle at its deepest and leave with
      <span style={{ color: 'var(--ld-aqua)' }}> System-level clarity</span>,
      walk in through <span style={{ color: 'var(--ld-aqua)' }}>Access</span>
      — and become one of <span style={{ color: 'var(--ld-aqua)' }}>The Seven of Access</span>.
    </p>

    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 600,
      fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
      color: 'var(--ld-aqua)',
    }}>Level III · Access</div>

    {/* Roman numeral mark */}
    <div style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 104, lineHeight: 0.9, letterSpacing: '-0.04em',
      color: 'var(--ld-aqua)',
      textShadow: '0 0 32px rgba(95,224,230,0.35)',
      marginTop: 14, marginBottom: 6,
    }}>III</div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 300,
      fontSize: 40, lineHeight: 1.0, letterSpacing: '-0.015em',
      color: 'var(--ld-pearl-100)',
      margin: '4px 0 0',
    }}>
      The Seven<br />
      <em style={{ fontStyle: 'italic', color: 'var(--ld-aqua)' }}>of Access.</em>
    </h2>

    {/* The opening "To experience..." paragraph was moved above the
        eyebrow as a preamble — the duplicate below the headline has been
        removed so the pull statement follows the headline directly. */}

    {/* Pull statement — the heart of the pitch, set big and italic, framed
        by an aqua left rule. The single visual gesture in the section. */}
    <p style={{
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 23, lineHeight: 1.38,
      color: 'var(--ld-pearl-100)',
      margin: '28px 0 0',
      paddingLeft: 20,
      borderLeft: '2px solid var(--ld-aqua)',
    }}>
      Access is the only doorway with a private 45–60 minute
      <span style={{ color: 'var(--ld-aqua)' }}> AI Workflow Design Session </span>
      with Lacey.
    </p>

    <p style={{
      fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.75,
      color: 'rgba(235,221,197,0.85)', marginTop: 22, marginBottom: 0,
    }}>
      We will map out and create a System. The System can be tech led to
      simplify your life, or even create a business solution — and design a
      personalized AI system built to run alongside it.
    </p>

    {/* The "Core Curriculum is yours from day one..." paragraph was removed
        per direction — the detail surfaces in the closing triple and the
        sections that follow on the page. */}

    {/* Closing triple — kept as one italic display line, the way Lacey wrote
        it. No numeric chart; the cadence carries it. */}
    <p style={{
      fontFamily: 'var(--font-display)', fontStyle: 'italic',
      fontWeight: 400, fontSize: 24, lineHeight: 1.3,
      color: 'var(--ld-pearl-100)',
      margin: '36px 0 0',
      letterSpacing: '-0.005em',
    }}>
      Thirty-five seats. Three doorways.<br />
      <span style={{ color: 'var(--ld-aqua)' }}>One Culture.</span>
    </p>

    {/* Primary CTA */}
    <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
      <a href="/signature-program" style={{
        fontFamily: 'var(--font-body)', fontWeight: 700,
        fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase',
        background: 'var(--ld-aqua)', color: 'var(--ld-navy)',
        padding: '18px 30px', borderRadius: 2, borderBottom: 'none',
        boxShadow: '0 0 32px rgba(95,224,230,0.25)',
      }}>Walk in through Access →</a>
      <a href="/foyer-faq" style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        fontSize: 14, color: 'rgba(235,221,197,0.78)',
        borderBottom: '1px solid rgba(235,221,197,0.4)',
        paddingBottom: 2,
      }}>Compare all three doorways</a>
    </div>
  </section>
);

Object.assign(window, { ProductShowcase, CreatorsLab, Storylines, LevelIII });
