/* global React, Reveal, Icon, SHexLogo, useReveal */
const { useState: useStateR } = React;

// ============================================================
// REVIEWFLOW MARKETING SITE
// Product by Sinux Consulting
// ============================================================

function ReviewFlowPage() {
  return (
    <div className="page-enter rf-page" data-screen-label="ReviewFlow">
      <RFNav />
      <RFHero />
      <RFLogos />
      <RFProblem />
      <RFSolution />
      <RFHowItWorks />
      <RFFeatures />
      <RFWhoFor />
      <RFBenefits />
      <RFUseCases />
      <RFPricing />
      <RFFAQ />
      <RFFinalCTA />
      <RFFooter />
    </div>
  );
}

// ============================================================
// NAV
// ============================================================
function RFNav() {
  const [scrolled, setScrolled] = useStateR(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`rf-header ${scrolled ? "scrolled" : ""}`}>
      <div className="rf-nav-inner">
        <a href="/reviewflow" className="rf-brand">
          <RFLogo size={28} />
          <span className="rf-brand-text">ReviewFlow</span>
          <span className="rf-by-sinux">by Sinux Consulting</span>
        </a>
        <nav className="rf-nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#who">Who it's for</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="rf-nav-right">
          <a href="/consulting/contact" className="rf-btn rf-btn-primary">
            Book a Demo <Icon.arrow className="arrow" />
          </a>
        </div>
      </div>
    </header>
  );
}

// ============================================================
// LOGO — stylized RF mark
// ============================================================
function RFLogo({ size = 32 }) {
  const id = "rflogo-" + Math.floor(Math.random() * 1e6);
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#06b6d4" />
          <stop offset="100%" stopColor="#01A0A6" />
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="36" height="36" rx="10" fill={`url(#${id})`} />
      {/* QR-inspired squares */}
      <g fill="white" opacity="0.92">
        <rect x="8" y="8" width="8" height="8" rx="1.5" />
        <rect x="10" y="10" width="4" height="4" rx="0.5" fill={`url(#${id})`} />
        <rect x="24" y="8" width="8" height="8" rx="1.5" />
        <rect x="26" y="10" width="4" height="4" rx="0.5" fill={`url(#${id})`} />
        <rect x="8" y="24" width="8" height="8" rx="1.5" />
        <rect x="10" y="26" width="4" height="4" rx="0.5" fill={`url(#${id})`} />
        {/* Star at center */}
        <path d="M 20 22 L 21.4 25.1 L 24.7 25.5 L 22.3 27.6 L 23 30.7 L 20 29.2 L 17 30.7 L 17.7 27.6 L 15.3 25.5 L 18.6 25.1 Z" fill="#fbbf24"/>
      </g>
    </svg>
  );
}

