// ff-subscription.jsx — $1000/mo subscription with two variants

const { useState: __s_useState } = React;

const SUB_AVATARS = [
  { m: "AK", t: 210 },
  { m: "MW", t: 28 },
  { m: "JL", t: 165 },
  { m: "RT", t: 320 },
  { m: "EN", t: 95 },
];

const SUB_PRICING = {
  subscription: {
    USD: { sym: "$", val: 1000, per: "/ mo" },
    PLN: { sym: "zł", val: 4000, per: "/ mies." },
    showFrom: false,
  },
  custom: {
    USD: { sym: "$", val: 500, per: "/ project" },
    PLN: { sym: "zł", val: 2000, per: "/ projekt" },
    showFrom: true,
  },
};

// Solar Icons — Bold Duotone style. Primary path is opaque currentColor,
// secondary path is currentColor with opacity 0.5 (Solar's signature look).
// Indexed to s.sub.includes ordering — do NOT reorder.
const SUB_ICONS = [
  // 0 — Up to 40 team hours / month → Clock Circle
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" />
      <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" />
    </svg>
  ),
  // 1 — Unlimited small tasks via shared queue → Infinity
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.689a.755.755 0 0 0-.339-1.008a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" />
      <path fill="currentColor" opacity=".5" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" />
    </svg>
  ),
  // 2 — AI-tool deployment & maintenance → Magic Stick 3
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M3.845 3.845a2.883 2.883 0 0 0 0 4.077L5.432 9.51c.012-.014.555.503.568.49l4-4c.013-.013-.504-.556-.49-.568L7.922 3.845a2.883 2.883 0 0 0-4.077 0m1.288 11.462a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.48.48 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.48.48 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.48.48 0 0 0 .272-.274z" />
      <path fill="currentColor" opacity=".2" d="M19.967 9.13a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.5.5 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.5.5 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.902l.398-.158a.5.5 0 0 0 .272-.273z" />
      <path fill="currentColor" opacity=".7" d="M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.48.48 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.5.5 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.5.5 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.5.5 0 0 0 .273-.274z" />
      <path fill="currentColor" d="M10.568 6.49c-.012.014-.555-.503-.568-.49l-4 4c-.013.013.504.556.49.568l9.588 9.587a2.883 2.883 0 1 0 4.078-4.077z" />
    </svg>
  ),
  // 3 — Direct chat with engineers → Chat Round Dots
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1S1 5.925 1 12c0 1.76.413 3.423 1.148 4.898c.195.392.26.84.147 1.263l-.655 2.448a1.43 1.43 0 0 0 1.75 1.751l2.45-.655a1.8 1.8 0 0 1 1.262.147A10.96 10.96 0 0 0 12 23" />
      <path fill="currentColor" d="M10.9 12a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0m-4.4 0a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0m8.8 0a1.1 1.1 0 1 0 2.2 0a1.1 1.1 0 0 0-2.2 0" />
    </svg>
  ),
  // 4 — Monthly report + roadmap review → Graph Up
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" />
      <path fill="currentColor" d="M14.5 10.75a.75.75 0 0 1 0-1.5H17a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-.69l-2.013 2.013a1.75 1.75 0 0 1-2.474 0l-1.586-1.586a.25.25 0 0 0-.354 0L7.53 14.53a.75.75 0 0 1-1.06-1.06l2.293-2.293a1.75 1.75 0 0 1 2.474 0l1.586 1.586a.25.25 0 0 0 .354 0l2.012-2.013z" />
    </svg>
  ),
  // 5 — No long-term contract / cancel anytime → Shield Check
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082" />
      <path fill="currentColor" d="M15.06 10.5a.75.75 0 0 0-1.12-1l-3.011 3.374l-.87-.974a.75.75 0 0 0-1.118 1l1.428 1.6a.75.75 0 0 0 1.119 0z" />
    </svg>
  ),
];

function Subscription({ variant = "anchor", s }) {
  return (
    <section id="subscription" data-screen-label="03 Subscription" className={`section section-sub sub-${variant}`}>
      {variant === "anchor" ? <SubAnchor s={s} /> : <SubEditorial s={s} />}
    </section>
  );
}

