// About — studio statement + 3 people + stats + location

window.AtAbout = () => {
  const team = [
    {
      name: 'Edwin Guama',
      role: 'Founder · Full-stack',
      bio: 'Ten years building across the stack — backend, frontend, cloud. The generalist who goes deep where it counts.',
      init: 'EG',
      tone: '#A3BFFA',
    },
    {
      name: 'Krystal Czako',
      role: 'Front-end · AI systems',
      bio: 'Focuses on the visual side of things and the user experience. Designs interfaces that feel obvious in hindsight.',
      init: 'KC',
      tone: '#B4C6E4',
    },
    {
      name: 'Aurelia Zaldivar',
      role: 'Backend · Cloud · Automation',
      bio: 'Backend, cloud, automations. Makes sure everything works — and that the pieces connect properly to one another.',
      init: 'AZ',
      tone: '#9CB7D4',
    },
  ];

  return (
    <section id="about" style={{
      background: TC.boneSoft,
      padding: '140px 40px 120px',
      borderTop: `1px solid ${TC.line}`,
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 96, alignItems: 'start' }}>
          <div>
            <Eyebrow>§ 04 — Team</Eyebrow>
            <h2 style={{
              fontFamily: TC.serif, fontSize: 'clamp(48px, 6.2vw, 92px)',
              lineHeight: 0.96, letterSpacing: -2.2, fontWeight: 400,
              margin: '24px 0 0', color: TC.ink,
            }}>
              Three people,<br />
              <em style={{ color: TC.terraDeep }}>one desk.</em>
            </h2>
          </div>
          <div style={{ paddingTop: 24 }}>
            <p style={{
              fontFamily: TC.serif, fontSize: 28, lineHeight: 1.35,
              letterSpacing: -0.6, color: TC.ink, margin: '0 0 20px',
            }}>
              Guama.dev is a small, independent team in Los Angeles.
              We started in 2016 writing raw HTML, CSS, and JavaScript by hand —
              before layering in the tools and libraries we use today.
              The stack has grown; the <em style={{ color: TC.terraDeep }}>ethos</em> hasn't changed.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: TC.inkSoft, margin: 0, maxWidth: 540 }}>
              Work with one of us, and you're working with all of us.
              No account managers, no offshored teams. The person you meet on the
              first call is the person who writes your code.
            </p>
          </div>
        </div>

        {/* Team */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          marginBottom: 80,
        }}>
          {team.map((p) => (
            <div key={p.name} style={{
              background: TC.bone,
              border: `1px solid ${TC.line}`,
              borderRadius: 8,
              padding: '36px 32px 32px',
              position: 'relative',
              overflow: 'hidden',
            }}>
              {/* portrait placeholder */}
              <div style={{
                width: '100%', aspectRatio: '4 / 5',
                background: `linear-gradient(160deg, ${p.tone} 0%, ${TC.boneDeep} 80%)`,
                borderRadius: 4, marginBottom: 24,
                position: 'relative', overflow: 'hidden',
              }}>
                {/* stripes texture */}
                <div style={{
                  position: 'absolute', inset: 0,
                  backgroundImage: 'repeating-linear-gradient(45deg, rgba(26,22,18,0.04) 0 1px, transparent 1px 8px)',
                }} />
                <div style={{
                  position: 'absolute', inset: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <div style={{
                    fontFamily: TC.serif, fontSize: 96, fontStyle: 'italic',
                    color: 'rgba(26,22,18,0.22)', letterSpacing: -3,
                  }}>{p.init}</div>
                </div>
                <div style={{
                  position: 'absolute', bottom: 14, left: 16, right: 16,
                  fontFamily: TC.mono, fontSize: 9, letterSpacing: 1.5,
                  color: 'rgba(26,22,18,0.5)', textTransform: 'uppercase',
                  display: 'flex', justifyContent: 'space-between',
                }}>
                  <span>PORTRAIT · TBD</span>
                  <span>35mm · 2025</span>
                </div>
              </div>
              <div style={{
                fontFamily: TC.mono, fontSize: 10, color: TC.terra,
                letterSpacing: 2, textTransform: 'uppercase', marginBottom: 8,
              }}>
                {p.role}
              </div>
              <div style={{
                fontFamily: TC.serif, fontSize: 32, letterSpacing: -0.8,
                color: TC.ink, marginBottom: 10, lineHeight: 1.05,
              }}>
                {p.name}
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: TC.inkSoft, margin: 0 }}>
                {p.bio}
              </p>
            </div>
          ))}
        </div>

        {/* Location + credo strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
          gap: 40, paddingTop: 40,
          borderTop: `1px solid ${TC.line}`,
        }}>
          {[
            ['Where', 'Los Angeles, CA\nCalifornia'],
            ['Hours', 'Mon\u2013Fri \u00b7 9\u20136 PT\nOn-call for clients'],
            ['Favorite tech', 'React \u00b7 n8n\nPostgres \u00b7 Claude'],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{
                fontFamily: TC.mono, fontSize: 10, color: TC.mute,
                letterSpacing: 2, textTransform: 'uppercase', marginBottom: 10,
              }}>
                {k}
              </div>
              <div style={{
                fontFamily: TC.serif, fontSize: 22, lineHeight: 1.3,
                color: TC.ink, whiteSpace: 'pre-line', letterSpacing: -0.3,
              }}>
                {v}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};