// sections-bottom.jsx — Markets (world map), Global, Contact, Footer
const Icon3 = window.Icon;
const { useState: useState3 } = React;

/* ───────── Dot-grid world map ───────── */
function WorldMap() {
  const C = window.JANO;
  const land = [
    [70, 60, 150, 110], [120, 165, 70, 55], [225, 215, 85, 150],
    [375, 70, 95, 70], [375, 150, 115, 175], [465, 60, 245, 150],
    [600, 215, 120, 50], [660, 285, 95, 65],
  ];
  const step = 15, r = 2.1, offY = 45;
  const dots = [];
  for (let x = 30; x < 770; x += step) {
    for (let y = 0; y < 440; y += step) {
      const inside = land.some(([lx, ly, lw, lh]) => x >= lx && x <= lx + lw && y >= ly && y <= ly + lh);
      if (inside && Math.random() > 0.12) dots.push([x, y + offY]);
    }
  }
  const pins = [
    { x: 498, y: 218 + offY, ...C.markets.pins[0] },
    { x: 640, y: 250 + offY, ...C.markets.pins[1] },
  ];
  const entityPins = [{ x: 200, y: 120 + offY }, { x: 415, y: 105 + offY }, { x: 505, y: 232 + offY }];
  const rtl = C === window.I18N.ar;
  return (
    <svg viewBox="0 0 800 520" role="img" aria-label="Jano Payment target markets">
      <defs>
        <radialGradient id="pinGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#5A8CFF" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#5A8CFF" stopOpacity="0" />
        </radialGradient>
      </defs>
      {pins.map((p, i) =>
        entityPins.map((e, j) => (
          <path key={i + "-" + j} d={`M${e.x} ${e.y} Q ${(e.x + p.x) / 2} ${Math.min(e.y, p.y) - 50} ${p.x} ${p.y}`}
            fill="none" stroke="#5A8CFF" strokeOpacity="0.18" strokeWidth="1" />
        ))
      )}
      <g fill="#3A639F" fillOpacity="0.45">
        {dots.map((d, i) => <circle key={i} cx={d[0]} cy={d[1]} r={r} />)}
      </g>
      {entityPins.map((e, i) => (<circle key={i} cx={e.x} cy={e.y} r="4" fill="#9FC0FF" fillOpacity="0.85" />))}
      {pins.map((p, i) => {
        const tx = rtl ? p.x - 14 : p.x + 14;
        const anchor = rtl ? "end" : "start";
        return (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="44" fill="url(#pinGlow)">
              <animate attributeName="r" values="26;46;26" dur="3s" repeatCount="indefinite" begin={i * 0.7 + "s"} />
              <animate attributeName="opacity" values="0.8;0.15;0.8" dur="3s" repeatCount="indefinite" begin={i * 0.7 + "s"} />
            </circle>
            <circle cx={p.x} cy={p.y} r="7" fill="#5A8CFF" stroke="#fff" strokeWidth="2" />
            <g transform={`translate(${tx}, ${p.y - 6})`}>
              <text x="0" y="0" textAnchor={anchor} fill="#fff" fontSize="16" fontWeight="700" fontFamily="Pretendard, sans-serif">{p.label}</text>
              <text x="0" y="18" textAnchor={anchor} fill="#9FC0FF" fontSize="12" fontFamily="Pretendard, sans-serif">{p.note}</text>
            </g>
          </g>
        );
      })}
    </svg>
  );
}