// ============================================================
// HERO
// ============================================================
function RFHero() {
  return (
    <section className="rf-hero">
      <div className="rf-bg">
        <div className="rf-orb rf-orb-1" />
        <div className="rf-orb rf-orb-2" />
        <div className="rf-dotgrid" />
      </div>
      <div className="rf-container">
        <div className="rf-hero-grid">
          <div className="rf-hero-text">
            <Reveal>
              <div className="rf-pill rf-pill-soft">
                <span className="rf-dot-live"></span>
                Built by Sinux Consulting · Live in Malaysia
              </div>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="rf-h1">
                Turn Happy Customers Into{" "}
                <span className="rf-h1-accent">Google Reviews.</span>
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="rf-lede">
                ReviewFlow helps businesses collect private feedback, guide satisfied customers
                toward Google Reviews, and manage customer concerns — before they damage your
                online reputation.
              </p>
            </Reveal>
            <Reveal delay={320}>
              <div className="rf-cta-row">
                <a href="/consulting/contact" className="rf-btn rf-btn-primary rf-btn-lg">
                  Book a Demo <Icon.arrow className="arrow" />
                </a>
                <a href="#how" className="rf-btn rf-btn-ghost rf-btn-lg">
                  See How It Works
                </a>
              </div>
            </Reveal>
            <Reveal delay={420}>
              <div className="rf-hero-stats">
                <div>
                  <div className="rf-stat-num">6+</div>
                  <div className="rf-stat-label">Active Clients</div>
                </div>
                <div>
                  <div className="rf-stat-num">5.0<span className="rf-star-suffix">★</span></div>
                  <div className="rf-stat-label">Avg. Rating</div>
                </div>
                <div>
                  <div className="rf-stat-num">10s</div>
                  <div className="rf-stat-label">QR Scan to Review</div>
                </div>
              </div>
            </Reveal>
          </div>

          {/* PRODUCT VISUAL */}
          <Reveal delay={200} className="rf-hero-visual">
            <RFFlowVisual />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Interactive flow visual: QR → rating → split into Google / private
function RFFlowVisual() {
  return (
    <div className="rf-flow-card">
      {/* Phone mockup with QR scan */}
      <div className="rf-phone">
        <div className="rf-phone-notch" />
        <div className="rf-phone-screen">
          <div className="rf-phone-header">
            <RFLogo size={20} />
            <span style={{ fontSize: 11, fontWeight: 600, color: "#0f172a" }}>How was your visit?</span>
          </div>
          <div className="rf-phone-business">
            <div style={{ width: 36, height: 36, borderRadius: 8, background: "linear-gradient(135deg,#a78bfa,#6366f1)" }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#0f172a" }}>Café Sinaran</div>
              <div style={{ fontSize: 11, color: "#64748b" }}>Tap a star to rate</div>
            </div>
          </div>
          <div className="rf-phone-stars">
            {[1,2,3,4,5].map((i) => (
              <svg key={i} width="32" height="32" viewBox="0 0 24 24" fill="#fbbf24" style={{ filter: i === 5 ? "drop-shadow(0 0 8px rgba(251,191,36,0.6))" : "none" }}>
                <path d="M12 2l2.7 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.7l-5.9 3.3 1.6-6.6L2.5 8.9l6.8-.6z" />
              </svg>
            ))}
          </div>
          <div className="rf-phone-tag">5-star tapped</div>
        </div>
      </div>

      {/* Routing arrow */}
      <svg className="rf-flow-arrow" width="80" height="120" viewBox="0 0 80 120" fill="none">
        <path d="M0 60 L60 60 M50 50 L60 60 L50 70" stroke="#01A0A6" strokeWidth="1.5" strokeLinecap="round"/>
        <path d="M0 30 Q 30 30 30 10" stroke="#01A0A6" strokeWidth="1.5" strokeLinecap="round" strokeDasharray="3 4" opacity="0.4"/>
        <path d="M0 90 Q 30 90 30 110" stroke="#01A0A6" strokeWidth="1.5" strokeLinecap="round" strokeDasharray="3 4" opacity="0.4"/>
      </svg>

      {/* Routing outcomes */}
      <div className="rf-outcomes">
        <div className="rf-outcome rf-outcome-public">
          <div className="rf-google-pill">
            <GoogleGSmall />
            <span>Google Reviews</span>
          </div>
          <div className="rf-outcome-meta">
            <Stars5 />
            <span style={{ color: "#64748b", fontSize: 11 }}>Posted publicly</span>
          </div>
          <div className="rf-outcome-text">"Best brunch in PJ. Service was on point!"</div>
        </div>

        <div className="rf-outcome rf-outcome-private">
          <div className="rf-private-pill">
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#94a3b8" }} />
            <span>Private Feedback</span>
          </div>
          <div className="rf-outcome-meta">
            <span style={{ fontSize: 11, color: "#94a3b8" }}>To business inbox</span>
          </div>
          <div className="rf-outcome-text rf-outcome-text-private">
            "Waited 20 mins to be seated even though I had a booking."
          </div>
        </div>
      </div>
    </div>
  );
}

function Stars5() {
  return (
    <div style={{ display: "inline-flex", gap: 1 }}>
      {[1,2,3,4,5].map((i) => (
        <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill="#fbbc04">
          <path d="M12 2l2.7 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.7l-5.9 3.3 1.6-6.6L2.5 8.9l6.8-.6z" />
        </svg>
      ))}
    </div>
  );
}

function GoogleGSmall() {
  return (
    <svg width="12" height="12" viewBox="0 0 48 48">
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
      <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/>
      <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7C13.42 14.62 18.27 10.75 24 10.75z"/>
    </svg>
  );
}

// ============================================================
// LOGO STRIP — trusted by
// ============================================================
function RFLogos() {
  return (
    <section className="rf-logos-strip">
      <div className="rf-container">
        <div className="rf-logos-row">
          <span className="rf-logos-label">Trusted by businesses across Malaysia</span>
          <div className="rf-logos-list">
            {["Happy Clean Lawnscapes", "Dulu Dulu KL", "Labelle Bakehouse", "Artha's Kitchen", "Fade by SB", "Chacko"].map((n, i) => (
              <span key={i} className="rf-logo-pill">{n}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function RFProblem() {
  return (
    <section className="rf-section rf-section-dark">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">The Problem</div>
            <h2 className="rf-h2">
              Most businesses only hear about bad experiences <em>after</em> they become public.
            </h2>
            <p className="rf-section-lede">
              You ask for reviews when you remember. Happy customers leave without reviewing.
              Frustrated ones post publicly. By the time you see it, the damage is done.
            </p>
          </Reveal>
        </div>

        <div className="rf-grid-3">
          {[
            { n: "01", t: "Inconsistent asks", d: "Manual review requests are ad-hoc and easy to forget — most happy customers leave without saying anything." },
            { n: "02", t: "Public negative reviews", d: "Frustrated customers are more likely to post publicly than complain directly to you." },
            { n: "03", t: "No early warning", d: "You usually find out something went wrong only after a one-star review is already live on Google." },
          ].map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="rf-card">
                <div className="rf-card-num">{p.n}</div>
                <h3 className="rf-card-title">{p.t}</h3>
                <p className="rf-card-body">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SOLUTION
// ============================================================
function RFSolution() {
  return (
    <section className="rf-section">
      <div className="rf-container">
        <div className="rf-two-col">
          <div>
            <Reveal>
              <div className="rf-eyebrow">The Solution</div>
              <h2 className="rf-h2">
                ReviewFlow gives every customer a <em>better place</em> to respond.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p className="rf-lede" style={{ marginTop: 20 }}>
                A simple, repeatable system. Customers rate first. Satisfied ones get guided to
                Google. Unhappy ones go to your private inbox — where you can recover them before
                they ever post publicly.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <ul className="rf-bullet-list" style={{ marginTop: 28 }}>
                {[
                  "QR codes and short links you can place anywhere",
                  "Smart routing: ratings above 4★ go to Google, below stay private",
                  "Branded review portal with your logo and colours",
                  "Internal inbox for managing replies and tracking trends",
                ].map((b, i) => (
                  <li key={i}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#01A0A6" strokeWidth="2.5"><path d="M5 12l4 4L19 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <RFDashboardPreview />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function RFDashboardPreview() {
  return (
    <div className="rf-dashboard-card">
      <div className="rf-dash-chrome">
        <span className="rf-dash-dot" style={{background: "#ef4444"}} />
        <span className="rf-dash-dot" style={{background: "#fbbf24"}} />
        <span className="rf-dash-dot" style={{background: "#22c55e"}} />
        <span className="rf-dash-url">app.reviewflow.my/inbox</span>
      </div>
      <div className="rf-dash-body">
        <div className="rf-dash-header">
          <div>
            <div style={{ fontSize: 11, color: "#64748b", letterSpacing: "0.1em", textTransform: "uppercase" }}>This week</div>
            <div style={{ fontSize: 20, fontWeight: 600, color: "#0f172a", marginTop: 4 }}>34 new reviews</div>
          </div>
          <div className="rf-dash-metric">
            <Stars5 />
            <div style={{ fontSize: 22, fontWeight: 700, color: "#0f172a", marginTop: 2 }}>4.8</div>
            <div style={{ fontSize: 10, color: "#64748b" }}>avg this week</div>
          </div>
        </div>

        {/* Sparkline */}
        <svg viewBox="0 0 200 40" style={{ width: "100%", height: 40, marginTop: 12 }}>
          <defs>
            <linearGradient id="rf-spark" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#01A0A6" stopOpacity="0.4"/>
              <stop offset="100%" stopColor="#01A0A6" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M 0 28 L 25 25 L 50 30 L 75 22 L 100 18 L 125 14 L 150 16 L 175 10 L 200 8 L 200 40 L 0 40 Z" fill="url(#rf-spark)"/>
          <path d="M 0 28 L 25 25 L 50 30 L 75 22 L 100 18 L 125 14 L 150 16 L 175 10 L 200 8" fill="none" stroke="#01A0A6" strokeWidth="1.5"/>
        </svg>

        <div className="rf-dash-list">
          {[
            { who: "Aisha R.", time: "2h ago", stars: 5, route: "google", text: "Service was incredible from start to finish.", source: "Reception QR" },
            { who: "Anonymous", time: "5h ago", stars: 2, route: "private", text: "Order took 40 minutes…", source: "Receipt QR" },
            { who: "James L.", time: "1d ago", stars: 5, route: "google", text: "Will definitely be back!", source: "WhatsApp" },
          ].map((r, i) => (
            <div key={i} className="rf-dash-row">
              <div className="rf-dash-row-meta">
                <div style={{ fontSize: 12, fontWeight: 600, color: "#0f172a" }}>{r.who}</div>
                <div style={{ fontSize: 10, color: "#94a3b8" }}>{r.time} · {r.source}</div>
              </div>
              <div style={{ flex: 1, fontSize: 12, color: "#475569", marginLeft: 12 }}>{r.text}</div>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 2 }}>
                <div style={{ display: "flex", gap: 1 }}>
                  {Array.from({length: 5}).map((_, j) => (
                    <svg key={j} width="9" height="9" viewBox="0 0 24 24" fill={j < r.stars ? "#fbbc04" : "#e2e8f0"}>
                      <path d="M12 2l2.7 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.7l-5.9 3.3 1.6-6.6L2.5 8.9l6.8-.6z" />
                    </svg>
                  ))}
                </div>
                <span className={r.route === "google" ? "rf-dash-route rf-dash-route-google" : "rf-dash-route rf-dash-route-private"}>
                  {r.route === "google" ? "→ Google" : "Private"}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================
function RFHowItWorks() {
  const steps = [
    { n: "01", t: "Share your QR code or link", d: "Place it at reception, on receipts, in WhatsApp follow-ups, or embed it in email signatures." },
    { n: "02", t: "Customer leaves a quick rating", d: "One tap to rate. Branded portal with your logo so it feels native to your business." },
    { n: "03", t: "Smart routing kicks in", d: "Satisfied customers are guided to your Google Review page. Lower ratings open a private feedback form." },
    { n: "04", t: "Private feedback to your inbox", d: "Resolve issues directly with the customer — recover them before they ever post publicly." },
    { n: "05", t: "Track, reply, improve", d: "Manage all feedback from one dashboard. Track sources, reply via email, watch trends over time." },
  ];

  return (
    <section id="how" className="rf-section rf-section-dark">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">How It Works</div>
            <h2 className="rf-h2">From QR scan to review in <em>seconds.</em></h2>
          </Reveal>
        </div>

        <div className="rf-steps">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="rf-step">
                <div className="rf-step-num">{s.n}</div>
                <div className="rf-step-body">
                  <h3 className="rf-step-title">{s.t}</h3>
                  <p className="rf-step-desc">{s.d}</p>
                </div>
                {i < steps.length - 1 && <div className="rf-step-line" />}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FEATURES
// ============================================================
function RFFeatures() {
  const features = [
    { icon: "qr", t: "QR Review Links", d: "Generate QR codes and short links for any location, channel, or staff member." },
    { icon: "route", t: "Smart Rating Flow", d: "Threshold-based routing. High ratings to Google, low to private inbox." },
    { icon: "shield", t: "Private Feedback Capture", d: "Unhappy customers can explain the issue directly — never publicly first." },
    { icon: "google", t: "Google Review Redirects", d: "Native deep-link to your Google Business Profile review screen." },
    { icon: "tag", t: "Source Tracking", d: "See which QR, channel, or campaign generates the most reviews." },
    { icon: "inbox", t: "Feedback Inbox", d: "Filter, flag, resolve, and tag every review from one dashboard." },
    { icon: "mail", t: "Email Replies", d: "Reply directly to customers from your branded inbox — no app-switching." },
    { icon: "chart", t: "Analytics Dashboard", d: "Rating trends, top sources, unresolved feedback, conversion rates." },
  ];
  return (
    <section id="features" className="rf-section">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">Features</div>
            <h2 className="rf-h2">Everything you need to <em>collect</em>, <em>route</em>, and <em>manage</em>.</h2>
          </Reveal>
        </div>
        <div className="rf-grid-4">
          {features.map((f, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className="rf-card rf-feature-card">
                <div className="rf-feature-icon"><FeatIcon name={f.icon} /></div>
                <h3 className="rf-card-title">{f.t}</h3>
                <p className="rf-card-body">{f.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatIcon({ name }) {
  const props = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "qr": return <svg {...props}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3M21 14v3M14 21h3M21 21v0"/></svg>;
    case "route": return <svg {...props}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><circle cx="18" cy="6" r="2"/><path d="M6 8v8a2 2 0 002 2h8M8 6h8"/></svg>;
    case "shield": return <svg {...props}><path d="M12 3l8 3v5c0 5-4 9-8 10-4-1-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "google": return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "tag": return <svg {...props}><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/></svg>;
    case "inbox": return <svg {...props}><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/></svg>;
    case "mail": return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg>;
    case "chart": return <svg {...props}><path d="M3 3v18h18"/><path d="M7 16l4-4 4 2 5-7"/></svg>;
    default: return null;
  }
}

// ============================================================
// WHO IT'S FOR
// ============================================================
function RFWhoFor() {
  const cats = [
    { i: "🦷", t: "Dental Clinics" },
    { i: "💉", t: "Aesthetic Clinics" },
    { i: "🍽️", t: "Restaurants" },
    { i: "☕", t: "Cafés" },
    { i: "💇", t: "Salons & Barbers" },
    { i: "🏋️", t: "Gyms & Studios" },
    { i: "🔧", t: "Auto Workshops" },
    { i: "🌳", t: "Landscaping" },
    { i: "🏠", t: "Home Services" },
    { i: "🛍️", t: "Local Retail" },
  ];
  return (
    <section id="who" className="rf-section rf-section-dark">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">Who It's For</div>
            <h2 className="rf-h2">Built for businesses that <em>live on Google.</em></h2>
            <p className="rf-section-lede">
              If your customers find you on Google before they walk in, ReviewFlow is for you.
            </p>
          </Reveal>
        </div>
        <div className="rf-cat-grid">
          {cats.map((c, i) => (
            <Reveal key={i} delay={i * 30}>
              <div className="rf-cat-tile">
                <span className="rf-cat-icon" aria-hidden>{c.i}</span>
                <span className="rf-cat-text">{c.t}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// BENEFITS
// ============================================================
function RFBenefits() {
  const benefits = [
    { stat: "More", label: "Positive Google Reviews", d: "Convert every happy moment into public proof — consistently, not randomly." },
    { stat: "Fewer", label: "Public Negative Reviews", d: "Catch unhappy customers privately and recover them before they post." },
    { stat: "Real", label: "Customer Insight", d: "Real feedback from real customers, organised by location and source." },
    { stat: "Stronger", label: "Local SEO Signals", d: "Consistent review volume supports trust and visibility on Google." },
  ];
  return (
    <section className="rf-section">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">Benefits</div>
            <h2 className="rf-h2">Protect your reputation while <em>growing</em> your review count.</h2>
          </Reveal>
        </div>
        <div className="rf-grid-2 rf-benefits-grid">
          {benefits.map((b, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="rf-benefit-card">
                <div className="rf-benefit-stat">
                  <span className="rf-benefit-stat-num">{b.stat}</span>
                  <span className="rf-benefit-stat-label">{b.label}</span>
                </div>
                <p className="rf-benefit-desc">{b.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// USE CASES
// ============================================================
function RFUseCases() {
  const cases = [
    { t: "Reception counter", d: "Standing acrylic with your QR. Every paying customer sees it on the way out." },
    { t: "WhatsApp follow-up", d: "Send the review link after the appointment. Catch them while the experience is fresh." },
    { t: "Receipt QR codes", d: "Print the QR at the bottom of every receipt — physical or digital." },
    { t: "Per-branch tracking", d: "Different QR per branch. See which location drives the most positive reviews." },
    { t: "Per-staff tracking", d: "Tag QRs to staff members and track who consistently delivers 5-star service." },
    { t: "Campaign links", d: "Run a campaign for new customers? Track its review yield separately." },
  ];
  return (
    <section className="rf-section rf-section-dark">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">Use Cases</div>
            <h2 className="rf-h2">One product. <em>Many</em> ways to use it.</h2>
          </Reveal>
        </div>
        <div className="rf-grid-3">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className="rf-usecase-card">
                <h3 className="rf-usecase-title">{c.t}</h3>
                <p className="rf-usecase-desc">{c.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRICING
// ============================================================
function RFPricing() {
  return (
    <section id="pricing" className="rf-section">
      <div className="rf-container">
        <div className="rf-section-header">
          <Reveal>
            <div className="rf-eyebrow">Pricing</div>
            <h2 className="rf-h2">Simple setup. <em>No long contracts.</em></h2>
            <p className="rf-section-lede">
              Two ways to get started — standalone, or bundled with a Sinux Consulting website.
            </p>
          </Reveal>
        </div>

        <div className="rf-pricing-grid">
          <Reveal>
            <div className="rf-pricing-card">
              <div className="rf-pricing-badge">Standalone</div>
              <h3 className="rf-pricing-title">ReviewFlow</h3>
              <p className="rf-pricing-sub">For businesses that already have a website</p>
              <div className="rf-pricing-amount">
                <span className="rf-pricing-currency">RM</span>
                <span className="rf-pricing-num">999</span>
                <span className="rf-pricing-period">one-time setup</span>
              </div>
              <div className="rf-pricing-amount rf-pricing-amount-sub">
                + <strong>RM 100/month</strong> hosting & support
              </div>
              <ul className="rf-pricing-feat">
                <li>Custom-branded review portal</li>
                <li>Unlimited QR codes and links</li>
                <li>Smart Google / private routing</li>
                <li>Inbox & analytics dashboard</li>
                <li>Email replies to customers</li>
                <li>Source & branch tracking</li>
              </ul>
              <a href="/consulting/contact" className="rf-btn rf-btn-outline rf-btn-block">
                Start with ReviewFlow
              </a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="rf-pricing-card rf-pricing-card-featured">
              <div className="rf-pricing-ribbon">Best Value</div>
              <div className="rf-pricing-badge">Website + ReviewFlow Bundle</div>
              <h3 className="rf-pricing-title">Bundle</h3>
              <p className="rf-pricing-sub">Custom website + ReviewFlow in one package</p>
              <div className="rf-pricing-amount">
                <span className="rf-pricing-currency">RM</span>
                <span className="rf-pricing-num">1,499</span>
                <span className="rf-pricing-period">one-time setup</span>
              </div>
              <div className="rf-pricing-amount rf-pricing-amount-sub">
                + <strong>RM 150/month</strong> hosting & maintenance
              </div>
              <ul className="rf-pricing-feat">
                <li>Everything in Standalone</li>
                <li>Custom website (designed & built)</li>
                <li>Hosting & platform maintenance</li>
                <li>Up to 4 hours/month of website edits</li>
                <li>SSL, performance & security monitoring</li>
                <li>Priority support</li>
              </ul>
              <a href="/consulting/contact" className="rf-btn rf-btn-primary rf-btn-block">
                Get the Bundle <Icon.arrow className="arrow" />
              </a>
            </div>
          </Reveal>
        </div>
        <Reveal delay={240}>
          <p className="rf-pricing-note">
            Need something different? <a href="/consulting/contact">Talk to Sinux Consulting</a> — we'll tailor a package to your business.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function RFFAQ() {
  const [open, setOpen] = useStateR(0);
  const faqs = [
    { q: "Does ReviewFlow remove or block bad reviews?", a: "No. ReviewFlow does not remove or hide any reviews. It gives you a structured way to collect private feedback first — so you can resolve issues with the customer directly before they decide to post publicly. Customers are always free to leave any review they want on Google." },
    { q: "Can customers still leave bad Google reviews?", a: "Yes, always. ReviewFlow doesn't restrict anyone. It simply offers a better first step — and businesses that respond to private feedback well typically see fewer public negative reviews over time." },
    { q: "Do I need a website to use ReviewFlow?", a: "No. ReviewFlow works as a standalone QR / review link. It pairs well with a Sinux Consulting website if you want both, but it's not required." },
    { q: "Can I use it for multiple branches?", a: "Yes. You can create branch-specific QRs and links, and the dashboard will show you which location is generating the most feedback." },
    { q: "Can I track where reviews come from?", a: "Yes. Every QR and link can include a source tag — reception, receipt, WhatsApp, staff name, campaign, etc. The dashboard breaks down results by source." },
    { q: "Is it suitable for my industry?", a: "If your business depends on customer trust and Google visibility — clinics, restaurants, salons, services, retail — ReviewFlow is built for you. If you're unsure, book a demo and we'll walk through your use case." },
    { q: "Who owns the data?", a: "You do. All reviews, customer feedback, and analytics in your dashboard are yours. Sinux Consulting hosts the platform and provides support, but the data belongs to your business." },
  ];
  return (
    <section id="faq" className="rf-section rf-section-dark">
      <div className="rf-container">
        <div className="rf-faq-grid">
          <div>
            <div className="rf-eyebrow">FAQ</div>
            <h2 className="rf-h2">Common <em>questions.</em></h2>
            <p className="rf-section-lede" style={{ marginTop: 20 }}>
              Still wondering? <a href="/consulting/contact" style={{ color: "#01A0A6" }}>Get in touch</a> — we'll answer directly.
            </p>
          </div>
          <div>
            {faqs.map((f, i) => (
              <Reveal key={i} delay={i * 40}>
                <div className={`rf-faq-item ${open === i ? "open" : ""}`}>
                  <button className="rf-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="rf-faq-plus">+</span>
                  </button>
                  <div className="rf-faq-a"><div className="rf-faq-a-inner">{f.a}</div></div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function RFFinalCTA() {
  return (
    <section className="rf-section rf-cta-section">
      <div className="rf-container">
        <Reveal>
          <div className="rf-cta-card">
            <h2 className="rf-h2" style={{ color: "white", maxWidth: "20ch", marginInline: "auto", textAlign: "center" }}>
              Ready to build a stronger <em>online reputation?</em>
            </h2>
            <p className="rf-section-lede" style={{ color: "rgba(255,255,255,0.8)", textAlign: "center", maxWidth: 580, marginInline: "auto", marginTop: 20 }}>
              Book a demo with Sinux Consulting. We'll set you up with QR codes, your branded portal, and your first 100 reviews-worth of capacity within a week.
            </p>
            <div className="rf-cta-row" style={{ justifyContent: "center", marginTop: 32 }}>
              <a href="/consulting/contact" className="rf-btn rf-btn-primary rf-btn-lg">
                Book a Demo <Icon.arrow className="arrow" />
              </a>
              <a href="https://wa.me/60126187256" target="_blank" rel="noreferrer" className="rf-btn rf-btn-ghost-light rf-btn-lg">
                <Icon.whatsapp /> WhatsApp Us
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER — lightweight, branded back to Sinux Consulting
// ============================================================
function RFFooter() {
  return (
    <footer className="rf-footer">
      <div className="rf-container">
        <div className="rf-footer-grid">
          <div>
            <a href="/reviewflow" className="rf-brand" style={{ marginBottom: 14 }}>
              <RFLogo size={28} />
              <span className="rf-brand-text">ReviewFlow</span>
            </a>
            <p style={{ color: "var(--ink-3)", fontSize: 13, lineHeight: 1.65, maxWidth: 320, marginTop: 12 }}>
              Reputation management for businesses that depend on customer trust.
              A product by Sinux Consulting.
            </p>
          </div>
          <div>
            <div className="footer-h">Product</div>
            <div className="footer-links">
              <a href="#how">How it works</a>
              <a href="#features">Features</a>
              <a href="#pricing">Pricing</a>
              <a href="#faq">FAQ</a>
            </div>
          </div>
          <div>
            <div className="footer-h">Sinux Consulting</div>
            <div className="footer-links">
              <a href="/consulting">Consulting Home</a>
              <a href="/consulting/contact">Contact Us</a>
              <a href="mailto:info@sinuxconsulting.com">info@sinuxconsulting.com</a>
              <a href="tel:+60126187256">+60 12-618 7256</a>
            </div>
          </div>
          <div>
            <div className="footer-h">Legal</div>
            <div className="footer-links">
              <a href="/terms">Terms & Conditions</a>
              <a href="/privacy">Privacy Policy</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom" style={{ marginTop: 48, paddingTop: 20 }}>
          <div>© 2025 ReviewFlow · A product by Sinux Consulting</div>
          <div>Registered in Malaysia · SSM: 202503207573</div>
          <div><a href="/terms" style={{ color: "inherit", textDecoration: "none" }}>Terms</a> · <a href="/privacy" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a></div>
        </div>
      </div>
    </footer>
  );
}

window.ReviewFlowPage = ReviewFlowPage;