/* global React, Eyebrow, StripeCorner */
function Packages({ onCTA }) {
  const tiers = [
    {
      name: "Starter Support",
      blurb: "For business owners who need a hand staying organized. Light inbox triage, calendar help, and basic admin so the small stuff stops piling up.",
      price: "$450",
      hours: "10 Hours/Month",
      bullets: [
        "Inbox triage and drafting",
        "Calendar scheduling",
        "Data entry and organization",
        "Weekly recap email",
      ],
      tone: "green",
    },
    {
      name: "Business Support",
      blurb: "Consistent admin and operational support for growing businesses. The right amount of help for owners who need more than occasional coverage.",
      price: "$860",
      hours: "20 Hours/Month",
      bullets: [
        "Everything in Starter",
        "CRM updates and client communication",
        "Invoice creation and tracking",
        "Social media scheduling",
      ],
      featured: true,
    },
    {
      name: "Operations Support",
      blurb: "Full-scale support for businesses ready to streamline and scale. Dedicated hours, broader scope, and a partner who knows your business inside and out.",
      price: "$1,640",
      hours: "40 Hours/Month",
      bullets: [
        "Everything in Business",
        "Workflow organization and SOP creation",
        "Project coordination and research",
        "Direct line, same-day turnaround",
      ],
    },
  ];

  return (
    <section className="packages-section" id="packages" style={{ position: "relative", overflow: "hidden" }}>
      <StripeCorner position="tl" size={220} color="#758766" opacity={0.18}/>
      <StripeCorner position="br" size={220} color="#c3a8ff" opacity={0.22}/>
      <div className="container" style={{ position: "relative" }}>
        <div className="pkg-header">
          <div>
            <Eyebrow>Monthly support packages built for small businesses</Eyebrow>
            <h2 className="pkg-headline">Pick the level of support that fits where you are right now.</h2>
          </div>
        </div>

        <div className="pkg-grid">
          {tiers.map((t) => {
            const bg          = t.featured ? "#2f1d4b" : (t.tone === "green" ? "#effaef" : "#faf5ec");
            const fg          = t.featured ? "#faf5ec" : "#2f1d4b";
            const border      = t.featured ? "1px solid #2f1d4b" : (t.tone === "green" ? "1px solid #a9bd9a" : "1px solid rgba(47,29,75,0.12)");
            const shadow      = t.featured ? "0 18px 40px -12px rgba(47,29,75,0.30)" : "0 1px 0 rgba(47,29,75,0.04), 0 8px 24px -10px rgba(47,29,75,0.10)";
            const blurbColor  = t.featured ? "rgba(250,245,236,0.78)" : "#5a4a73";
            const checkColor  = t.featured ? "#c3a8ff" : "#758766";
            const bulletColor = t.featured ? "rgba(250,245,236,0.85)" : "#2f1d4b";
            const freqColor   = t.featured ? "rgba(250,245,236,0.7)" : "#8a7a9e";
            const ctaBg       = t.featured ? "#c3a8ff" : "transparent";
            const ctaBorder   = t.featured ? "none" : "1px solid #2f1d4b";

            return (
              <div key={t.name} className="pkg-card" style={{ background: bg, color: fg, border, boxShadow: shadow }}>
                {t.featured && <span className="pkg-popular">Most popular</span>}
                <h3 className="pkg-name">{t.name}</h3>
                <div style={{ fontSize: 12, fontWeight: 600, color: t.featured ? "#c3a8ff" : "#758766", letterSpacing: "0.04em" }}>{t.hours}</div>
                <p className="pkg-blurb" style={{ color: blurbColor }}>{t.blurb}</p>
                <div className="pkg-price-row">
                  <span className="pkg-price">{t.price}</span>
                  <span className="pkg-freq" style={{ color: freqColor }}>/mo</span>
                </div>
                <ul className="pkg-bullets">
                  {t.bullets.map((b) => (
                    <li key={b} className="pkg-bullet" style={{ color: bulletColor }}>
                      <span className="pkg-check" style={{ color: checkColor }}>&#10003;</span>
                      {b}
                    </li>
                  ))}
                </ul>
                <div style={{ flex: 1 }}/>
                <a href="tel:5126505062" className="pkg-cta" style={{ background: ctaBg, color: t.featured ? "#2f1d4b" : "#2f1d4b", border: ctaBorder, textDecoration: "none", display: "block", textAlign: "center" }}>
                  Call for a Free Consultation
                </a>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: "center", marginTop: 28, display: "flex", justifyContent: "center", gap: 32, flexWrap: "wrap" }}>
          <p style={{ fontSize: 13, color: "#5a4a73", margin: 0 }}>Additional hours available at <strong>$45/hour</strong></p>
          <p style={{ fontSize: 13, color: "#5a4a73", margin: 0 }}>Rush and weekend work billed at a <strong>25% surcharge</strong></p>
        </div>
        <p className="pkg-note" style={{ marginTop: 12 }}>
          Free 30-minute consultation, no commitment required.
        </p>
      </div>
    </section>
  );
}

window.Packages = Packages;