/* global React, LogoMark, sparkline */
const { useState: useDFState, useEffect: useDFEffect } = React;

/* =========================================================
   DeviceShowcase — desktop + mobile mockups side-by-side
   ========================================================= */
function MobileMockup() {
  const tiers = [
    { name: "Tax",       pct: 79, amt: 4800, target: 6080, color: "#e8b53b" },
    { name: "Operating", pct: 92, amt: 3680, target: 4000, color: "#3a8dde" },
    { name: "Owner pay", pct: 64, amt: 3200, target: 5000, color: "#2e9143" },
    { name: "Growth",    pct: 41, amt:  820, target: 2000, color: "#8c5cd6" },
  ];

  return (
    <div className="phone-frame">
      <div className="phone-notch"></div>
      <div className="phone-screen">
        {/* Status bar */}
        <div className="phone-status">
          <span>9:41</span>
          <div className="phone-status-icons">
            <span className="phone-signal"></span>
            <span className="phone-wifi">▽</span>
            <span className="phone-battery"></span>
          </div>
        </div>

        {/* App header */}
        <div className="m-header">
          <div className="m-greet">
            <div className="m-greet-sub">Good morning,</div>
            <div className="m-greet-name">Jordan</div>
          </div>
          <div className="m-avatar">J</div>
        </div>

        {/* Hero card */}
        <div className="m-hero-card">
          <div className="m-hero-label">Total reserves</div>
          <div className="m-hero-value">$23,400</div>
          <div className="m-hero-target">
            <span style={{color:"var(--green-500)"}}>78%</span> of $30K target
          </div>
          <div className="m-hero-bar">
            <div style={{width:"78%"}}></div>
          </div>
          <div className="m-hero-tag">
            <span className="m-dot-pulse"></span>
            On track · 8.4 mo runway
          </div>
        </div>

        {/* Quick stats */}
        <div className="m-stats">
          <div className="m-stat">
            <div className="m-stat-label">Safe to spend</div>
            <div className="m-stat-value">$4,820</div>
            <div className="m-stat-trend up">▲ 12%</div>
          </div>
          <div className="m-stat">
            <div className="m-stat-label">Owner draw</div>
            <div className="m-stat-value">$3,200</div>
            <div className="m-stat-trend up">May 1</div>
          </div>
        </div>

        {/* Buckets */}
        <div className="m-section-head">
          <span>Reserve buckets</span>
          <span className="m-link">View all →</span>
        </div>
        <div className="m-buckets">
          {tiers.map((t,i) => (
            <div key={i} className="m-bucket">
              <div className="m-bucket-row">
                <span className="m-bucket-name">{t.name}</span>
                <span className="m-bucket-amt">${t.amt.toLocaleString()}</span>
              </div>
              <div className="m-bucket-bar">
                <div style={{width: t.pct + "%", background: t.color}}></div>
              </div>
              <div className="m-bucket-row">
                <span className="m-bucket-pct" style={{color: t.color}}>{t.pct}%</span>
                <span className="m-bucket-target">of ${t.target.toLocaleString()}</span>
              </div>
            </div>
          ))}
        </div>

        {/* AI Card */}
        <div className="m-ai-card">
          <div className="m-ai-head">
            <span className="m-ai-spark">✦</span>
            <span>Today's nudge</span>
          </div>
          <div className="m-ai-body">
            Acme paid early — set aside <strong>$1,512</strong> for taxes before Friday.
          </div>
          <div className="m-ai-actions">
            <button className="m-ai-btn primary">Reserve now</button>
            <button className="m-ai-btn">Later</button>
          </div>
        </div>

        {/* Tab bar */}
        <div className="m-tabs">
          <div className="m-tab active">
            <div className="m-tab-icon">●</div>
            <div className="m-tab-label">Home</div>
          </div>
          <div className="m-tab">
            <div className="m-tab-icon">◇</div>
            <div className="m-tab-label">Reserves</div>
          </div>
          <div className="m-tab m-tab-fab">
            <div className="m-fab">+</div>
          </div>
          <div className="m-tab">
            <div className="m-tab-icon">⌃</div>
            <div className="m-tab-label">Forecast</div>
          </div>
          <div className="m-tab">
            <div className="m-tab-icon">○</div>
            <div className="m-tab-label">Profile</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DeviceShowcase() {
  return (
    <section className="device-showcase">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow"><span className="dot"></span>Anywhere you work</span>
          <h2 className="h-section" style={{marginTop:14}}>
            Desk-deep on Tuesday. <br/>
            Coffee shop on Saturday.
          </h2>
          <p className="lead" style={{marginTop:18, marginInline:"auto"}}>
            ReservWise stays in sync across desktop and mobile, so the one minute
            between deposit and decision happens wherever you happen to be.
          </p>
        </div>
      </div>

      <div className="device-stage">
        <div className="device-stage-glow" aria-hidden="true"></div>
        <div className="device-row">
          <div className="device-desktop">
            <DashboardHero/>
          </div>
          <div className="device-mobile">
            <MobileMockup/>
          </div>
        </div>
      </div>

      <div className="container" style={{marginTop:60}}>
        <div className="device-features">
          <div className="device-feature">
            <div className="device-feat-icon" style={{background:"var(--green-50)", color:"var(--green-600)"}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              </svg>
            </div>
            <div>
              <div className="device-feat-h">Real-time sync</div>
              <div className="device-feat-d">Reserve a deposit on the train, see it on your laptop the moment you sit down.</div>
            </div>
          </div>
          <div className="device-feature">
            <div className="device-feat-icon" style={{background:"#fef6df", color:"#b88d10"}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2"/>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
              </svg>
            </div>
            <div>
              <div className="device-feat-h">Bank-grade security</div>
              <div className="device-feat-d">Read-only Plaid connections, AES-256 at rest, biometric unlock on mobile.</div>
            </div>
          </div>
          <div className="device-feature">
            <div className="device-feat-icon" style={{background:"#eef0f4", color:"#3a4068"}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12 6 12 12 16 14"/>
              </svg>
            </div>
            <div>
              <div className="device-feat-h">One-tap reserve</div>
              <div className="device-feat-d">Push a notification → confirm split → done. The whole loop in under 10 seconds.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DeviceShowcase, MobileMockup });