/* global React */

function About() {
  return (
    <section style={{ padding: "64px 0 96px", position: "relative" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "0 32px" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.95fr 1.15fr",
          gap: 72,
          alignItems: "start",
        }}>
          {/* sticky photo column with tape + handwritten label */}
          <div style={{ position: "sticky", top: 100 }}>
            <div style={{ position: "relative" }}>
              <Tape tone="marigold" rotate={-6} width={92} top={-14} left={32} opacity={0.65} />
              <Tape tone="tide" rotate={5} width={68} top={-10} right={40} opacity={0.55} />

              <div style={{
                borderRadius: 18,
                overflow: "hidden",
                transform: "rotate(-1.5deg)",
                boxShadow: "0 12px 28px rgba(42,33,24,0.16), 0 24px 48px rgba(91,134,179,0.18)",
                aspectRatio: "4/5",
              }}>
                <img
                  src="assets/jinx-color.jpg"
                  alt="jinx, in watercolor"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                />
              </div>

              {/* taped-on caption */}
              <div style={{
                marginTop: 22,
                background: "var(--paper)",
                padding: "14px 18px",
                borderRadius: 6,
                transform: "rotate(-1.5deg)",
                position: "relative",
                boxShadow: "0 4px 12px rgba(42,33,24,0.10)",
                maxWidth: 280,
                marginLeft: "auto",
                marginRight: "auto",
              }}>
                <Tape tone="cream" rotate={0} width={70} top={-12} left={104} opacity={0.85} />
                <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--marigold-700)", lineHeight: 1.2 }}>
                  jinx — watercolor, 2025
                </div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--ink-muted)", marginTop: 4, letterSpacing: "0.06em" }}>
                  watercolor + paint palette doodles
                </div>
              </div>
            </div>
          </div>

          {/* right column — the story */}
          <div style={{ position: "relative" }}>
            <Eyebrow>about</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: 72,
              color: "var(--ink)",
              margin: "12px 0 28px",
              letterSpacing: "-0.015em",
              lineHeight: 0.98,
              textWrap: "balance",
            }}>
              Hi, I'm Bárbara.
            </h2>

            <div style={{
              fontFamily: "var(--font-body)",
              fontSize: 18,
              color: "var(--ink-soft)",
              lineHeight: 1.7,
              display: "grid",
              gap: 18,
              maxWidth: 560,
            }}>
              <p style={{ margin: 0 }}>
                Hello! Art has always been something I loved, but growing up, I was encouraged to choose a more practical path. Even though my passion for creating never went away art keeps me grounded and at peace. So thank you for taking a look at my shop!
              </p>
            </div>

            {/* signature */}
            <div style={{ marginTop: 28, position: "relative" }}>
              <MarginNote rotate={-1.5} size={28} color="var(--marigold-700)" underline>
                — Bárbara, Owner
              </MarginNote>
            </div>

            {/* spec strip */}
            <div style={{
              marginTop: 48,
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 16,
              padding: 24,
              background: "var(--cream)",
              borderRadius: 18,
              border: "1px solid rgba(42,33,24,0.08)",
              position: "relative",
            }}>
              <Tape tone="blush" rotate={-7} width={80} top={-12} left={28} opacity={0.65} />
              {[
                { k: "tools",    v: "procreate · ipad · apple pencil" },
                { k: "day job",  v: "chemical & biological engineer" },
                { k: "delivery", v: "high-res digital file, worldwide" },
              ].map((row, i) => (
                <div key={i}>
                  <Eyebrow>{row.k}</Eyebrow>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink)", marginTop: 6, lineHeight: 1.45 }}>{row.v}</div>
                </div>
              ))}
            </div>

            {/* a glimpse into the process callout */}
            {/*
            <div style={{
              marginTop: 32,
              padding: 28,
              background: "var(--bg-warm, var(--blush))",
              borderRadius: 18,
              border: "1px solid rgba(232,128,31,0.18)",
              position: "relative",
            }}>
              <Eyebrow color="var(--marigold-800)">a note about the work</Eyebrow>
              <h3 style={{
                fontFamily: "var(--font-display)",
                fontSize: 30,
                color: "var(--ink)",
                margin: "10px 0 14px",
                letterSpacing: "-0.01em",
                lineHeight: 1.1,
              }}>
                A glimpse into the process behind the Penguin Crewneck and the brainstorming
              </h3>
              <div style={{ display: "grid", gap: 12, fontFamily: "var(--font-body)", fontSize: 16, color: "var(--ink-soft)", lineHeight: 1.6 }}>
                <p style={{ margin: 0 }}>
                  I work as a Chemical and Biological Engineer however whenever I have the time to sit back I always grab art to bring my anxious heart to peace.
                </p>
                <p style={{ margin: 0 }}>
                  This shop is a way of reviving my love for art and maybe motivating me to create more!
                </p>
              </div>
              <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Tag tone="marigold" dot>warm-led</Tag>
                <Tag tone="tide" dot>moonlit twin</Tag>
                <Tag tone="outline">hand-drawn</Tag>
              </div>
            </div>
            */}

            <div style={{ marginTop: 32, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              <Button variant="primary" icon="instagram">
                <a href="https://www.instagram.com/bahausart/" target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "none" }}>follow on instagram</a>
              </Button>
              <Button variant="secondary" icon="mail">say hi</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.About = About;