/* global React */
const { useState } = React;
const { Glyph, MtgosMark, GurooMark } = window.Guroo;

const SERVICES = [
  { num: "01", title: "Custom SaaS development", body: "End-to-end product engineering for multi-tenant platforms — from a first wireframe to a hardened production release.", tags: ["Next.js", "TypeScript", "Postgres"], icon: "saas" },
  { num: "02", title: "Cloud architecture", body: "Reference architectures, infrastructure-as-code, and migration plans designed for audit, scale, and predictable cost.", tags: ["AWS", "Terraform", "Kubernetes"], icon: "cloud" },
  { num: "03", title: "Product & technology strategy", body: "Roadmaps, build-vs-buy calls, and operating reviews delivered as deliverables, not slideware. Calm advice from operators.", tags: ["Roadmap", "Discovery", "Audit"], icon: "strategy" },
  { num: "04", title: "Embedded teams", body: "Senior engineers, designers, and PMs who plug into your team and ship alongside it — no agency layer between you and the work.", tags: ["Eng", "Design", "PM"], icon: "team" },
  { num: "05", title: "Applied AI", body: "Practical AI features grounded in your data and workflows — agents, retrieval, and evals that hold up under real-world load.", tags: ["LLM", "RAG", "Evals"], icon: "ai" },
  { num: "06", title: "Security & compliance", body: "SOC 2 readiness, threat models, access reviews, and the unglamorous controls that earn an enterprise procurement signature.", tags: ["SOC 2", "Pen test", "SSO"], icon: "shield" }
];

