/* eslint-disable */
/* ─────────────────────────────────────────────
   CONTACT PAGE — Direction B "Geometric Atlas"
   ───────────────────────────────────────────── */

function ContactHero() {
  return (
    <section className="page-hero">
      <div className="page-hero__pattern" aria-hidden="true"/>
      <div className="page-hero__grade" aria-hidden="true"/>
      <div className="page-hero__inner">
        <div className="page-hero__breadcrumb">
          <a href="index.html">Home</a>
          <span>/</span>
          <span style={{color:'rgba(255,255,255,0.55)'}}>Contact</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">Contact us</span>
        <h1 className="page-hero__title">
          We're straightforward<br/>
          to <em>reach.</em>
        </h1>
        <p className="page-hero__sub">
          No contact forms routed to a queue — just real people at a real company. We respond directly.
        </p>
      </div>
    </section>
  );
}

const INQUIRIES = [
  {
    icon: (
      <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l-3 3 3 3m8-6 3 3-3 3M14 5l-4 14"/>
      </svg>
    ),
    title: 'Digital product & AI projects',
    body: 'Describe your project or challenge. We\'ll tell you directly whether we can help and how.',
    email: 'ai@sawt.tech',
    href: 'mailto:ai@sawt.tech?subject=Product%20%26%20AI%20Project%20Inquiry',
    copper: false,
  },
  {
    icon: (
      <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--copper)" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
      </svg>
    ),
    title: 'Technical support',
    body: 'Infrastructure field engineering requests — hardware, maintenance, or on-site technical assistance. Including location and system type in your message is helpful.',
    email: 'hello@sawt.tech',
    href: 'mailto:hello@sawt.tech?subject=Technical%20Support%20Request',
    copper: true,
  },
  {
    icon: (
      <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 19.5h16.5M5 17V8.75L12 4l7 4.75V17M9 17v-5h6v5"/>
      </svg>
    ),
    title: 'Business & investment',
    body: 'Infrastructure partnerships, investment discussions, or Rihla product partnerships.',
    email: 'stm@sawt.tech',
    href: 'mailto:stm@sawt.tech?subject=Business%2FInvestment%20Discussion',
    copper: false,
  },
  {
    icon: (
      <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--copper)" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/>
      </svg>
    ),
    title: 'Rihla app support',
    body: 'App-related questions, feedback, or support for Rihla users.',
    email: 'admin@rihla-app.com',
    href: 'mailto:admin@rihla-app.com',
    copper: true,
  },
];

