// Contact — direct, concrete, no gimmicks
function Contact() {
  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-20">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>Contact</span>
        <span className="tabular">IST · GMT+5:30</span>
      </div>

      <Reveal className="mt-10 md:mt-16 grid md:grid-cols-12 gap-6 md:gap-10 items-end">
        <div className="md:col-span-9">
          <div className="smallcaps text-sienna">Get in touch</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            Email for substance, calendar for a call.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            A short email with context and a specific ask usually gets a reply within a day or two. If a call is faster, the calendar below is live.
          </p>
        </div>
      </Reveal>

      {/* Primary options */}
      <div className="mt-14 grid md:grid-cols-2 gap-px bg-ink/10">
        <div className="bg-paper p-10 md:p-12">
          <div className="smallcaps text-sienna">Email</div>
          <h2 className="mt-3 font-display text-[40px] md:text-[56px] leading-[1.02] tracking-tight">The main route.</h2>
          <p className="mt-4 text-ink2 leading-relaxed">
            Best for anything substantive. A short email with the context and the ask is usually enough for me to reply with a useful answer or a time.
          </p>
          <a href="mailto:vemula.prathyusha@gmail.com"
             className="mt-8 inline-block smallcaps bg-ink text-paper hover:bg-sienna transition-colors px-5 py-3">
            Write an email →
          </a>
        </div>
        <div className="bg-paper p-10 md:p-12">
          <div className="smallcaps text-sienna">Calendar</div>
          <h2 className="mt-3 font-display text-[40px] md:text-[56px] leading-[1.02] tracking-tight">Book a time.</h2>
          <p className="mt-4 text-ink2 leading-relaxed">
            Two options — 15 minutes for an intro, 30 minutes for something you want to pull apart. A line or two in the booking form about what you want to talk about keeps the call focused.
          </p>
          <a href="https://cal.com/prathyushavemula" target="_blank" rel="noreferrer"
             className="mt-8 inline-block smallcaps bg-ink text-paper hover:bg-sienna transition-colors px-5 py-3">
            Open the calendar →
          </a>
        </div>
      </div>

      {/* What helps a first conversation land */}
      <section className="mt-20">
        <div className="smallcaps text-sienna mb-6">What helps a first conversation land</div>
        <div className="grid md:grid-cols-3 gap-px bg-ink/10">
          {[
            ['Two lines of context', 'Who you are, what team you lead, and the problem you are turning over. Saves a round trip.'],
            ['A specific ask', 'A question, a role, a second opinion, or time on the calendar. Specific gets specific.'],
            ['A pointer to what prompted it', 'If a case study or a section of the POV is what brought you here, naming it shortens the first five minutes of any call.'],
          ].map(([k, v]) => (
            <div key={k} className="bg-paper p-6 md:p-8">
              <div className="smallcaps text-muted">{k}</div>
              <p className="mt-3 text-ink2 leading-relaxed">{v}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Good fits */}
      <section className="mt-16">
        <div className="smallcaps text-sienna mb-6">Good fits for a conversation</div>
        <ul className="rule-top rule-bottom">
          {[
            'You are building an AI practice inside a services firm and need a senior operator who has shipped in BFSI',
            'You are a hyperscaler industry team hiring for Financial Services or adjacent regulated verticals',
            'You are an AI-native firm and your enterprise GTM needs someone who speaks compliance fluently',
            'You are a bank or insurer standing up your own AI unit and looking for someone who has seen both vendor and in-house sides',
            'You are a recruiter placing VP / Director AI Transformation roles and want to understand my criteria',
            'You are a peer practitioner and want to argue with something on the POV page',
          ].map((f, i) => (
            <li key={i} className="py-4 rule-bottom last:border-0 grid grid-cols-[40px_1fr] gap-4 items-baseline">
              <span className="font-display italic text-sienna tabular">{String(i+1).padStart(2,'0')}</span>
              <span className="text-ink2 leading-relaxed">{f}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* Not good fits */}
      <section className="mt-16">
        <div className="smallcaps text-muted mb-6">Probably not a fit</div>
        <ul className="rule-top rule-bottom">
          {[
            'Cold pitches for generic tooling I have not asked about',
            'Speaker inquiries for general-purpose AI conferences',
            'Sales outreach for staffing or contract roles',
          ].map((f, i) => (
            <li key={i} className="py-3 rule-bottom last:border-0 text-ink2 text-sm">· {f}</li>
          ))}
        </ul>
      </section>

      {/* Also here */}
      <section className="mt-16 rule-top pt-10 grid md:grid-cols-3 gap-6 pb-8">
        <a href="https://www.linkedin.com/in/vnmprathyusha" target="_blank" rel="noreferrer"
           className="rule-top rule-bottom p-6 hover:bg-paper2 transition-colors">
          <div className="smallcaps text-sienna">LinkedIn</div>
          <div className="mt-2 font-display text-xl">linkedin.com/in/vnmprathyusha</div>
          <div className="mt-2 text-sm text-muted">Field notes and shorter threads</div>
        </a>
        <a href="mailto:vemula.prathyusha@gmail.com"
           className="rule-top rule-bottom p-6 hover:bg-paper2 transition-colors">
          <div className="smallcaps text-sienna">Email</div>
          <div className="mt-2 font-display text-xl">vemula.prathyusha@gmail.com</div>
          <div className="mt-2 text-sm text-muted">Preferred for substantive threads</div>
        </a>
        <a href="https://cal.com/prathyushavemula" target="_blank" rel="noreferrer"
           className="rule-top rule-bottom p-6 hover:bg-paper2 transition-colors">
          <div className="smallcaps text-sienna">Calendar</div>
          <div className="mt-2 font-display text-xl">cal.com/prathyushavemula</div>
          <div className="mt-2 text-sm text-muted">15-min intros and 30-min working sessions</div>
        </a>
      </section>
    </main>
  );
}

Object.assign(window, { Contact });