// dthas — About page. The studio's story, the founder, the facts, and the
// principles behind the work. Founder is named here (per the brand voice).
// Shares the design system, Section scaffolding, shared nav and the Footer.

const { Overline, Button } = window.DesignSystem_aa2f04;

function AboutReveal({ children }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div ref={ref} className="reveal">{children}</div>;
}

// Inverted page header — bookends with the footer.
function AboutHeader() {
  return (
    <header id="top" style={{
      background: 'var(--c-black)', color: 'var(--c-white)',
      borderBottom: '1px solid var(--c-line-invert)',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(56px, 10vh, 128px) var(--container-pad) clamp(48px, 8vh, 96px)',
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-overline)',
          letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase',
          color: 'var(--c-paper-500)', marginBottom: 'clamp(32px, 6vh, 72px)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
        }}>
          <span>About</span>
          <span>Den Haag</span>
        </div>

        <h1 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04,
          letterSpacing: '-0.04em', maxWidth: '18ch',
        }}>An independent studio, built around the work.</h1>

        <p style={{
          margin: 'clamp(28px, 5vh, 48px) 0 0', maxWidth: '52ch',
          fontSize: 'var(--fs-lead)', lineHeight: 1.45,
          letterSpacing: '-0.01em', color: 'var(--c-paper-700)',
        }}>
          dthas · design · technology hub and services. Software development first,
          consultancy in support.
        </p>
      </div>
    </header>
  );
}

// Narrative on the left, studio facts on the right — mirrors the landing About.
function AboutStudio() {
  const { Section } = window;
  const facts = [
    ['Studio', 'dthas · Den Haag, NL'],
    ['Founder', (
      <span key="p" style={{ display: 'inline-flex', alignItems: 'center', gap: '9px' }}>
        Deniz Tan Hasdemir
        <a href="https://www.linkedin.com/in/deniz-tan-hasdemir/" target="_blank" rel="noopener" aria-label="Deniz Tan Hasdemir on LinkedIn"
          style={{ display: 'inline-flex', color: 'var(--text-secondary)', transition: 'color var(--dur-base) var(--ease-out)' }}
          onMouseEnter={(e)=>e.currentTarget.style.color='var(--text-primary)'}
          onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-secondary)'}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
            <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.73v20.54C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .78 23.2 0 22.22 0z" />
          </svg>
        </a>
      </span>
    )],
    ['Background', 'TU Delft, Computer Science'],
    ['Discipline', 'Software development & consultancy'],
    ['Model', 'Independent, founder-led'],
    ['Availability', 'Select projects, 2026'],
  ];
  return (
    <Section id="studio">
      <div className="dthas-about" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 1fr)',
        gap: 'clamp(32px, 6vw, 96px)', alignItems: 'start',
      }}>
        <div>
          <Overline index="01">The studio</Overline>
          <div style={{ marginTop: '24px', display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '54ch' }}>
            <p style={{
              margin: 0, fontSize: 'clamp(1.25rem, 1.8vw, 1.625rem)', lineHeight: 1.45,
              letterSpacing: '-0.02em', color: 'var(--text-primary)',
            }}>
              dthas is a one-person software studio delivering tailored software and
              consultancy. Small by design: direct access to the person building the
              work, with the rigour of a much larger team.
            </p>
            <p style={{ margin: 0, fontSize: 'var(--fs-body)', lineHeight: 1.65, color: 'var(--text-secondary)' }}>
              The name stands for <em>design · technology hub and services</em>, and for
              the founder's initials. Engagements run end to end: architecture, back end,
              front end and deployment, or a focused slice of any of them. Clients range
              from early-stage products to established teams that need senior capacity
              without the headcount.
            </p>
            <p style={{ margin: 0, fontSize: 'var(--fs-body)', lineHeight: 1.65, color: 'var(--text-secondary)' }}>
              Work is judged by what runs in production, not by what is promised in a
              deck. Much of it ships under NDA; the discretion is part of the service.
            </p>
          </div>
        </div>
        <dl style={{ margin: 0, display: 'flex', flexDirection: 'column' }}>
          {facts.map(([k, v]) => (
            <div key={k} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              gap: '16px', padding: '18px 0', borderTop: '1px solid var(--border-hairline)',
            }}>
              <dt style={{
                fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
                letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-secondary)',
              }}>{k}</dt>
              <dd style={{ margin: 0, fontSize: 'var(--fs-small)', textAlign: 'right' }}>{v}</dd>
            </div>
          ))}
        </dl>
      </div>
      {/* reference image — full block width */}
      <div style={{ marginTop: 'clamp(28px, 4vh, 40px)', width: '100%', background: 'var(--c-white)', border: '1px solid var(--border-hairline)' }}>
        <img src="assets/images/denhaag.png" alt="Den Haag reference" style={{ width: '100%', height: 'auto', display: 'block' }} />
      </div>
    </Section>
  );
}

// How the studio works — numbered editorial principles.
function PrincipleRow({ index, title, body }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)',
      gap: 'clamp(24px, 5vw, 80px)', alignItems: 'start',
      padding: 'clamp(32px, 5vh, 64px) 0',
      borderTop: '1px solid var(--border-hairline)',
    }} className="dthas-svc-row">
      <div style={{ display: 'flex', alignItems: 'baseline', gap: '16px' }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-mono)',
          letterSpacing: 'var(--ls-mono)', color: 'var(--text-secondary)',
        }}>{index}</span>
        <h3 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h3)', lineHeight: 1.15, letterSpacing: '-0.02em',
        }}>{title}</h3>
      </div>
      <p style={{
        margin: 0, fontSize: 'var(--fs-lead)', lineHeight: 1.5,
        letterSpacing: '-0.01em', color: 'var(--text-secondary)', maxWidth: '52ch',
      }}>{body}</p>
    </div>
  );
}

function AboutPrinciples() {
  const { Section, SectionHead } = window;
  const principles = [
    { index: '01', title: 'Development first', body: 'Engineering leads every engagement. Design and consultancy strengthen the build. They never stand in for it.' },
    { index: '02', title: 'Direct access', body: 'You work with the person writing the code. No account layer, no hand-off, no telephone game between brief and build.' },
    { index: '03', title: 'Pragmatic by default', body: 'The stack fits the problem, not a trend. The right tool is the one that ships, scales and stays maintainable.' },
    { index: '04', title: 'Confidential by default', body: 'Most work ships under NDA. Clients are described by domain, never by name. Discretion is part of the service.' },
  ];
  return (
    <Section id="principles">
      <SectionHead
        index="02"
        eyebrow="How I work"
        title="Engineering-led, understated, in production."
        intro="A short set of principles that hold across every engagement."
      />
      <div>
        {principles.map((p) => (
          <AboutReveal key={p.index}><PrincipleRow {...p} /></AboutReveal>
        ))}
      </div>
    </Section>
  );
}

function AboutCTA() {
  const { Section } = window;
  return (
    <Section id="cta">
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) auto',
        gap: 'clamp(32px, 6vw, 96px)', alignItems: 'end',
      }} className="dthas-hero-foot">
        <h2 style={{
          margin: 0, fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04, letterSpacing: '-0.03em',
          maxWidth: '18ch',
        }}>Working with a studio of one. Backed like a team.</h2>
        <Button variant="primary" size="lg" withArrow as="a" href="contact.html">
          Start a project
        </Button>
      </div>
    </Section>
  );
}

function AboutPage() {
  return (
    <React.Fragment>
      <SiteNav current="about" />
      <AboutHeader />
      <main id="main-content" tabIndex={-1}>
        <AboutStudio />
        <AboutPrinciples />
        <AboutCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { AboutPage });