/* Homepage — hero, manifesto, work grid, upcoming, services, closing */

function Hero() {
  return (
    <section style={{position:'relative', paddingTop: 60, paddingBottom: 80}}>
      <div className="wrap">
        {/* Main headline */}
        <div style={{padding:'80px 0 40px', position:'relative'}}>
          <div className="display-xl" style={{position:'relative'}}>
            <span className="chroma chroma-always" data-text="We craft">We craft</span>&nbsp;
            <span style={{fontFamily:'var(--serif)', fontStyle:'italic', fontWeight:400}}>dreams</span><br/>
            <span style={{fontFamily:'var(--serif)', fontStyle:'italic', fontWeight:400}}>into</span>&nbsp;
            <span className="chroma chroma-always" data-text="reality.">reality.</span>
          </div>
        </div>

        {/* Sub row */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, paddingTop:40, borderTop:'1px solid var(--ink)'}}>
          <div>
            <div className="mono-eyebrow" style={{marginBottom:16}}>↳ 001 — What we do</div>
            <p className="body-l">
              Code My Brains Out is a small, obsessive software studio
              based in New Delhi. We ship mobile and web products that are
              as considered as they are fun to use. Multiple apps live in the
              Play Store, with web work on the way.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', justifyContent:'space-between', alignItems:'flex-end'}}>
            <div style={{textAlign:'right'}}>
              <div className="mono-eyebrow" style={{marginBottom:8}}>Currently</div>
              <div className="display-s serif-italic">Shipping new immersive experiences.</div>
            </div>
            <div style={{display:'flex', gap:12, marginTop:32}}>
              <a className="btn btn-filled" href="#work">
                <span>See the work</span>
                <span className="arrow">↓</span>
              </a>
              <a className="btn" href="/about.html">
                <span>About the studio</span>
                <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatBand() {
  const stats = [
    { n: '04', l: 'Apps shipped' },
    { n: '9M+', l: 'Downloads' },
    { n: '12', l: 'Years independent' },
    { n: '∞', l: 'Cups of chai' }
  ];
  return (
    <section style={{borderTop:'1px solid var(--ink)', borderBottom:'1px solid var(--ink)', background:'var(--paper)'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0}}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding:'32px 24px',
            borderRight: i < stats.length - 1 ? '1px solid var(--ink)' : '0',
            display:'flex', flexDirection:'column', gap:8
          }}>
            <div style={{fontFamily:'var(--display)', fontWeight:500, fontSize:56, lineHeight:1, letterSpacing:'-0.04em'}}>{s.n}</div>
            <div className="mono-label" style={{color:'var(--muted)'}}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function WorkGrid() {
  const projects = window.PROJECTS;
  return (
    <section id="work" className="section">
      <div className="wrap">
        <div className="number-stamp">
          <span>§ 002</span>
          <span>Selected Work · 2014 – 2026</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end', marginBottom:48, gap:32}}>
          <h2 className="display-l">
            <span className="chroma" data-text="Multiple apps,">Multiple apps,</span><br/>
            <span className="serif-italic">one obsession.</span>
          </h2>
          <p className="body-m" style={{maxWidth:'40ch'}}>
            A utility for artists. A typographic playground.
            A quiet reading app. A face-detecting moustache generator.
            We build what we'd use.
          </p>
        </div>
      </div>

      <div className="projects">
        {projects.map((p, i) => (
          <a key={p.id} className="project-card" href={`/projects/${p.id}.html`}>
            <div className="project-head">
              <span className="project-num">№ {p.num}</span>
              <span className="project-tag">{p.tag} · {p.year}</span>
            </div>
            <div className="project-art">
              {p.icon ? (
                <img
                  src={p.icon}
                  alt={`${p.name} app icon`}
                  width="180"
                  height="180"
                  style={{display:'block', width:'180px', height:'180px', objectFit:'cover', borderRadius:'24px'}}
                />
              ) : (
                <ProjectArt shape={p.shape} size={180} />
              )}
            </div>
            <div>
              <div className="project-title" data-text={p.name}>{p.name}</div>
              <p className="body-m" style={{marginTop:8, maxWidth:'42ch'}}>{p.tagline}</p>
            </div>
            <div className="project-meta">
              <span>{p.category}</span>
              <span className="project-arrow">→</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Manifesto() {
  const points = [
    { k: 'Craft', v: 'We obsess over kerning, easing curves and the exact shade of off-white.' },
    { k: 'Utility', v: 'Every app does one thing well, without surveillance or dark patterns.' },
    { k: 'Independence', v: 'No VC, no ads, no pivots. We ship what we believe in.' },
    { k: 'Humor', v: 'Software should occasionally make you laugh. See: Moustachinator.' }
  ];
  return (
    <section className="section" style={{background:'var(--ink)', color:'var(--paper)', marginTop: 0}}>
      <div className="wrap">
        <div className="number-stamp" style={{color:'rgba(242,239,234,.5)'}}>
          <span>§ 003</span>
          <span style={{background:'none'}}>Manifesto</span>
        </div>
        <h2 className="display-l" style={{color:'var(--paper)', marginBottom:60}}>
          <span data-text="We build small" className="chroma-always" style={{position:'relative', display:'inline-block'}}>
            We build small
          </span><br/>
          <span className="serif-italic" style={{color:'var(--paper)'}}>software with </span>
          <span data-text="big opinions." style={{position:'relative', display:'inline-block'}}
                className="chroma-always">big opinions.</span>
        </h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, borderTop:'1px solid rgba(242,239,234,.2)', paddingTop:40}}>
          {points.map((p, i) => (
            <div key={i}>
              <div className="mono-eyebrow" style={{color:'rgba(242,239,234,.5)', marginBottom:16}}>
                0{i+1}
              </div>
              <h3 className="display-s" style={{color:'var(--paper)', marginBottom:12}}>{p.k}</h3>
              <p className="body-m" style={{color:'rgba(242,239,234,.75)'}}>{p.v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Upcoming() {
  const items = window.UPCOMING;
  return (
    <section className="section">
      <div className="wrap">
        <div className="number-stamp">
          <span>§ 004</span>
          <span>On the workbench</span>
        </div>
        <h2 className="display-l" style={{marginBottom:60}}>
          <span className="serif-italic">Always </span>
          <span className="chroma" data-text="expanding">expanding</span>
        </h2>
        <div>
          {items.map((u, i) => (
            <div key={u.id}
                 className="hoverable"
                 data-scramble
                 style={{
                   display:'grid',
                   gridTemplateColumns:'80px 1fr 1fr 120px',
                   alignItems:'center',
                   padding:'32px 0',
                   borderTop:'1px solid var(--ink)',
                   borderBottom: i === items.length - 1 ? '1px solid var(--ink)' : 'none',
                   gap:24,
                   fontFamily:'var(--mono)',
                   fontSize:14,
                   textTransform:'uppercase',
                   letterSpacing:'0.1em',
                   cursor:'none'
                 }}>
              <span style={{color:'var(--muted)'}}>№ 0{i+5}</span>
              <span style={{fontFamily:'var(--display)', fontSize:32, textTransform:'none', letterSpacing:'-0.02em', fontWeight:500}}>
                {u.name}
              </span>
              <span style={{color:'var(--muted)'}}>{u.category}</span>
              <span style={{textAlign:'right'}}>
                <span style={{
                  display:'inline-block', padding:'4px 10px',
                  border:'1px solid var(--ink)',
                  color:'var(--ink)'
                }}>
                  {u.status}
                </span>
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const services = [
    { n: 'A', title: 'Mobile apps', body: 'Android-first products, built with obsessive attention to UX, motion and typography.' },
    { n: 'B', title: 'Web products', body: 'Browser-native tools with the same craft we bring to our mobile work. Our next chapter.' },
    { n: 'C', title: 'Brand & type', body: 'Logos, type systems, and the visual vocabulary that makes our products feel like ours.' }
  ];
  return (
    <section className="section" style={{background:'var(--paper-2)', borderTop:'1px solid var(--ink)', borderBottom:'1px solid var(--ink)'}}>
      <div className="wrap">
        <div className="number-stamp">
          <span>§ 005</span>
          <span>What we make</span>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:80, alignItems:'flex-start'}}>
          <h2 className="display-l">
            <span className="chroma" data-text="What we">What we</span><br/>
            <span className="serif-italic">build.</span>
          </h2>
          <div>
            {services.map((s, i) => (
              <div key={s.n}
                   style={{
                     display:'grid',
                     gridTemplateColumns:'60px 1fr',
                     padding:'32px 0',
                     borderTop:'1px solid var(--ink)',
                     borderBottom: i === services.length - 1 ? '1px solid var(--ink)' : 'none',
                     gap:24,
                     alignItems:'baseline'
                   }}>
                <div className="serif-italic" style={{fontSize:48, lineHeight:1}}>{s.n}.</div>
                <div>
                  <h3 className="display-m" style={{marginBottom:12}}>{s.title}</h3>
                  <p className="body-l">{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Closing() {
  return (
    <section className="section">
      <div className="wrap" style={{textAlign:'center'}}>
        <div className="mono-eyebrow" style={{marginBottom:24}}>§ 006 — Say hello</div>
        <h2 className="display-xl" style={{marginBottom:40}}>
          <span className="serif-italic">Just want to </span>
          <span className="chroma chroma-always" data-text="say hi">say hi</span>
          <span className="serif-italic">?</span><br/>
          <span className="chroma chroma-always" data-text="We'd love that.">We'd love that.</span>
        </h2>
        <div style={{display:'inline-flex', gap:16}}>
          <a className="btn btn-filled" href="mailto:hello@codemybrainsout.com">
            <span>hello@codemybrainsout.com</span>
            <span className="arrow">→</span>
          </a>
          <a className="btn" href="/about.html">
            <span>Meet the studio</span>
            <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function HomeApp() {
  const marqueeItems = [
    'Code My Brains Out',
    'Independent Software Studio',
    'Est. MMXIV',
    'Mobile · Web · Design',
    'New Delhi, India',
    'Four Apps · More Coming'
  ];
  return (
    <React.Fragment>
      <Nav current="work" />
      <Hero />
      <Marquee items={marqueeItems} />
      <StatBand />
      <WorkGrid />
      <Manifesto />
      <Upcoming />
      <Services />
      <Closing />
      <Footer />
    </React.Fragment>
  );
}

window.HomeApp = HomeApp;