// Contact page — two prominent email channels (sales + careers), no form

const SALES_SUBJECT = "Enterprise AI program — initial briefing";
const SALES_BODY = `Hi CloudEngine team,

We're exploring [AI Platform / Infrastructure / Full program] and would like a tailored briefing.

About us:
- Company:
- Industry & geography:
- Current state of AI initiatives:
- Timeline / goals:

Thanks,
`;

const HR_SUBJECT = "Application — [Role you're applying for]";
const HR_BODY = `Hi CloudEngine team,

I'd like to apply for [role / area of interest].

- Name:
- Location:
- Years of experience:
- LinkedIn / portfolio:

A short note on why CloudEngine:


Thanks,
`;

const mailto = (addr, subject, body) =>
`mailto:${addr}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

const LinkedInMark = () =>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.26 2.37 4.26 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.11 2.06 2.06 0 0 1 0 4.11zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" />
  </svg>;


const Diagonal = () =>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M4 10 10 4M5 4h5v5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const ChannelEmail = ({ address }) => {
  const [user, domain] = address.split('@');
  return (
    <span>
      {user}<span className="at">@</span>{domain}
    </span>);

};

const Channels = () =>
<section className="section">
    <div className="wrap">
      <div className="channels">

        <div className="channel channel--sales reveal">
          <div className="channel-head">
            <span className="channel-label">Sales &amp; Partnerships</span>
            <span className="channel-index">01 / 02</span>
          </div>
          <h3 className="channel-title">
            Plan your next AI milestone with our principals.
          </h3>
          <a className="channel-email" href={mailto('sales@cloudengined.com', SALES_SUBJECT, SALES_BODY)}>
            <ChannelEmail address="sales@cloudengined.com" />
          </a>
          <p className="channel-desc">
            Reach us directly for enterprise AI programs, GPU &amp; data center scoping, platform engagements, and regional partnerships.
          </p>
          <ul className="channel-list">
            <li>AI Platform — GPU virtualization, LLM deployment &amp; security</li>
            <li>Infrastructure — AI clusters, data center fit-out, technical O&amp;M</li>
            <li>Multi-region rollouts across APAC, EMEA, and the Americas</li>
          </ul>
          <a className="channel-aside" href={mailto('sales@cloudengined.com', SALES_SUBJECT, SALES_BODY)}>
            <span className="li-mark li-mark--ink">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M4 4h16v16H4zM4 4l8 9 8-9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            <span className="ca-body">
              <span className="ca-eyebrow">Compose email</span>
              <span className="ca-text">Write to us at sales@cloudengined.com</span>
            </span>
            <span className="ca-arrow"><Diagonal /></span>
          </a>
        </div>

        <div className="channel channel--careers reveal d2">
          <div className="channel-head">
            <span className="channel-label">Careers</span>
            <span className="channel-index">02 / 02</span>
          </div>
          <h3 className="channel-title">
            Build the next generation of AI infrastructure with us.
          </h3>
          <a className="channel-email" href={mailto('hr@cloudengined.com', HR_SUBJECT, HR_BODY)}>
            <ChannelEmail address="hr@cloudengined.com" />
          </a>
          <p className="channel-desc">
            Browse open roles and the disciplines we hire for on our Careers page — or write to us directly with your CV, portfolio, or a short note.
          </p>
          <ul className="channel-list">
            <li>Engineering — platform, MLOps, GPU systems, networking</li>
            <li>Field — solution architects, deployment, technical services</li>
            <li>Commercial, operations, and graduate / internship pathways</li>
          </ul>
          <a className="channel-aside" href="careers.html">
            <span className="li-mark li-mark--ink">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M3 4h10M3 8h10M3 12h6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
              </svg>
            </span>
            <span className="ca-body">
              <span className="ca-eyebrow">Careers at CloudEngine</span>
              <span className="ca-text">Browse disciplines, regions &amp; how we hire</span>
            </span>
            <span className="ca-arrow"><I.arrow /></span>
          </a>
        </div>

      </div>

      <div className="contact-foot reveal d3">
        <div className="info-card">
          <div className="label">Headquarters</div>
          <h4>Singapore</h4>
          <p>CloudEngine Digital Pte. Ltd.<br />Asia Pacific HQ, serving customers globally.</p>
        </div>
        <div className="info-card">
          <div className="label">Coverage</div>
          <h4>12 markets</h4>
          <p>Singapore (HQ), Malaysia, Indonesia, Thailand, Vietnam, Philippines, South Korea, Japan, Germany, Saudi Arabia, UAE, United States.</p>
        </div>
        <div className="info-card">
          <div className="label">Press &amp; everything else</div>
          <h4>sales@cloudengined.com</h4>
          <p>For media, analyst, and general inquiries, please use our sales channel and we will route your message to the right team.</p>
        </div>
      </div>
    </div>
  </section>;


function ContactApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="Contact"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'Contact' }]}
          title={<>Two doors. <span className="accent">One conversation away.</span></>}
          sub="Whether you're scoping an AI program or looking to join the team, write to us directly."
          image="assets/contact-hero-bg.png" />
        

        <Channels />
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<ContactApp />);