/* global React */
/* =====================================================================
   CORPORATE WORLD — High Tech Inc unlocked site (home, about, contact)
   The deliberately-too-slick SaaS register. AI buzzwords + neon gradients.
   ===================================================================== */

const { useState: _useState_corp } = React;

// --------- icons (inline SVG, single stroke) -------------------------
const Icon = {
  arrow: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  ),
  play: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>
  ),
  cloud: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
  ),
  sparkles: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.9 5.7L19 10l-5.1 1.3L12 17l-1.9-5.7L5 10l5.1-1.3z"/><path d="M19 17l.7 2.1L22 20l-2.3.9L19 23l-.7-2.1L16 20l2.3-.9z"/></svg>
  ),
  shield: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
  ),
  cog: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9 1.65 1.65 0 0 0 4.27 7.18l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  ),
  mail: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22,6 12,13 2,6"/></svg>
  ),
  pin: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  clock: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
  ),
  linkedin: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
  ),
  x: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h3l-7.5 8.6L22 22h-6.5l-5-6.6L4.9 22H2l8-9.2L1.5 2H8l4.5 6 5.5-6z"/></svg>
  ),
};

// --------- Nav ------------------------------------------------------
function CorpNav({ page, onNav }) {
  return (
    <nav className="corp-nav">
      <a className="corp-logo" href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }}>
        <span className="mark">H</span>
        <span>High Tech Inc.</span>
      </a>
      <div className="corp-nav-links">
        <a href="#" className={page === "home" ? "active" : ""}
           onClick={(e) => { e.preventDefault(); onNav("home"); }}>Home</a>
        <a href="#" className={page === "about" ? "active" : ""}
           onClick={(e) => { e.preventDefault(); onNav("about"); }}>About</a>
        <a href="#" className={page === "contact" ? "active" : ""}
           onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact</a>
        <a href="#" className="corp-cta-sm"
           onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Book a demo</a>
      </div>
    </nav>
  );
}

// --------- Footer ---------------------------------------------------
function CorpFooter({ onNav }) {
  return (
    <footer className="corp-footer">
      <div className="corp-footer-grid">
        <div>
          <div className="corp-logo">
            <span className="mark">H</span>
            <span>High Tech Inc.</span>
          </div>
          <p className="corp-footer-blurb">
            AI-native, cloud-first, enterprise-grade. We build the surfboards
            for the wave of digital transformation.
          </p>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="#">Cloud Migration</a></li>
            <li><a href="#">AI Integration</a></li>
            <li><a href="#">Managed Security</a></li>
            <li><a href="#">DevOps Platform</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("about"); }}>About</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Newsroom</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Resources</h4>
          <ul>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Case studies</a></li>
            <li><a href="#">Whitepapers</a></li>
            <li><a href="#">Status page</a></li>
          </ul>
        </div>
      </div>
      <div className="corp-footer-bottom">
        <div>© 2026 High Tech Inc. All rights reserved. ISO 27001 certified.</div>
        <div className="socials">
          <a href="#" aria-label="LinkedIn"><Icon.linkedin /></a>
          <a href="#" aria-label="X"><Icon.x /></a>
        </div>
      </div>
    </footer>
  );
}

// --------- HomePage -------------------------------------------------
function HomePage({ onNav }) {
  return (
    <>
      <section className="corp-hero">
        <div>
          <div className="corp-eyebrow">
            <span className="pulse"></span>
            <span>AI-Native · Series C · 2026</span>
          </div>
          <h1 className="corp-h1">
            Innovate Boldly.<br />
            <span className="grad">Build Brilliantly.</span>
          </h1>
          <p className="corp-lead">
            We're not just riding the wave of innovation — we're building the surfboards.
            From sleek software to scalable infrastructure, we help enterprises harness
            technology that actually works for them. Not the other way around.
          </p>
          <div className="corp-cta-row">
            <a href="#" className="corp-cta-primary"
               onClick={(e) => { e.preventDefault(); onNav("contact"); }}>
              Start your transformation <Icon.arrow />
            </a>
            <a href="#" className="corp-cta-secondary">
              <Icon.play /> Watch the 2-min demo
            </a>
          </div>
        </div>
        <div className="corp-hero-art">
          <div className="grid-bg"></div>
          <div className="orb orb-1"></div>
          <div className="orb orb-2"></div>
          <div className="floater float-1">$ hightech deploy --prod</div>
          <div className="floater float-2">
            <span className="dot"></span> 99.99% uptime · live
          </div>
        </div>
      </section>

      <section className="corp-trust">
        <div className="corp-trust-label">Trusted by hyperscalers and Fortune 500s</div>
        <div className="corp-trust-row">
          <div className="logo">NIMBUS</div>
          <div className="logo">Vellora</div>
          <div className="logo">CORTEX/9</div>
          <div className="logo">stratos.</div>
          <div className="logo">Helix Bank</div>
          <div className="logo">NORTHWIND</div>
        </div>
      </section>

      <section className="corp-section">
        <div className="corp-section-eyebrow">/ What we do</div>
        <h2 className="corp-section-title">A full-stack platform for builders who refuse to compromise.</h2>
        <p className="corp-section-sub">
          One platform, four superpowers. Plug in, scale out, ship faster.
        </p>
        <div className="corp-services">
          <ServiceCard icon={<Icon.cloud />} title="Cloud-Native Migration"
            body="Lift, shift, and rearchitect your stack onto a multi-cloud mesh. Zero-downtime cutovers. Cost down ~40%, velocity up ~3x." />
          <ServiceCard icon={<Icon.sparkles />} title="AI Integration Layer"
            body="Drop our LLM-agnostic SDK into your product. RAG, fine-tuning, evals — handled. Your engineers ship features, not prompt soup." />
          <ServiceCard icon={<Icon.shield />} title="Managed Security"
            body="24/7 SOC, threat hunting, and zero-trust posture management. Our team sleeps so yours can. (Probably the most important page on this site.)" />
          <ServiceCard icon={<Icon.cog />} title="DevOps Acceleration"
            body="CI/CD on autopilot. Self-healing infra. Internal developer platforms that engineers actually want to use." />
        </div>
      </section>

      <section className="corp-stats">
        <div className="corp-stat"><div className="num">99.99%</div><div className="lbl">Platform uptime SLA</div></div>
        <div className="corp-stat"><div className="num">500+</div><div className="lbl">Enterprise customers</div></div>
        <div className="corp-stat"><div className="num">24/7</div><div className="lbl">Global support coverage</div></div>
        <div className="corp-stat"><div className="num">2019</div><div className="lbl">Founded · Chelmsford, UK</div></div>
      </section>

      <section className="corp-testimonial">
        <blockquote>
          <span className="quote-mark">“</span>
          High Tech Inc didn't just modernise our infrastructure. They gave our
          engineering org a personality transplant. We ship four times faster
          and our on-call rotation is finally boring — in the best way.
        </blockquote>
        <div className="attr">
          <span className="name">Priya Achterberg</span>
          <span>VP Platform Engineering · Vellora</span>
        </div>
      </section>

      <section className="corp-bigcta">
        <div className="inner">
          <h2>Ready to disrupt yourself before someone else does?</h2>
          <p>Book a 30-minute strategy session with a senior architect. No slide decks. No suits.</p>
          <a href="#" className="corp-cta-primary"
             onClick={(e) => { e.preventDefault(); onNav("contact"); }}>
            Book your session <Icon.arrow />
          </a>
        </div>
      </section>
    </>
  );
}

function ServiceCard({ icon, title, body }) {
  function onMove(e) {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", ((e.clientX - r.left) / r.width) * 100 + "%");
    e.currentTarget.style.setProperty("--my", ((e.clientY - r.top) / r.height) * 100 + "%");
  }
  return (
    <div className="corp-service-card" onMouseMove={onMove}>
      <div className="icon">{icon}</div>
      <h3>{title}</h3>
      <p>{body}</p>
      <a href="#" className="link">Learn more <Icon.arrow /></a>
    </div>
  );
}