function Services() {
  return (
    <section className="section section-divider" id="services">
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Services</span>
            <h2 className="display-lg sec-head-title">A studio's craft,<br/>a partner's commitment.</h2>
          </div>
          <p className="sec-head-desc">
            Six core practices, deployed individually or as a single, coherent engagement.
            Every piece of work is led by a senior who has shipped the thing they are
            advising on — never a layer of account managers between you and the team.
          </p>
        </div>
        <div className="svc-grid">
          {SERVICES.map(s => (
            <article className="svc" key={s.num}>
              <div className="row" style={{ justifyContent: "space-between" }}>
                <span className="svc-num">{s.num}</span>
                <span style={{ color: "var(--color-mono-500)" }}><Glyph kind={s.icon} size={20}/></span>
              </div>
              <h3 className="svc-title">{s.title}</h3>
              <p className="svc-body">{s.body}</p>
              <div className="svc-tags">
                {s.tags.map(t => <span key={t} className="svc-tag">{t}</span>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedMtgOS() {
  return (
    <section className="section" id="mtgos">
      <div className="shell">
        <div className="feature">
          <div className="feature-inner">
            <div>
              <span className="eyebrow feature-eyebrow">Flagship product</span>
              <h2 className="display-lg feature-title">Scout &mdash; the operating console for modern lenders.</h2>
              <p className="feature-desc">
                Built and operated by Guroo, Scout is a multi-tenant mortgage operating
                system used by loan officers, processors, and admins to run files end-to-end.
                Calm UI, audit-grade plumbing, and the kind of integrations procurement
                teams quietly approve.
              </p>
              <div className="feature-cta-row">
                <a className="btn btn-on-dark-primary" href="https://scout.guroo.work" target="_blank" rel="noreferrer">
                  Visit Scout
                  <span className="btn-arrow"><Glyph kind="arrow" size={16}/></span>
                </a>
                <a className="btn btn-on-dark-secondary" href="#contact">Talk to the team</a>
              </div>
              <div style={{ display: "flex", gap: "2rem", marginTop: "2rem", flexWrap: "wrap", color: "rgba(252,251,248,0.55)", fontSize: 12.5, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600 }}>
                <span>Microsoft Entra SSO</span>
                <span>Multi-tenant</span>
                <span>Audit-grade</span>
              </div>
            </div>
            <PreviewWindow/>
          </div>
        </div>
      </div>
    </section>
  );
}

function PreviewWindow() {
  return (
    <div className="preview-window">
      <div className="pw-bar">
        <span className="pw-dot r"/><span className="pw-dot y"/><span className="pw-dot g"/>
        <span className="pw-url">app.scout.guroo.work / loans</span>
      </div>
      <div className="pw-body">
        <div className="pw-side">
          <div className="pw-side-mark"><MtgosMark size={26}/></div>
          <div className="pw-icon active"><Glyph kind="ops" size={16}/></div>
          <div className="pw-icon"><Glyph kind="saas" size={16}/></div>
          <div className="pw-icon"><Glyph kind="team" size={16}/></div>
          <div className="pw-icon"><Glyph kind="shield" size={16}/></div>
        </div>
        <div className="pw-main">
          <div className="pw-eyebrow">Workspace</div>
          <h3 className="pw-h1">Loans</h3>
          <div className="pw-table">
            <div className="pw-row head">
              <span>Display Number</span>
              <span>Borrower</span>
              <span>Status</span>
              <span style={{ textAlign: "right" }}>Amount</span>
            </div>
            <div className="pw-row">
              <span className="num">HMC-260418-0042</span>
              <span>Beatrice Holloway</span>
              <span><span className="badge approved">Approved</span></span>
              <span className="num" style={{ textAlign: "right" }}>$612,400</span>
            </div>
            <div className="pw-row">
              <span className="num">HMC-260418-0041</span>
              <span>Marcus Chen</span>
              <span><span className="badge submitted">Submitted</span></span>
              <span className="num" style={{ textAlign: "right" }}>$385,000</span>
            </div>
            <div className="pw-row">
              <span className="num">HMC-260417-0040</span>
              <span>Priya Anand</span>
              <span><span className="badge review">In review</span></span>
              <span className="num" style={{ textAlign: "right" }}>$724,950</span>
            </div>
            <div className="pw-row">
              <span className="num">HMC-260417-0039</span>
              <span>Daniel Okafor</span>
              <span><span className="badge draft">Draft</span></span>
              <span className="num" style={{ textAlign: "right" }}>$298,750</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const PHASES = [
  { num: "Phase 01", title: "Discover", body: "We start with a two-week diagnostic — interviews, system maps, and a candid read on what's working.", list: ["Stakeholder interviews", "Architecture audit", "Risk register"] },
  { num: "Phase 02", title: "Design", body: "A small, senior pair shapes the product, the system, and the rollout plan in lockstep with your team.", list: ["Product specs", "Reference UI", "Delivery roadmap"] },
  { num: "Phase 03", title: "Build", body: "Embedded delivery in two-week cycles, with working software in your environment from day one.", list: ["Two-week cycles", "Production from day one", "Continuous review"] },
  { num: "Phase 04", title: "Operate", body: "We don't ship and disappear. Guroo runs the platform, on call, until your team is ready to take it over.", list: ["On-call rotation", "Quarterly reviews", "Hand-off plan"] }
];

function Process() {
  return (
    <section className="section section-divider" id="process">
      <div className="shell">
        <div className="sec-head">
          <div>
            <span className="eyebrow">How we work</span>
            <h2 className="display-lg sec-head-title">Four phases.<br/>One steady hand.</h2>
          </div>
          <p className="sec-head-desc">
            Engagements run from six weeks to multiple years, but they all share the same
            spine — a senior pair on point, weekly written reviews, and clear handover
            plans from the first day on.
          </p>
        </div>
        <div className="process">
          {PHASES.map(p => (
            <div className="phase" key={p.title}>
              <span className="phase-num">{p.num}</span>
              <h3 className="phase-title">{p.title}</h3>
              <p className="phase-desc">{p.body}</p>
              <ul className="phase-list">
                {p.list.map(i => <li key={i}>{i}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const INDUSTRIES = [
  { name: "Mortgage", desc: "Operating consoles, LOS integrations, and the unsexy pipework lenders run on.", icon: "mortgage" },
  { name: "Financial services", desc: "Internal tools for ops teams; ledgers, reconciliations, audit trails.", icon: "fintech" },
  { name: "Healthcare", desc: "HIPAA-aware patient and provider workflows. Practical, not preachy.", icon: "health" },
  { name: "Logistics", desc: "Dispatch, tracking, and back-office systems for fleets and brokers.", icon: "logistics" },
  { name: "Energy & utilities", desc: "Asset, field, and compliance tools for regulated operators.", icon: "energy" },
  { name: "Public sector", desc: "Modernization for agencies and the contractors who serve them.", icon: "shield" }
];

function Industries() {
  return (
    <section className="section section-divider" id="industries">
      <div className="shell">
        <div className="industries">
          <div>
            <span className="eyebrow">Industries</span>
            <h2 className="display-lg sec-head-title">We build for the businesses that keep the lights on.</h2>
            <p className="sec-head-desc" style={{ marginTop: "1.5rem" }}>
              Compliance-heavy, operations-driven, customer-careful. The work isn't always
              loud, but the systems matter, the deadlines are real, and the audit is on the
              calendar.
            </p>
          </div>
          <div className="ind-grid">
            {INDUSTRIES.map(i => (
              <article className="ind-tile" key={i.name}>
                <span className="ind-mark" style={{ color: "var(--color-primary-300)" }}><Glyph kind={i.icon} size={36}/></span>
                <h3 className="ind-name">{i.name}</h3>
                <p className="ind-desc">{i.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function QuoteSection() {
  return (
    <section className="section section-divider">
      <div className="shell">
        <div className="quote">
          <p className="quote-text">
            &ldquo;Guroo behaves like a senior team that happens to bill from the outside.
            Calm, written, and on the calendar — and the platform they shipped has been
            running clean for two years.&rdquo;
          </p>
          <div className="quote-attrib">
            <span className="avatar">EM</span>
            <div className="stack">
              <strong style={{ color: "var(--color-mono-900)", fontWeight: 600 }}>Elena Martens</strong>
              <span>VP of Operations &middot; Houseman Mortgage</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section cta" id="contact">
      <div className="shell cta-grid">
        <div>
          <span className="eyebrow">Contact</span>
          <h2 className="display-lg sec-head-title" style={{ marginTop: "1rem" }}>
            Bring us the gnarliest<br/>
            <span className="serif-accent">platform problem</span> on your roadmap.
          </h2>
          <p className="lede" style={{ marginTop: "1.25rem" }}>
            A 30-minute discovery call gets you a written read on the work, a phased
            engagement plan, and a candid answer on whether we&rsquo;re the right partner.
            No pitch deck, no follow-up sequence.
          </p>
          <div style={{ marginTop: "2rem", display: "flex", flexDirection: "column", gap: "0.55rem", color: "var(--color-text-secondary)", fontSize: 14.5 }}>
            <div><strong style={{ color: "var(--color-mono-900)" }}>hello@guroo.work</strong></div>
            <div>Atlanta &middot; Georgia &middot; Remote</div>
            <div>Mon &ndash; Fri, 9:00 &ndash; 18:00 ET</div>
          </div>
        </div>
        <form className="cta-form" onSubmit={onSubmit}>
          {sent ? (
            <div style={{ padding: "2rem 0", textAlign: "center" }}>
              <div style={{ display: "inline-grid", placeItems: "center", width: 56, height: 56, borderRadius: 999, background: "var(--color-success-50)", color: "var(--color-success-600)", marginBottom: "1rem" }}>
                <Glyph kind="shield" size={26}/>
              </div>
              <h3 style={{ fontFamily: "var(--font-heading)", margin: "0 0 0.5rem" }}>Message received.</h3>
              <p style={{ margin: 0, color: "var(--color-text-secondary)", fontSize: 14.5 }}>A senior partner will reply within one business day.</p>
            </div>
          ) : (
            <>
              <div className="cta-form-row">
                <div className="field"><label htmlFor="n">Name</label><input id="n" required placeholder="Your full name"/></div>
                <div className="field"><label htmlFor="c">Company</label><input id="c" required placeholder="Where you work"/></div>
              </div>
              <div className="field"><label htmlFor="e">Work email</label><input id="e" type="email" required placeholder="you@company.com"/></div>
              <div className="field"><label htmlFor="t">What you&rsquo;re thinking about</label>
                <select id="t" defaultValue="">
                  <option value="" disabled>Pick the closest match</option>
                  <option>Custom SaaS development</option>
                  <option>Cloud architecture &amp; migration</option>
                  <option>Product / technology strategy</option>
                  <option>Embedded engineering team</option>
                  <option>Applied AI</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="field"><label htmlFor="m">A few sentences of context</label><textarea id="m" placeholder="The situation, the rough timeline, anything we should read first."/></div>
              <button type="submit" className="btn btn-primary" style={{ width: "100%", height: 50 }}>
                Send &mdash; we reply in one business day
                <span className="btn-arrow"><Glyph kind="arrow" size={16}/></span>
              </button>
              <p style={{ margin: "0.85rem 0 0", fontSize: 12.5, color: "var(--color-text-tertiary)", textAlign: "center" }}>
                Or write us directly at <strong>hello@guroo.work</strong>.
              </p>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">
              <GurooMark size={28} color="#fcfbf8"/>
              Guroo
            </div>
            <p className="footer-tag">
              Guroo Technology Services is an Atlanta-based studio building enterprise
              software for compliance-heavy industries.
            </p>
          </div>
          <div>
            <h6>Studio</h6>
            <ul>
              <li><a href="#services">Services</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#industries">Industries</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h6>Products</h6>
            <ul>
              <li><a href="#mtgos">Scout</a></li>
              <li><a href="#mtgos">Operational Console</a></li>
              <li><a href="#mtgos">Status</a></li>
            </ul>
          </div>
          <div>
            <h6>Company</h6>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press kit</a></li>
              <li><a href="#">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>&copy; 2026 Guroo Technology Services, Inc.</span>
          <span>hello@guroo.work &middot; Atlanta, GA</span>
        </div>
      </div>
    </footer>
  );
}

window.Guroo = Object.assign(window.Guroo || {}, {
  Services, FeaturedMtgOS, Process, Industries, QuoteSection, Contact, Footer
});