// Pretty Rare Boutique — About / Founder

function SiteFounder() {
  const mobile = useMobile();

  if (mobile) {
    return (
      <section data-screen-label="founder" className="section">
        <div style={{ padding: '0 24px' }}>
          <div style={{ borderRadius: 12, overflow: 'hidden', aspectRatio: '4/5', marginBottom: 40 }}>
            <div style={{ width: '100%', height: '100%', backgroundImage: `url('assets/imagery/portrait-02.jpg')`, backgroundSize: 'cover', backgroundPosition: 'center 20%' }} />
          </div>
          <FounderText />
        </div>
      </section>
    );
  }

  return (
    <section data-screen-label="founder" style={{
      display: 'grid',
      gridTemplateColumns: '46vw 1fr',
      minHeight: '85vh',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Photo bleeds to left viewport edge — no border-radius, no frame */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url('assets/imagery/portrait-02.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center 20%',
        }} />
        {/* Right-edge gradient — blends into page bg */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, right: 0, width: 80,
          background: 'linear-gradient(to left, var(--bg), transparent)',
          pointerEvents: 'none',
        }} />
      </div>

      {/* Text column */}
      <div style={{
        paddingLeft: 72,
        paddingRight: 'max(40px, calc(50vw - 600px))',
        paddingTop: 80,
        paddingBottom: 80,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        background: 'var(--bg)',
      }}>
        <FounderText />
      </div>
    </section>
  );
}

function FounderText() {
  return (
    <>
      <div className="eyebrow" style={{ marginBottom: 28 }}>About us</div>

      <h2 className="h-1" style={{ marginBottom: 28 }}>
        Pretty Rare<br/><span className="thin">Boutique</span>
      </h2>

      <p className="body" style={{ maxWidth: 480 }}>
        Pretty Rare started from one belief: that coming in for cosmetic care shouldn't feel
        intimidating, clinical, or rushed. It should feel like being looked after by someone
        who genuinely knows you. Someone who will give you an honest answer, even when that
        answer is "you don't need anything today."
      </p>

      <p className="body" style={{ marginTop: 18, maxWidth: 480 }}>
        We offer cosmetic treatments and IV wellness infusions in a private suite that is
        unhurried and warm. There is no upsell here. No before-and-after wall. Just real care
        from someone who means it.
      </p>

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

      <p style={{
        fontFamily: 'var(--font-script)',
        fontSize: 'clamp(36px, 4vw, 52px)',
        color: 'var(--accent)',
        lineHeight: 1.3,
        margin: '28px 0 0',
      }}>
        Love, Pretty Rare Boutique xo
      </p>

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

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;