/* global React, byKind, projBySlug, pmono, SiteNav, ContactBand, SiteFooter, PIMG */
// Home — real positioning: an architect who designs, details and builds.

function HomePage() {
  React.useEffect(() => {window.scrollTo(0, 0);}, []);
  const pro = byKind('Professional');
  return (
    <div style={{ background: 'var(--paper)', color: 'var(--ink)', fontFamily: 'var(--f-sans)' }}>
      <SiteNav active="home" />

      {/* HERO */}
      <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: 'clamp(64px,9vw,128px) var(--gutter) clamp(48px,6vw,80px)' }}>
        <span style={pmono({ color: 'var(--accent)', letterSpacing: '0.22em', display: 'inline-flex', alignItems: 'center', gap: '12px', fontSize: '12px' })}>
          <span style={{ width: '26px', height: '1px', background: 'var(--accent)' }}></span>Registered Architect · Licensed in MN &amp; AZ
        </span>
        <h1 style={{ fontSize: 'clamp(2.6rem,8vw,6.6rem)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.9, margin: '0.3em 0 0' }}>
          Always Learning.<br />Always Building.<br /><span style={{ color: 'var(--muted)' }}>What's</span> Next<span style={{ color: 'var(--accent)' }}>?</span>
        </h1>
        <p style={{ maxWidth: '60ch', marginTop: '32px', fontSize: 'clamp(1.05rem,1.6vw,1.3rem)', lineHeight: 1.55, color: 'var(--ink-2)' }}>
          I&rsquo;m Ben Partridge — an architect working across institutional-scale projects and hands-on remodels. A multidisciplinary background in landscape architecture and architecture, a love of detail, and a willingness to pick up the tools myself.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '14px', marginTop: '40px' }}>
          <a href="#/work" style={{ ...pmono({ fontSize: '12px' }), background: 'var(--ink)', color: 'var(--paper)', padding: '16px 28px', textDecoration: 'none' }}>View selected work →</a>
          <a href="#/about" style={{ ...pmono({ fontSize: '12px' }), border: '1px solid var(--line-strong)', color: 'var(--ink)', padding: '16px 28px', textDecoration: 'none' }}>About me</a>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '48px', marginTop: '56px', paddingTop: '28px', borderTop: '1px solid var(--line)' }}>
          {[['Built work', '1M+ SF'], ['Disciplines', 'Architecture'], ['Delivery', 'Design-Build · Design, Bid, Build'], ['Based in', 'Minnesota & Arizona']].map(([k, v]) =>
          <div key={k}>
              <div style={pmono({ color: 'var(--muted)', fontSize: '10px', marginBottom: '8px' })}>{k}</div>
              <div style={{ fontWeight: 600, fontSize: '17px' }}>{v}</div>
            </div>
          )}
        </div>
      </section>

      {/* SELECTED PROFESSIONAL WORK — editorial index */}
      <section style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '28px 0 20px' }}>
            <span style={pmono({ color: 'var(--muted)' })}>NOTABLE PROJECTS</span>
            <span style={pmono({ color: 'var(--muted)' })}>Opus · Life Time</span>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {pro.map((p) =>
          <a key={p.slug} href={`#/work/${p.slug}`} className="work-row" style={{ display: 'block', textDecoration: 'none', color: 'var(--ink)', borderBottom: '1px solid var(--line)' }}>
              <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '22px var(--gutter)', display: 'grid', gridTemplateColumns: '44px 132px 1fr auto', gap: '28px', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--f-mono)', color: 'var(--accent)', fontSize: '15px' }}>{p.n}</span>
                <div className="work-thumb" style={{ width: '132px', height: '92px', overflow: 'hidden', background: 'var(--ink)' }}>
                  <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s cubic-bezier(.2,.7,.3,1)' }} />
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 'clamp(1.1rem,2vw,1.5rem)', letterSpacing: '-0.02em' }}>{p.name}</div>
                  <div style={pmono({ color: 'var(--muted)', fontSize: '10.5px', marginTop: '8px' })}>{p.details[0][1]} · {p.details[1][1]} · {p.details[2][1]}</div>
                </div>
                <span style={{ ...pmono({ color: 'var(--muted)', fontSize: '11px' }), display: 'flex', alignItems: 'center', gap: '10px' }} className="work-arrow">
                  {p.details[3][1]}<span style={{ color: 'var(--accent)' }}>→</span>
                </span>
              </div>
            </a>
          )}
        </div>
        <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '26px var(--gutter)' }}>
          <a href="#/work" style={pmono({ color: 'var(--accent)', fontSize: '12px', textDecoration: 'none' })}>See all work — personal remodels &amp; academic →</a>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section style={{ background: 'var(--paper-2)', borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: 'clamp(48px,6vw,84px) var(--gutter)' }}>
          <span style={pmono({ color: 'var(--muted)' })}>What I bring to a team</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: '1px', background: 'var(--line)', border: '1px solid var(--line)', marginTop: '28px' }}>
            {[
            ['Pre-design & programming', 'Site feasibility, zoning, and interior building functions translated into a program that holds up.'],
            ['BIM & documentation', 'Revit models that coordinate architecture, structure and MEP — and produce accurate, buildable construction documents.'],
            ['Construction administration', 'RFIs, submittals, field observation and closeout. I keep what we drew intact through the field.'],
            ['Design-build', 'From institutional design-build to remodels I build with my own hands — I understand the work because I do it.']].
            map(([t, d]) =>
            <div key={t} style={{ background: 'var(--paper)', padding: '30px 28px' }}>
                <div style={{ fontWeight: 700, fontSize: '17px', letterSpacing: '-0.01em', marginBottom: '10px' }}>{t}</div>
                <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: '14.5px', lineHeight: 1.55 }}>{d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ABOUT teaser */}
      <section style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: 'clamp(48px,7vw,96px) var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="about-teaser">
          <div>
            <span style={pmono({ color: 'var(--accent)' })}>About</span>
            <h2 style={{ fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '18px 0 0' }}>Architect &
Problem-solver. 
            </h2>
            <p style={{ marginTop: '22px', fontSize: '17px', lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: '46ch' }}>
              Deeply inspired by the relationship between the built and natural environments — with a multidisciplinary lens and a drive to explore how conceptual thinking can transform physical space.
            </p>
            <a href="#/about" style={{ ...pmono({ color: 'var(--accent)', fontSize: '12px', textDecoration: 'none' }), display: 'inline-block', marginTop: '26px' }}>More about how I work →</a>
          </div>
          <div style={{ aspectRatio: '4 / 5', overflow: 'hidden', background: 'var(--ink)' }}>
            <img src={PIMG.portrait} alt="Benjamin Partridge" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        </div>
      </section>

      <ContactBand />
      <SiteFooter />
    </div>);

}

Object.assign(window, { HomePage });