// src/ui/steps/step0-scope.jsx — Kies type opdracht (film/festival) + perspectief (uitvoerder/afnemer)

const StepScope = ({ state, setState, next }) => {
  const [type, setType] = React.useState(state.type || null);

  const pickType = (t) => {
    setType(t);
    setState(s => ({ ...s, type: t }));
  };

  const pickPerspectief = (p) => {
    setState(s => ({ ...s, type, perspectief: p }));
    setTimeout(next, 150);
  };

  return (
    <div>
      <div style={{ marginBottom: 8, display: "inline-flex", gap: 8, alignItems: "center", color: FW.navy, opacity: .75 }}>
        <i className="ri-heart-line" style={{ fontSize: 18 }} />
        <span style={{ fontSize: 15, fontWeight: 600 }}>Waarmee kunnen we je helpen?</span>
      </div>
      <h1 className="step-hero" style={{ fontSize: 52, lineHeight: 1.1, margin: "8px 0 12px", letterSpacing: "-0.01em" }}>
        <span style={{ fontWeight: 700 }}>Bereken;</span>{" "}
        <span style={{ fontWeight: 300 }}>een eerlijk openingsbod in een paar stappen.</span>
      </h1>
      <p className="step-hero-sub" style={{ fontSize: 18, maxWidth: 640, color: FW.navy2, marginBottom: 32, lineHeight: 1.45 }}>
        We lopen samen je opdracht door. Je ziet bij elke stap waarop we de berekening baseren — die aannames kun je later altijd aanpassen.
      </p>

      <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 12, textTransform: "uppercase", letterSpacing: 0.5, opacity: .75 }}>
        1. Om wat voor opdracht gaat het?
      </div>
      <div className="scope-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, maxWidth: 760 }}>
        <button onClick={() => pickType("film")} className="scope-card" style={scopeCard(FW.mint, type === "film")}>
          <IllusFilm />
          <div className="scope-card-title" style={{ fontSize: 24, fontWeight: 700, marginTop: 12 }}>Ik werk aan een<br/>filmproductie</div>
          <div style={{ fontSize: 14, opacity: .8, marginTop: 8 }}>Korte film, speelfilm, documentaire, serie, animatie, commercial</div>
          <div style={{ marginTop: "auto", paddingTop: 16, fontSize: 14, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 8 }}>
            {type === "film" ? "Gekozen ✓" : "Kies"} <span style={arrowWell()}>→</span>
          </div>
        </button>
        <button onClick={() => pickType("festival")} className="scope-card" style={scopeCard(FW.cyan, type === "festival")}>
          <IllusFestival />
          <div className="scope-card-title" style={{ fontSize: 24, fontWeight: 700, marginTop: 12 }}>Ik werk aan een<br/>filmfestival</div>
          <div style={{ fontSize: 14, opacity: .8, marginTop: 8 }}>Vast of tijdelijk, voor of tijdens het festival</div>
          <div style={{ marginTop: "auto", paddingTop: 16, fontSize: 14, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 8 }}>
            {type === "festival" ? "Gekozen ✓" : "Kies"} <span style={arrowWell()}>→</span>
          </div>
        </button>
      </div>

      {type && (
        <div style={{ marginTop: 40 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 12, textTransform: "uppercase", letterSpacing: 0.5, opacity: .75 }}>
            2. Voor wie bereken je?
          </div>
          <div className="scope-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, maxWidth: 760 }}>
            <button onClick={() => pickPerspectief("uitvoerder")} className="scope-card" style={perspectiefCard(false)}>
              <i className="ri-user-line" style={{ fontSize: 28, color: FW.navy }} />
              <div style={{ fontSize: 20, fontWeight: 700, marginTop: 10 }}>Ik doe zelf een rol in deze productie</div>
              <div style={{ fontSize: 14, opacity: .8, marginTop: 8, color: FW.navy2 }}>
                Bereken je eigen openingsbod voor één rol.
              </div>
              <div style={{ marginTop: "auto", paddingTop: 16, fontSize: 14, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 8 }}>
                Begin → <span style={arrowWell()}>→</span>
              </div>
            </button>
            <button disabled title="Beschikbaar in v2" className="scope-card" style={perspectiefCard(true)}>
              <i className="ri-team-line" style={{ fontSize: 28, color: FW.navy, opacity: .5 }} />
              <div style={{ fontSize: 20, fontWeight: 700, marginTop: 10, color: FW.navy, opacity: .7 }}>
                Ik stel een begroting op voor de hele productie
              </div>
              <div style={{ fontSize: 14, marginTop: 8, color: FW.navy2, opacity: .7 }}>
                Meerdere rollen in één berekening — voor producenten en festivals.
              </div>
              <div style={{ marginTop: "auto", paddingTop: 16 }}>
                <span style={{
                  display: "inline-block", padding: "4px 10px", borderRadius: 999,
                  background: FW.beige2, color: FW.navy, fontSize: 12, fontWeight: 700,
                  textTransform: "uppercase", letterSpacing: 0.5,
                }}>Binnenkort</span>
              </div>
            </button>
          </div>
        </div>
      )}

      <div style={{ marginTop: 40, color: FW.navy2, fontSize: 14, maxWidth: 640 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 14px", background: FW.beige2, borderRadius: 999 }}>
          <i className="ri-shield-check-line" style={{ fontSize: 16 }} />
          <span>We hanteren de Fair Pay richtlijn 2026 — zzp-starttarieven, inclusief opslagfactor (74,45% Film/AV of 69,26% Festival).</span>
        </div>
      </div>
    </div>
  );
};

