/* global React, Eyebrow, StripeCorner */

function ServicesGrid({ onCTA }) {
  const services = [
    {
      key: "admin",
      eyb: "Service",
      title: "Administrative support",
      body: "Inbox management, calendar scheduling, document creation, data entry, CRM updates, and client communication. The day-to-day work that keeps your business moving, handled with care and consistency.",
      bullets: ["Inbox management and email drafting", "Calendar scheduling and follow-ups", "Document creation and filing"],
      tone: "cream",
    },
    {
      key: "social",
      eyb: "Service",
      title: "Social media scheduling",
      body: "Captions written, posts scheduled, comments monitored. A steady, professional presence online without you spending your evenings on Canva.",
      bullets: ["Captions and graphics", "Posting schedules", "Comments, DMs, and mentions"],
      tone: "green",
    },
    {
      key: "ops",
      eyb: "Service",
      title: "Operations and growth support",
      body: "Workflow documentation, SOP creation, project coordination, and deadline tracking. The operational backbone that helps your business scale without chaos.",
      bullets: ["Workflow organization and SOP creation", "Project coordination", "Deadline tracking and process improvement"],
      tone: "purple",
    },
  ];

  const tones = {
    cream:  { bg: "#ffffff",  fg: "#2f1d4b", sub: "#5a4a73", dotBg: "#2f1d4b", ctaBg: "#2f1d4b", ctaFg: "#faf5ec", border: "1px solid rgba(47,29,75,0.10)", shadow: "0 1px 0 rgba(47,29,75,0.04), 0 8px 24px -10px rgba(47,29,75,0.10)" },
    purple: { bg: "#2f1d4b",  fg: "#faf5ec", sub: "rgba(250,245,236,0.78)", dotBg: "#c3a8ff", ctaBg: "#c3a8ff", ctaFg: "#2f1d4b", border: "1px solid transparent", shadow: "none" },
    green:  { bg: "#effaef",  fg: "#2f1d4b", sub: "#3f4d35", dotBg: "#758766", ctaBg: "#758766", ctaFg: "#effaef", border: "1px solid transparent", shadow: "none" },
  };

  return (
    <section className="services-section" id="services" style={{ position: "relative", overflow: "hidden" }}>
      <StripeCorner position="tr" size={200} color="#c3a8ff" opacity={0.20}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="services-header">
          <div>
            <Eyebrow>What we handle</Eyebrow>
            <h2 className="services-headline">We handle the operational layer so you do not have to.</h2>
          </div>
        </div>

        <div className="svc-grid">
          {services.map((s) => {
            const t = tones[s.tone];
            return (
              <div key={s.key} className="svc-card" style={{ background: t.bg, color: t.fg, border: t.border, boxShadow: t.shadow }}>
                <div className="svc-eyebrow" style={{ color: t.sub }}>{s.eyb}</div>
                <h3 className="svc-title">{s.title}</h3>
                <p className="svc-body" style={{ color: t.sub }}>{s.body}</p>
                <ul className="svc-bullets">
                  {s.bullets.map((b) => (
                    <li key={b} className="svc-bullet" style={{ color: t.sub }}>
                      <span className="svc-bullet-dot" style={{ background: t.dotBg }}/>
                      {b}
                    </li>
                  ))}
                </ul>
                <div style={{ flex: 1 }}/>
                <button onClick={onCTA} className="svc-cta" style={{ background: t.ctaBg, color: t.ctaFg }}>
                  Explore {s.title.split(" ")[0]} support
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FeatureRows() {
  return (
    <section className="feature-rows">
      <div className="container feat-rows-inner">

        {/* Row 1 */}
        <div className="feat-row" style={{ background: "#d9c8a4", gridTemplateColumns: "1.1fr 0.9fr" }}>
          <StripeCorner position="tr" size={200} opacity={0.55} color="#758766"/>
          <StripeCorner position="bl" size={120} opacity={0.30} color="#2f1d4b"/>
          <div style={{ position: "relative" }}>
            <Eyebrow>Business alignment</Eyebrow>
            <h3 className="feat-row-headline">Support that thinks one step ahead.</h3>
            <p className="feat-row-body" style={{ color: "#3a2a55", maxWidth: 460 }}>
              Nova builds a real working relationship with your business. That means noticing the renewal you forgot, drafting the email before you ask, and quietly keeping your week from falling apart. You stop managing the admin. We start managing it for you.
            </p>
            <a href="#" style={{ display: "inline-block", marginTop: 20, fontWeight: 600, fontSize: 14, color: "#3f4d35", textUnderlineOffset: 4 }}>
              Read a client story
            </a>
          </div>
          <div className="feat-img-wrap">
            <img src="https://images.unsplash.com/photo-1573497019418-b400bb3ab074?auto=format&fit=crop&w=900&q=70" alt=""/>
            <div className="feat-badge-tl">This week's priorities</div>
            <div className="feat-badge-br">3 invoices sent · 12 emails drafted</div>
          </div>
        </div>

        {/* Row 2 */}
        <div className="feat-row" style={{ background: "#effaef", gridTemplateColumns: "0.9fr 1.1fr" }}>
          <StripeCorner position="tl" size={160} opacity={0.30} color="#758766"/>
          <div className="feat-metrics">
            {[
              { k: "8.5 hrs", v: "Saved this week",     bg: "#faf5ec", fg: "#2f1d4b", ml: 0  },
              { k: "On time", v: "All invoices sent",    bg: "#d9c8a4", fg: "#2f1d4b", ml: 14 },
              { k: "0 missed",v: "Calendar conflicts",   bg: "#a9bd9a", fg: "#2f1d4b", ml: 28 },
              { k: "+34%",    v: "Engagement on social", bg: "#758766", fg: "#effaef", ml: 42 },
            ].map((m) => (
              <div key={m.k} className="feat-metric" style={{ background: m.bg, color: m.fg, marginLeft: m.ml, maxWidth: 240 }}>
                <div className="feat-metric-num">{m.k}</div>
                <div className="feat-metric-label">{m.v}</div>
              </div>
            ))}
          </div>
          <div>
            <Eyebrow>Detail and visibility</Eyebrow>
            <h3 className="feat-row-headline">Always know what got done and what is next.</h3>
            <p className="feat-row-body" style={{ color: "#3f4d35", maxWidth: 460 }}>
              You get a short weekly recap covering what was completed, what needs your input, and what is coming. No mystery, no chasing us down, no logging in to figure out where things stand.
            </p>
            <p className="feat-quote">
              "Professional, reliable, and always on top of it. I can actually focus on growing my business now."
            </p>
            <p className="feat-cite">David Chen, Liberty Hill Consulting</p>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { ServicesGrid, FeatureRows });