function SubAnchor({ s }) {
  const [cur, setCur] = __s_useState("USD");
  const [mode, setMode] = __s_useState("subscription");
  const isCustom = mode === "custom";
  const m = isCustom ? s.sub.custom : s.sub;
  const pricing = SUB_PRICING[mode][cur];
  const perLabel = isCustom
    ? (cur === "USD" ? s.sub.custom.pricePerUSD : s.sub.custom.pricePerPLN)
    : pricing.per;

  const MODES = [
    { id: "subscription", label: s.sub.modeSubLabel,    hint: s.sub.modeSubHint },
    { id: "custom",       label: s.sub.modeCustomLabel, hint: s.sub.modeCustomHint },
  ];

  return (
    <div className="wrap">
      <Reveal as="div" className="sub-plate">
        <div className="sub-plate-grid" aria-hidden="true" />
        <div className="sub-plate-glow" aria-hidden="true" />

        <div className="sub-plate-body">
          <div className="sub-plate-left">
            <SectionEyebrow index={3} label={s.sub.eyebrow} />

            <div className="sub-mode-switch" role="tablist" aria-label="Engagement type">
              {MODES.map((mo) => (
                <button
                  key={mo.id}
                  type="button"
                  role="tab"
                  aria-selected={mode === mo.id}
                  className={`sub-mode ${mode === mo.id ? "on" : ""}`}
                  onClick={() => setMode(mo.id)}
                >
                  <span className="sub-mode-label">{mo.label}</span>
                  <span className="sub-mode-hint">{mo.hint}</span>
                </button>
              ))}
            </div>

            <h2 className="sub-title" key={`t-${mode}`}>{m.title}</h2>
            <p className="sub-lede" key={`l-${mode}`}>{m.lede}</p>

            <ul className="sub-features" role="list" key={`f-${mode}`}>
              {m.includes.map((t, i) => (
                <li key={i} className="sub-feature">
                  <span className="sub-feature-icon" aria-hidden="true">
                    {SUB_ICONS[i] || SUB_ICONS[0]}
                  </span>
                  <span className="sub-feature-text">{t}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="sub-plate-right">
            <div className="sub-price-card">
              <BrandIcon height={18} className="sub-price-brand" />
              <div className="sub-price-card-head">
                <span className="sub-price-label">{m.priceLabel}</span>
                <div className="sub-cur-toggle" role="tablist" aria-label="Currency" data-active={cur}>
                  <span className="sub-cur-indicator" aria-hidden="true" />
                  {Object.keys(SUB_PRICING[mode]).filter((k) => k !== "showFrom").map((k) => (
                    <button
                      key={k}
                      type="button"
                      role="tab"
                      aria-selected={cur === k}
                      className={`sub-cur-btn ${cur === k ? "on" : ""}`}
                      onClick={() => setCur(k)}
                    >
                      {k}
                    </button>
                  ))}
                </div>
              </div>

              <div className="sub-price" key={`p-${mode}-${cur}`}>
                {cur === "USD" && <span className="sub-price-cur">{pricing.sym}</span>}
                <Counter key={`${mode}-${cur}`} to={pricing.val} className="sub-price-num" />
                {cur === "PLN" && <span className="sub-price-cur sub-price-cur-suffix">{pricing.sym}</span>}
                <span className="sub-price-per">{perLabel}</span>
              </div>
              <div className="sub-price-meta">{m.priceMeta}</div>

              <div className="sub-price-cta">
                <a href="#contact" className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center" }}>
                  {m.ctaStart} <span className="arrow">→</span>
                </a>
                <a href="#contact" className="btn btn-ghost btn-lg" style={{ width: "100%", justifyContent: "center" }}>
                  {m.ctaManager}
                </a>
              </div>

              <div className="sub-price-foot">
                {m.foot.map((f, i) => (
                  <div key={i}>
                    <span className="sub-foot-l">{f.l}</span>
                    <span className="sub-foot-v">{f.v}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="sub-trust">
              <div className="sub-avatars" aria-hidden="true">
                {SUB_AVATARS.map((a, i) => (
                  <span
                    key={i}
                    className="sub-avatar"
                    style={{
                      background: `linear-gradient(140deg, hsl(${a.t} 38% 32%), hsl(${a.t} 30% 18%))`,
                    }}
                  >
                    {a.m}
                  </span>
                ))}
                <span className="sub-avatar sub-avatar-more">+9</span>
              </div>
              <div className="sub-trust-text">
                {s.sub.trustedByPre} <Counter to={14} /> {s.sub.trustedByPost}
              </div>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

function SubEditorial({ s }) {
  return (
    <div className="wrap">
      <div className="sub-editorial">
        <Reveal as="div" className="sub-ed-left">
          <SectionEyebrow index={3} label={s.sub.edEyebrow} />
          <h2 className="sub-ed-title">
            {s.sub.edTitle[0]}
            <br />
            {s.sub.edTitle[1]}
          </h2>
          <p className="sub-ed-lede">{s.sub.edLede}</p>
          <div className="sub-ed-cta">
            <a href="#contact" className="btn btn-primary btn-lg">
              {s.sub.ctaStart} <span className="arrow">→</span>
            </a>
            <a href="#contact" className="btn btn-ghost btn-lg">{s.sub.ctaManager}</a>
          </div>
        </Reveal>

        <Reveal as="div" delay={2} className="sub-ed-right">
          <div className="sub-ed-price-row">
            <div>
              <div className="sub-ed-price-l">{s.sub.edMonthly}</div>
              <div className="sub-ed-price-v">$<Counter to={1000} />.00</div>
            </div>
            <div className="sub-ed-price-sep" />
            <div>
              <div className="sub-ed-price-l">{s.sub.edIncluded}</div>
              <div className="sub-ed-price-v"><Counter to={40} />h</div>
            </div>
          </div>

          <ol className="sub-ed-list">
            {s.sub.includes.map((t, i) => (
              <li key={i}>
                <span className="sub-ed-li-n">{String(i + 1).padStart(2, "0")}</span>
                {t}
              </li>
            ))}
          </ol>

          <div className="sub-ed-foot">
            <span className="dot dot-g" /> {s.sub.edFoot}
          </div>
        </Reveal>
      </div>
    </div>
  );
}

window.Subscription = Subscription;