// about.jsx — About page (Rachel + Jessie)

function AboutPage() {
  return (
    <div>
      <Header active="About" />
      <PageHeader
        eyebrow="About the Practice"
        title="Meet the team behind"
        accent="the practice."
        body="Rachel Dahlen Aesthetics is a boutique medical aesthetic clinic in Edina, Minnesota — built on artistry, restraint, and the kind of care that only comes from a small, focused team."
      />
      <RachelBio />
      <JessieBio />
      <KathyBio />
      <Values />
      <BookCTA />
      <Footer />
    </div>
  );
}

function RachelBio() {
  return (
    <section id="rachel" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 70, alignItems: 'center' }}>
          <div className="photo-frame" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)' }}>
            <img src="/assets/rachel.jpeg" alt="Rachel Dahlen, NP-BC" style={{ objectPosition: '50% 16%' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Founder · Aesthetic Nurse Practitioner</Eyebrow>
            <h2 className="h-section">Rachel Dahlen, NP-BC.</h2>
            <HoneyRule />
            <p className="body-lg">
              Rachel began her career in cosmetic injections in 2009, training one-on-one under board-certified plastic surgeons. Over the last sixteen years she has refined her approach into one defined by restraint, anatomical precision, and an unwavering commitment to natural results.
            </p>
            <p className="body-md">
              She holds advanced certifications in facial aesthetics and continues training with leading injectors nationally — staying current on the science, the technique, and the products. Her clinic in Edina is the practice she always wanted to build: small, considered, and focused entirely on the patient in front of her.
            </p>
            <p className="body-md" style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 22, color: 'var(--color-deep-brown)', borderLeft: '3px solid var(--color-deep-brown)', paddingLeft: 20, marginTop: 8 }}>
              "I want patients to leave looking like the most rested version of themselves — never a different person."
            </p>
            <div style={{ display: 'flex', gap: 28, paddingTop: 28, borderTop: '1px solid var(--color-border-subtle)', marginTop: 12, flexWrap: 'wrap' }}>
              <div><div className="eyebrow">Since</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>2009</div></div>
              <div><div className="eyebrow">Specialty</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>Injectables</div></div>
              <div><div className="eyebrow">Trained By</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>Plastic Surgeons</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function JessieBio() {
  return (
    <section id="jessie" className="bg-linen" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 70, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Now Welcoming</Eyebrow>
            <h2 className="h-section">Meet Jessie.</h2>
            <HoneyRule />
            <p className="body-lg" style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic' }}>
              Jessie is an advanced practice esthetician with 13 years of experience in medical aesthetics and corrective skincare.
            </p>
            <p className="body-md">
              She brings an incredible level of knowledge, precision, and passion for helping patients achieve healthy, confident, radiant skin. Jessie's experience, attention to detail, and genuine care for patients make her the perfect fit for Rachel Dahlen Aesthetics — and we truly could not be more excited to have her here.
            </p>
            <div style={{ marginTop: 12 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Specialties</div>
              <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 28px' }}>
                {[
                  'Corrective facials',
                  'Chemical peels',
                  'SkinPen microneedling',
                  'DiamondGlow',
                  'Acne + pigment correction',
                  'Medical-grade skincare treatments',
                ].map(s => (
                  <div key={s} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--color-deep-brown)', flexShrink: 0 }} />
                    <span className="body-md" style={{ color: 'var(--color-deep-brown)' }}>{s}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="primary" href="#book-now">Book with Jessie</Button>
              <Button variant="ghost" href="/treatments/">View skin treatments</Button>
            </div>
          </div>
          <div className="photo-frame" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)' }}>
            <img src="/assets/jessie.jpeg" alt="Jessie — Advanced Practice Esthetician" style={{ objectPosition: '50% 12%' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function KathyBio() {
  return (
    <section id="kathy" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 70, alignItems: 'center' }}>
          <div className="photo-frame" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)' }}>
            <img src="/assets/kathy.jpeg" alt="Kathy — Patient Care Coordinator" style={{ objectPosition: '50% 14%' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Now Welcoming</Eyebrow>
            <h2 className="h-section">Meet Kathy.</h2>
            <HoneyRule />
            <p className="body-lg" style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic' }}>
              Kathy is the warm first voice you'll hear and the friendly face who greets you at the door.
            </p>
            <p className="body-md">
              As Patient Care Coordinator, she keeps every visit running effortlessly — from your first phone call to checkout. Whether you're booking a consultation, rescheduling, or have a question about your treatment plan, Kathy is here to make the experience seamless. Her genuine care for our patients sets the tone for everything we do at Rachel Dahlen Aesthetics.
            </p>
            <div style={{ marginTop: 12 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>How She Helps</div>
              <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 28px' }}>
                {[
                  'Booking & scheduling',
                  'New patient onboarding',
                  'Front desk & hospitality',
                  'Questions & follow-up',
                ].map(s => (
                  <div key={s} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--color-deep-brown)', flexShrink: 0 }} />
                    <span className="body-md" style={{ color: 'var(--color-deep-brown)' }}>{s}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="primary" href="#book-now">Book a Visit</Button>
              <Button variant="ghost" href="tel:6122943749">612 · 294 · 3749</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  const items = [
    { title: 'Restraint Over Excess', body: 'We believe the best result is the one no one notices. Our work is intentionally subtle and built to age gracefully alongside you.' },
    { title: 'Education First', body: 'Every consultation is a conversation. We explain the why behind every recommendation so you can make informed decisions about your care.' },
    { title: 'Long-Term Relationships', body: 'We are not a med spa chasing volume. We grow with our patients over years and decades, adjusting plans as your face and goals evolve.' },
    { title: 'Medical Standards', body: 'Cosmetic care is medical care. Sterile technique, proper assessment, and product traceability are non-negotiable here.' },
  ];
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
          <Eyebrow>What We Believe</Eyebrow>
          <h2 className="h-section">Our values, in practice.</h2>
          <FadeRule style={{ margin: '6px auto' }} />
        </div>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          {items.map(it => (
            <div key={it.title} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <h3 style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 28, color: 'var(--color-deep-brown)' }}>{it.title}</h3>
              <HoneyRule />
              <p className="body-md" style={{ color: 'var(--color-taupe)' }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutPage });