// AboutPage.jsx — Anika Williams Design

function AboutPage({ onNavigate }) {
  return (
    <div style={{ background: '#000', minHeight: '100vh', paddingTop: 68 }}>

      {/* Hero — full-bleed text + photo placeholder */}
      <section style={{
        position: 'relative', width: '100%',
        minHeight: '70vh',
        display: 'flex', alignItems: 'flex-end',
        overflow: 'hidden',
        background: '#050505'
      }}>
        {/* Background figure */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(160deg, #080808 0%, #161616 40%, #0a0a0a 100%)'
        }} />
        <img src="https://picsum.photos/seed/aw-portrait/1200/900?grayscale"
        alt="Anika Williams — portrait of the designer and creative director of Anika Williams Design studio, San Francisco and Los Angeles" style={{
          position: 'absolute', right: 0, top: 0,
          width: '55%', height: '100%', objectFit: 'cover',
          opacity: 0.55
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to right, #000 25%, transparent 75%)',
          zIndex: 1
        }} />
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: 200,
          background: 'linear-gradient(to top, #000 0%, transparent 100%)',
          zIndex: 2
        }} />
        {/* Content */}
        <div style={{ position: 'relative', zIndex: 3, padding: '0 56px 80px', maxWidth: 800 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 20
          }}>About</div>
          <h1 style={{
            fontFamily: "'sedgwick-ave-display', sans-serif",
            fontSize: 'clamp(48px, 7vw, 96px)', fontWeight: 400,
            letterSpacing: '3px', textTransform: 'uppercase',
            color: '#F2EADB', lineHeight: 1.0, margin: '0 0 24px'
          }}>Anika<br />Williams</h1>
          <p style={{
            fontFamily: "'EB Garamond', serif",
            fontSize: 18, lineHeight: 1.7, color: '#cccccc',
            maxWidth: 560
          }}>
            Designer, art director, and visual strategist — working at the intersection of brand identity, editorial design, and spatial experience.
          </p>
        </div>
      </section>

      {/* Bio section */}
      <section style={{ padding: '120px 56px', borderTop: '1px solid #262626' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          <div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
              color: '#444', marginBottom: 32
            }}>01 — PAST</div>
            <p style={{
              fontFamily: "'EB Garamond', serif",
              fontSize: 17, lineHeight: 1.8, color: '#cccccc', marginBottom: 24
            }}>
              Anika Williams Design is an independent design studio founded in Washington D.C. in 2019. The studio operates across brand identity, print, spatial, and digital disciplines — producing work that is precise, considered, and built to endure.
            </p>
            <p style={{
              fontFamily: "'EB Garamond', serif",
              fontSize: 17, lineHeight: 1.8, color: '#888'
            }}>Always in the mood to take on a new project, particularly in t
-i want to wrap a car
-i want to make a </p>
          </div>
          <div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
              color: '#444', marginBottom: 32
            }}>02 — PRESENT</div>
            <p style={{
              fontFamily: "'EB Garamond', serif",
              fontSize: 17, lineHeight: 1.8, color: '#cccccc', marginBottom: 24
            }}>
              Informed by the austere precision of Bugatti's visual language — where performance is self-evident, never announced — the studio believes that restraint is the highest form of design confidence.
            </p>
            <p style={{
              fontFamily: "'EB Garamond', serif",
              fontSize: 17, lineHeight: 1.8, color: '#888'
            }}>

            </p>
          </div>
        </div>
      </section>

      {/* Credentials */}
      <section style={{ padding: '0 56px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 48
          }}>03 — FUTURE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, background: '#262626' }}>
            {[
            { label: 'Founded', value: '2019', sub: 'Washington D.C.' },
            { label: 'Disciplines', value: '06', sub: 'Brand · Print · Space · Digital · Type · Motion' },
            { label: 'Commissions', value: '80+', sub: 'Across four continents' },
            { label: 'Education', value: 'MFA', sub: 'Visual Communication' },
            { label: 'Recognition', value: '12', sub: 'Awards & shortlistings' },
            { label: 'Clients', value: 'Private', sub: 'By referral and commission only' }].
            map((c) =>
            <CredCell key={c.label} data={c} />
            )}
          </div>
        </div>
      </section>

      {/* Experience timeline */}
      <section style={{ padding: '0 56px 120px', borderTop: '1px solid #262626' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', paddingTop: 80 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 48
          }}>04 — Experience</div>
          {[
          { year: '2019 — Present', role: 'Principal Designer', org: 'Anika Williams Design', desc: 'Independent studio practice spanning identity, print, spatial, and digital.' },
          { year: '2016 — 2019', role: 'Senior Designer', org: 'Bureau Studio, New York', desc: 'Led brand identity and editorial commissions for cultural and luxury clients.' },
          { year: '2014 — 2016', role: 'Designer', org: 'Pentagram Design', desc: 'Contributed to identity, wayfinding, and publication design projects.' },
          { year: '2012 — 2014', role: 'MFA Visual Communication', org: 'Yale School of Art', desc: 'Graduate study in typography, eitorial, and visual systems.' }].
          map((item, i) =>
          <TimelineRow key={i} item={item} />
          )}
        </div>
      </section>

      {/* Clients */}
      <section style={{ padding: '0 56px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 48
          }}>05 — Selected Clients</div>
          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 1,
            background: '#262626'
          }}>
            {[
            'Cultural Institution A', 'Luxury Brand B', 'Publisher C',
            'Tech Studio D', 'Museum E', 'Fashion House F',
            'Film Studio G', 'Architecture Firm H', 'Foundation I'].
            map((c) =>
            <div key={c} style={{
              background: '#000', padding: '20px 28px',
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#555', flex: '1 1 200px'
            }}>{c}</div>
            )}
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <section style={{
        padding: '120px 56px',
        background: '#0d0d0d', borderTop: '1px solid #262626', borderBottom: '1px solid #262626'
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 24
          }}>06 — New Commissions</div>
          <h2 style={{
            fontFamily: "'sedgwick-ave-display', sans-serif",
            fontSize: 'clamp(32px, 5vw, 64px)', fontWeight: 400,
            letterSpacing: '3px', textTransform: 'uppercase',
            color: '#F2EADB', lineHeight: 1.1, marginBottom: 24
          }}>Available for Select Work</h2>
          <p style={{
            fontFamily: "'EB Garamond', serif",
            fontSize: 17, lineHeight: 1.7, color: '#888',
            maxWidth: 480, margin: '0 auto 48px'
          }}>
            The studio accepts a limited number of new commissions each year. Inquiries are welcomed from clients who share a commitment to rigorous, enduring design.
          </p>
          <ContactForm />
        </div>
      </section>

      <AWFooter onNavigate={onNavigate} />
    </div>);

}

function CredCell({ data }) {
  return (
    <div style={{ background: '#000', padding: '36px 32px' }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
        color: '#444', marginBottom: 12
      }}>{data.label}</div>
      <div style={{
        fontFamily: "'sedgwick-ave-display', sans-serif",
        fontSize: 40, fontWeight: 400, letterSpacing: '2px',
        textTransform: 'uppercase', color: '#F2EADB', lineHeight: 1.0, marginBottom: 8
      }}>{data.value}</div>
      <div style={{
        fontFamily: "'EB Garamond', serif",
        fontSize: 13, lineHeight: 1.5, color: '#555'
      }}>{data.sub}</div>
    </div>);

}

function TimelineRow({ item }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        display: 'grid', gridTemplateColumns: '200px 1fr 1fr',
        gap: 40, padding: '28px 0',
        borderBottom: '1px solid #262626',
        background: hov ? '#0d0d0d' : 'transparent',
        transition: 'background 200ms'
      }}>
      
      <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
        color: '#555', paddingTop: 4
      }}>{item.year}</div>
      <div>
        <div style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 22, fontWeight: 400, letterSpacing: '1.5px',
          textTransform: 'uppercase', color: '#F2EADB', marginBottom: 4
        }}>{item.role}</div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#555'
        }}>{item.org}</div>
      </div>
      <div style={{
        fontFamily: "'EB Garamond', serif",
        fontSize: 15, lineHeight: 1.6, color: '#666'
      }}>{item.desc}</div>
    </div>);

}

function ContactForm() {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [hov, setHov] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
  };

  if (sent) {
    return (
      <div style={{ padding: '40px 0' }}>
        <div style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 28, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#F2EADB', marginBottom: 12
        }}>Inquiry Received</div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#555'
        }}>We will be in touch within 5 business days.</div>
      </div>);

  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 480, margin: '0 auto', textAlign: 'left' }}>
      {['name', 'email', 'message'].map((field) =>
      <div key={field} style={{ marginBottom: 24 }}>
          <input
          type={field === 'email' ? 'email' : 'text'}
          placeholder={field.charAt(0).toUpperCase() + field.slice(1)}
          value={form[field]}
          onChange={(e) => setForm((prev) => ({ ...prev, [field]: e.target.value }))}
          style={{
            width: '100%',
            background: 'transparent',
            border: 'none', borderBottom: '1px solid #3a3a3a',
            color: '#e6e6e6',
            fontFamily: "'EB Garamond', serif",
            fontSize: 16, padding: '12px 0', outline: 'none',
            transition: 'border-color 200ms',
            minHeight: field === 'message' ? 80 : 44,
            resize: 'none',
            display: 'block'
          }}
          onFocus={(e) => e.target.style.borderColor = '#F2EADB'}
          onBlur={(e) => e.target.style.borderColor = '#3a3a3a'} />
        
        </div>
      )}
      <button type="submit"
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? '#F2EADB' : 'transparent',
        color: hov ? '#000' : '#F2EADB',
        border: '1px solid #F2EADB', borderRadius: 9999,
        padding: '13px 40px', minHeight: 44, width: '100%',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12, letterSpacing: '3px', textTransform: 'uppercase',
        cursor: 'pointer', transition: 'all 200ms', marginTop: 8
      }}>
        Submit Inquiry</button>
    </form>);

}

Object.assign(window, { AboutPage });