// --------- AboutPage ------------------------------------------------
// CLUE PLANTING:
//  - WHO  → Dave Mitchell (Head of IT) bio + a "team blog" snippet that names him.
//    His bio overshares: dog's name "Rufus", born 2019. Common password = Rufus2019.
//  - HOW  → A bragging news post about Dave speaking at "CloudConf Lisbon 2026"
//    plus a tweet-style quote about "still using my favourite password since
//    Rufus was a puppy" — i.e. credential reuse / public overshare.
//  - WHERE → His bio places him at the Chelmsford HQ, but the news post mentions
//    he was logging in from hotel wifi at the Lisbon Marriott during the conf.
// These are *placeholder* hooks. User: tell me the real WHO/HOW/WHERE answers
// and I'll re-plant. Toggle "Highlight clues" in Tweaks to see them.
function AboutPage({ onNav, tweaks }) {
  const highlight = tweaks?.highlightClues ? " highlight" : "";

  return (
    <>
      <section className="about-hero">
        <h1>
          We're builders.<br />
          <span className="grad">Not bullshitters.</span>
        </h1>
        <p>
          Founded in 2019 above a coffee shop in Chelmsford. Now operating in
          seven countries with one stubborn principle: technology should make
          your team faster, not your slide decks longer.
        </p>
      </section>

      <section className="about-values">
        <div className="about-value">
          <div className="num">/ 01</div>
          <h3>Ship over slides.</h3>
          <p>We'd rather demo a working prototype on day three than present a roadmap on day thirty.</p>
        </div>
        <div className="about-value">
          <div className="num">/ 02</div>
          <h3>Boring infrastructure.</h3>
          <p>Excitement belongs in your product, not your incident channel. We aim for the most boring on-call rotation in tech.</p>
        </div>
        <div className="about-value">
          <div className="num">/ 03</div>
          <h3>Radical transparency.</h3>
          <p>Status pages, post-mortems, salary bands — all public. If you can't say it on the website, it shouldn't be a value.</p>
        </div>
      </section>

      <section className="about-team">
        <div className="corp-section-eyebrow">/ The team</div>
        <h2 className="corp-section-title">A small group of opinionated engineers.</h2>
        <p className="corp-section-sub">Most of us write code. All of us answer emails.</p>

        <div className="about-team-grid">
          <TeamCard
            initials="PS"
            photo="https://randomuser.me/api/portraits/women/68.jpg"
            name="Paula Sinclair"
            role="CEO & Co-founder"
            bio="Ex-Stripe, ex-Monzo. Started High Tech Inc after one too many enterprise tools failed mid-pitch. Lives in London. Runs marathons badly."
            handle="@paulas"
          />

          <TeamCard
            initials="DM"
            photo="https://randomuser.me/api/portraits/men/32.jpg"
            name={<span className={"clue" + highlight} data-clue="WHO?">Dave Mitchell</span>}
            role="Head of IT & Infrastructure"
            bio={(
              <span className={"clue" + highlight} data-clue="WHO / oversharing bio">
                Joined in 2020 from a regional MSP. Dave is our human firewall —
                he manages every endpoint, every password vault, every VPN
                tunnel. Outside work he's a passionate amateur photographer and
                obsessive dog dad to <strong>Rufus</strong>, a chaotic Cocker
                Spaniel who's been with him since 2019 (also the year we
                founded the company — Dave swears it's a coincidence).
              </span>
            )}
            handle="@daveinit"
          />

          <TeamCard
            initials="SO"
            photo="https://randomuser.me/api/portraits/women/52.jpg"
            name="Sade Okafor"
            role="VP Engineering"
            bio="Distributed systems brain. Joined from AWS in 2023. Maintains three open-source projects you've probably never heard of. Refuses to talk about Kubernetes at parties."
            handle="@sadeokafor"
          />

          <TeamCard
            initials="ML"
            photo="https://randomuser.me/api/portraits/women/79.jpg"
            name="Maya Larsson"
            role="Head of AI"
            bio="PhD in computational linguistics. Built our RAG layer from scratch. Has strong opinions about evals and stronger opinions about Oxford commas."
            handle="@mayalarsson"
          />

          <TeamCard
            initials="TC"
            photo="https://randomuser.me/api/portraits/men/45.jpg"
            name="Tomás Cardoso"
            role="Head of Sales"
            bio="Recovered investment banker. Closes deals by not pretending to be a friend. Based in our Lisbon satellite office."
            handle="@tomas_c"
          />

          <TeamCard
            initials="AB"
            photo="https://randomuser.me/api/portraits/women/65.jpg"
            name="Asha Begum"
            role="Head of People"
            bio="Built the team from 5 to 47. Believes in clear comp bands, generous parental leave, and the Oxford comma."
            handle="@asha_b"
          />
        </div>
      </section>

      <section className="corp-section" style={{ paddingTop: 0 }}>
        <div className="corp-section-eyebrow">/ Latest</div>
        <h2 className="corp-section-title">From the engineering blog</h2>
        <p className="corp-section-sub">Plain-spoken posts about how we actually build.</p>

        <div className="corp-services">
          <a href="#" className="corp-service-card">
            <div style={{ fontFamily: "var(--c-mono)", fontSize: 11, color: "var(--c-fg-3)", letterSpacing: "0.15em", marginBottom: 16 }}>
              30 APR 2026 · ENGINEERING
            </div>
            <h3 style={{ fontFamily: "var(--c-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", marginBottom: 12 }}>
              <span className={"clue" + highlight} data-clue="HOW / public overshare">
                Dave's keynote at CloudConf Lisbon — and why we still believe in passwords
              </span>
            </h3>
            <p style={{ color: "var(--c-fg-2)", fontSize: 14, lineHeight: 1.6, marginBottom: 16 }}>
              <span className={"clue" + highlight} data-clue="HOW + WHERE: hotel wifi + reused password">
                Our Head of IT shared the stage with engineers from three FAANGs at CloudConf
                Europe last week. Dave's talk — given live from <strong>the Marriott Lisbon</strong>{" "}
                press lounge over hotel wifi (we know, we know) — argued that passphrase reuse
                is fine "as long as you really love it." He's been using the same one since
                Rufus was a puppy. The crowd loved him. Our security team did not.
              </span>
            </p>
            <span className="link">Read post <Icon.arrow /></span>
          </a>

          <a href="#" className="corp-service-card">
            <div style={{ fontFamily: "var(--c-mono)", fontSize: 11, color: "var(--c-fg-3)", letterSpacing: "0.15em", marginBottom: 16 }}>
              12 APR 2026 · INFRASTRUCTURE
            </div>
            <h3 style={{ fontFamily: "var(--c-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", marginBottom: 12 }}>
              We migrated 4.3 PB to multi-cloud in 11 days. Here's how.
            </h3>
            <p style={{ color: "var(--c-fg-2)", fontSize: 14, lineHeight: 1.6, marginBottom: 16 }}>
              The blow-by-blow of the largest migration we've ever run. Spoiler:
              the hard part wasn't the data. It never is.
            </p>
            <span className="link">Read post <Icon.arrow /></span>
          </a>
        </div>
      </section>
    </>
  );
}

