// pages.jsx — Services, Work, About, Careers, Contact for Harjog Solutions

const SERVICES = [
  { slug: 'brand-identity',  num: '01', t: 'Brand Identity', d: 'Logos, wordmarks, brand guidelines, naming sprints. The visual language that sets a business apart on day one and still works five years in.', tags: ['Logo', 'Naming', 'Guidelines'] },
  { slug: 'packaging-print', num: '02', t: 'Packaging & Print', d: 'Packaging, signage, brochures, hoardings, vehicle wraps. Everything that lives offline — produced and proofed in-house.', tags: ['Packaging', 'Print', 'Outdoor'] },
  { slug: 'real-estate',     num: '03', t: 'Real Estate Marketing', d: 'Pre-launch teasers, site activation, broker collateral and lead funnels for builders and townships across India.', tags: ['Builders', 'Brokers', 'Funnels'] },
  { slug: 'political',       num: '04', t: 'Political Campaigns', d: 'Candidate creative, door-to-door collateral, IVR, voter outreach and on-ground field ops for state and local elections.', tags: ['Candidates', 'IVR', 'Field Ops'] },
  { slug: 'performance',     num: '05', t: 'Performance Marketing', d: 'Meta, Google Ads, YouTube and programmatic — engineered to ship qualified leads at a known cost.', tags: ['Meta', 'Google', 'YouTube'] },
  { slug: 'content-video',   num: '06', t: 'Content & Production', d: 'Reels, drone footage, brand films, music videos and photography — produced by our in-house creative team, turned around fast.', tags: ['Reels', 'Films', 'Photo'] },
  { slug: 'automation',      num: '07', t: 'Marketing Automation', d: 'WhatsApp, email, CRM and lead-routing workflows. Nurture every lead like it’s your only one, without the headcount.', tags: ['WhatsApp', 'CRM', 'Workflows'] },
  { slug: 'web-seo',         num: '08', t: 'Web & SEO', d: 'Marketing sites, landing pages and on-page SEO. Built to load fast on a 4G phone in a tier-2 town.', tags: ['Sites', 'SEO', 'Speed'] },
];

function ServicesPage({ setRoute }) {
  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Eight services.<br /><span className="it">One studio.</span></TypeReveal></h1>
          <p className="deck">
            We resist the urge to outsource. Branding, marketing, automation and production are all run by senior people in our Ludhiana studio — so the people you brief are the people who execute.
          </p>
        </div>
      </div>

      <section id="capabilities">
        <div className="wrap">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} className="svc-stack-item" delay={i * 40}
                    onClick={() => setRoute('service/' + s.slug)}>
              <h1 className="svc-stack-title">
                {s.t.split('').map((ch, j) => (
                  <span key={j} className="svc-ch-wrap">
                    <span className="svc-ch" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? '\u00a0' : ch}</span>
                    <span className="svc-ch clone" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? '\u00a0' : ch}</span>
                  </span>
                ))}
              </h1>
            </Reveal>
          ))}
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </div>
  );
}

