/* AboutPage — built from the Spring Street Brand Foundation document. */
function AboutPage({ onNav }) {
  const { Eyebrow, Divider } = window.DomumDesignSystem_84ba75;
  const { Photo, PageHeader, InquiryBand, TextureBand, Rule, SectionFrame } = window;

  const beliefs = [
    ['Homes should feel personal, not prescribed.', 'Good design should not make every house look alike. We seek to understand how you live, what you value, and what already makes your property special. The result should feel unmistakably yours.'],
    ['Character is an asset.', 'Age, craftsmanship, unusual details, original architecture, and imperfections give a home depth. Renovation should begin by asking what is worth keeping before deciding what needs to be replaced.'],
    ['Timelessness matters.', 'We are influenced by enduring architecture and interiors rather than rapid design cycles. Work should feel appropriate now without becoming obviously tied to a particular year.'],
    ['Homes are meant to be lived in.', 'A beautiful room that does not support everyday life is incomplete. Comfort, function, storage, movement, durability, and daily habits matter as much as aesthetics.'],
    ['Investment should be intentional.', 'Not every dollar spent on a property creates equal value. Decisions should consider both personal enjoyment and the broader context of the home, neighborhood, and market.'],
  ];

  const clientTraits = [
    'You appreciate older homes, or homes with architectural personality.',
    'You want something more personal than a builder-standard renovation.',
    'You care about design but may not know how to articulate what you want.',
    'You want the house to feel warm rather than overly styled.',
    'You value quality, longevity, craftsmanship, and natural materials.',
    'You want help prioritizing where renovation dollars should go.',
    'You would rather make considered decisions than chase trends.',
    'You want a partner who understands both design and construction.',
  ];

  return (
    <div>
      <PageHeader
        align="center"
        image="./assets/photo-about-header.jpg" position="center 30%"
        imageAlt="Lauren and Ryan Stephens, founders of Spring Street Design & Build, in a remodeled Little Rock kitchen"
        eyebrow="About Us"
        title={<React.Fragment>A home should reflect the<br />people who live within it.</React.Fragment>}
        lede="Spring Street Design & Build is a boutique residential design, build and remodeling studio focused on creating homes that feel personal, one-of-a-kind, and deeply reflective of the people who live in them." />

      {/* Founders */}
      <section style={{ padding: 'var(--space-9) var(--gutter)', maxWidth: 'var(--page-max)', margin: '0 auto' }}>
        <div style={{ marginBottom: 'var(--space-8)' }}><Divider label="Who We Are" /></div>
        <div style={{ display: 'grid', gap: 'var(--space-8)' }}>
          {[
            {
              name: 'Lauren Stephens', title: 'Principal Designer & Co-Founder', role: 'Details, Functionality & Feeling', tone: 'linen', image: './assets/photo-lauren.jpg', position: 'center 62%',
              body: [
                'Lauren brings a discerning eye for design, proportion, materials, and the details that make a home feel considered. Grounded in two whole-home renovations of her own, her experience spans space planning, finish and material selections, architectural details, sourcing, and styling—all with an eye toward creating a cohesive home that feels crafted & collected rather than simply completed.',
              ],
              quote: 'The question is not simply whether this looks good. It is whether it feels like home.',
              letter: [
                'Through travel, I\'ve observed how cities celebrate the character of their architecture, where craftsmanship, detail, and a sense of place are treated as something worth preserving. And every time I come home, I’m reminded of how much of that character we’ve lost along the way: the trim detail that turns a hallway into a passage, the wallpaper that feels like art, the lighting that creates warmth, the details that make even a small room feel intentional, and the craftsmanship that gives a house a sense of permanence.',
                'I want to help bring that back, while still designing for the way people actually live. Beautiful homes should be able to handle backpacks, dog hair, kids, company, and a cozy night in. Your home should be something you want to share but also a space that feels like a sanctuary.',
              ],
              signature: 'Lauren',
            },
            {
              name: 'Ryan Stephens', flip: true, title: 'Principal Project Director & Co-Founder', role: 'Development, Project Management & Property Value', tone: 'walnut', image: './assets/photo-ryan.jpg', position: 'center 26%',
              body: 'Ryan brings the practical and strategic perspective: experience in development, home building, and construction management, alongside real estate. He understands properties not simply as individual rooms, but as complete assets within a neighborhood and market, and he sees how design decisions translate into real work, real costs, and real constraints.',
              letter: [
                'I think about a house the way I think about a neighborhood: nothing stands alone. A kitchen renovation isn\'t just a kitchen, it\'s part of a property, a street, a life someone is building. My background in Little Rock real estate taught me to see those connections, and two historic renovations of my own taught me what it costs to build something that holds up: the systems that work, the layout that makes sense, the improvements worth the money and the ones that aren\'t.',
                'I\'m the one asking the unglamorous questions early, what\'s behind this wall, what will this cost, what sequence keeps us on schedule and budget, because structure is what lets the vision survive contact with reality.',
                'I don\'t measure success by whether a project got done, but whether it was done right, and whether it still makes sense five years later.',
              ],
              quote: 'The question is not simply whether it looks finished. It is whether it was built right.',
              signature: 'Ryan',
            },
          ].map((p) => (
            <div key={p.name}>
              <div data-founder-row style={{ display: 'grid', gridTemplateColumns: p.flip ? 'minmax(0, 6fr) minmax(0, 5fr)' : 'minmax(0, 5fr) minmax(0, 6fr)', gap: 'var(--space-8)', alignItems: 'stretch' }}>
                <Reveal delay={80} style={{ display: 'flex', alignSelf: 'start', gridColumn: p.flip ? 2 : 1, gridRow: 1 }}>
                  <Photo image={p.image} position={p.position} label={`Portrait · ${p.name}`} alt={`${p.name}, ${p.role} at Spring Street Design & Build, a Little Rock design build firm`} tone={p.tone} ratio="4 / 5" style={{ width: '100%' }} data-portrait />
                </Reveal>
                <Reveal delay={200} style={{ gridColumn: p.flip ? 1 : 2, gridRow: 1 }}>
                  <div style={{ marginBottom: 'var(--space-5)', display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', columnGap: '14px', rowGap: '8px' }}>
                    <h2 style={{ fontSize: 'clamp(1.4rem, 2.2vw, 1.9rem)', fontWeight: 400, margin: 0, lineHeight: 1.05, letterSpacing: '.01em' }}>{p.name}</h2>
                    <p style={{
                      fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 500,
                      letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--oxblood)',
                      margin: 0, lineHeight: 1.6,
                    }}>{p.title}</p>
                  </div>
                  <div style={{ marginBottom: 'var(--space-5)' }}><Eyebrow>{p.role}</Eyebrow></div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                    {(Array.isArray(p.body) ? p.body : [p.body]).map((b, i) => (
                      <p key={i} style={{ fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.75 }}>{b}</p>
                    ))}
                    {p.letter && (
                      <div aria-hidden="true" style={{ width: '84px', height: '1px', background: 'var(--border-strong)', alignSelf: 'center', margin: 'var(--space-1) 0' }}></div>
                    )}
                    {p.letter && p.letter.map((l, i) => (
                      <p key={`l${i}`} style={{ fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', fontStyle: 'italic', margin: 0, lineHeight: 1.75 }}>{l}</p>
                    ))}
                    <p style={{
                      fontFamily: 'var(--font-display)',
                      fontSize: 'clamp(.9rem, 1.15vw, 1rem)', color: 'var(--oxblood)',
                      lineHeight: 1.55, margin: 'var(--space-4) 0 0',
                    }}>{p.quote}</p>
                  </div>
                  {p.signature && (
                    <div style={{ marginTop: '-18px', display: 'flex', justifyContent: 'center' }}>
                      {p.signature === 'Lauren' ? (
                        <img src="./assets/signature-lauren.png" alt={`${p.signature} signature`}
                             style={{ width: 'clamp(180px, 22vw, 250px)', height: 'auto', display: 'block', marginBottom: '-22px', mixBlendMode: 'multiply', filter: 'brightness(.72) saturate(1.2)' }} />
                      ) : (
                        <img src="./assets/signature-ryan.svg" alt={`${p.signature} signature`}
                             style={{ width: 'clamp(120px, 14vw, 160px)', height: 'auto', display: 'block', marginBottom: '-22px', mixBlendMode: 'multiply', filter: 'brightness(.72) saturate(1.2)' }} />
                      )}
                    </div>
                  )}
                </Reveal>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          position: 'relative', background: 'var(--oxblood)', maxWidth: '62ch',
          margin: 'var(--space-8) auto 0', padding: 'var(--space-6) var(--space-8)',
        }}>
          <SectionFrame inset={8} />
          <p style={{
            fontFamily: "'Lovelace Text', 'Iowan Old Style', Georgia, serif", fontSize: 'clamp(1.25rem, 2vw, 1.55rem)',
            color: 'var(--ivory)', textAlign: 'center', maxWidth: '52ch',
            margin: '0 auto', lineHeight: 1.35,
          }}>
            Together, we offer an integrated approach to design, construction, and investment, guiding clients from dream to vision to finished home.
          </p>
        </div>
      </section>

      {/* Name story */}
      <section style={{ position: 'relative', borderTop: '1px solid var(--border-strong)', padding: 'var(--space-9) var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 6fr)', gap: 'var(--space-8)', alignItems: 'stretch' }}>
        <Photo image="./assets/photo-front-door.jpg" position="center 50%" label="Front door · Spring Street" alt="The front door of the founders' own Spring Street house in Little Rock" tone="oak" ratio="auto" style={{ height: '100%', minHeight: '520px' }} />
        <div>
          <Eyebrow>The Story Behind the Name</Eyebrow>
          <h2 style={{ fontSize: 'clamp(1.5rem, 2.6vw, 2rem)', margin: '18px 0 26px', lineHeight: 1.25 }}>
            Spring Street is not an invented lifestyle name. It comes from home.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <p style={{ color: 'var(--text-secondary)', margin: 0, lineHeight: 1.8, fontSize: 'var(--fs-small)' }}>
              The name is rooted in Spring Street, a house we saw potential in, envisioned the
              memories, and then bought and renovated ourselves. It's the place where our own ideas
              about homes, design, architecture, and creating spaces that honor quality and
              craftsmanship truly developed.
            </p>
            <p style={{ color: 'var(--text-secondary)', margin: 0, lineHeight: 1.8, fontSize: 'var(--fs-small)' }}>
              Having gone through two whole-home renovations on historic properties, we have learned
              how living among historic architecture reinforces an appreciation for how creating homes
              should be an art. We've learned which details can transcend generations, and which create
              modern functionalities that make living easier. We learned what happens when you not only
              make a space that feels at home, but that invites others to feel the same.
            </p>
            <p style={{ color: 'var(--text-secondary)', margin: 0, lineHeight: 1.8, fontSize: 'var(--fs-small)' }}>
              This passion for creating and bringing spaces to life is something we genuinely love doing
              together. It is the reason the work never feels like a job to us.
            </p>
          </div>
          <p style={{ margin: '28px 0 0', fontFamily: 'var(--font-display)', fontSize: 'clamp(.9rem, 1.15vw, 1rem)', color: 'var(--oxblood)', lineHeight: 1.55 }}>
            Spring Street is where our vision for home began. Now, we get to help bring yours to life.
          </p>
        </div>
        </div>
      </section>

      {/* Philosophy */}
      <section style={{ padding: 'var(--space-9) var(--gutter)', maxWidth: 'var(--page-max)', margin: '0 auto' }}>
        <div style={{ maxWidth: '640px', marginBottom: 'var(--space-8)' }}>
          <Eyebrow>Our Philosophy</Eyebrow>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: '16px 0 0' }}>Five things we hold to.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '36px 56px' }}>
          {beliefs.map(([t, d]) => (
            <div key={t} style={{ borderTop: '1px solid var(--border-strong)', paddingTop: '20px' }}>
              <h3 style={{ fontSize: '1.3rem', margin: '0 0 10px' }}>{t}</h3>
              <p style={{ fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.65 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Brand promise — held in the seal's inset frame, in oxblood on the light
         ground, so it reads as a distinct statement rather than more page copy. */}
      <section style={{ padding: '0 var(--gutter) var(--space-9)', maxWidth: '1560px', margin: '0 auto' }}>
        <div style={{ position: 'relative', border: '1px solid var(--oxblood)', padding: 'var(--space-8) var(--space-7)' }}>
          <span aria-hidden style={{ position: 'absolute', inset: '10px', pointerEvents: 'none', border: '1px solid var(--oxblood-30)' }}></span>
          <div style={{ position: 'relative', textAlign: 'center' }}>
          <Eyebrow>Our Promise</Eyebrow>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(1.45rem, 2.5vw, 2rem)', color: 'var(--oxblood)', margin: '18px auto 20px', maxWidth: '40ch', lineHeight: 1.35 }}>
            We will care about your home as a home, where friends and family gather, where memories are made and holidays celebrated. Not simply as a project.
          </p>
          <p style={{ fontSize: 'var(--fs-body)', color: 'var(--text-secondary)', maxWidth: '52ch', margin: '0 auto', lineHeight: 1.7 }}>
            Every recommendation considers the relationship between the people, the property, the design,
            the construction, and the investment.
          </p>
          </div>
        </div>
      </section>

      <InquiryBand eyebrow="Let's Talk" title="We'd like to hear about your home." />
    </div>
  );
}
window.AboutPage = AboutPage;