const scopeCard = (bg, active) => ({
  background: bg, border: active ? `3px solid ${FW.navy}` : "3px solid transparent",
  borderRadius: 24, padding: 28, textAlign: "left",
  color: FW.navy, cursor: "pointer", fontFamily: "var(--font-sans)",
  minHeight: 280, display: "flex", flexDirection: "column",
  transition: "transform .2s ease, box-shadow .2s ease, border-color .2s ease",
  boxShadow: active ? "0 8px 20px rgba(0,0,0,.12)" : "0 4px 12px rgba(0,0,0,.06)",
});
const perspectiefCard = (disabled) => ({
  background: disabled ? FW.gray50 : FW.white,
  border: `1.5px solid ${FW.gray100}`,
  borderRadius: 24, padding: 24, textAlign: "left",
  color: FW.navy, cursor: disabled ? "not-allowed" : "pointer", fontFamily: "var(--font-sans)",
  minHeight: 180, display: "flex", flexDirection: "column",
  opacity: disabled ? 0.75 : 1,
  transition: "transform .2s ease, box-shadow .2s ease",
  boxShadow: "0 2px 8px rgba(0,0,0,.04)",
});
const arrowWell = () => ({
  display: "inline-grid", placeItems: "center",
  width: 32, height: 32, borderRadius: 999,
  background: FW.navy, color: "#fff", fontSize: 14,
});

const IllusFilm = () => (
  <svg width="120" height="72" viewBox="0 0 120 72" fill="none" stroke={FW.navy} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="10" y="14" width="70" height="44" rx="4" />
    <polygon points="88,22 110,16 110,56 88,50" />
    <circle cx="18" cy="22" r="2" /><circle cx="26" cy="22" r="2" /><circle cx="18" cy="50" r="2" /><circle cx="26" cy="50" r="2" />
    <circle cx="45" cy="36" r="8" />
  </svg>
);
const IllusFestival = () => (
  <svg width="120" height="72" viewBox="0 0 120 72" fill="none" stroke={FW.navy} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 58 L60 14 L108 58 Z" />
    <path d="M30 58 L30 40 M50 58 L50 32 M70 58 L70 32 M90 58 L90 40" />
    <circle cx="60" cy="24" r="3" />
    <path d="M6 64 L114 64" />
  </svg>
);

window.StepScope = StepScope;