// =========== Work index page ============
const ALL_WORK = [
  {
    slug: 'township-launch',
    image: 'https://images.unsplash.com/photo-WQ42ypHazNo?w=1200&q=80&auto=format&fit=crop',
    cat: 'Real Estate', date: '2025–26',
    title: 'Ashok Malhotra Group — Digital & Lead Gen',
    blurb: 'Managing social media, performance marketing and lead generation for premier Ludhiana real estate properties. Driving site visits and bookings for internal sales teams.',
    glyph: 'A', tags: ['Real Estate', 'Performance', 'Social Media'],
  },
  {
    slug: 'mla-campaign',
    image: 'https://images.unsplash.com/photo-AXGOhRx0Sko?w=1200&q=80&auto=format&fit=crop',
    cat: 'Political', date: '2025',
    title: 'Vidhan Sabha Campaign — Punjab',
    blurb: 'Full creative and outreach engine for a sitting MLA. 4.2L verified voter touchpoints across booths, IVR, WhatsApp and on-ground field collateral.',
    glyph: 'V', tags: ['Political', 'Social Media'],
  },
  {
    cat: 'Social Media', date: '2023–24',
    title: 'Socializar — Global Social Campaigns',
    blurb: 'Led social media campaigns for brands across London, Australia, Canada, USA, Dubai and Thailand. Content creation, influencer marketing and community management.',
    glyph: 'S', tags: ['Social Media', 'Performance'],
  },
  {
    cat: 'Film & Production', date: '2019',
    title: 'Bollywood & Punjabi Film Promos',
    blurb: 'Edited promos for Bala, Nikka Zaildar 3, Jabaria Jodi, Dream Girl, Doorbeen, Surkhi Bindi, Appa Ani Bappa and Chai Mera Put for major Bollywood and Punjabi productions.',
    glyph: 'B', tags: ['Film & Production'],
  },
  {
    cat: 'Film & Production', date: '2019',
    title: 'Mitti Da Bawa — Punjabi Feature Film',
    blurb: 'Movie trailer, dialogue promos, song videos and complete graphics work for the 2019 Punjabi feature film.',
    glyph: 'M', tags: ['Film & Production'],
  },
  {
    cat: 'Corporate Video', date: '2019–20',
    title: 'MCI India — Corporate Films & Auto Expo',
    blurb: 'Corporate promos, lyrical videos, app demo videos and Mahindra\'s pitch video for Auto Expo 2020. Produced at The Video Wand, New Delhi.',
    glyph: 'C', tags: ['Corporate Video', 'Film & Production'],
  },
  {
    cat: 'Product Campaign', date: '2020–22',
    title: 'D2C Product Campaigns — Multi-Brand',
    blurb: 'Video and creative campaigns for Lahori Jeera, Skout Organics, Calming Dog, Kuddly, QuitStix, Chef V, Whom and Drink Dry.',
    glyph: 'P', tags: ['Product Campaign', 'Film & Production'],
  },
  {
    cat: 'App & Tech', date: '2021',
    title: 'HealthOptim — AI App Launch Video',
    blurb: 'Full intro and promotional video for HealthOptim, an artificial intelligence-based health and wellness platform.',
    glyph: 'H', tags: ['Corporate Video', 'Film & Production'],
  },
  {
    cat: 'Real Estate', date: '2020–24',
    title: 'Real Estate Creative — Multi-Project',
    blurb: 'Brand and video work for M3M, Omaxe, Urbana, Sahu City, Broadway, County 7, Corner Walk, Exclusiverentals.ca, IVY County, Amy Serfass, Cleo and Resurge.',
    glyph: 'R', tags: ['Real Estate', 'Film & Production'],
  },
  {
    cat: 'Music Video', date: '2018–22',
    title: 'Music Video Direction & Editing',
    blurb: 'Directed and edited music videos for Tere Hasse (Pritam x Binner x Sunny), Brave Gabru (Gavvy Gora), Jazbaat (Rukpal Grewal), Reality by Ansh and many more.',
    glyph: 'V', tags: ['Film & Production'],
  },
];

