// sections.jsx — Process, Receiving experience, Footer
const { useState } = React;

const TEAM_PLANS = [
  { people: 1, monthly: null, mobyFee: 0.30, isIndividual: true },
  { people: 5, monthly: 69, mobyFee: 0.28 },
  { people: 15, monthly: 99, mobyFee: 0.26 },
  { people: 25, monthly: 149, mobyFee: 0.25 },
  { contactUs: true },
];

function formatMobyFee(fee) {
  if (fee == null) return null;
  return fee % 1 === 0 ? `$${fee.toFixed(0)}` : `$${fee.toFixed(2)}`;
}

function teamSizeLabel(plan) {
  if (plan.isIndividual) return "Just you";
  if (plan.contactUs) return "50+ people";
  return `${plan.people} people`;
}

function teamPlanTickLabel(plan) {
  if (plan.contactUs) return "50+";
  return plan.people;
}

function teamPlanAriaLabel(plan) {
  if (plan.contactUs) return "50 or more people";
  return `${plan.people} ${plan.people === 1 ? "person" : "people"}`;
}
function StepIcon({ kind }) {
  if (kind === "email")    return <img src="assets/paper-cup.png" alt="" className="step-real-icon" />;
  if (kind === "heart")    return <img src="assets/beans-2.png" alt="" className="step-real-icon" />;
  if (kind === "cup")      return <img src="assets/espresso-machine.png" alt="" className="step-real-icon" />;
  return null;
}

