/* About Kylie */

const { useState, useEffect, useRef } = React;

function AboutHero() {
  return (
    <section>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: '1.5rem', padding: '1.25rem var(--gutter)', borderBottom: '1px solid var(--hair)' }}>
        <span className="mono">Kylie Nolan · Makeup Artist</span>
        <span className="mono">·</span>
        <span className="mono" style={{ textAlign: 'right' }}>Est. Australia</span>
      </div>

      <div className="container" style={{ padding: '6rem 0 4rem' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '4rem', alignItems: 'end' }}>
          <div>
            <h1 className="display" style={{ fontSize: 'clamp(72px, 14vw, 240px)', lineHeight: 0.88, margin: 0, letterSpacing: '-0.035em' }}>
              <MaskLine delay={1}>Kylie</MaskLine>
              <MaskLine delay={2}><em style={{ fontWeight: 300 }}>Nolan.</em></MaskLine>
            </h1>
            <Reveal>
              <p style={{ fontSize: '18px', lineHeight: 1.5, color: 'var(--ink-soft)', maxWidth: '36ch', marginTop: '2.5rem' }}>
                The modern authority in makeup. She doesn't transform faces,
                she teaches women how to <em>see</em> theirs.
              </p>
              <div className="mono" style={{ marginTop: '1.5rem' }}>Beauty educator · Face specialist</div>
            </Reveal>
          </div>
          <Reveal>
            <figure style={{ margin: 0 }}>
              <img
                src="/assets/updated-kylie-headshot.webp"
                alt="Portrait of Kylie Nolan, makeup artist and educator"
                style={{
                  display: 'block',
                  width: '100%',
                  aspectRatio: '1/1',
                  objectFit: 'cover',
                  background: 'var(--pink-bg)'
                }}
              />
              <figcaption className="mono" style={{
                marginTop: '0.7rem',
                color: 'var(--ink-muted)',
                display: 'flex',
                justifyContent: 'flex-end',
                gap: '1rem'
              }}>
                <span>The artist · in studio</span>
              </figcaption>
            </figure>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StoryAbout() {
  return (
    <section className="container" style={{ padding: '7rem 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '5rem', alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: '100px' }}>
          <div className="eyebrow">The Story</div>
          <div className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 1, marginTop: '1rem' }}>
            The <em style={{ fontWeight: 300 }}>problem</em> was never you.
          </div>
        </div>
        <div style={{ fontFamily: 'var(--f-display)', fontSize: '22px', lineHeight: 1.45, color: 'var(--ink)' }}>
          <Reveal>
            <p style={{ margin: '0 0 2rem' }}>
              Kylie has worked with countless women who all had the same problem. They were trying
              to follow tutorials that were <em>not made for them.</em>
            </p>
          </Reveal>
          <Reveal>
            <p style={{ margin: '0 0 2rem' }}>
              Every time it didn't work, they thought the problem was them. It wasn't.
            </p>
          </Reveal>
          <Reveal>
            <p style={{ margin: '0 0 2rem' }}>
              The problem was that no one had ever taught them how to understand their own face.
            </p>
          </Reveal>
          <Reveal>
            <p style={{ margin: 0, fontStyle: 'italic', fontWeight: 300, color: 'var(--ink-soft)' }}>
              The Face Edit was created to change that. To simplify beauty. To personalise it.
              To give women back control.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Principles() {
  const items = [
    ['Personalised by design', 'No two faces are read the same. The method works because it starts with yours, not a formula built for someone else.'],
    ['Never preachy', 'She talks to one person, like she genuinely cares.'],
    ['Elevated + real', 'Editorial polish meets real-life wearability.'],
    ['A system, not a trend', 'Everything connects back to the Method.'],
  ];
  return (
    <section style={{ background: 'var(--pink-bg)', padding: '6rem 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: '4rem', marginBottom: '3rem', alignItems: 'end' }}>
          <div className="eyebrow">The way she works</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 96px)', margin: 0 }}>
            <em style={{ fontWeight: 300 }}>Principles.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--ink)' }}>
          {items.map(([h, b], i) => (
            <Reveal key={i} style={{
              padding: '2.5rem 1.8rem',
              borderRight: i < 3 ? '1px solid rgba(0,0,0,0.12)' : '0',
              minHeight: '280px',
              display: 'flex', flexDirection: 'column'
            }}>
              <div className="num" style={{ marginBottom: '1rem' }}>0{i+1}</div>
              <div className="display" style={{ fontSize: '28px', lineHeight: 1.05, marginBottom: '1rem' }}>{h}</div>
              <div style={{ flex: 1 }} />
              <div style={{ fontSize: '14px', lineHeight: 1.5, color: 'var(--ink-soft)', maxWidth: '26ch' }}>{b}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function NotIs() {
  return (
    <section className="container" style={{ padding: '7rem 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
        <div style={{ padding: '3rem 2rem', borderRight: '1px solid var(--hair)' }}>
          <div className="mono" style={{ marginBottom: '1.2rem' }}>What Kylie is NOT</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '1rem' }}>
            {['Trend-based influencer','Step-by-step tutorial artist','Product-driven','Formula-based'].map(x => (
              <li key={x} style={{ fontFamily: 'var(--f-display)', fontSize: '28px', color: 'var(--ink-muted)', textDecoration: 'line-through', textDecorationThickness: '1px' }}>{x}</li>
            ))}
          </ul>
        </div>
        <div style={{ padding: '3rem 2rem', background: 'var(--ink)', color: 'white' }}>
          <div className="mono" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: '1.2rem' }}>What Kylie IS</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '1rem' }}>
            {['The authority in personalised makeup','A face reader and teacher','A system builder','A modern beauty educator'].map(x => (
              <li key={x} style={{ fontFamily: 'var(--f-display)', fontSize: '28px', color: 'white' }}>{x}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function InstagramCTA() {
  return (
    <section style={{ borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)' }}>
      <div className="container" style={{ padding: '8rem 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6rem', alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: '2rem' }}>See the work</div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', lineHeight: 0.92, margin: 0, letterSpacing: '-0.02em' }}>
              In real<br /><em style={{ fontWeight: 300 }}>time.</em>
            </h2>
          </Reveal>
          <Reveal>
            <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.4, maxWidth: '36ch', margin: '0 0 2.5rem' }}>
              Technique breakdowns, Reels, and the thinking behind The Face Edit. The work, as it happens.
            </p>
            <div className="mono" style={{ marginBottom: '2rem', color: 'var(--ink-muted)' }}>@kylie_nolan</div>
            <a
              href="https://www.instagram.com/kylie_nolan/"
              target="_blank"
              rel="noopener"
              className="btn btn-solid"
            >
              Follow on Instagram <span className="btn-arrow"/>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Ending() {
  return (
    <section style={{ padding: '9rem 0', borderTop: '1px solid var(--hair)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="display" style={{ fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.2, maxWidth: '28ch', margin: '0 auto' }}>
          Most women were never taught how to work with their own face. The Face Edit isn't a copy-the-look class.
          It's a completely <em style={{ fontWeight: 300 }}>new way to see yourself.</em>
        </div>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', marginTop: '3rem', flexWrap: 'wrap' }}>
          <a href="https://events.humanitix.com/the-face-edit-foundation-workshop" target="_blank" rel="noopener" className="btn btn-solid">Book your seat <span className="btn-arrow"/></a>
          <a href="https://thefaceedit.us17.list-manage.com/subscribe?u=49dfda9ebf8b3039b6d013d27&id=2804d4f9bf" target="_blank" rel="noopener" className="btn">Join the waitlist</a>
          <a href="/workshops/" className="btn">Read The Method</a>
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  const { tweaks, editMode, update } = useTweaks();
  return (
    <div data-screen-label="About Kylie" className="page">
      <Nav current="about" />
      <AboutHero />
      <StoryAbout />
      <Principles />
      <NotIs />
      <InstagramCTA />
      <Ending />
      <Footer />
      {editMode && <TweaksPanel tweaks={tweaks} update={update} />}
    </div>
  );
}

Object.assign(window, { AboutPage });