function WorkPage({ setRoute }) {
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Real Estate', 'Political', 'Social Media', 'Film & Production', 'Performance', 'Corporate Video'];
  const shown = filter === 'All'
    ? ALL_WORK
    : ALL_WORK.filter(w => w.tags.includes(filter) || w.cat === filter);

  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <div className="page-head-split">
            <h1><TypeReveal>10 years of<br /><span className="it">real work.</span></TypeReveal></h1>
            <p className="deck">
              From Bollywood film promos and Punjabi music videos to real estate launches, political campaigns and global social media — built by one person, one studio.
            </p>
          </div>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          <div style={{ display: 'flex', gap: 8, marginBottom: 48, flexWrap: 'wrap' }}>
            {filters.map(f => (
              <button key={f} className={"budget-chip" + (filter === f ? " active" : "")} onClick={() => setFilter(f)}>
                {f === 'All'
                  ? f
                  : `${f} (${ALL_WORK.filter(w => w.tags.includes(f) || w.cat === f).length})`}
              </button>
            ))}
          </div>

          <div className="work-grid">
            {shown.map((w, i) => (
              <Reveal key={w.title} className="work-card" delay={(i % 2) * 100}
                      onClick={() => w.slug ? setRoute('case/' + w.slug) : null}
                      style={{ cursor: w.slug ? 'pointer' : 'default' }}>
                <Parallax speed={-0.05} as="div" style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden', aspectRatio: '4 / 3', background: 'var(--surface)', border: '1px solid var(--border)', marginBottom: 24, position: 'relative' }}>
                  {w.image ? (
                    <img src={w.image} alt={w.title} style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
                  ) : (
                    <div className="work-thumb-inner">
                      <span className="glyph">{w.glyph}</span>
                      <span className="placeholder-lbl">{w.cat}</span>
                    </div>
                  )}
                </Parallax>
                <div className="work-meta">
                  <span>{w.cat}</span>
                  <span>{w.date}</span>
                </div>
                <h3>{w.title}</h3>
                <p className="blurb">{w.blurb}</p>
                {w.slug && (
                  <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                    Read case study <Arrow size={14} />
                  </div>
                )}
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </div>
  );
}

// =========== About page ============
const EXPERTISE = [
  { t: 'Video Editing' },
  { t: 'Motion Design' },
  { t: 'Social Media Strategy' },
  { t: 'Performance Marketing' },
  { t: 'Lead Generation' },
  { t: 'Photography' },
  { t: 'Videography' },
];

function AboutPage({ setRoute }) {
  return (
    <div className="page page-about">
      <CinematicHero />

      {/* Manifesto */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
            <Reveal delay={150}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
                <p style={{ fontFamily: 'var(--f-h)', fontSize: 32, lineHeight: 1.25, letterSpacing: '-0.02em', margin: 0, fontWeight: 'var(--f-h-weight)' }}>
                  Marketing should be <span style={{ color: 'var(--accent)', fontStyle: 'italic', fontFamily: 'var(--f-display)' }}>accountable</span>. We pitch the numbers we expect to hit, we track them every week, and we don&rsquo;t hide behind &lsquo;awareness&rsquo; when leads don&rsquo;t show up.
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, fontSize: 15, color: 'var(--muted)', lineHeight: 1.6 }}>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Senior-only on calls</h4>
                    <p style={{ margin: 0 }}>You speak directly to Satnam — the person doing the work, not an account manager.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Built in-house</h4>
                    <p style={{ margin: 0 }}>Creative, video, automation and ads — all built under one roof in Ludhiana.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Truth-telling</h4>
                    <p style={{ margin: 0 }}>We tell you when a campaign won&rsquo;t work, even if we&rsquo;ve already been paid for it.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Local roots</h4>
                    <p style={{ margin: 0 }}>We speak the language, know the Punjab market, and produce work that actually lands.</p>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="stats">
            <Reveal className="stat"><div className="v"><CountUp to={10} />+</div><div className="k">Years in practice</div></Reveal>
            <Reveal className="stat" delay={80}><div className="v"><CountUp to={140} />+</div><div className="k">Projects delivered</div></Reveal>
            <Reveal className="stat" delay={160}><div className="v"><CountUp to={6} /></div><div className="k">Countries — social media clients</div></Reveal>
            <Reveal className="stat" delay={240}><div className="v"><CountUp to={8} /></div><div className="k">Largest team led</div></Reveal>
          </div>
        </div>
      </section>

      {/* Founder note */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
            <Reveal>
              <div style={{ marginTop: 24, padding: 16, border: '1px dashed var(--border)', borderRadius: 'var(--r-md)', background: 'var(--surface)' }}>
                <div style={{ aspectRatio: '4 / 5', background: 'var(--bg-2)', borderRadius: 'var(--r-sm)', display: 'grid', placeItems: 'center', position: 'relative' }}>
                  <span style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 88, color: 'var(--muted-2)' }}>SJ</span>
                  <span style={{ position: 'absolute', bottom: 10, left: 10, fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', padding: '4px 8px', border: '1px solid var(--border)', borderRadius: 4 }}>Satnam Singh · Ludhiana</span>
                </div>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <p style={{ fontFamily: 'var(--f-h)', fontSize: 24, lineHeight: 1.5, letterSpacing: '-0.015em', color: 'var(--ink-2)', margin: 0 }}>
                &ldquo;I started in video editing — cutting Bollywood promos in Mumbai, corporate films in Delhi, music videos in Punjab. Then I moved into social media and marketing, ran my own agency Socializar, and eventually built Harjog Solutions to bring all of it under one roof. Ten years on, the work is still the only thing that matters.&rdquo;
              </p>
              <p style={{ marginTop: 32, fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted)' }}>
                Satnam Singh · Founder &amp; Creative Director
              </p>
              <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Ashok Malhotra Group — Creative &amp; Social Media Head (Dec 2024–Present)',
                  'Socializar — Social Media Agency Owner (2023–24)',
                  'Praper Media — Team Lead, Video Production (2022–23)',
                  'Get Me Rank — Senior Designer (2020–22)',
                  'The Video Wand — Senior Video Editor, MCI India (2019–20)',
                  'Promo Editor, Bollywood &amp; Punjabi Productions (2019)',
                  'Westweb Technologies — Video Editor &amp; Designer (2016–19)',
                  'Freelancer — Video, Animation, Social Media (2014–16)',
                ].map((line, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', fontSize: 14, color: 'var(--muted)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--accent)', fontFamily: 'var(--f-mono)', fontSize: 10 }}>—</span>
                    <span dangerouslySetInnerHTML={{ __html: line }} />
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Expertise */}
      <section id="capabilities">
        <div className="wrap">
          <Reveal className="sec-head">
            <h2>Core <span className="it">expertise</span></h2>
          </Reveal>
          {EXPERTISE.map((e, i) => (
            <Reveal key={e.t} className="svc-stack-item" delay={i * 40}>
              <h1 className="svc-stack-title">
                {e.t.split('').map((ch, j) => (
                  <span key={j} className="svc-ch-wrap">
                    <span className="svc-ch" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? '\u00a0' : ch}</span>
                    <span className="svc-ch clone" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? '\u00a0' : ch}</span>
                  </span>
                ))}
              </h1>
            </Reveal>
          ))}
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </div>
  );
}

