// microbiome.jsx — "your skin is alive" framing section
// Editorial layout. Big serif statement, three pillars below, microscopic art.

function Microbiome({ motion = true }) {
  return (
    <section id="microbiome" className="section" style={{ position: 'relative' }}>
      {/* sectional ornament */}
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16,
          marginBottom: 'clamp(40px, 6vh, 64px)',
        }}>
          <span className="eyebrow">§ 01 · The framing</span>
          <span style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
          <span className="lab">Microbiome · barrier · pH</span>
        </div>
      </div>

      {/* Big statement */}
      <div className="container-narrow">
        <h2 className="display-2" style={{
          margin: 0, color: 'var(--ink)',
          letterSpacing: '-0.02em',
        }}>
          Your skin is not a surface. It's a{' '}
          <span className="serif-italic" style={{ color: 'var(--moss-deep)', position: 'relative', whiteSpace: 'nowrap' }}>
            living ecosystem
            <UnderlineSquiggle motion={motion} />
          </span>
          {' '}of trillions of microorganisms, lipids and signal proteins — quietly in conversation.
        </h2>

        <div style={{
          marginTop: 'clamp(48px, 7vh, 80px)',
          display: 'grid',
          gridTemplateColumns: 'auto 1fr',
          gap: 'clamp(32px, 5vw, 64px)',
          alignItems: 'start',
        }} className="frame-quote">
          <div style={{ width: 180 }}>
            <PetriOrnament size={180} hue="petal" />
          </div>
          <div>
            <p className="body-l text-pretty" style={{ marginTop: 0 }}>
              The skincare aisle treats your face like a problem to be solved.
              The microbiome literature treats it like a garden to be tended.
              Nurtli is built for the latter view: every screen, every
              ingredient grade, every check-in is asked through one lens —
              <em style={{ fontFamily: 'var(--font-display)', color: 'var(--moss-deep)' }}> is this supporting your biome, or disrupting it?</em>
            </p>
            <p className="body-m" style={{ marginTop: 18, color: 'var(--ink-faint)', fontStyle: 'italic' }}>
              — written by a microbiologist. Not a marketer.
            </p>
          </div>
        </div>
      </div>

      {/* Three pillars */}
      <div className="container" style={{ marginTop: 'clamp(80px, 12vh, 140px)' }}>
        <div className="pillar-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
          gap: 'clamp(20px, 3vw, 36px)',
        }}>
          <Pillar
            num="01"
            title="Two-axis grading"
            italic="efficacy × microbiome"
            body="Every ingredient is rated on two independent axes. Strong evidence for a benefit doesn't earn a pass on biome impact — and vice versa."
            hue="sage"
            motion={motion}
          />
          <Pillar
            num="02"
            title="One question, daily"
            italic="how's your skin today?"
            body="A 10-second check-in. Four answers, optional flags, optional photo. The journal compounds from one tiny gesture, no streak shame."
            hue="petal"
            motion={motion}
          />
          <Pillar
            num="03"
            title="On-device only"
            italic="your biome stays yours"
            body="Photos and journal entries stay on your device. No AI on your photos, and no analytics on image bytes. Ever."
            hue="honey"
            motion={motion}
          />
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .pillar-grid { grid-template-columns: 1fr !important; }
          .frame-quote { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Pillar({ num, title, italic, body, hue, motion }) {
  return (
    <div className="glass" style={{
      position: 'relative',
      padding: 32,
      paddingTop: 110,
      borderRadius: 24,
      overflow: 'hidden',
    }}>
      {/* corner ornament — placed at top center, content sits beneath */}
      <div style={{
        position: 'absolute', top: 18, right: 22, opacity: 0.85,
        animation: motion ? 'drift 14s ease-in-out infinite' : 'none',
        zIndex: 0,
      }}>
        <PetriOrnament size={84} hue={hue} />
      </div>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div className="lab" style={{ color: 'var(--moss-deep)' }}>{num}</div>
        <h3 className="text-balance" style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 400,
          fontSize: 28,
          lineHeight: 1.1,
          letterSpacing: '-0.018em',
          margin: '8px 0 6px',
          color: 'var(--ink)',
        }}>
          {title}
        </h3>
        <div className="serif-italic" style={{
          color: 'var(--moss-deep)', fontSize: 17, marginTop: 10, lineHeight: 1.3,
          display: 'block',
        }}>{italic}</div>
        <p className="body-m text-pretty" style={{ marginTop: 20, marginBottom: 0 }}>{body}</p>
      </div>
    </div>
  );
}

/* Decorative squiggly underline that draws in on scroll-into-view */
function UnderlineSquiggle({ motion }) {
  return (
    <svg
      viewBox="0 0 320 24"
      preserveAspectRatio="none"
      style={{
        position: 'absolute',
        left: -4, right: -4, bottom: -10,
        width: 'calc(100% + 8px)',
        height: 18,
        pointerEvents: 'none',
        overflow: 'visible',
      }}
    >
      <path
        d="M 4 14 Q 40 4 80 12 T 160 12 T 240 12 T 316 12"
        fill="none"
        stroke="#E8B8C5"
        strokeWidth="3"
        strokeLinecap="round"
        strokeDasharray="320"
        strokeDashoffset="320"
        style={{ animation: motion ? 'draw-in 2.4s cubic-bezier(.4,0,.2,1) 0.4s forwards' : 'none' }}
      />
      <style>{`
        @keyframes draw-in {
          to { stroke-dashoffset: 0; }
        }
      `}</style>
    </svg>
  );
}

Object.assign(window, { Microbiome });