/* global React, byKind, projBySlug, PIMG, CONTACT, pmono, TopoField, SiteNav, ContactBand, SiteFooter */
// About, Resume, and Contact — real content.

function AboutPage() {
  React.useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <div style={{ background:'var(--paper)', color:'var(--ink)', fontFamily:'var(--f-sans)' }}>
      <SiteNav active="about" />
      <section style={{ position:'relative', borderBottom:'1px solid var(--line)', overflow:'hidden' }}>
        <TopoField tone="paper" crop="right" opacity={0.45} />
        <div style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(56px,8vw,112px) var(--gutter)', display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:'clamp(32px,5vw,72px)', alignItems:'start' }} className="about-grid">
          <div>
            <span style={pmono({ color:'var(--accent)', letterSpacing:'0.22em', display:'inline-flex', alignItems:'center', gap:'12px' })}>
              <span style={{ width:'26px', height:'1px', background:'var(--accent)' }}></span>About
            </span>
            <h1 style={{ fontSize:'clamp(2.2rem,5vw,4rem)', fontWeight:800, letterSpacing:'-0.045em', lineHeight:0.95, margin:'0.3em 0 0' }}>
              Hello, I&rsquo;m Ben<span style={{ color:'var(--accent)' }}>.</span>
            </h1>
            <p style={{ ...pmono({ color:'var(--muted)', fontSize:'12px' }), marginTop:'16px', letterSpacing:'0.12em' }}>Architect · Licensed in Minnesota &amp; Arizona</p>
            <div style={{ marginTop:'28px', display:'grid', gap:'20px', maxWidth:'58ch' }}>
              {[
                'I\u2019m an architect, deeply inspired by creation, problem solving and the dynamic relationship between the built and natural environments. With a background in Landscape Architecture from Arizona State University and graduate study in Architecture at the University of Minnesota, I approach design with a multidisciplinary lens and a drive to explore how conceptual thinking can transform physical space.',
                'I\u2019m a self-motivated and detail-oriented professional with experience developing zoning ordinance design criteria, conducting comprehensive site analysis, and categorizing interior building functions. I\u2019m skilled in schematic development, materials selection and ensuring design integrity and buildability throughout the project lifecycle.',
                'My work spans institutional buildings, residential remodeling, design competitions and conceptual design explorations — all with the goal of producing thoughtful spaces. I thrive in collaborative settings, enjoy working across disciplines, and am always looking to build meaningful client relationships and contribute to innovative architectural solutions.',
              ].map((t, i) => <p key={i} style={{ margin:0, fontSize:'17px', lineHeight:1.65, color:'var(--ink-2)' }}>{t}</p>)}
            </div>
          </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>

      <section style={{ background:'var(--paper-2)', borderBottom:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(48px,6vw,88px) var(--gutter)' }}>
          <span style={pmono({ color:'var(--muted)' })}>How I work</span>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))', gap:'1px', background:'var(--line)', border:'1px solid var(--line)', marginTop:'28px' }}>
            {[
              ['01', 'Think across disciplines', 'A landscape-architecture foundation plus an architecture degree — I read site, landscape and building as one system.'],
              ['02', 'Resolve it to buildable', 'Schematic through documentation, with materials selection and detailing that protect design integrity and buildability.'],
              ['03', 'Carry it through the field', 'BIM coordination, RFIs, submittals and construction administration — keeping what we drew intact on site.'],
              ['04', 'Build it myself', 'On my own projects I pick up the tools. Designing and building by hand keeps me honest about how things actually go together.'],
            ].map(([num, t, d]) => (
              <div key={num} style={{ background:'var(--paper)', padding:'30px 26px' }}>
                <div style={{ fontFamily:'var(--f-mono)', color:'var(--accent)', fontSize:'14px', marginBottom:'14px' }}>{num}</div>
                <div style={{ fontWeight:700, fontSize:'16px', letterSpacing:'-0.01em', marginBottom:'10px' }}>{t}</div>
                <p style={{ margin:0, color:'var(--ink-2)', fontSize:'14px', lineHeight:1.55 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

// ── Resume ─────────────────────────────────────────────────────
function ResumePage() {
  React.useEffect(() => { window.scrollTo(0, 0); }, []);
  const summary = 'Registered Architect with 9+ years of experience delivering complex projects across the full lifecycle — from schematic design through construction administration and commissioning. Proven success as a Project Architect leading multidisciplinary teams, managing client relationships, and resolving technical and constructability challenges. Robust Revit expertise and a solid command of building codes, permitting and detailing, paired with clear communication that preserves design intent, schedule and project objectives.';
  const experience = [
    {
      firm:'Life Time Property Development', role:'Architect', date:'2021 — Current',
      types:'Athletic country clubs — fitness, café, salon/spa, child center and coworking.',
      bullets:[
        'Led and directed architectural project teams and external consultants through design, development and construction administration.',
        'Reviewed and processed submittals, RFIs and change-management documents with precision during construction administration.',
        'Created presentation drawings and rendered exhibits for governing agencies, landowners, architectural control committees and internal stakeholders — including the owner and CEO.',
        'Developed and maintained prototype details from industry best practices, ensuring consistent application across all active projects.',
      ],
    },
    {
      firm:'Noonan Construction', role:'Job Captain', date:'2020 — 2021',
      types:'Luxury residential remodels.',
      bullets:[
        'Managed job sites, overseeing daily activities of trade partners to hold schedules and scopes of work.',
        'Negotiated and resolved issues raised by inspectors and trade partners while maintaining high quality standards.',
        'Tracked completed work for payment and logged recordables and defects against daily deadlines.',
      ],
    },
    {
      firm:'The Opus Group', role:'Project Associate & Designer', date:'2017 — 2020',
      types:'Multi-family & mixed-use, senior and student housing, industrial, office, institutional and tenant improvements.',
      bullets:[
        'Developed zoning ordinance design criteria, ensuring compliance and identifying necessary variances.',
        'Conducted comprehensive site analysis — size, topography, vegetation, utilities and constraints — and analyzed interior building functions and adjacencies.',
        'Created schematic alternatives, led material selections and contributed unique specification aspects on assigned projects.',
        'Met regularly with clients and project managers to develop program and design criteria.',
      ],
    },
    {
      firm:'BKV Group', role:'Architectural Designer', date:'2015 — 2017',
      types:'Low-rise multi-family (affordable & market-rate), historic preservation, senior/student housing and corporate interiors.',
      bullets:[
        'Evaluated, selected and applied advanced architectural techniques and modifications to documentation, reports and specifications.',
        'Demonstrated proficiency in building sciences, code analysis and coordination of facility components for optimal system assembly.',
        'Operated with minimal supervision while carrying out architectural assignments.',
      ],
    },
  ];
  const edu = [
    ['Graduate Study, Architecture', 'University of Minnesota'],
    ['B.S. Landscape Architecture', 'Arizona State University'],
  ];
  const notable = [
    ['Life Time — Shenandoah', 'Shenandoah, TX · $100M', 'life-time'],
    ['Our Lady of Grace', 'Edina, MN', 'our-lady-of-grace'],
    ['Univ. of St. Thomas Residence Hall', 'St. Paul, MN', 'residence-hall'],
  ];
  const skills = ['Revit', 'AutoCAD', 'SketchUp', 'Rhinoceros', '3ds Max', 'V-Ray', 'Photoshop', 'Illustrator', 'InDesign', 'Bluebeam', 'Procore', 'MS Office'];
  const capabilities = ['Revit / BIM', 'SketchUp', 'Detailing', 'Construction Administration', 'Programming', 'Zoning & Code Analysis', 'Site Analysis', 'Materials Selection', 'Design-Build Delivery', 'Self-Performed Construction'];
  const creds = [['Registration', 'Registered Architect, AIA'], ['Licensed in', 'Minnesota & Arizona'], ['Experience', '9+ Years'], ['Sectors', 'Wellness · Higher-Ed · Residential']];

  return (
    <div style={{ background:'var(--paper)', color:'var(--ink)', fontFamily:'var(--f-sans)' }}>
      <SiteNav active="resume" />
      <section style={{ position:'relative', borderBottom:'1px solid var(--line)', overflow:'hidden' }}>
        <TopoField tone="paper" crop="right" opacity={0.5} />
        <div style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(48px,6vw,88px) var(--gutter)', display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:'clamp(32px,5vw,72px)', alignItems:'end' }} className="resume-grid">
          <div>
            <span style={pmono({ color:'var(--accent)', letterSpacing:'0.22em', display:'inline-flex', alignItems:'center', gap:'12px' })}>
              <span style={{ width:'26px', height:'1px', background:'var(--accent)' }}></span>Curriculum Vitae
            </span>
            <h1 style={{ fontSize:'clamp(2.2rem,5vw,4rem)', fontWeight:800, letterSpacing:'-0.045em', lineHeight:0.95, margin:'0.3em 0 0' }}>Benjamin Partridge</h1>
            <p style={{ marginTop:'16px', fontSize:'17px', color:'var(--ink-2)' }}>Registered Architect, AIA · Licensed in Minnesota &amp; Arizona</p>
          </div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:'12px' }}>
            <a href="Resume.html" target="_blank" rel="noopener" style={{ ...pmono({ fontSize:'12px' }), background:'var(--ink)', color:'var(--paper)', padding:'15px 22px', textDecoration:'none' }}>One-page resume ↗</a>
            <a href="#/contact" style={{ ...pmono({ fontSize:'12px', color:'var(--ink)' }), border:'1px solid var(--line-strong)', padding:'15px 22px', textDecoration:'none' }}>Contact</a>
          </div>
        </div>
      </section>

      <section style={{ background:'var(--paper-2)', borderBottom:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(28px,3vw,40px) var(--gutter)', display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(160px,1fr))', gap:'24px' }}>
          {creds.map(([k, v]) => (
            <div key={k}>
              <div style={pmono({ color:'var(--accent)', fontSize:'10px', marginBottom:'8px' })}>{k}</div>
              <div style={{ fontWeight:600, fontSize:'15px' }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ borderTop:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(44px,5vw,76px) var(--gutter)', display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:'clamp(40px,6vw,88px)', alignItems:'start' }} className="resume-grid">
          <div>
            <div style={pmono({ color:'var(--muted)', marginBottom:'8px' })}>Work Experience</div>
            {experience.map((job, i) => (
              <div key={i} style={{ padding:'26px 0', borderTop:'1px solid var(--line)' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', flexWrap:'wrap', gap:'8px' }}>
                  <div style={{ fontWeight:700, fontSize:'19px', letterSpacing:'-0.015em' }}>{job.firm}</div>
                  <div style={pmono({ color:'var(--accent)', fontSize:'11px' })}>{job.date}</div>
                </div>
                <div style={{ color:'var(--muted)', fontSize:'13px', marginTop:'4px', fontFamily:'var(--f-mono)', textTransform:'uppercase', letterSpacing:'0.08em' }}>{job.role}</div>
                <div style={{ color:'var(--muted)', fontSize:'14px', marginTop:'8px', fontStyle:'italic' }}>{job.types}</div>
                <ul style={{ listStyle:'none', margin:'16px 0 0', padding:0, display:'grid', gap:'9px' }}>
                  {job.bullets.map((b, j) => (
                    <li key={j} style={{ position:'relative', paddingLeft:'18px', fontSize:'15px', lineHeight:1.55, color:'var(--ink-2)', maxWidth:'58ch', textWrap:'pretty' }}>
                      <span style={{ position:'absolute', left:0, top:'9px', width:'5px', height:'5px', background:'var(--accent)' }}></span>{b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div style={{ display:'grid', gap:'40px' }}>
            <div>
              <div style={pmono({ color:'var(--muted)', marginBottom:'8px' })}>Notable Projects</div>
              {notable.map(([name, loc, slug], i) => {
                const num = String(i + 1).padStart(2, '0');
                const inner = (
                  <React.Fragment>
                    <span style={pmono({ color:'var(--accent)', fontSize:'11px', width:'22px', flexShrink:0, paddingTop:'1px' })}>{num}</span>
                    <span style={{ flex:1 }}>
                      <span style={{ display:'block', fontWeight:700, fontSize:'15px', letterSpacing:'-0.01em' }}>{name}</span>
                      <span style={{ display:'block', color:'var(--muted)', fontSize:'12px', marginTop:'3px', fontFamily:'var(--f-mono)' }}>{loc}</span>
                    </span>
                    {slug && <span aria-hidden="true" className="np-arrow" style={{ color:'var(--muted)', fontSize:'14px', alignSelf:'center', flexShrink:0, transition:'transform 0.2s ease' }}>→</span>}
                  </React.Fragment>
                );
                const base = { display:'flex', gap:'14px', alignItems:'flex-start', padding:'14px 0', borderTop:'1px solid var(--line)' };
                return slug ? (
                  <a key={name} href={`#/work/${slug}`} className="np-link" style={{ ...base, textDecoration:'none', color:'inherit' }}>{inner}</a>
                ) : (
                  <div key={name} style={base}>{inner}</div>
                );
              })}
            </div>
            <div>
              <div style={pmono({ color:'var(--muted)', marginBottom:'8px' })}>Education</div>
              {edu.map(([d, s]) => (
                <div key={d} style={{ padding:'18px 0', borderTop:'1px solid var(--line)' }}>
                  <div style={{ fontWeight:700, fontSize:'16px' }}>{d}</div>
                  <div style={{ color:'var(--muted)', fontSize:'13.5px', marginTop:'4px', fontFamily:'var(--f-mono)' }}>{s}</div>
                </div>
              ))}
            </div>
            <div>
              <div style={pmono({ color:'var(--muted)', marginBottom:'16px' })}>Software</div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:'8px' }}>
                {skills.map((s) => (
                  <span key={s} style={{ ...pmono({ fontSize:'10px', color:'var(--ink-2)' }), border:'1px solid var(--line-strong)', padding:'8px 12px' }}>{s}</span>
                ))}
              </div>
            </div>
            <div>
              <div style={pmono({ color:'var(--muted)', marginBottom:'16px' })}>Capabilities</div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:'8px' }}>
                {capabilities.map((s) => (
                  <span key={s} style={{ ...pmono({ fontSize:'10px', color:'var(--ink-2)' }), border:'1px solid var(--line-strong)', padding:'8px 12px' }}>{s}</span>
                ))}
              </div>
            </div>
            <div>
              <div style={pmono({ color:'var(--muted)', marginBottom:'12px' })}>Interests</div>
              <p style={{ margin:0, fontSize:'15px', lineHeight:1.6, color:'var(--ink-2)' }}>Travel · Fitness &amp; tennis · Technology · Entrepreneurship (patent pending) · Residential remodeling.</p>
            </div>
          </div>
        </div>
      </section>

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

// ── Contact ────────────────────────────────────────────────────
function ContactPage() {
  React.useEffect(() => { window.scrollTo(0, 0); }, []);
  const [sent, setSent] = React.useState(false);
  const field = { fontFamily:'var(--f-sans)', fontSize:'15px', padding:'14px 16px', background:'var(--paper)', border:'1px solid var(--line-strong)', color:'var(--ink)', width:'100%', borderRadius:0 };
  return (
    <div style={{ background:'var(--paper)', color:'var(--ink)', fontFamily:'var(--f-sans)', minHeight:'100vh' }}>
      <SiteNav active="contact" />
      <section>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'clamp(56px,8vw,112px) var(--gutter)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(40px,6vw,96px)', alignItems:'start' }} className="contact-grid">
          <div>
            <span style={pmono({ color:'var(--accent)', letterSpacing:'0.22em', display:'inline-flex', alignItems:'center', gap:'12px' })}>
              <span style={{ width:'26px', height:'1px', background:'var(--accent)' }}></span>Contact
            </span>
            <h1 style={{ fontSize:'clamp(2.2rem,5vw,4rem)', fontWeight:800, letterSpacing:'-0.045em', lineHeight:0.95, margin:'0.3em 0 0' }}>
              Let&rsquo;s talk<span style={{ color:'var(--accent)' }}>.</span>
            </h1>
            <p style={{ marginTop:'24px', fontSize:'17px', lineHeight:1.6, color:'var(--ink-2)', maxWidth:'42ch' }}>
              Open to architecture roles and design-build collaborations. The fastest way to reach me is email or a call.
            </p>
            <div style={{ display:'grid', gap:'26px', marginTop:'40px' }}>
              {[['Email', CONTACT.email, `mailto:${CONTACT.email}`], ['Phone', CONTACT.phone, CONTACT.phoneHref], ['Licensed in', CONTACT.locations, null]].map(([k, v, href]) => (
                <div key={k} style={{ paddingTop:'18px', borderTop:'1px solid var(--line)' }}>
                  <div style={pmono({ color:'var(--accent)', fontSize:'10px', marginBottom:'8px' })}>{k}</div>
                  {href ? <a href={href} style={{ fontWeight:600, fontSize:'17px', color:'var(--ink)', textDecoration:'none' }}>{v}</a> : <div style={{ fontWeight:600, fontSize:'17px' }}>{v}</div>}
                </div>
              ))}
            </div>
          </div>
          <div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', padding:'clamp(28px,3vw,44px)' }}>
            {sent ? (
              <div style={{ padding:'40px 0', textAlign:'center' }}>
                <div style={pmono({ color:'var(--accent)', marginBottom:'14px' })}>Message ready</div>
                <h3 style={{ fontSize:'1.6rem', fontWeight:700, letterSpacing:'-0.02em', margin:'0 0 12px' }}>Thanks — that&rsquo;s the idea.</h3>
                <p style={{ color:'var(--ink-2)', margin:'0 auto', maxWidth:'34ch', lineHeight:1.55 }}>This is a prototype, so nothing was actually sent. In production this routes straight to my inbox.</p>
                <button onClick={() => setSent(false)} style={{ ...pmono({ fontSize:'11px' }), marginTop:'24px', cursor:'pointer', background:'transparent', border:'1px solid var(--line-strong)', padding:'12px 20px', color:'var(--ink)' }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display:'grid', gap:'18px' }}>
                <div style={pmono({ color:'var(--muted)', marginBottom:'2px' })}>Send a message</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px' }}>
                  <label style={{ display:'grid', gap:'8px' }}><span style={pmono({ fontSize:'10px', color:'var(--ink-2)' })}>Name</span><input required style={field} placeholder="Your name" /></label>
                  <label style={{ display:'grid', gap:'8px' }}><span style={pmono({ fontSize:'10px', color:'var(--ink-2)' })}>Company</span><input style={field} placeholder="Optional" /></label>
                </div>
                <label style={{ display:'grid', gap:'8px' }}><span style={pmono({ fontSize:'10px', color:'var(--ink-2)' })}>Email</span><input required type="email" style={field} placeholder="you@email.com" /></label>
                <label style={{ display:'grid', gap:'8px' }}><span style={pmono({ fontSize:'10px', color:'var(--ink-2)' })}>What&rsquo;s on your mind?</span><textarea required rows="5" style={{ ...field, resize:'vertical' }} placeholder="Role, project, timeline…"></textarea></label>
                <button type="submit" style={{ ...pmono({ fontSize:'12px' }), background:'var(--accent)', color:'#fff', border:'none', padding:'16px', cursor:'pointer', marginTop:'4px' }}>Send message →</button>
              </form>
            )}
          </div>
        </div>
      </section>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { AboutPage, ResumePage, ContactPage });
