const PACKAGES = [
  {
    glyph: "▣",
    name: "Essentials Support",
    sub: "Steady, reliable, virtual support to keep your business running smoothly.",
    price: "550",
    cadence: "per month",
    type: "monthly",
    typeLabel: "Monthly retainer",
    bestFor: "Solo consultants who need reliable weekly support.",
    features: [
      "Inbox and diary care",
      "Document and presentation prep",
      "Smooth handling of the daily admin flow",
      "Consistent support that keeps your week on track",
    ],
    cta: "Start a conversation",
  },
  {
    glyph: "⌘",
    name: "Digital Operations Partner",
    sub: "Boutique systems and structure with second-brain support to stay in rhythm.",
    price: "995",
    cadence: "per month",
    type: "monthly",
    typeLabel: "Monthly retainer",
    bestFor: "Growing practices balancing delivery and growth.",
    features: [
      "Workflow design and oversight",
      "Automation and system support",
      "Regular check-ins and second-brain thinking",
      "Clear systems that free up time and headspace",
      "Aligning your tech stack with ethical, privacy-first tools",
    ],
    cta: "Start a conversation",
  },
  {
    glyph: "◉",
    name: "Strategic Business Partner",
    sub: "High-level collaboration combining operations, strategy, and delivery.",
    price: "1,500",
    cadence: "per month",
    type: "monthly",
    typeLabel: "Monthly retainer",
    featured: true,
    bestFor: "Leaders ready to scale with full operational backing.",
    features: [
      "Digital operations and system oversight",
      "Project and client delivery support",
      "Content and communication polish",
      "Strategic sounding board",
      "A trusted partner across operations, strategy, and delivery",
    ],
    cta: "Discuss this partnership",
  },
  {
    glyph: "⊕",
    name: "Sprints & Projects",
    sub: "Targeted, one-off projects to sharpen systems or communications.",
    price: "850",
    cadence: "one-off, from",
    type: "sprint",
    typeLabel: "Sprint / project",
    bestFor: "Businesses that need a specific project delivered with clarity and speed.",
    features: [
      "Systems Sprint (Airtable / automation setup)",
      "Website Design (Squarespace build or refresh)",
      "Psychometric Support (diagnostics, debriefs, team insights)",
      "Project Delivery (launches, events, client programmes)",
    ],
    cta: "Scope a project",
  },
];

