/* About — name story, founder note, values. Editorial layout on the 4b theme. */
function SF_About({ go }) {
  const { Button, TrustBadge } = window.SS;
  const kicker = { fontSize: 11, fontWeight: 500, letterSpacing: '.24em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)' };
  const body = { fontSize: 14, fontWeight: 300, color: 'var(--sf-text-muted)', lineHeight: 1.7 };

  return (
    <div>
      {/* hero */}
      <div className="sf-maxw" style={{ paddingTop: 80, paddingBottom: 64, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(38px, 7vw, 60px)', letterSpacing: '.02em', whiteSpace: 'nowrap' }}>
          <span style={{ color: 'var(--color-wine)' }}>{window.SS_SITE.brandNameWine.toUpperCase()}</span> <em style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--sf-gold-hi)' }}>{window.SS_SITE.brandNameGold}</em>
        </div>
        <div style={kicker}>OUR STORY</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 46, fontWeight: 600, color: 'var(--sf-gold-hi)', maxWidth: 640, lineHeight: 1.15 }}>{window.SS_SITE.tagline}</div>
          <div style={{ fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 20, color: 'var(--sf-text)' }}>{window.SS_SITE.taglineSub}</div>
        </div>
      </div>

      {/* name story */}
      <div style={{ borderTop: '1px solid var(--sf-border-soft)', borderBottom: '1px solid var(--sf-border-soft)', background: 'var(--sf-surface)' }}>
        <div className="sf-maxw sf-about-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr', gap: 48, padding: '56px var(--sf-gutter)', maxWidth: 'var(--sf-maxw)', margin: '0 auto', alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, letterSpacing: '.04em', color: 'var(--color-wine)' }}>{window.SS_SITE.brandNameWine.toUpperCase()}</div>
            <div style={{ ...kicker, marginTop: 8, color: 'var(--sf-text-faint)' }}>ENGLISH</div>
            <p style={{ ...body, marginTop: 14, marginBottom: 0 }}>Bold, playful, self-assured. The pieces that get you a second look — and the confidence to hold it.</p>
          </div>
          <div style={{ background: 'linear-gradient(to bottom, transparent, var(--sf-border), transparent)', alignSelf: 'stretch' }}></div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 30, fontWeight: 400, color: 'var(--sf-gold-hi)' }}>{window.SS_SITE.brandNameGold}</div>
            <div style={{ ...kicker, marginTop: 8, color: 'var(--sf-text-faint)' }}>FROM SANSKRIT — सावित्री</div>
            <p style={{ ...body, marginTop: 14, marginBottom: 0 }}>Radiance of the sun, grace and devotion. The heritage every piece carries — chandbalis, jhumkas, temple work.</p>
          </div>
        </div>
      </div>

      {/* founder note */}
      <div className="sf-maxw" style={{ paddingTop: 72, paddingBottom: 72, display: 'flex', justifyContent: 'center' }}>
        <div style={{ background: 'var(--sf-card-grad)', border: '1px solid var(--sf-border)', borderRadius: 'var(--sf-radius-lg)', boxShadow: 'var(--sf-shadow-card)', padding: '44px 48px', maxWidth: 620, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 14, border: '1px solid var(--sf-border-soft)', borderRadius: 'calc(var(--sf-radius-lg) - 8px)', pointerEvents: 'none' }}></div>
          <div style={kicker}>A NOTE FROM THE FOUNDER</div>
          <p style={{ ...body, fontSize: 15, marginTop: 18, marginBottom: 0 }}>
            Every piece here is handpicked — I wear it, live in it, and only then does it make the cut. {window.SS_SITE.brandName} began as a stall table and a zip-lock pouch of chandbalis; it&rsquo;s still the same promise: statement jewellery that doesn&rsquo;t ask permission.
          </p>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, color: 'var(--sf-gold-hi)', marginTop: 24 }}>With love, Suman</div>
        </div>
      </div>

      {/* promises */}
      <div className="sf-maxw" style={{ paddingBottom: 88, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
        <div className="sf-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, width: '100%' }}>
          <TrustBadge title="Handpicked" detail="Every piece personally selected and quality-checked before it ships." />
          <TrustBadge title="Skin-safe finishes" detail="Nickel-safe plating and hypoallergenic posts on every earring." />
          <TrustBadge title="Signature packaging" detail="Boxed with a care card — gift-ready straight out of the mailer." />
        </div>
        <Button variant="gold" onClick={() => go('listing')}>SHOP THE COLLECTION</Button>
      </div>
    </div>
  );
}
window.SF_About = SF_About;