function ContactMain() {
  return (
    <section className="sec-dark">
      <div className="sec-inner">
        <div className="two-col two-col--wide-right" style={{gap:60}}>
          {/* Left */}
          <div>
            <span className="eyebrow" style={{color:'var(--jade)', display:'block', marginBottom:14}}>Get in touch</span>
            <h2 style={{margin:'0 0 16px', fontSize:'clamp(28px,3.5vw,42px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.1}}>
              How can we help?
            </h2>
            <p style={{fontSize:17, color:'rgba(255,255,255,0.55)', lineHeight:1.65, margin:0, maxWidth:420}}>
              Whether you have a digital product engineering brief, an AI challenge, an infrastructure need, or a business discussion — email us directly.
            </p>

            <div className="inquiry-list">
              {INQUIRIES.map((inq, i) => (
                <div key={i} className={'inquiry-card' + (inq.copper ? ' inquiry-card--copper' : '')}>
                  <div className="inquiry-card__icon">{inq.icon}</div>
                  <div>
                    <h4>{inq.title}</h4>
                    <p>{inq.body}</p>
                    <a href={inq.href}>{inq.email}</a>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right */}
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {/* Company card */}
            <div className="company-card">
              <p className="company-card__label">Company details</p>
              <div className="company-card__row">
                <p className="company-card__key">Legal name</p>
                <p className="company-card__val">Sawt Tech &amp; Marketing LLC</p>
                <p className="company-card__note">Limited liability company registered in the Sultanate of Oman.</p>
              </div>
              <div className="company-card__row">
                <p className="company-card__key">Registered address</p>
                <p className="company-card__val">201, Alwtyh Street</p>
                <p className="company-card__val">Bousher 120, Oman</p>
              </div>
              <div className="company-card__row">
                <p className="company-card__key">Country</p>
                <p className="company-card__val">Sultanate of Oman</p>
              </div>
            </div>

            {/* Email grid */}
            <div className="email-grid">
              <a href="mailto:hello@sawt.tech" className="email-card">
                <span className="email-card__label">General inquiries</span>
                <span className="email-card__addr">hello@sawt.tech</span>
                <p>General, technical &amp; company questions</p>
              </a>
              <a href="mailto:admin@rihla-app.com" className="email-card email-card--copper">
                <span className="email-card__label">Rihla app</span>
                <span className="email-card__addr">admin@rihla-app.com</span>
                <p>App support &amp; partnerships</p>
              </a>
            </div>

            {/* Hiring nudge */}
            <div style={{
              padding: '18px 22px',
              border: '1px solid rgba(61,217,182,0.22)',
              borderRadius: 12,
              background: 'rgba(61,217,182,0.04)',
              display: 'flex',
              alignItems: 'flex-start',
              gap: 14,
            }}>
              <svg style={{flexShrink:0, marginTop:2}} width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="2">
                <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
              </svg>
              <div>
                <p style={{margin:'0 0 4px', fontSize:14, fontWeight:600, color:'rgba(255,255,255,0.85)', letterSpacing:'0.01em'}}>
                  We're hiring
                </p>
                <p style={{margin:'0 0 8px', fontSize:13, color:'rgba(255,255,255,0.5)', lineHeight:1.6}}>
                  Interested in joining STM? Email your profile in any of our disciplines — engineering, AI, infrastructure, or investments.
                </p>
                <a href="mailto:hr@sawt.tech?subject=Application" style={{fontSize:13, color:'var(--jade)', textDecoration:'none', letterSpacing:'0.01em'}}>
                  hr@sawt.tech
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactBanner() {
  return (
    <section style={{position:'relative', overflow:'hidden', height:320}}>
      <img
        src="photos/stm-og-banner.jpg"
        alt="Omani fort at dusk — Sawt Tech &amp; Marketing"
        style={{
          position:'absolute', inset:0,
          width:'100%', height:'100%',
          objectFit:'cover', objectPosition:'center 40%',
          filter:'saturate(0.75) brightness(0.55)',
        }}
      />
      {/* Gradient vignette */}
      <div style={{
        position:'absolute', inset:0,
        background:'linear-gradient(to bottom, rgba(7,13,24,0.55) 0%, transparent 40%, transparent 60%, rgba(7,13,24,0.75) 100%)',
      }}/>
      {/* Jade accent line */}
      <div style={{
        position:'absolute', left:0, right:0, top:0,
        height:1, background:'rgba(61,217,182,0.3)',
      }}/>
      {/* Copy */}
      <div style={{
        position:'absolute', inset:0,
        display:'flex', flexDirection:'column',
        alignItems:'center', justifyContent:'center',
        textAlign:'center', padding:'0 24px',
      }}>
        <span style={{
          fontFamily:'var(--font-mono)', fontSize:11,
          letterSpacing:'0.15em', textTransform:'uppercase',
          color:'rgba(61,217,182,0.75)', marginBottom:14,
        }}>
          Sultanate of Oman
        </span>
        <p style={{
          margin:0, fontSize:'clamp(22px,3vw,34px)',
          fontWeight:500, letterSpacing:'-0.02em',
          color:'rgba(255,255,255,0.92)', lineHeight:1.25,
        }}>
          Based in Muscat.<br/>
          <em style={{fontStyle:'italic', color:'var(--jade)'}}>Operating globally.</em>
        </p>
      </div>
    </section>
  );
}

function VerificationSection() {
  return (
    <section className="sec-ink">
      <div className="sec-inner">
        <div className="verification-block">
          <div>
            <span className="eyebrow" style={{color:'var(--jade)', display:'block', marginBottom:12}}>Company information</span>
            <h3>Registered legal entity operating from Oman.</h3>
            <p>
              Sawt Technology &amp; Marketing is a legally registered limited liability company in the Sultanate of Oman. The company operates across digital product engineering, AI consultancy (including agent deployments and agentic workflows), infrastructure field engineering, Bitcoin mining, and strategic investments. Registered address: 201, Alwtyh Street, Bousher 120, Sultanate of Oman.
            </p>
            <dl className="verification-facts">
              <div>
                <dt>Legal name</dt>
                <dd>Sawt Tech &amp; Marketing LLC</dd>
              </div>
              <div>
                <dt>Address</dt>
                <dd>201 Alwtyh St, Bousher 120, Oman</dd>
              </div>
              <div>
                <dt>Email</dt>
                <dd><a href="mailto:hello@sawt.tech" style={{color:'var(--jade)', textDecoration:'none'}}>hello@sawt.tech</a></dd>
              </div>
            </dl>
          </div>
          <STMLogo variant="white" size={64}/>
        </div>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <div className="page-b">
      <NavB active="contact"/>
      <ContactHero/>
      <ContactMain/>
      <ContactBanner/>
      <VerificationSection/>
      <FooterB/>
    </div>
  );
}

window.ContactPage = ContactPage;