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

function WebsitesPage() {
  const [currency, setCurrency] = useStateW("USD");
  const [openFaq, setOpenFaq] = useStateW(0);

  const basicPrice = currency === "USD" ? "$299" : "RM299";
  const proPrice = currency === "USD" ? "$499" : "RM499";

  const basicIncluded = [
    "Custom Website Design",
    "Search Engine Optimization (SEO)",
    "Unlimited Website Updates",
    "Mobile Responsive Design",
    "Local SEO Strategy",
    "SSL Certificate Included",
    "Ongoing Support & Maintenance",
    "Performance Optimization",
    "Security Monitoring",
  ];
  const proIncluded = [
    "Everything in Basic",
    "Local SEO Management",
    "Global GEO Optimization (ChatGPT, Gemini, Perplexity)",
    "Google Business Profile Optimization",
    "Quarterly SEO Health Report",
    "Conversion Tracking Setup",
    "2 Free Local Service Area Pages",
    "Premium Email Support (1–3 days)",
    "2 SEO Blog Posts per Month",
  ];
  const signatureIncluded = [
    "Fully custom website design and development",
    "Discovery & design brief process",
    "SEO-ready structure from day one",
    "Mobile-responsive and performance-optimized",
    "SSL, hosting setup, domain connection",
    "Training and handover session",
    "Monthly Care Plan (updates, monitoring, security, support)",
  ];

  const benefits = [
    { icon: "🔍", t: "93% of online experiences begin with a search engine." },
    { icon: "📍", t: "Local SEO means customers find YOU first when searching near them." },
    { icon: "🤖", t: "GEO Optimization makes you visible on AI platforms like ChatGPT and Gemini — the new frontier of search." },
    { icon: "📈", t: "SEO subscriptions include regular updates so your rankings compound over time." },
    { icon: "💬", t: "2 blog posts per month keeps your content fresh, authoritative, and working 24/7." },
    { icon: "✅", t: "No technical skills required — we handle everything." },
  ];

  const faqs = [
    { q: "How long does it take to launch?", a: "2–3 weeks after design approval and content submission." },
    { q: "What's included in unlimited updates?", a: "Text, images, pages, pricing changes — anything content-related. If it lives on your site, we'll update it." },
    { q: "What's the difference between Basic and Pro Growth?", a: "Pro adds active SEO management, Google Business Profile optimization, AI search optimization (GEO), and 2 blog posts/month." },
    { q: "What is the Signature Build + Care Plan?", a: "A bespoke, project-scoped website engagement with a fixed quote — ideal for businesses that want a completely custom build rather than a subscription template." },
    { q: "Do I need to sign a contract?", a: "Pro subscriptions are on a 12-month commitment. Month-to-month available at a higher rate." },
    { q: "Can I upgrade?", a: "Yes, anytime — contact us and we'll migrate you with zero downtime." },
  ];

  return (
    <div className="page-enter theme-consult" data-screen-label="Websites Page">
      <SiteHeader current="consulting" theme="consult" />
      <SubNav
        active="growth"
        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 Websites Hero" style={{ minHeight: "min(86svh, 760px)" }}>
        <HeroBg theme="consult" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Digital Growth · Websites</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1" style={{ marginTop: 24, marginBottom: 24, maxWidth: "18ch" }}>
              Websites That Work While You Sleep.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 640 }}>
              Two ways to get a powerful, SEO-optimized website from Sinux Consulting — built for local
              businesses and growing brands who want results, not headaches.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="#offerings" className="btn btn-primary">See Offerings <Icon.arrow className="arrow" /></a>
              <a href="#faq" className="btn btn-ghost">FAQ</a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* OFFERINGS */}
      <section id="offerings" className="section-py" data-screen-label="02 Offerings">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Two Service Offerings</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 16, maxWidth: "22ch" }}>
              Subscribe or commission. Either way, fully managed.
            </h2>
          </Reveal>

          {/* SUBSCRIPTION SECTION */}
          <div style={{ marginTop: 48 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginBottom: 28 }}>
              <div>
                <div className="pill accent">Option A · Monthly Subscription</div>
                <h3 className="h3" style={{ marginTop: 14 }}>SEO Growth Subscription</h3>
                <p className="text-muted" style={{ marginTop: 8, maxWidth: 560 }}>
                  Ongoing managed website service. Never worry about your site again.
                </p>
              </div>
              <div className="price-toggle" role="group" aria-label="Currency">
                <button className={currency === "USD" ? "on" : ""} onClick={() => setCurrency("USD")}>🇺🇸 USD</button>
                <button className={currency === "MYR" ? "on" : ""} onClick={() => setCurrency("MYR")}>🇲🇾 MYR</button>
              </div>
            </div>

            <div className="auto-grid" style={{ "--min": "320px", gap: "var(--gap-lg)" }}>
              <PricingCard
                tier="Basic"
                price={basicPrice}
                cadence="/month"
                features={basicIncluded}
                ctaHref="https://buy.stripe.com/eVq6oG6Pz3MO3Wv1Nq5ZC01"
              />
              <PricingCard
                tier="Pro Growth"
                price={proPrice}
                cadence="/month"
                features={proIncluded}
                ctaHref="https://buy.stripe.com/fZudR81vf6Z0akT63G5ZC00"
                popular
              />
            </div>
          </div>

          {/* SIGNATURE BUILD */}
          <div style={{ marginTop: 80 }}>
            <Reveal>
              <div className="pill accent">Option B · Project Engagement</div>
              <h3 className="h3" style={{ marginTop: 14 }}>Signature Build + Care Plan</h3>
              <p className="text-muted" style={{ marginTop: 8, maxWidth: 640 }}>
                A fully custom, professionally built website delivered as a scoped project — not a template.
                Then maintained on a monthly care retainer.
              </p>
            </Reveal>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "var(--gap-lg)" }} className="auto-grid">
              <Reveal>
                <div className="card elevated" style={{ height: "100%" }}>
                  <h4 className="h4" style={{ marginBottom: 18 }}>What's included</h4>
                  <div>
                    {signatureIncluded.map((f, i) => (
                      <div key={i} className="check">
                        <span className="check-mark"><Icon.check /></span>
                        <span>{f}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
              <Reveal delay={100}>
                <div className="card elevated" style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                    <h4 className="h4" style={{ marginBottom: 12 }}>Process at a glance</h4>
                    <ol style={{ paddingLeft: 0, listStyle: "none", margin: 0, marginTop: 18 }}>
                      {[
                        ["Discovery", "Goals, audience, competitive landscape, success metrics."],
                        ["Design Brief", "Brand cues, references, content blueprint, wireframe approval."],
                        ["Build", "Custom design system, dev, SEO architecture, content."],
                        ["Launch", "Domain & hosting setup, training, handover."],
                        ["Care", "Monthly retainer for updates, security, performance."],
                      ].map(([t, d], i) => (
                        <li key={i} style={{ display: "grid", gridTemplateColumns: "40px 1fr", gap: 16, padding: "14px 0", borderBottom: i < 4 ? "1px solid var(--line-2)" : "none" }}>
                          <span className="display" style={{ color: "var(--accent)", fontSize: 14 }}>0{i + 1}</span>
                          <div>
                            <div style={{ fontWeight: 500 }}>{t}</div>
                            <div style={{ color: "var(--ink-3)", fontSize: 13, marginTop: 4 }}>{d}</div>
                          </div>
                        </li>
                      ))}
                    </ol>
                  </div>
                  <div style={{ marginTop: 28 }}>
                    <a href="/consulting/contact" className="btn btn-primary">Get a Custom Quote <Icon.arrow className="arrow" /></a>
                    <div style={{ color: "var(--ink-3)", fontSize: 13, marginTop: 14 }}>Pricing tailored to project scope. Contact us to discuss.</div>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* SEO BENEFITS */}
      <section className="section-py" data-screen-label="03 SEO Benefits" style={{ background: "rgba(1,160,166,0.04)", borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)" }}>
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <div>
                <span className="eyebrow">Why SEO</span>
                <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>
                  The most important investment you can make.
                </h2>
              </div>
            </Reveal>
            <div>
              <Reveal>
                <p className="lede" style={{ marginBottom: 32 }}>
                  SEO compounds over time — unlike ads that stop working the moment you stop paying, a
                  well-optimized website keeps delivering traffic, leads, and credibility around the clock.
                </p>
              </Reveal>
              <div className="auto-grid" style={{ "--min": "280px", gap: 14 }}>
                {benefits.map((b, i) => (
                  <Reveal key={i} delay={i * 50}>
                    <div className="card" style={{ height: "100%", padding: "20px 22px" }}>
                      <div style={{ fontSize: 22, marginBottom: 10 }}>{b.icon}</div>
                      <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6 }}>{b.t}</div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="section-py" data-screen-label="04 FAQ">
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <div>
                <span className="eyebrow">FAQ</span>
                <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>Common questions.</h2>
                <p className="text-muted" style={{ maxWidth: 280 }}>Can't find what you're looking for? <a href="/consulting/contact" style={{ color: "var(--accent)" }}>Get in touch</a>.</p>
              </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="05 CTA" style={{ textAlign: "center" }}>
        <div className="container">
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 20, maxWidth: "18ch", marginInline: "auto" }}>
              Start Your Online Presence Today.
            </h2>
            <p className="lede" style={{ maxWidth: 580, marginInline: "auto", marginBottom: 32 }}>
              Pick a subscription plan or commission a custom Signature Build — either way, you'll be working
              with a team that builds for outcomes.
            </p>
            <div className="row-reflow" style={{ justifyContent: "center" }}>
              <a href="https://buy.stripe.com/fZudR81vf6Z0akT63G5ZC00" target="_blank" rel="noreferrer" className="btn btn-primary">Start Your Subscription <Icon.arrow className="arrow" /></a>
              <a href="/consulting/contact" className="btn btn-outline">Request a Signature Quote</a>
            </div>
          </Reveal>
        </div>
      </section>

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

function PricingCard({ tier, price, cadence, features, ctaHref, popular }) {
  return (
    <Reveal>
      <div className="card elevated" style={{ height: "100%", position: "relative", padding: "clamp(28px, 3vw, 40px)", border: popular ? "1px solid color-mix(in oklab, var(--accent) 70%, transparent)" : undefined }}>
        {popular && <div className="popular-ribbon">Most Popular</div>}
        <div className="eyebrow" style={{ color: "var(--ink-3)" }}>{tier}</div>
        <div style={{ marginTop: 14, display: "flex", alignItems: "baseline", gap: 8 }}>
          <div className="display" style={{ fontSize: "clamp(40px, 5vw, 56px)", color: "var(--accent)" }}>{price}</div>
          <div style={{ color: "var(--ink-3)" }}>{cadence}</div>
        </div>
        <div style={{ height: 1, background: "var(--line-2)", margin: "24px 0" }} />
        <div>
          {features.map((f, i) => (
            <div key={i} className="check">
              <span className="check-mark"><Icon.check /></span>
              <span>{f}</span>
            </div>
          ))}
        </div>
        <a href={ctaHref} target="_blank" rel="noreferrer" className={`btn ${popular ? "btn-primary" : "btn-outline"}`} style={{ marginTop: 28, width: "100%", justifyContent: "center" }}>
          Start Your Subscription <Icon.arrow className="arrow" />
        </a>
      </div>
    </Reveal>
  );
}

window.WebsitesPage = WebsitesPage;