// =========== Careers page ============
const ROLES = [
  { dept: 'Creative',    t: 'Senior Brand Designer',      loc: 'Ludhiana (on-site)',  type: 'Full-time' },
  { dept: 'Performance', t: 'Performance Marketing Lead', loc: 'Ludhiana / Remote',   type: 'Full-time' },
  { dept: 'Production',  t: 'Video Editor — Reels & Ads', loc: 'Ludhiana (on-site)',  type: 'Full-time' },
  { dept: 'Automation',  t: 'CRM & Automation Engineer',  loc: 'Remote (India)',       type: 'Full-time' },
  { dept: 'Operations',  t: 'Client Services Manager',    loc: 'Ludhiana',             type: 'Full-time' },
];

function CareersPage({ setRoute }) {
  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Build the studio<br />with <span className="it">us.</span></TypeReveal></h1>
          <p className="deck">
            We hire slowly and rarely. When we do, we look for people who&rsquo;d rather make real work for real businesses than chase awards at a bigger agency in Delhi or Mumbai.
          </p>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          {ROLES.map((r, i) => (
            <Reveal key={r.t} className="svc-row" delay={i * 50} onClick={() => setRoute('contact')}>
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <h3>{r.t}</h3>
              <p className="desc">{r.dept} · {r.loc} · {r.type}</p>
              <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, color: 'var(--accent)' }}>
                Apply <Arrow size={14} />
              </div>
            </Reveal>
          ))}
          <div style={{ padding: '48px 0', textAlign: 'center', borderTop: '1px solid var(--border)', marginTop: 24 }}>
            <p style={{ color: 'var(--muted)', margin: 0 }}>
              Don't see your role?{' '}
              <a onClick={() => setRoute('contact')} style={{ color: 'var(--accent)', cursor: 'pointer', borderBottom: '1px solid currentColor' }}>
                Write to us anyway
              </a>
              {' '}— we keep great people in mind.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// =========== Contact page ============