function TeamCard({ initials, photo, name, role, bio, handle }) {
  return (
    <div className="team-card">
      <div className="avatar">
        {photo
          ? <img src={photo} alt="" loading="lazy" />
          : <div className="initials">{initials}</div>}
      </div>
      <div className="body">
        <div className="name">{name}</div>
        <div className="role">{role}</div>
        <p className="bio">{bio}</p>
        <div className="socials">
          <span>linkedin:</span><span className="handle">{handle}</span>
        </div>
      </div>
    </div>
  );
}

// --------- ContactPage ----------------------------------------------
function ContactPage({ tweaks }) {
  const [sent, setSent] = _useState_corp(false);
  const highlight = tweaks?.highlightClues ? " highlight" : "";

  return (
    <section className="contact-shell">
      <div className="contact-left">
        <div className="corp-section-eyebrow" style={{ marginBottom: 16 }}>/ Get in touch</div>
        <h1>Let's build<br />something<br /><span style={{
          background: "linear-gradient(135deg, var(--c-grad-1), var(--c-grad-3))",
          WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent"
        }}>boring on purpose.</span></h1>
        <p>
          Most enterprise sales cycles are six months of slide decks and PoC
          theatre. Ours starts with a 30-minute call and ends with working code.
          Drop us a line — a real engineer reads everything that comes in.
        </p>

        <div className="contact-detail">
          <div className="icon"><Icon.mail /></div>
          <div className="text">
            <div className="label">Email</div>
            <div className="value">hello@hightechinc.example</div>
            <div className="sub">Replies within 1 business day. Usually faster.</div>
          </div>
        </div>

        <div className="contact-detail">
          <div className="icon"><Icon.pin /></div>
          <div className="text">
            <div className="label">Head Office</div>
            <div className="value">
              <span className={"clue" + highlight} data-clue="WHERE? HQ vs. travel">
                17 Duke Street, Chelmsford, Essex CM1 1JE — United Kingdom
              </span>
            </div>
            <div className="sub">Satellite offices: Lisbon · Austin · Sydney</div>
          </div>
        </div>

        <div className="contact-detail">
          <div className="icon"><Icon.clock /></div>
          <div className="text">
            <div className="label">Hours</div>
            <div className="value">Mon–Fri, 09:00–18:00 GMT</div>
            <div className="sub">Out of hours? Critical incidents are handled by our 24/7 SOC via your platform dashboard.</div>
          </div>
        </div>
      </div>

      <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <h2>Send us a note</h2>
        <p className="sub">Tell us what you're trying to build. We'll be in touch.</p>

        <div className="row">
          <div className="contact-field">
            <label>First name</label>
            <input type="text" defaultValue="" />
          </div>
          <div className="contact-field">
            <label>Last name</label>
            <input type="text" defaultValue="" />
          </div>
        </div>

        <div className="contact-field">
          <label>Work email</label>
          <input type="email" defaultValue="" />
        </div>

        <div className="contact-field">
          <label>Company</label>
          <input type="text" defaultValue="" />
        </div>

        <div className="contact-field">
          <label>What are you looking to do?</label>
          <select defaultValue="">
            <option value="">Choose one…</option>
            <option>Cloud migration</option>
            <option>AI integration</option>
            <option>Managed security</option>
            <option>DevOps platform</option>
            <option>Something else</option>
          </select>
        </div>

        <div className="contact-field">
          <label>Tell us more</label>
          <textarea placeholder="Roughly what you're trying to do, when you'd want to start, and what's getting in the way."></textarea>
        </div>

        <button type="submit" className="contact-submit">
          Send message →
        </button>

        {sent && (
          <div className="contact-success">
            ✓ Thanks — we'll be in touch within 1 business day.
          </div>
        )}
      </form>
    </section>
  );
}

// expose
Object.assign(window, { CorpNav, CorpFooter, HomePage, AboutPage, ContactPage });