// sections-mid.jsx — Purpose, Services, How It Works, Why Jano
const Icon2 = window.Icon;

/* ───────── Purpose / Values ───────── */
function Purpose({ onGo }) {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section" id="purpose">
      <div className="wrap">
        <div className="section-head reveal">
          <p className="eyebrow center">{C.purpose.eyebrow}</p>
          <h2 className="section-title">{C.purpose.title}</h2>
        </div>
        <div className="values">
          {C.values.map((v, i) => (
            <div className={"value-card reveal d" + (i + 1)} key={i}>
              <span className="value-watermark">{S.valueNums[i]}</span>
              <div className="value-ic"><Icon2 name={S.valueIcons[i]} size={28} /></div>
              <h3 className="value-title">{v.t}</h3>
              <p className="value-desc">{v.d}</p>
            </div>
          ))}
        </div>
        <div className="purpose-cta reveal d3">
          <a className="btn btn-outline" onClick={() => onGo && onGo("services")}>{C.purpose.cta} <Icon2 name="arrow-right" size={18} className="dir-flip" /></a>
        </div>
      </div>
    </section>
  );
}
window.Purpose = Purpose;

/* ───────── Services (7) ───────── */
function Services() {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section subtle" id="services">
      <div className="wrap">
        <div className="section-head reveal">
          <p className="eyebrow center">{C.services.eyebrow}</p>
          <h2 className="section-title">{C.services.title}</h2>
          <p className="section-sub">{C.services.sub}</p>
        </div>
        <div className="services-grid">
          <div className="svc-card feature reveal">
            <div className="tag">{C.services.featureTag}</div>
            <div className="svc-ic"><Icon2 name={S.featureIcon} size={24} /></div>
            <h3 className="svc-name">{C.services.featureName}</h3>
            <p className="svc-desc">{C.services.featureDesc}</p>
          </div>
          {C.services.items.map((s, i) => (
            <div className={"svc-card reveal d" + ((i % 4) + 1)} key={i}>
              <div className="svc-ic"><Icon2 name={S.serviceIcons[i]} size={24} /></div>
              <h3 className="svc-name">{s.name}</h3>
              <p className="svc-desc">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;

/* ───────── How It Works (flow + fee) ───────── */
function HowItWorks({ flowStyle, feeRef }) {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section dark has-ocean" id="how">
      <Ocean />
      <div className="wrap">
        <div className="section-head reveal">
          <p className="eyebrow center on-dark">{C.how.eyebrow}</p>
          <h2 className="section-title">{C.how.title}</h2>
          <p className="section-sub">{C.how.sub}</p>
        </div>
        <div className={"flow reveal" + (flowStyle === "stacked" ? " stacked" : "")}>
          <div className="flow-rail">
            {C.how.flow.map((f, i) => (
              <div className={"flow-node" + (S.flow[i].core ? " core" : "")} key={i}>
                <div className="flow-box">
                  <div className="flow-ic"><Icon2 name={S.flow[i].icon} size={24} /></div>
                  <div className="flow-meta">
                    <h4 className="flow-name">{f.name}</h4>
                    <p className="flow-tags">{f.tags}</p>
                  </div>
                </div>
                {i < C.how.flow.length - 1 && (
                  <span className="flow-arrow"><Icon2 name="arrow-right" size={22} className="dir-flip" /></span>
                )}
              </div>
            ))}
          </div>
          <div className="flow-foot">
            {C.how.pills.map((p, i) => (<span className="flow-pill" key={i}>{p}</span>))}
          </div>
        </div>

        {/* Fee comparison */}
        <div className="fee-card reveal" ref={feeRef} style={{ marginTop: 64, color: "var(--navy-900)" }}>
          <p className="eyebrow">{C.how.fee.eyebrow}</p>
          <h3 style={{ fontSize: "var(--h3)", fontWeight: 800, letterSpacing: "-0.02em", margin: "12px 0 6px", color: "var(--navy-900)" }}>
            {C.how.fee.title}
          </h3>
          <p style={{ color: "var(--slate-600)", margin: "0 0 28px", fontSize: 15 }}>{C.how.fee.sub}</p>
          <div className="fee-grid">
            {C.how.fee.rows.map((f, i) => (
              <div className="fee-row" key={i}>
                <div className="fee-name">{f.name}<small>{f.sub}</small></div>
                <div className="fee-bar"><div className={"fee-fill " + S.fees[i].cls} data-pct={S.fees[i].pct}></div></div>
                <div className={"fee-val tnum" + (S.fees[i].hl ? " hl" : "")}>{S.fees[i].val}</div>
              </div>
            ))}
          </div>
          <p className="fee-note">{C.how.fee.note}</p>
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

/* ───────── Why Jano ───────── */
function WhyJano({ onGetStarted }) {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section" id="why">
      <div className="wrap why-layout">
        <div className="why-visual reveal">
          <div className="why-glow"></div>
          {window.JWallet ? React.createElement(window.JWallet) : null}
        </div>
        <div className="reveal d1">
          <p className="eyebrow">{C.why.eyebrow}</p>
          <h2 className="section-title left" style={{ textAlign: "start", marginTop: 16 }}>{C.why.title}</h2>
          <p className="section-sub" style={{ margin: "18px 0 0" }}>{C.why.sub}</p>
          <div className="subbrand-row" style={{ marginTop: 26 }}>
            <span className="subbrand"><span className="d"></span> J-Wallet</span>
            <span className="subbrand card"><span className="d"></span> J-Card</span>
          </div>
          <ul className="why-features">
            {C.why.features.map((f, i) => (
              <li className="feature-item" key={i}>
                <div className="feature-ic"><Icon2 name={S.whyIcons[i]} size={23} /></div>
                <div>
                  <h4 className="feature-t">{f.t}</h4>
                  <p className="feature-d">{f.d}</p>
                </div>
              </li>
            ))}
          </ul>
          <a className="btn btn-primary" style={{ marginTop: 30 }} onClick={onGetStarted}>{C.ui.openWallet} <Icon2 name="arrow-right" size={18} className="dir-flip" /></a>
        </div>
      </div>
    </section>
  );
}
window.WhyJano = WhyJano;