/* About — magazine-style team layout, vibrant tints */

function About() {
  const team = [
    {
      name: "Sonal",
      role: "Engineering, hosting & reliability",
      bio: "Ten years building and operating production systems at Amazon Web Services and Red Hat. Sonal handles the parts of a website that should never break - hosting, backups, security, and the bits behind the scenes that keep your site online while you sleep.",
      meta: [
        { label: "Based in", value: "Dublin, Ireland" },
        { label: "Background", value: "AWS · Red Hat · Kubernetes" },
        { label: "Focus", value: "Reliability · hosting · operations" },
      ],
      photo: "about-sonal.png",
      tint: "#0F8C5F",
      soft: "#DCFCE7",
    },
    {
      name: "Shatadru",
      role: "Design, front-end & systems",
      bio: "Cloud infrastructure engineer with 12 years of building systems that don't break. By day he designs Kubernetes platforms at Workday. For your website, he brings that same engineering discipline - fast, clean, and built to last.",
      bio2: "Works closely with you on tone, photography, and the structure that helps customers find what they need.",
      meta: [
        { label: "Portfolio", value: "shatadru.in", link: "https://shatadru.in" },
        { label: "Background", value: "Workday · Kubernetes · Cloud platforms" },
        { label: "Focus", value: "Web design · front-end" },
      ],
      photo: "about-shatadru.png",
      tint: "#E68A19",
      soft: "#FEF3C7",
    },
  ];

  return (
    <section id="about" className="about">
      <div className="container">
        <div className="section-head" style={{textAlign: "center", maxWidth: 680, margin: "0 auto 40px"}}>
          <span className="eyebrow">The studio</span>
          <h2 style={{fontSize: "clamp(28px, 3.4vw, 42px)", margin: "10px 0 14px"}}>
            A <span className="h-accent">two-person</span> studio.
          </h2>
          <p className="lead" style={{margin: "0 auto", fontSize: "15.5px", maxWidth: 560}}>
            Engineers by trade. We design, build, and look after websites for small businesses across Ireland and the EU.
          </p>
        </div>

        <div className="about-team">
          {team.map((m, i) => (
            <article
              key={m.name}
              className="about-card"
              style={{"--about-tint": m.tint, "--about-soft": m.soft}}
            >
              <div className="about-card-photo-wrap">
                <div className="about-card-tint" />
                <div className="about-card-photo" style={{backgroundImage: `url(${m.photo})`}} />
                <span className="about-card-badge">0{i + 1}</span>
              </div>
              <div className="about-card-text">
                <div className="about-card-name-row">
                  <span className="about-card-name">{m.name}</span>
                  <span className="about-card-role">{m.role}</span>
                </div>
                <p>{m.bio}</p>
                {m.bio2 && <p>{m.bio2}</p>}
                <dl className="about-card-meta">
                  {m.meta.map(d => (
                    <div key={d.label} className="about-meta-row">
                      <dt>{d.label}</dt>
                      <dd>
                        {d.link
                          ? <a href={d.link} target="_blank" rel="noopener">{d.value} <i data-lucide="arrow-up-right" style={{width:13, height:13, strokeWidth: 2, marginLeft: 2}}></i></a>
                          : d.value}
                      </dd>
                    </div>
                  ))}
                </dl>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .about { background: var(--paper); padding-top: 64px; padding-bottom: 64px; }
        @media (max-width: 760px) { .about { padding-top: 48px; padding-bottom: 48px; } }

        .about-team {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          max-width: 1040px;
          margin: 0 auto;
        }
        @media (max-width: 880px) { .about-team { grid-template-columns: 1fr; gap: 16px; max-width: 560px; } }

        .about-card {
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          padding: 22px;
          display: grid;
          grid-template-columns: 120px 1fr;
          gap: 20px;
          align-items: stretch;
          box-shadow: 0 2px 8px rgba(20,20,20,0.04);
          position: relative;
          overflow: hidden;
          transition: transform var(--dur-base) var(--ease-out-soft),
                      box-shadow var(--dur-base) var(--ease-out-soft),
                      border-color var(--dur-base) var(--ease-out-soft);
        }
        @media (max-width: 560px) {
          .about-card { grid-template-columns: 100px 1fr; gap: 16px; padding: 18px; }
        }
        @media (max-width: 420px) {
          .about-card { grid-template-columns: 1fr; }
          .about-card-photo-wrap { aspect-ratio: 16 / 11 !important; max-width: 240px; }
        }
        .about-card::before {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: var(--about-tint);
        }
        .about-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 16px 32px rgba(20,20,20,0.08);
          border-color: color-mix(in srgb, var(--about-tint) 30%, var(--border));
        }

        /* ----- Photo — compact square ----- */
        .about-card-photo-wrap {
          position: relative;
          aspect-ratio: 1 / 1;
          border-radius: var(--r-md);
          overflow: hidden;
          background: var(--about-soft);
          align-self: start;
        }
        @media (max-width: 600px) { .about-card-photo-wrap { aspect-ratio: 4 / 3; } }
        .about-card-tint {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(120% 80% at 80% 20%, color-mix(in srgb, var(--about-tint) 22%, transparent) 0%, transparent 65%);
          z-index: 1;
          pointer-events: none;
        }
        .about-card-photo {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          transition: transform var(--dur-slow) var(--ease-out-soft);
        }
        .about-card:hover .about-card-photo { transform: scale(1.04); }
        .about-card-badge {
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 2;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          line-height: 1;
          letter-spacing: -0.02em;
          color: var(--paper);
          background: var(--about-tint);
          padding: 6px 10px;
          border-radius: 999px;
          box-shadow: 0 3px 10px rgba(20,20,20,0.15);
        }

        /* ----- Text ----- */
        .about-card-text {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .about-card-name-row {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 6px;
          margin-bottom: 4px;
        }
        .about-card-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(22px, 3.2vw, 30px);
          line-height: 1;
          color: var(--ink);
          letter-spacing: -0.03em;
        }
        .about-card-role {
          font-family: var(--font-body);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--about-tint);
        }
        .about-card-text p {
          font-family: var(--font-body);
          font-size: 14px;
          line-height: 1.55;
          color: var(--ink-soft);
          margin: 0;
        }

        .about-card-meta {
          margin: 6px 0 0;
          padding: 12px 0 0;
          border-top: 1px solid var(--border);
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        .about-meta-row {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 14px;
        }
        .about-meta-row dt {
          font-family: var(--font-body);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--ink-mute);
          margin: 0;
        }
        .about-meta-row dd {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 600;
          color: var(--ink);
          margin: 0;
          text-align: right;
        }
        .about-meta-row dd a {
          color: var(--about-tint);
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 2px;
        }
        .about-meta-row dd a:hover {
          text-decoration: underline;
        }
      `}</style>
    </section>
  );
}

window.About = About;