/* global React, MagneticButton, Icons */
// ============================================================
// AppSection — mobile app teaser, flagged as COMING SOON.
//   LEFT   "Coming soon" badge · headline · short subtitle
//   RIGHT  iPhone mockup (unbranded) showing a transfer
// The copy makes clear this is a feature in development: it never
// claims the app is already available.
// ============================================================
function AppSection() {
  return (
    <section className="appx-section" data-screen-label="App" id="app">
      <div className="wrap">
        <div className="appx-grid reveal">

          {/* ── LEFT — copy ── */}
          <div className="appx-copy">
            <span className="appx-badge">
              <span className="appx-badge-dot" /> Coming soon · in development
            </span>
            <h2 className="appx-title">
              Soon, your treasury<br/>
              <span className="appx-title-dim">in your pocket too.</span>
            </h2>
            <p className="appx-lede">
              We're building the Meefi mobile app so you can close deals in
              seconds from your phone: approve payments, check balances and keep
              your operation moving, wherever you are.
            </p>
            <p className="appx-note">
              Launching soon. We'll let you know the moment it's ready.
            </p>
          </div>

          {/* ── RIGHT — iPhone mockup (unbranded) ── */}
          <div className="appx-visual" aria-hidden="true">
            <div className="appx-phone">
              {/* physical side buttons */}
              <span className="appx-btn appx-btn-action" />
              <span className="appx-btn appx-btn-volup" />
              <span className="appx-btn appx-btn-voldn" />
              <span className="appx-btn appx-btn-power" />

              <div className="appx-screen">
                {/* Dynamic Island */}
                <span className="appx-island" />

                {/* iOS status bar */}
                <div className="appx-statusbar">
                  <span className="appx-sb-time">9:41</span>
                  <span className="appx-sb-icons">
                    <svg className="appx-sb-ic" viewBox="0 0 18 12" width="17" height="11" fill="currentColor">
                      <rect x="0"  y="8"   width="3" height="4"    rx="1"/>
                      <rect x="5"  y="5.5" width="3" height="6.5"  rx="1"/>
                      <rect x="10" y="3"   width="3" height="9"    rx="1"/>
                      <rect x="15" y="0.5" width="3" height="11.5" rx="1"/>
                    </svg>
                    <svg className="appx-sb-ic" viewBox="0 0 16 12" width="15" height="11" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                      <path d="M1 4.1a10 10 0 0 1 14 0"/>
                      <path d="M3.5 6.6a6.5 6.5 0 0 1 9 0"/>
                      <path d="M6 9.1a3 3 0 0 1 4 0"/>
                      <circle cx="8" cy="10.9" r="0.6" fill="currentColor" stroke="none"/>
                    </svg>
                    <span className="appx-sb-batt"><i/></span>
                  </span>
                </div>

                {/* App body */}
                <div className="appx-app">
                  <div className="appx-app-top">
                    <span className="appx-app-title">Send money</span>
                    <span className="appx-app-close">
                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                    </span>
                  </div>

                  <div className="appx-balance">
                    <span className="appx-balance-label">Available balance</span>
                    <span className="appx-balance-amt">$128,940.00 <small>USD</small></span>
                  </div>

                  <div className="appx-to">
                    <span className="appx-to-av">SZ</span>
                    <span className="appx-to-meta">
                      <span className="appx-to-n">Supplier · Shenzhen</span>
                      <span className="appx-to-s">International payment</span>
                    </span>
                    <svg className="appx-to-arrow" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                  </div>

                  <div className="appx-amt-wrap">
                    <span className="appx-amt-label">Amount to send</span>
                    <span className="appx-amt">$48,200.00<small>USD</small></span>
                  </div>

                  <div className="appx-foot">
                    <div className="appx-status">
                      <span className="appx-check">
                        <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                      </span>
                      <span>Sent · Arrives today</span>
                    </div>
                    <div className="appx-cta">Close the deal</div>
                  </div>
                </div>

                {/* Home indicator */}
                <span className="appx-home" />
              </div>
            </div>
          </div>

        </div>
      </div>
      <style>{APPX_CSS}</style>
    </section>
  );
}