function Pricing() {
  // index of featured pkg, used as default
  const featuredIdx = PACKAGES.findIndex(p => p.featured);
  const [activeIdx, setActiveIdx] = React.useState(featuredIdx >= 0 ? featuredIdx : 0);
  const active = PACKAGES[activeIdx];

  return (
    <section id="pricing" className="section">
      <div className="shell">
        <div className="section-head">
          <div className="num">(07)</div>
          <div className="head-body">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Packages</div>
            <h2 className="h-section">Strategic operations support for values-led businesses.</h2>
            <p className="body" style={{ maxWidth: 720, marginTop: 24, color: "var(--ink-60)" }}>
              Sophie's Bureau is a digital operations partner that helps consultants, coaches and small
              businesses streamline workflows, automate routine tasks, and manage business operations more
              efficiently. Flexible, ad-hoc support is also available at €60 per hour, with a two-hour minimum.
              If you're unsure which level is right, we'll use your consultation call to map your current
              systems and recommend the right package.
            </p>
          </div>
        </div>

        {/* Two-column layout: index list on left, detail panel on right */}
        <div className="pricing-grid" style={{
          display: "grid",
          gridTemplateColumns: "minmax(320px, 0.85fr) 1.4fr",
          gap: 0,
          paddingTop: 24,
          borderTop: "1px solid var(--ink-15)",
        }}>
          {/* LEFT: package index */}
          <div className="pricing-index" style={{ borderRight: "1px solid var(--ink-15)", paddingRight: 32 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Choose a package</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {PACKAGES.map((p, i) => {
                const isActive = i === activeIdx;
                return (
                  <li key={p.name}>
                    <button
                      type="button"
                      onClick={() => setActiveIdx(i)}
                      style={{
                        width: "100%",
                        textAlign: "left",
                        background: isActive ? "var(--sand)" : "transparent",
                        border: 0,
                        borderTop: "1px solid var(--ink-15)",
                        borderBottom: i === PACKAGES.length - 1 ? "1px solid var(--ink-15)" : "none",
                        padding: "20px 16px",
                        cursor: "pointer",
                        fontFamily: "var(--sans)",
                        color: "var(--charcoal)",
                        display: "grid",
                        gridTemplateColumns: "auto 1fr auto",
                        gap: 16,
                        alignItems: "center",
                        transition: "background .18s ease",
                        position: "relative",
                      }}
                      onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = "rgba(232, 220, 196, 0.35)"; }}
                      onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = "transparent"; }}
                      className="pricing-index-btn"
                    >
                      {/* Active indicator: left rule in accent */}
                      {isActive && (
                        <span aria-hidden style={{
                          position: "absolute",
                          left: 0,
                          top: 12,
                          bottom: 12,
                          width: 3,
                          background: "var(--accent)",
                        }}/>
                      )}

                      <div style={{
                        fontFamily: "var(--mono)",
                        fontSize: 11,
                        letterSpacing: ".08em",
                        color: "var(--ink-60)",
                        minWidth: 22,
                      }}>
                        0{i + 1}
                      </div>

                      <div>
                        <div style={{
                          fontFamily: "var(--serif)",
                          fontSize: 20,
                          fontWeight: 500,
                          lineHeight: 1.2,
                          letterSpacing: "-0.005em",
                          marginBottom: 4,
                        }}>
                          {p.name}
                          {p.featured && (
                            <span style={{
                              marginLeft: 10,
                              fontFamily: "var(--mono)",
                              fontSize: 9,
                              letterSpacing: ".14em",
                              textTransform: "uppercase",
                              color: "var(--accent-deep)",
                              background: "var(--accent-soft)",
                              padding: "3px 7px",
                              borderRadius: 1,
                              verticalAlign: 2,
                              fontWeight: 500,
                            }}>Most chosen</span>
                          )}
                        </div>
                        <div style={{
                          fontFamily: "var(--mono)",
                          fontSize: 10,
                          letterSpacing: ".12em",
                          textTransform: "uppercase",
                          color: "var(--ink-60)",
                        }}>
                          {p.typeLabel}
                        </div>
                      </div>

                      <div style={{
                        fontFamily: "var(--serif)",
                        fontSize: 22,
                        fontWeight: 500,
                        letterSpacing: "-0.01em",
                        whiteSpace: "nowrap",
                      }}>
                        €{p.price}
                      </div>
                    </button>
                  </li>
                );
              })}
            </ul>

            <p className="body-sm" style={{ marginTop: 24, color: "var(--ink-60)" }}>
              Or work ad-hoc at <strong style={{ color: "var(--charcoal)", fontWeight: 500 }}>€60/hour</strong> (two-hour minimum).
            </p>
          </div>

          {/* RIGHT: detail panel */}
          <div className="pricing-detail" style={{ paddingLeft: 48 }}>
            <div
              key={activeIdx}
              style={{
                animation: "panel-in .35s ease",
              }}
            >
              <div style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                gap: 16,
                marginBottom: 8,
              }}>
                <div className="eyebrow">{active.typeLabel} · 0{activeIdx + 1} / 0{PACKAGES.length}</div>
                {active.featured && (
                  <div style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    letterSpacing: ".14em",
                    textTransform: "uppercase",
                    color: "var(--accent-deep)",
                    background: "var(--accent-soft)",
                    padding: "5px 10px",
                    borderRadius: 1,
                  }}>Most chosen</div>
                )}
              </div>

              <h3 className="serif" style={{
                fontSize: 44,
                lineHeight: 1.05,
                fontWeight: 500,
                letterSpacing: "-0.012em",
                margin: "0 0 16px",
              }}>
                {active.name}
              </h3>

              <p className="lede" style={{ margin: "0 0 32px", color: "var(--ink-60)" }}>
                {active.sub}
              </p>

              {/* Price + best-for row */}
              <div className="pricing-price-row" style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: 40,
                paddingTop: 24,
                paddingBottom: 24,
                borderTop: "1px solid var(--ink-15)",
                borderBottom: "1px solid var(--ink-15)",
                marginBottom: 32,
                alignItems: "center",
              }}>
                <div>
                  <div style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    letterSpacing: ".14em",
                    textTransform: "uppercase",
                    color: "var(--ink-40)",
                    marginBottom: 6,
                  }}>From</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                    <span className="serif" style={{ fontSize: 22, fontWeight: 400 }}>€</span>
                    <span className="serif" style={{
                      fontSize: 64,
                      fontWeight: 500,
                      lineHeight: 1,
                      letterSpacing: "-0.02em",
                    }}>{active.price}</span>
                    <span className="body-sm" style={{ marginLeft: 6 }}>
                      {active.cadence}
                    </span>
                  </div>
                </div>
                <div style={{ borderLeft: "1px solid var(--ink-15)", paddingLeft: 32 }}>
                  <div style={{
                    fontFamily: "var(--mono)",
                    fontSize: 10,
                    letterSpacing: ".14em",
                    textTransform: "uppercase",
                    color: "var(--ink-40)",
                    marginBottom: 6,
                  }}>Best for</div>
                  <div style={{ fontSize: 16, lineHeight: 1.45 }}>{active.bestFor}</div>
                </div>
              </div>

              {/* Features */}
              <div className="eyebrow" style={{ marginBottom: 16 }}>What's included</div>
              <ul className="pricing-features pricing-feature-list" style={{
                listStyle: "none",
                padding: 0,
                margin: "0 0 36px",
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                columnGap: 32,
              }}>
                {active.features.map((f, i) => (
                  <li key={i} style={{
                    display: "flex",
                    gap: 14,
                    padding: "14px 0",
                    borderBottom: "1px solid var(--ink-08)",
                    fontSize: 14.5,
                    lineHeight: 1.45,
                  }}>
                    <span style={{
                      color: "var(--accent-deep)",
                      fontFamily: "var(--mono)",
                      fontSize: 11,
                      letterSpacing: ".08em",
                      flexShrink: 0,
                      paddingTop: 2,
                    }}>{String(i + 1).padStart(2, "0")}</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <div className="pricing-controls" style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
                <a href="#contact" className="btn btn-primary">
                  {active.cta} <ArrowRight size={12}/>
                </a>
                <a href="#contact" style={{
                  fontSize: 14,
                  fontWeight: 500,
                  color: "var(--accent-deep)",
                  borderBottom: "1px solid var(--accent)",
                  paddingBottom: 2,
                }}>
                  Or book a 45-min consultation
                </a>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @keyframes panel-in {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: none; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Pricing = Pricing;