// tamara-closing.jsx — Tamara Lifestyle closing sections.
//
// Page flow:
//   ↓ from Level II offer chamber
//   06 A note from the founder (italic display, signed Lacey)
//   07 Five Lifestyles · cross-nav (four cards, Tamara omitted —
//      she is the page)
//   Footer (universal)
//
// Both sections sit back on ivory ground after the dark Level II
// chamber so the page exhales before the footer.

// ─────────────────────────────────────────────────────────────
// D · A note from the founder — hand-signed editorial register.
// Italic display block-quote with a script "— Lacey" sign-off.
// Reads as a margin-note from the founder rather than a marketing
// quote card.
// ─────────────────────────────────────────────────────────────
const TamaraFoundersNote = () => (
  <section id="founders-note"
    data-screen-label="Tamara · 05 Founder's note"
    style={{
      background: 'var(--t-ground)',
      padding: '64px 22px 72px',
      position: 'relative',
    }}>
    {/* Founder's Note now mirrors the reference layout: a small
        square logo chip on the LEFT, with the founder's quote,
        sign-off, and "ABOUT LACEY" link stacked in a content
        column on the right. The logo file is the same one the
        page header uses (crest-institution-navy.png) so the
        section reads as a quiet hand-signed margin-note from
        the institution rather than a separate visual register.

        The "Their transferable skills were never the problem.
        I will help them navigate the process of moving their
        skillsets forward." line was removed per direction —
        the quote now closes on "starting something new." */}
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'auto 1fr',
      gap: 22,
      maxWidth: 520,
      alignItems: 'start',
    }}>
      {/* Logo — free-standing crest, identical treatment to the
          page header (plain <img>, no chip, no card, no border).
          Sized a touch larger than the header crest so it carries
          its own weight as a hand-stamp next to the quote. */}
      <img src="assets/crest-institution-navy.png"
        alt="The Art of Living Digitally™"
        style={{ height: 56, width: 'auto', display: 'block', marginTop: 4 }} />

      {/* Content column */}
      <div>
        {/* Eyebrow — small-caps, mirrors the reference. */}
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'var(--t-text-3)',
          marginBottom: 16,
        }}>
          A Note From The Founder
        </div>

        {/* The block-quote — italic display serif, set in real
            curly quotation marks per the reference. */}
        <p style={{
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontWeight: 400, fontSize: 22, lineHeight: 1.42,
          color: 'var(--t-text)', margin: '0 0 28px',
          textWrap: 'pretty',
        }}>
          “I built this for the women who aren't{' '}
          <em style={{ fontStyle: 'normal', color: 'var(--t-accent)' }}>starting over</em>
          {' '}— they're{' '}
          <em style={{ fontStyle: 'normal', color: 'var(--t-accent)' }}>starting something new.</em>”
        </p>

        {/* Sign-off — "With care," italic on its own line, then
            "Lacey." in the script face at a much larger size and
            the bronze accent. Mirrors the reference exactly. */}
        <div style={{ marginBottom: 22 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 16, lineHeight: 1.2,
            color: 'var(--t-text-2)',
            marginBottom: 4,
          }}>
            With care,
          </div>
          <div style={{
            fontFamily: 'var(--font-script)',
            fontWeight: 400, fontSize: 42, lineHeight: 1,
            color: '#6B1E2A',
            textShadow: '0 0 18px rgba(107,30,42,0.35)',
            letterSpacing: '-0.005em',
          }}>
            Lacey.
          </div>
        </div>

        {/* "About Lacey" underlined small-caps link — closes the
            block, same treatment the reference uses. */}
        ```jsx
  <a href="https://www.theartoflivingdigitally.com" target="_blank" rel="noopener noreferrer" style={{
          fontFamily: 'var(--font-body)', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--t-text)',
          borderBottom: '1px solid var(--t-text)',
          paddingBottom: 4,
          textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          About Lacey R. Hardy, Founder &amp; Mom
          <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// E · Five Lifestyles cross-nav. Identical pattern to Brenda —
// four cards, Tamara omitted (she is this page). Each card is
// a small persona portrait + role tag + one-line voice.
// Order matches the universal Lifestyle order across the system:
// Jasmine (Builder), Keisha (Architect Mom), Brenda (Matriarch),
// Destiny (Quiet Riser).
// ─────────────────────────────────────────────────────────────
const TAMARA_LIFESTYLE_HREFS = {
  jasmine: '/lifestyles/jasmine',
  keisha:  '/lifestyles/keisha',
  brenda:  '/lifestyles/brenda',
  destiny: '/lifestyles/destiny',
};
const TAMARA_LIFESTYLES_CROSS = [
  { slug: 'jasmine', role: 'The Builder',         line: 'For the woman already building.',           img: 'assets/persona-jasmine.png' },
  { slug: 'keisha',  role: 'The Architect Mom',   line: 'For the mother building while managing.',   img: 'assets/persona-keisha.png' },
  { slug: 'brenda',  role: 'The Matriarch',       line: 'For the woman investing in her next chapter.', img: 'assets/persona-brenda.jpg' },
  { slug: 'destiny', role: 'The Quiet Riser',     line: 'For the quiet riser, upskilling with purpose.', img: 'assets/persona-destiny.png' },
];

const TamaraOtherLifestyles = () => (
  <section id="lifestyles"
    data-screen-label="Tamara · 06 Other Lifestyles · Cross-nav"
    style={{
      background: 'var(--t-ground-soft)',
      padding: '64px 22px 72px',
      position: 'relative',
    }}>
    {/* Top-bleed band removed per direction — the cross-nav now
        opens with a sharp color cut from the Level II chamber
        above. "05 / Five Lifestyles" flag and its rule line
        retired so the headline opens the section directly. */}

    {/* Headline pair — mirrors the reference visual:
        • small-caps aqua eyebrow reads "FIVE LIFESTYLES. ONE CULTURE."
        • single block of editorial display serif underneath, with
          "Each Lifestyle is a doorway." set roman and "Walk through
          the one that feels like home." set italic, running together
          as continuous prose. Within Tamara's locked Navy + Bronze
          chamber, the aqua eyebrow is the brand-carrier accent. */}
    {/* Eyebrow — now in editorial red. The user asked for the words
        in quotations red; in the Lacey & Tech™ system the red note
        is carried by oxblood, so this uses a bright→oxblood gradient
        so the line reads as a vivid, lit red rather than a flat dark
        brick. Drop-shadow gives it a soft halo to match the
        gradient pull-words inside Level II. */}
    <div style={{
      fontFamily: 'var(--font-body)', fontWeight: 800,
      fontSize: 12.5, letterSpacing: '0.28em', textTransform: 'uppercase',
      backgroundImage: 'linear-gradient(180deg, #E04A5C 0%, #B8202F 55%, #6B1E2A 100%)',
      WebkitBackgroundClip: 'text', backgroundClip: 'text',
      color: 'transparent',
      WebkitTextFillColor: 'transparent',
      filter: 'drop-shadow(0 0 12px rgba(184,32,47,0.45))',
      margin: '0 0 18px',
    }}>
      Five Lifestyles. One Culture.
    </div>

    <h2 style={{
      fontFamily: 'var(--font-display)', fontWeight: 400,
      fontSize: 30, lineHeight: 1.18, letterSpacing: '-0.012em',
      color: 'var(--t-text)', margin: '0 0 36px',
      maxWidth: 460, textWrap: 'pretty',
    }}>
      Each Lifestyle is a doorway.{' '}
      <em style={{
        fontStyle: 'italic',
        color: 'var(--t-text)',
      }}>Walk through the one that feels like home.</em>
    </h2>

    {/* The four cards — 2-column grid on this artboard width.
        Each card is a quiet editorial tile: portrait at top,
        role tag in small caps, italic one-line voice. The hover
        state lifts the card 1px and warms the hairline to the
        accent. */}
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      gap: 16,
    }}>
      {TAMARA_LIFESTYLES_CROSS.map((p) => (
        <a key={p.slug} href={TAMARA_LIFESTYLE_HREFS[p.slug] || `/lifestyles/${p.slug}`}
          style={{
            display: 'block', textDecoration: 'none', borderBottom: 'none',
            background: 'var(--t-surface)',
            border: '1px solid var(--t-line)',
            borderRadius: 2,
            padding: 0, overflow: 'hidden',
            transition: 'transform 200ms ease, border-color 200ms ease',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.borderColor = 'var(--t-accent)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--t-line)'; }}>
          <div style={{
            aspectRatio: '1 / 1',
            background: 'var(--t-ground-soft)',
            overflow: 'hidden',
          }}>
            <img src={p.img} alt=""
              style={{
                display: 'block', width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center top',
              }} />
          </div>
          <div style={{ padding: '14px 14px 16px' }}>
            <TFlag color="var(--t-accent)" style={{ display: 'block', marginBottom: 8 }}>
              {p.role}
            </TFlag>
            <div style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontWeight: 400, fontSize: 14, lineHeight: 1.35,
              color: 'var(--t-text)',
            }}>{p.line}</div>
          </div>
        </a>
      ))}
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────
// TamaraPage — composes the full sequence. Header, hero, intro,
// environment, Level II, founder's note, cross-nav, footer. The
// page wrapper carries the [data-palette] attribute so child
// sections inherit --t-* tokens.
//
// Page sequence:
//   Header
//   01 Hero · Voice line                  · ivory ground
//   02 Editorial intro                    · ivory ground
//   03 Where pivots are happening         · ivory ground (env)
//   04 Level II · The Founding 21         · deep chamber (offer)
//   05 A note from the founder            · ivory ground
//   06 Five Lifestyles · cross-nav        · ivory soft ground
//   Footer                                 · deep chamber
// ─────────────────────────────────────────────────────────────
const TamaraPage = ({ palette }) => (
  <div data-palette={palette || 'ivory-oxblood'}
    style={{
      background: 'var(--t-ground)',
      color: 'var(--t-text)',
      fontFamily: 'var(--font-body)',
      minHeight: '100%',
    }}>
    <TamaraHeader />
    <TamaraHero />
    <TamaraIntro />
    {/* TamaraEnvironment removed per direction — the "02 / Environment"
        section (Atlanta Reinvention Archive chamber) is no longer part
        of the page flow. The component definition stays in tamara-body
        in case it needs to come back. */}
    <TamaraLevelII />
    {/* Founder's Note moved per direction — it now sits between
        the Five Lifestyles cross-nav and the Footer, so the page
        closes on the founder's voice before the universal nav. */}
    <TamaraOtherLifestyles />
    <TamaraFoundersNote />
    <TamaraFooter />
  </div>
);

Object.assign(window, { TamaraFoundersNote, TamaraOtherLifestyles, TamaraPage });