function Process() {
  const steps = [
    {
      num: "i.",
      icon: "email",
      title: "Enter their email",
      body: "One field. No accounts to create, no apps to download. Just the email of someone you've been thinking about."
    },
    {
      num: "ii.",
      icon: "heart",
      title: "Pick a coffee moment",
      body: "Add a short, warm note — “great job,” “thinking of you,” or write your own. It takes ten seconds."
    },
    {
      num: "iii.",
      icon: "cup",
      title: "They receive a coffee",
      body: "A beautifully designed gift lands in their inbox. They redeem it at any café, anywhere — no app required."
    },
  ];

  return (
    <section className="section process" data-screen-label="02 Process">
      <div className="section-inner">
        <div className="process-head">
          <div>
            <div className="section-eyebrow-row">
              <span className="dot" />
              <span className="eyebrow">How it works</span>
            </div>
            <h2 className="display">
              Three taps. <span className="serif-italic">One coffee.</span>
            </h2>
          </div>
          <p>
            Encouragement should be easier. We removed every dashboard,
            balance, badge and feed — until only the gesture was left.
          </p>
        </div>

        <div className="steps">
          {steps.map((s) => (
            <div key={s.num} className="step">
              <div className="step-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PhoneMockup({ sender = "Maya" }) {
  return (
    <div className="phone-stage">
      <div className="spark s1" />
      <div className="spark s2" />
      <div className="spark s3" />
      <div className="phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className="phone-status">
            <span>9:41</span>
            <PhoneStatusIcons />
          </div>
          <div className="phone-content">
            <div className="phone-eyebrow">A gift for you</div>
            <div className="cup-illo">
              <div className="steam-line" />
              <div className="steam-line s2" />
              <div className="steam-line s3" />
              <img src="assets/latte.png" alt="" className="cup-illo-img" />
            </div>
            <h3 className="phone-title">A Starbucks Coffee For You</h3>
            <p className="phone-sub">Someone thought of you today.</p>
            <div className="phone-from">From <b style={{ color: "#2a1d15" }}>{sender}</b></div>
            <button className="phone-redeem">
              Redeem your coffee
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </button>
          </div>
          <div className="phone-foot">Worth one really good latte · $7</div>
        </div>
      </div>
    </div>
  );
}

function Receive({ sender }) {
  return (
    <section className="section receive" data-screen-label="03 Receiving">
      <div className="section-inner">
        <div className="receive-grid">
          <div className="receive-copy">
            <div className="section-eyebrow-row">
              <span className="dot" />
              <span className="eyebrow">The receiving moment</span>
            </div>
            <h2 className="display">
              Like a quiet <span className="serif-italic">hello</span> in the inbox.
            </h2>
            <p>
              No accounts. No app. No scrolling. Just a beautifully designed
              email that opens into a single moment — a small, warm signal
              that someone, somewhere, is thinking of them.
            </p>
            <div className="receive-quote">
              “It made my whole afternoon — and I needed it.”
            </div>
          </div>

          <PhoneMockup sender={sender} />
        </div>

        <div className="big-cta">
          <h2 className="display">
            Make someone's day for the <br />
            <span className="serif-italic">price of a latte.</span>
          </h2>
          <p>
            Not every act of kindness needs a social network or a rewards account.
            Sometimes someone just needs a coffee.
          </p>
          <button className="btn btn-caramel btn-large">
            Send a coffee
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14M13 6l6 6-6 6"/>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

const JOKES = [
  "Why did the coffee file a police report? It got mugged.",
  "Espresso yourself.",
  "A yawn is just a silent scream for coffee.",
  "Words cannot espresso how much you mean to me.",
  "I like my coffee how I like my mornings — dark and too early.",
  "Coffee: because adulting is hard.",
  "Life's too short for bad coffee.",
  "Coffee and friends make the perfect blend.",
  "Behind every great person is a great cup of coffee.",
  "Sending coffee: cheaper than therapy.",
];

const TICKER_ICONS = [
  "assets/paper-cup.png",
  "assets/beans.png",
  "assets/espresso-machine.png",
  "assets/latte.png",
  "assets/coffee-bag.png",
  "assets/grinder.png",
];

function JokeTicker() {
  const doubled = [...JOKES, ...JOKES];
  return (
    <div className="joke-ticker">
      <div className="joke-track">
        {doubled.map((j, i) => (
          <span key={i} className="joke-pill">
            <img
              src={TICKER_ICONS[i % TICKER_ICONS.length]}
              alt=""
              className="joke-icon"
            />
            {j}
          </span>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer data-screen-label="04 Footer">
      <div className="foot-inner">
        <div className="foot-logo">
          <img src="assets/moby-logo.png" alt="Moby" className="foot-logo-img" />
          <span className="foot-logo-name">Moby</span>
          <p className="foot-desc">Say it with coffee</p>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Moby</span>
          <a href="#" className="foot-link">Privacy &amp; Terms</a>
        </div>
      </div>
    </footer>
  );
}

function TeamPlansOverlay({ onClose }) {
  const [step, setStep] = useState(0);
  const plan = TEAM_PLANS[step];
  const isIndividual = !!plan.isIndividual;
  const isContactUs = !!plan.contactUs;
  const discount = plan.mobyFee != null ? Math.round((1 - plan.mobyFee / 0.30) * 100) : 0;

  const mailSubject = isContactUs
    ? "Team%20plan%20(50%2B%20people)"
    : `Team%20plan%20(${plan.people}%20people)`;

  return (
    <div className="nav-splash team-plans-splash" role="dialog" aria-modal="true" aria-label="Team plans">
      <button
        className="nav-splash-close"
        aria-label="Close team plans"
        onClick={onClose}
      >
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <path d="M6 6l12 12M18 6L6 18" />
        </svg>
      </button>
      <div className="nav-splash-inner">
        <div className="team-plans-header">
          <p className="nav-splash-lead">Big thanks, whale-sized</p>
          <a href="mailto:hello@moby.coffee?subject=Team%20plans" className="team-plans-contact">
            hello@moby.coffee
            <span className="team-plans-contact-label">Questions about team plans</span>
          </a>
        </div>

        <div className="team-plan-card team-plan-card-solo">
          <div className="team-plan-card-body">
            <div className="team-plan-intro">
              <img
                src={isContactUs ? "uploads/art.png" : isIndividual ? "uploads/grinder.png" : "uploads/Chemex.png"}
                alt=""
                className="team-plan-img"
              />
              <p className="team-plan-name">{teamSizeLabel(plan)}</p>
              {discount > 0 && (
                <span className="team-plan-savings-badge">{discount}% off flat fee</span>
              )}
              <div className="team-plans-slider-wrap">
                <label className="team-plans-slider-label" htmlFor="team-size-slider">
                  People on your team
                </label>
                <div className="team-plans-slider-rail">
                  <div className="team-plans-slider-track-row">
                    <div className="team-plans-slider-dots">
                      {TEAM_PLANS.map((p, i) => (
                        <button
                          key={i}
                          type="button"
                          className={"team-plans-slider-dot" + (step === i ? " is-active" : "")}
                          style={{ "--ratio": i / (TEAM_PLANS.length - 1) }}
                          aria-label={teamPlanAriaLabel(p)}
                          onClick={() => setStep(i)}
                        />
                      ))}
                    </div>
                    <input
                      id="team-size-slider"
                      className="team-plans-slider"
                      type="range"
                      min={0}
                      max={TEAM_PLANS.length - 1}
                      step={1}
                      value={step}
                      onChange={(e) => setStep(Number(e.target.value))}
                      onInput={(e) => setStep(Number(e.target.value))}
                    />
                  </div>
                  <div className="team-plans-slider-ticks" aria-hidden="true">
                    {TEAM_PLANS.map((p, i) => (
                      <button
                        key={i}
                        type="button"
                        className={"team-plans-slider-tick" + (step === i ? " is-active" : "")}
                        style={{ "--ratio": i / (TEAM_PLANS.length - 1) }}
                        onClick={() => setStep(i)}
                      >
                        {teamPlanTickLabel(p)}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
              {isContactUs && (
                <p className="team-plan-volume">Custom pricing for larger teams</p>
              )}
              {!isIndividual && !isContactUs && (
                <p className="team-plan-volume">{plan.people} people on your team</p>
              )}
              {isIndividual && (
                <p className="team-plan-volume">No monthly fee</p>
              )}
            </div>

            <div className="team-plan-pricing">
              {isIndividual ? (
                <>
                  <p className="team-plan-price">
                    {formatMobyFee(plan.mobyFee)}
                    <span className="team-plan-price-unit"> Moby flat fee / send</span>
                  </p>
                  <p className="team-plan-price-note">Stripe fees not included</p>
                </>
              ) : isContactUs ? (
                <>
                  <p className="team-plan-price team-plan-price-talk">Contact us</p>
                  <p className="team-plan-price-note">We&apos;ll put together a plan for your team</p>
                </>
              ) : (
                <>
                  <p className="team-plan-price">
                    ${plan.monthly}
                    <span className="team-plan-price-unit"> / month</span>
                  </p>
                  <p className="team-plan-price-note">Stripe fees not included</p>
                </>
              )}
            </div>

            {isIndividual ? (
              <button
                type="button"
                className="team-plan-btn team-plan-btn-outline"
              >
                Get Started
              </button>
            ) : (
              <a
                href={`mailto:hello@moby.coffee?subject=${mailSubject}`}
                className="team-plan-btn team-plan-btn-outline"
              >
                Get Started
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Process, Receive, Footer, JokeTicker, TeamPlansOverlay });