function Markets() {
  const C = window.JANO;
  return (
    <section className="section subtle" id="markets">
      <div className="wrap">
        <div className="section-head reveal">
          <p className="eyebrow center">{C.markets.eyebrow}</p>
          <h2 className="section-title">{C.markets.title}</h2>
        </div>
        <div className="markets-layout">
          <div className="map-wrap reveal"><WorldMap /></div>
          <div className="region-cards">
            {C.markets.regions.map((reg, i) => (
              <div className={"region-card reveal d" + (i + 1)} key={i}>
                <div className="rn">{reg.n}</div>
                <h3 className="rt">{reg.t}</h3>
                <p className="rd">{reg.d}</p>
                <div className="rmeta">{reg.chips.map((c, j) => <span className="rchip" key={j}>{c}</span>)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Markets = Markets;

/* ───────── Global presence ───────── */
function GlobalPresence() {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section dark has-ocean" id="global">
      <Ocean />
      <div className="wrap">
        <div className="section-head reveal">
          <p className="eyebrow center on-dark">{C.global.eyebrow}</p>
          <h2 className="section-title">{C.global.title}</h2>
          <p className="section-sub">{C.global.sub}</p>
        </div>
        <div className="entities">
          {C.global.entities.map((e, i) => (
            <div className={"entity-card reveal d" + (i + 1)} key={i}>
              <div className="entity-flag">{S.entityFlags[i]}</div>
              <div className="entity-loc">{e.loc}</div>
              <h3 className="entity-name">{e.name}</h3>
              <ul className="entity-meta">
                {e.meta.map((m, j) => (<li key={j}><Icon3 name="map-pin" size={16} /><span>{m}</span></li>))}
              </ul>
              <span className="entity-license"><Icon3 name="badge-check" size={14} /> {e.license}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.GlobalPresence = GlobalPresence;

/* ───────── Contact ───────── */
function Contact() {
  const C = window.JANO;
  const [topic, setTopic] = useState3(C.contact.topics[0]);
  const [sent, setSent] = useState3(false);
  const f = C.contact.form;
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="section" id="contact">
      <div className="wrap contact-layout">
        <div className="contact-aside reveal">
          <p className="eyebrow">{C.contact.eyebrow}</p>
          <h2 className="ct">{C.contact.title}</h2>
          <p className="cd">{C.contact.desc}</p>
          <ul className="contact-info">
            {C.contact.info.map((it, i) => (
              <li key={i}>
                <div className="ci"><Icon3 name={["mail", "globe", "badge-check"][i]} size={20} /></div>
                <div><div className="ck">{it.k}</div><div className="cv">{it.v}</div></div>
              </li>
            ))}
          </ul>
        </div>
        <div className="contact-form reveal d1">
          {sent ? (
            <div className="form-success">
              <div className="sc"><Icon3 name="check-circle" size={30} /></div>
              <h3>{f.successTitle}</h3>
              <p>{f.successMsg}</p>
              <a className="btn btn-outline" style={{ marginTop: 24 }} onClick={() => setSent(false)}>{f.sendAnother}</a>
            </div>
          ) : (
            <form onSubmit={submit}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--navy-900)", marginBottom: 12 }}>{f.whatsThis}</div>
              <div className="topic-row">
                {C.contact.topics.map((t, i) => (
                  <button type="button" key={i} className={"topic" + (topic === t ? " active" : "")} onClick={() => setTopic(t)}>{t}</button>
                ))}
              </div>
              <div className="field-grid">
                <div className="field"><label>{f.nameL}</label><input required placeholder={f.nameP} /></div>
                <div className="field"><label>{f.emailL}</label><input type="email" required placeholder={f.emailP} /></div>
              </div>
              <div className="field-grid">
                <div className="field"><label>{f.companyL}</label><input placeholder={f.companyP} /></div>
                <div className="field"><label>{f.countryL}</label><input placeholder={f.countryP} /></div>
              </div>
              <div className="field full"><label>{f.messageL}</label><textarea required placeholder={f.messageP}></textarea></div>
              <div className="form-foot">
                <span className="form-consent"><Icon3 name="lock" size={15} /> {f.privateNote}</span>
                <button className="btn btn-primary" type="submit">{f.send} <Icon3 name="arrow-right" size={18} className="dir-flip" /></button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

/* ───────── Footer ───────── */
function Footer({ onNav }) {
  const C = window.JANO;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand" style={{ cursor: "default" }}>
              <img className="brand-mark" src={(window.__resources && window.__resources.logoSvg) || "assets/jano_logo.svg"} alt="Jano" />
              <span className="brand-name">Jano<b> Payment</b></span>
            </div>
            <p className="footer-tag">{C.footer.tag}</p>
          </div>
          {C.footer.cols.map((c, i) => (
            <div className="footer-col" key={i}>
              <h5>{c.h}</h5>
              <ul>{c.items.map((it, j) => <li key={j}><a onClick={() => onNav && onNav("top")}>{it}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div className="footer-legal">{C.footer.legal}</div>
          <div className="footer-copy">{C.footer.copy}</div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;