function ContactPage() {
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', company: '', service: 'branding', budget: '',
    timeline: '', message: ''
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const budgets = ['< ₹1L', '₹1–5L', '₹5–15L', '₹15L+', 'Not sure yet'];
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const validate = () => {
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.email.includes('@')) errs.email = 'Need a valid email';
    if (!form.message.trim() || form.message.length < 12) errs.message = 'Tell us a bit more';
    return errs;
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
    }
  };

  if (submitted) {
    return (
      <div className="page">
        <div className="page-head">
          <div className="wrap">
            <h1>Thanks, {form.name.split(' ')[0]}.<br />We'll <span className="it">reply within a day.</span></h1>
            <p className="deck">
              Your message is in our queue — you&rsquo;ll hear from Satnam directly. In the meantime, here&rsquo;s a few useful things.
            </p>
          </div>
        </div>
        <section>
          <div className="wrap" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { t: 'Recent case studies', d: 'Township launches, brand relaunches, political campaigns and Bollywood film promos.' },
              { t: 'Pricing & retainers', d: 'How we scope brand sprints, monthly retainers and per-seat political campaigns.' },
              { t: 'WhatsApp the studio', d: 'For active clients and quick questions — fastest way to reach us most days.' },
            ].map((c, i) => (
              <Reveal key={c.t} className="tcard" delay={i * 100}>
                <h3 style={{ fontSize: 24, letterSpacing: '-0.02em', marginTop: 4 }}>{c.t}</h3>
                <p style={{ color: 'var(--muted)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{c.d}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink)', marginTop: 'auto' }}>
                  Open <Arrow size={14} />
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <h1><TypeReveal>Tell us about<br />your <span className="it">project.</span></TypeReveal></h1>
          <p className="deck">
            The more you share, the better our first reply. If you&rsquo;d rather just say hi, that works too — keep it short.
          </p>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          <div className="contact-grid">
            <form className="form" onSubmit={submit} noValidate>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="field">
                  <label>Your name {errors.name && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.name}</span>}</label>
                  <input type="text" value={form.name} onChange={update('name')} placeholder="Full name" />
                </div>
                <div className="field">
                  <label>Phone / WhatsApp</label>
                  <input type="tel" value={form.phone} onChange={update('phone')} placeholder="+91 …" />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="field">
                  <label>Email {errors.email && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.email}</span>}</label>
                  <input type="email" value={form.email} onChange={update('email')} placeholder="you@company.com" />
                </div>
                <div className="field">
                  <label>Company / Project</label>
                  <input type="text" value={form.company} onChange={update('company')} placeholder="Brand or campaign name" />
                </div>
              </div>

              <div className="field">
                <label>What can we help with?</label>
                <select value={form.service} onChange={update('service')}>
                  <option value="branding">Brand identity & naming</option>
                  <option value="real-estate">Real estate marketing</option>
                  <option value="political">Political campaign</option>
                  <option value="performance">Performance marketing</option>
                  <option value="automation">Marketing automation / CRM</option>
                  <option value="content">Content & video production</option>
                  <option value="web">Website & SEO</option>
                  <option value="not-sure">Not sure yet</option>
                </select>
              </div>

              <div className="field">
                <label>Approx. budget</label>
                <div className="budget-chips">
                  {budgets.map(b => (
                    <button type="button" key={b}
                            className={"budget-chip" + (form.budget === b ? " active" : "")}
                            onClick={() => setForm({ ...form, budget: b })}>
                      {b}
                    </button>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Timeline</label>
                <input type="text" value={form.timeline} onChange={update('timeline')} placeholder="e.g. launch by Diwali, start in 3 weeks" />
              </div>

              <div className="field">
                <label>Project details {errors.message && <span style={{ color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--f-sans)' }}>· {errors.message}</span>}</label>
                <textarea value={form.message} onChange={update('message')} placeholder="The shape of the project, what good looks like, who you're trying to reach…" />
              </div>

              <div style={{ marginTop: 12 }}>
                <button type="submit" className="btn btn-primary btn-large">
                  Send message <Arrow size={14} />
                </button>
              </div>
            </form>

            <aside className="contact-meta">
              <dl>
                <dt>Email</dt>
                <dd><a href="mailto:satnamjandu@yahoo.com">satnamjandu@yahoo.com</a></dd>

                <dt>Phone / WhatsApp</dt>
                <dd><a href="tel:+919814640066">+91 98146-40066</a></dd>

                <dt>Studio</dt>
                <dd>Ludhiana, Punjab<br />India · 141 001</dd>

                <dt>Office hours</dt>
                <dd style={{ color: 'var(--muted)', fontSize: 14, fontFamily: 'var(--f-mono)', letterSpacing: '0.06em' }}>MON–SAT · 10:00 → 19:00 IST</dd>

                <dt>Founded by</dt>
                <dd>Satnam Singh<br /><span style={{ color: 'var(--muted)', fontSize: 14 }}>Founder &amp; Creative Director</span></dd>
              </dl>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  ServicesPage, WorkPage, AboutPage, CareersPage, ContactPage
});