const APPX_CSS = `
.appx-section{ background:var(--bg-2); }
.appx-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:64px; align-items:center; }
.appx-copy{ max-width:520px; }
.appx-badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  background:rgba(5,48,206,.08); padding:6px 14px 6px 12px; border-radius:9999px; margin-bottom:22px; }
.appx-badge-dot{ width:6px; height:6px; border-radius:9999px; background:var(--accent);
  box-shadow:0 0 0 4px rgba(5,48,206,.15); animation:pulse-dot var(--pulse-cycle) var(--ease-smooth) infinite; }
.appx-title{ margin:0 0 20px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,2.6vw + 1rem,3.1rem); line-height:1.06; letter-spacing:-.03em; color:var(--fg-1); }
.appx-title-dim{ color:var(--fg-2); }
.appx-lede{ margin:0 0 14px; font-size:17px; line-height:1.6; color:var(--fg-2); }
.appx-note{ margin:0; font-size:13px; color:var(--fg-3); }

/* ── iPhone mockup (unbranded) ── */
.appx-visual{ display:flex; justify-content:center; }
.appx-phone{ position:relative; width:316px; aspect-ratio:316 / 646; padding:12px; border-radius:58px;
  background:linear-gradient(150deg,#484b52 0%,#26282e 17%,#191b20 50%,#26282e 83%,#484b52 100%);
  box-shadow:0 56px 100px -40px rgba(4,10,34,.5), 0 26px 50px -28px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(255,255,255,.07); }

/* physical side buttons */
.appx-btn{ position:absolute; z-index:0; }
.appx-btn-action{ left:-2px; top:104px; width:3px; height:28px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#45484f,#26282e); }
.appx-btn-volup{ left:-2px; top:152px; width:3px; height:50px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#45484f,#26282e); }
.appx-btn-voldn{ left:-2px; top:212px; width:3px; height:50px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#45484f,#26282e); }
.appx-btn-power{ right:-2px; top:174px; width:3px; height:70px; border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,#45484f,#26282e); }

.appx-screen{ position:relative; height:100%; border-radius:46px; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5); }
.appx-island{ position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:84px; height:25px; border-radius:9999px; background:#05070d; z-index:6; }
.appx-home{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:112px; height:4px; border-radius:9999px; background:rgba(27,31,38,.22); z-index:6; }

/* status bar */
.appx-statusbar{ display:flex; align-items:center; justify-content:space-between;
  height:46px; padding:0 26px 0 30px; flex:0 0 auto; }
.appx-sb-time{ font-size:13px; font-weight:600; color:var(--fg-1); letter-spacing:.01em;
  font-variant-numeric:tabular-nums; }
.appx-sb-icons{ display:inline-flex; align-items:center; gap:5px; color:var(--fg-1); }
.appx-sb-batt{ position:relative; width:20px; height:10px; border:1px solid rgba(27,31,38,.38);
  border-radius:3px; padding:1.5px; display:inline-flex; }
.appx-sb-batt::after{ content:''; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
  width:1.5px; height:4px; border-radius:0 1px 1px 0; background:rgba(27,31,38,.38); }
.appx-sb-batt i{ display:block; width:78%; height:100%; border-radius:1.5px; background:var(--fg-1); }

/* app body — compact, airy, minimal scale */
.appx-app{ flex:1 1 auto; display:flex; flex-direction:column; gap:12px; padding:2px 28px 0; }
.appx-app-top{ display:flex; align-items:center; justify-content:space-between; }
.appx-app-title{ font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--fg-1); letter-spacing:-.01em; }
.appx-app-close{ width:24px; height:24px; border-radius:9999px; background:var(--bg-3);
  color:var(--fg-2); display:inline-flex; align-items:center; justify-content:center; }

.appx-balance{ display:flex; flex-direction:column; gap:2px; padding:11px 13px;
  background:var(--bg-2); border:1px solid var(--border-soft); border-radius:14px; }
.appx-balance-label{ font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--fg-3); }
.appx-balance-amt{ font-family:var(--font-display); font-weight:600; font-size:16px;
  color:var(--fg-1); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.appx-balance-amt small{ font-size:9px; font-weight:600; color:var(--fg-3); letter-spacing:.04em; margin-left:2px; }

.appx-to{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border);
  border-radius:14px; background:#fff; }
.appx-to-av{ width:28px; height:28px; flex:0 0 28px; border-radius:9999px; background:var(--accent-soft);
  color:var(--accent); font-size:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.appx-to-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.appx-to-n{ font-size:11.5px; font-weight:500; color:var(--fg-1); }
.appx-to-s{ font-size:9.5px; color:var(--fg-3); }
.appx-to-arrow{ margin-left:auto; color:var(--fg-3); flex:0 0 auto; }

.appx-amt-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center; padding:6px 2px 2px; }
.appx-amt-label{ font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:500; color:var(--fg-3); }
.appx-amt{ font-family:var(--font-display); font-weight:600; font-size:25px; color:var(--fg-1);
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.appx-amt small{ font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--fg-3); }

.appx-foot{ margin-top:auto; display:flex; flex-direction:column; gap:11px; padding-bottom:24px; }
.appx-status{ display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:10.5px; font-weight:500; color:var(--success); }
.appx-check{ width:16px; height:16px; flex:0 0 16px; border-radius:9999px; background:var(--success);
  display:inline-flex; align-items:center; justify-content:center; }
.appx-cta{ height:42px; border-radius:13px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600;
  letter-spacing:.01em; box-shadow:0 10px 22px -10px rgba(5,48,206,.5); }

@media (max-width:900px){
  .appx-grid{ grid-template-columns:1fr; gap:44px; }
  .appx-copy{ max-width:none; text-align:center; margin:0 auto; }
  .appx-badge{ margin-left:auto; margin-right:auto; }
  .appx-lede{ margin-left:auto; margin-right:auto; }
}
@media (max-width:420px){
  .appx-phone{ width:286px; }
}
`;

window.AppSection = AppSection;