/* global React, SiteHeader, SubNav, HeroBg, Footer, ContactSection, Reveal, Icon, Testimonials, ProjectCard */
const { useState: useStateT } = React;

function TechConsultingPage() {
  const [openFaq, setOpenFaq] = useStateT(0);

  const tiers = [
    {
      num: "01",
      label: "Advisory & Planning",
      heading: "Before we build, we define.",
      body: "This is where ideas become architecture. Through deep discovery and documentation, we convert your vision into a clear technical roadmap. Our consultants work directly with stakeholders to ensure every requirement is understood, mapped, and ready for execution.",
      deliverables: [
        "Business Requirements Document (BRD)",
        "Functional Specification Document (FSD)",
        "Software Architecture Document (SAD)",
        "User Journeys & Use Case Mapping",
        "Data Models, Integration Plans & Security Considerations",
        "Optional AI Opportunity Mapping",
      ],
    },
    {
      num: "02",
      label: "MVP / POC",
      heading: "Test the idea. Prove the value. Stay lean.",
      body: "We take your approved advisory output and turn it into a functional prototype, POC, or MVP. The goal: validate your concept fast, attract users or investors, and minimize cost before scaling.",
      deliverables: [
        "Working MVP or POC",
        "Frontend + Backend Development (Web / Mobile)",
        "Admin Dashboards or Portals",
        "Deployment + Training Walkthrough",
        "Optional AI Components (chatbots, summarizers, data tools)",
        "Demo-Ready Pitch Support",
      ],
    },
    {
      num: "03",
      label: "Full Suite",
      heading: "From idea to impact — fully delivered.",
      body: "Once your MVP is validated, we execute the full-scale build — robust, integrated, and ready for market. From infrastructure to deployment, every component is designed for performance, security, and AI scalability.",
      deliverables: [
        "End-to-End System Build (Web, App, or Hybrid)",
        "All Roles, Workflows, and Backend Logic",
        "API Integrations (Payments, CRM, SaaS, etc.)",
        "Hosting, DevOps & Security Configuration",
        "Optional AI Modules (LLMs, pipelines, automation)",
        "Documentation, Handover, and Team Training",
      ],
    },
  ];

  const services = [
    { icon: <Icon.brief />, title: "Business & Tech Consulting", desc: "Workshops, process mapping, and tailored strategies aligning business goals with tech." },
    { icon: <Icon.layers />, title: "System Design & Delivery", desc: "From BRDs and architecture blueprints to agile delivery and vendor coordination." },
    { icon: <Icon.shield />, title: "Testing & Operational Readiness", desc: "End-to-end QA, documentation, and smooth handover ensuring long-term success." },
  ];

  const faqs = [
    { q: "What exactly does Sinux Technology Consulting include?", a: "Our consulting covers the entire product journey — from defining your business goals to delivering a market-ready solution. Strategy, architecture, build, deployment and handover." },
    { q: "How is this different from hiring a development agency?", a: "Traditional development agencies jump straight into coding. At Sinux, we start with consulting — aligning strategy, business goals, and tech roadmap before a single line of code is written." },
    { q: "Do I need to have a technical background to work with you?", a: "No. Our consultants translate complex technology into simple, actionable insights for founders, investors, and business teams." },
    { q: "Can I start small, like with an MVP or just the advisory phase?", a: "Yes. Many clients begin with Tier 1 (Advisory & Planning) or Tier 2 (MVP Development) before moving into full execution." },
  ];

  return (
    <div className="page-enter theme-consult" data-screen-label="Tech Consulting">
      <SiteHeader current="consulting" theme="consult" />
      <SubNav
        active="tech"
        items={[
          { id: "overview", href: "#/consulting", label: "Overview" },
          { id: "growth", href: "#/consulting/digital-growth/websites", label: "Digital Growth" },
          { id: "tech", href: "#/consulting/tech-consulting", label: "Tech Consulting" },
          { id: "contact", href: "#/consulting/contact", label: "Contact" },
        ]}
      />

      {/* HERO */}
      <section className="hero" data-screen-label="01 Tech Hero">
        <HeroBg theme="consult" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Sinux Consulting · Technology</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1" style={{ marginTop: 24, marginBottom: 24, maxWidth: "16ch" }}>
              Next-Gen Technology Consulting.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 640 }}>
              Empowering founders and enterprises to design, validate, and scale intelligent products —
              faster, smarter, and AI-ready by design.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="/consulting/contact" className="btn btn-primary">Start Your Project <Icon.arrow className="arrow" /></a>
              <a href="#tiers" className="btn btn-ghost">See Our 3-Tier Model</a>
            </div>
          </Reveal>
        </div>
        <div className="scroll-cue">Scroll</div>
      </section>

      {/* WHAT WE DO */}
      <section className="section-py" data-screen-label="02 What We Do">
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <span className="eyebrow">What We Do</span>
            </Reveal>
            <div>
              <Reveal delay={80}>
                <h2 className="h2" style={{ marginBottom: 24, maxWidth: "26ch" }}>
                  End-to-End Technology Consulting & Execution — Built for Scale. AI-Ready by Design.
                </h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="lede" style={{ maxWidth: 720 }}>
                  We help founders and businesses turn ideas into digital products through a clear 3-stage model:
                  Advisory, MVP/POC, and Full Suite Execution. Whether you're validating a new concept or scaling
                  a live platform, our consulting framework ensures clarity, alignment, and technical precision
                  from start to finish — with optional AI integration at every step.
                </p>
              </Reveal>
              <Reveal delay={220}>
                <div className="row-reflow" style={{ marginTop: 32 }}>
                  <span className="pill accent">Clear 3-Stage Model</span>
                  <span className="pill accent">AI Integration at Every Step</span>
                  <span className="pill accent">From Idea to Impact</span>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* 3-TIER MODEL */}
      <section id="tiers" className="section-py" data-screen-label="03 Tiers" style={{ background: "rgba(1,160,166,0.04)", borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">The 3-Tier Model</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>
              A structured path from idea to scaled impact.
            </h2>
          </Reveal>

          <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: "clamp(48px, 8vw, 96px)" }}>
            {tiers.map((tier, i) => (
              <Reveal key={i}>
                <div className="editorial-two-col">
                  <div>
                    <div className="tier-num">{tier.num}</div>
                    <div className="display" style={{ color: "var(--accent)", fontSize: 14, marginTop: 16, letterSpacing: "0.12em" }}>
                      {tier.label.toUpperCase()}
                    </div>
                  </div>
                  <div>
                    <h3 className="h3" style={{ marginBottom: 16, fontSize: "clamp(24px,3vw,36px)" }}>
                      {tier.heading}
                    </h3>
                    <p className="lede" style={{ marginBottom: 28 }}>
                      {tier.body}
                    </p>
                    <div className="display" style={{ color: "var(--ink-3)", fontSize: 11, letterSpacing: "0.18em", marginBottom: 12 }}>
                      DELIVERABLES
                    </div>
                    <div className="auto-grid" style={{ "--min": "260px", gap: 8 }}>
                      {tier.deliverables.map((d, j) => (
                        <div key={j} className="check" style={{ padding: "10px 14px", background: "rgba(255,255,255,0.02)", borderRadius: 10, border: "1px solid var(--line-2)" }}>
                          <span className="check-mark"><Icon.check /></span>
                          <span style={{ fontSize: 14 }}>{d}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES SUMMARY */}
      <section className="section-py" data-screen-label="04 Services Summary">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Services</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>What we ship.</h2>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "260px", marginTop: 48 }}>
            {services.map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="card" style={{ height: "100%" }}>
                  <div style={{ width: 52, height: 52, borderRadius: 14, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    {s.icon}
                  </div>
                  <h4 className="h4" style={{ marginTop: 20, marginBottom: 10 }}>{s.title}</h4>
                  <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.65 }}>{s.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECTS */}
      <section className="section-py" data-screen-label="05 Projects" style={{ borderTop: "1px solid var(--line-2)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">Notable Projects</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>Recent engagements.</h2>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "320px", marginTop: 40 }}>
            {REAL_PROJECTS.slice(0, 3).map((p, i) => (
              <RealProjectCard key={p.name} p={p} index={i} />
            ))}
          </div>
        </div>
      </section>

      <Testimonials />

      {/* FAQ */}
      <section className="section-py" data-screen-label="07 FAQ">
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <div>
                <span className="eyebrow">FAQ</span>
                <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>Frequently Asked.</h2>
              </div>
            </Reveal>
            <div>
              {faqs.map((f, i) => (
                <Reveal key={i} delay={i * 40}>
                  <div className={`acc-item ${openFaq === i ? "open" : ""}`}>
                    <button className="acc-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                      {f.q}
                      <span className="plus"><Icon.plus /></span>
                    </button>
                    <div className="acc-a"><div className="acc-a-inner">{f.a}</div></div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-py" data-screen-label="08 CTA" style={{ textAlign: "center" }}>
        <div className="container">
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 18, maxWidth: "18ch", marginInline: "auto" }}>Let's Build What's Next.</h2>
            <p className="lede" style={{ maxWidth: 640, marginInline: "auto" }}>
              We don't sell code — we deliver outcomes. From concept validation to full-scale deployment,
              our technology consulting helps you plan smarter, build faster, and scale confidently.
            </p>
            <div className="row-reflow" style={{ marginTop: 32, justifyContent: "center" }}>
              <a href="/consulting/contact" className="btn btn-primary">Get In Touch <Icon.arrow className="arrow" /></a>
              <a href="https://wa.me/60126187256" target="_blank" rel="noreferrer" className="btn btn-ghost"><Icon.whatsapp /> WhatsApp</a>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer variant="consult" />
    </div>
  );
}

window.TechConsultingPage = TechConsultingPage;