// Pretty Rare Boutique — About / Founder (real copy)

function SiteFounder() {
  const mobile = useMobile();
  return (
    <section data-screen-label="founder" className="section">
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '0.85fr 1fr',
        gap: mobile ? 40 : 96,
        alignItems: 'center',
      }}>
        <div className="zoom-frame" style={{
          width: mobile ? '80%' : '100%',
          aspectRatio: '4/5',
          boxShadow: 'var(--shadow-lg)',
        }}>
          <div style={{
            width: '100%', height: '100%',
            backgroundImage: `url('assets/imagery/portrait-02.jpg')`,
            backgroundSize: 'cover', backgroundPosition: 'center',
          }} />
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 32 }}>About us</div>

          <h2 className="h-1" style={{ marginBottom: 32 }}>
            Pretty Rare Boutique
          </h2>

          <p className="body" style={{ maxWidth: 520 }}>
            Pretty Rare is a boutique cosmetic clinic built with intention, purpose, and vision.
            One that redefines the client experience. Our mission is to deliver aesthetic treatments
            that inspire confidence, authenticity, and self-worth at every stage of life.
          </p>

          <p className="body" style={{ marginTop: 20, maxWidth: 520 }}>
            We offer luxury aesthetic treatments alongside IV infusions, creating an experience that
            is thoughtful, personalised, and leaves a lasting impression. Guided by care and
            precision, we cultivate a space grounded in trust and refinement, with an elevated
            standard of service.
          </p>

          <p className="body" style={{ marginTop: 20, maxWidth: 520, fontStyle: 'italic' }}>
            Because Pretty should feel authentic, not manufactured.
          </p>

          <p style={{
            marginTop: 28,
            fontFamily: 'var(--font-sans)',
            fontStyle: 'italic',
            fontWeight: 300,
            fontSize: 16,
            color: 'var(--accent)',
            letterSpacing: '0.02em',
          }}>
            Love, Pretty Rare Boutique xo
          </p>

          <div style={{
            marginTop: 40, paddingTop: 28,
            borderTop: '1px solid var(--border)',
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr 1fr' : '1fr 1fr 1fr',
            gap: 24,
          }}>
            <Credential label="Qualified" value="Registered Nurse" />
            <Credential label="Registration" value="NMW0002651494" />
            <Credential label="Location" value="Palm Beach, Gold Coast" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Credential({ label, value }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontWeight: 500,
        fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
        color: 'var(--accent)', marginBottom: 8,
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontWeight: 500,
        fontSize: 13, letterSpacing: '-0.005em',
        color: 'var(--fg)', lineHeight: 1.4,
      }}>{value}</div>
    </div>
  );
}

window.SiteFounder = SiteFounder;