/* global React */
const { useState: abS } = React;

function AboutSection() {
  const I = window.IMAGES || {};

  const stats = [
    ['024', 'Spaces published'],
    ['11', 'Studios worldwide'],
    ['97k', 'Visitors / month'],
    ['2.4M', 'Sq ft rendered'],
  ];

  const benefits = [
    ['No install', 'Opens in any browser. No SDK, no app store, no friction between curiosity and walking the room.'],
    ['Hand modelled', 'Every space is built by a human, lit by a human, walked through and revised by a human — not generated.'],
    ['Decision speed', 'Compare three palettes in a minute. Save the version. Send the link. Get a yes by Friday.'],
    ['Private by default', 'Spaces are unlisted; password gates available per project. Your client list stays your client list.'],
  ];

  return (
    <section id="about" style={{ padding: '160px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px' }}>

        {/* Section tag */}
        <FadeUp>
          <span className="section-tag">— 04 / About</span>
        </FadeUp>

        {/* Headline */}
        <div style={{ marginTop: 48, marginBottom: 80 }}>
          <h2 className="serif kerning-tight" style={{ fontSize: 'clamp(48px, 7vw, 120px)', lineHeight: 0.92 }}>
            <Reveal text="A studio for" />
            <br />
            <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>
              <Reveal text="rooms not yet" baseDelay={0.2} />
            </span>
            <br />
            <Reveal text="standing." baseDelay={0.4} />
          </h2>
        </div>

        {/* Stats row */}
        <FadeUp delay={0.15}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 0,
            background: '#15140F',
            borderRadius: 16,
            overflow: 'hidden',
            marginBottom: 100,
          }}>
            {stats.map(([n, l], i) => (
              <div key={i} style={{
                padding: '48px 36px',
                borderRight: i < 3 ? '1px solid rgba(239,234,224,0.08)' : 'none',
              }}>
                <div className="serif" style={{ fontSize: 'clamp(44px, 4.5vw, 72px)', lineHeight: 1, marginBottom: 12, color: '#EFEAE0' }}>{n}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)' }}>{l}</div>
              </div>
            ))}
          </div>
        </FadeUp>

        {/* Two-column: text + image */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
          marginBottom: 100,
        }}>
          {/* Left: text */}
          <div>
            <FadeUp delay={0.2}>
              <p style={{ fontSize: 17, lineHeight: 1.8, color: 'var(--ink-mid)', marginBottom: 28, maxWidth: 520 }}>
                Aura was founded in 2025 by a quiet group of architects, photographers and engineers who got tired of arguing over flat renderings. We build spaces you can walk through, before they exist — at the speed a client can change their mind.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.8, color: 'var(--ink-mid)', maxWidth: 520 }}>
                Today the studio works with twenty-four practices across three continents. We render, walk, revise — then build only what survived the walking.
              </p>
            </FadeUp>

            <FadeUp delay={0.3}>
              <div style={{ marginTop: 48, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <Magnetic strength={0.25}>
                  <a href="/latest/experience.html" className="btn-primary">Step Inside a Space ↗</a>
                </Magnetic>
                <Magnetic strength={0.25}>
                  <a href="mailto:auraworld4u@gmail.com" className="btn-ghost">Work with us</a>
                </Magnetic>
              </div>
            </FadeUp>
          </div>

          {/* Right: image */}
          <FadeUp delay={0.25}>
            <div className="about-frame" style={{ aspectRatio: '4/5' }}>
              <div className="placeholder ph-bone" style={{ '--img': `url(${I.studioTeam})` }}>
                <span>Studio · AURA WORLD 4U</span>
              </div>
            </div>
          </FadeUp>
        </div>

        {/* Benefits grid 2×2 */}
        <FadeUp delay={0.1}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 2,
            background: 'rgba(21,20,15,0.12)',
            borderRadius: 16,
            overflow: 'hidden',
            marginBottom: 80,
          }}>
            {benefits.map(([t, d], i) => (
              <div key={i} style={{
                padding: '48px 40px',
                background: '#15140F',
              }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, marginBottom: 20 }}>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)', paddingTop: 6, flexShrink: 0 }}>
                    0{i + 1}
                  </span>
                  <div className="serif" style={{ fontSize: 'clamp(22px, 2vw, 32px)', lineHeight: 1.1, color: '#EFEAE0' }}>{t}</div>
                </div>
                <p style={{ fontSize: 14, color: 'rgba(239,234,224,0.55)', lineHeight: 1.7, maxWidth: 400 }}>{d}</p>
              </div>
            ))}
          </div>
        </FadeUp>

        {/* Contact block */}
        <FadeUp delay={0.2}>
          <div style={{ borderTop: '1px solid var(--line)', paddingTop: 60 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-mid)', marginBottom: 40 }}>
              — Direct Line
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <a href="tel:+919392445678" style={{
                display: 'flex', flexDirection: 'column', gap: 12,
                padding: '40px 36px',
                borderRadius: 12,
                textDecoration: 'none',
                transition: 'background .3s',
                background: '#15140F',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = '#1f1e17'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#15140F'; }}
              >
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)' }}>Phone ↗</span>
                <span className="serif" style={{ fontSize: 'clamp(24px, 2.5vw, 40px)', lineHeight: 1, color: '#EFEAE0', letterSpacing: '-0.02em' }}>+91 93924 45678</span>
              </a>
              <a href="mailto:auraworld4u@gmail.com" style={{
                display: 'flex', flexDirection: 'column', gap: 12,
                padding: '40px 36px',
                borderRadius: 12,
                textDecoration: 'none',
                transition: 'background .3s',
                background: '#15140F',
              }}
              onMouseEnter={e => { e.currentTarget.style.background = '#1f1e17'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#15140F'; }}
              >
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)' }}>Email ↗</span>
                <span className="serif" style={{ fontSize: 'clamp(20px, 2vw, 32px)', lineHeight: 1, color: '#EFEAE0', letterSpacing: '-0.02em' }}>auraworld4u@gmail.com</span>
              </a>
            </div>
          </div>
        </FadeUp>

      </div>
    </section>
  );
}

window.AboutSection = AboutSection;