/* WildTrack — Portal Screen 3C — Public Trace Viewer */

function PublicTrace() {
  return (
    <div style={{ background: '#FAFAFA', padding: '0', minHeight: 880 }}>
      {/* Top bar */}
      <div style={{
        background: 'white', borderBottom: '1px solid #EAEAEA',
        padding: '20px 48px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <svg width="28" height="28" viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="78" fill="none" stroke="#2D6A4F" strokeWidth="6" strokeDasharray="38 22" transform="rotate(-20 100 100)"/>
            <circle cx="100" cy="100" r="58" fill="none" stroke="#2D6A4F" strokeWidth="3"/>
            <path d="M100 70 C82 70 78 86 88 100 L100 124 L112 100 C122 86 118 70 100 70 Z" fill="#2D6A4F"/>
          </svg>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 18, color: '#1B1B1B', letterSpacing: '0.02em' }}>
              Wild<span style={{ color: '#2D6A4F' }}>Track</span>
            </div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.18em', color: '#6C757D', textTransform: 'uppercase', marginTop: 2 }}>
              Wildlife Traceability
            </div>
          </div>
        </div>
        <div style={{ fontSize: 13, color: '#6C757D' }}>
          Need help? <a style={{ color: '#2D6A4F', textDecoration: 'none', fontWeight: 500 }}>support@wildtrack.com</a>
        </div>
      </div>

      {/* Main */}
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '64px 48px 96px' }}>
        {/* Verification banner */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 14px', borderRadius: 999,
          background: '#D8F3DC', color: '#2D6A4F',
          fontSize: 13, fontWeight: 500,
          marginBottom: 40,
        }}>
          <Icon.ShieldCheck size={16} stroke="#2D6A4F"/>
          WildTrack Verified · Authentic trace
        </div>

        {/* Hero */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 200px', gap: 48, alignItems: 'center', marginBottom: 64 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 12 }}>
              Tag · WT-2026-00042
            </div>
            <h1 className="font-display" style={{
              fontSize: 64, fontWeight: 800, color: '#1B1B1B',
              margin: 0, letterSpacing: '-0.025em', lineHeight: 0.95,
            }}>
              Red Deer
            </h1>
            <div style={{
              fontFamily: 'Syne, sans-serif', fontStyle: 'italic', fontSize: 18,
              color: '#6C757D', marginTop: 12,
            }}>
              Cervus elaphus
            </div>
            <div style={{
              marginTop: 20, fontSize: 15, color: '#4A4A4A', lineHeight: 1.6,
            }}>
              Harvested 14 May 2026 · Lake District National Park, Cumbria
            </div>
          </div>
          {/* Photo placeholder with deer silhouette */}
          <div style={{
            width: 200, height: 200, borderRadius: 100,
            background: 'linear-gradient(160deg, #D8F3DC, #F4FBF7)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1px solid #B8E5C2',
          }}>
            <svg width="100" height="100" viewBox="0 0 100 100" fill="#2D6A4F">
              {/* Stylized deer head silhouette */}
              <g>
                <path d="M30 30 L28 16 L24 12 M30 30 L36 16 L36 8 M30 30 L40 24 L44 18 M68 30 L72 16 L76 12 M68 30 L62 16 L62 8 M68 30 L58 24 L54 18"
                  fill="none" stroke="#2D6A4F" strokeWidth="2" strokeLinecap="round"/>
                <ellipse cx="50" cy="60" rx="20" ry="22"/>
                <ellipse cx="50" cy="78" rx="6" ry="8" fill="#1B4332"/>
                <circle cx="42" cy="55" r="2" fill="#FAFAFA"/>
                <circle cx="58" cy="55" r="2" fill="#FAFAFA"/>
              </g>
            </svg>
          </div>
        </div>

        {/* Provenance timeline */}
        <div style={{ marginBottom: 48 }}>
          <h2 className="font-display" style={{ fontSize: 28, fontWeight: 700, color: '#1B1B1B', margin: '0 0 32px', letterSpacing: '-0.015em' }}>
            Provenance Trace
          </h2>

          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', left: 15, top: 32, bottom: 32,
              width: 2, background: '#D8F3DC',
            }}/>

            <TraceStep
              icon={<Icon.MapPin size={16} stroke="white"/>}
              label="Tagged in Field"
              location="Lake District Zone A, Cumbria"
              when="14 May 2026 · 14:22"
              details={[
                ['Operative', 'J. MacAllister'],
                ['Certification', 'WT-OP-1042'],
                ['GPS', '54.46°N 2.30°W (approximate)'],
              ]}
            />
            <TraceStep
              icon={<Icon.Boar size={16} stroke="white"/>}
              label="Processed"
              location="Kendal Processing Facility, Cumbria"
              when="16 May 2026 · 09:14"
              details={[
                ['Processor', 'Lakeland Game Ltd.'],
                ['Certification', 'WT-PR-0087'],
                ['Lot', 'KGL-26-W20-014'],
              ]}
            />
            <TraceStep
              icon={<Icon.Truck size={16} stroke="white"/>}
              label="Distributed"
              location="Northern Foods Distribution, Manchester"
              when="18 May 2026 · 06:30"
              details={[
                ['Carrier', 'Cold Chain North'],
                ['Cold chain', 'Maintained ✓ (2–4°C continuous)'],
              ]}
            />
            <TraceStep
              icon={<Icon.ChefHat size={16} stroke="white"/>}
              label="Served"
              location="The Gilpin Hotel & Lake House, Windermere"
              when="20 May 2026"
              details={[
                ['Chef', 'M. Bancroft'],
                ['Dish', 'Cumbrian Red Deer Loin, Wild Garlic'],
              ]}
              last
            />
          </div>
        </div>

        {/* Journey map */}
        <div style={{ marginBottom: 48 }}>
          <h3 className="font-display" style={{ fontSize: 20, fontWeight: 600, color: '#1B1B1B', margin: '0 0 16px' }}>
            The journey
          </h3>
          <div style={{ position: 'relative', height: 200, borderRadius: 12, overflow: 'hidden', border: '1px solid #1A2F22' }}>
            <TopoMap width={624} height={200} variant="wide" showZone={false} showUser={false}
              tags={[
                { x: 0.15, y: 0.5, tone: 'green' },
                { x: 0.4, y: 0.45, tone: 'amber' },
                { x: 0.65, y: 0.55, tone: 'amber' },
                { x: 0.88, y: 0.5, tone: 'green' },
              ]}
              trail="M150,500 C260,440 360,420 460,460 C560,500 660,480 770,520 C800,530 850,500 880,500"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
            />
            <div style={{
              position: 'absolute', bottom: 12, left: 12,
              background: 'rgba(15,31,24,0.85)', backdropFilter: 'blur(8px)',
              padding: '6px 12px', borderRadius: 999,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'white',
              letterSpacing: '0.08em',
            }}>
              Field → Plate · 412km · 6 days
            </div>
          </div>
        </div>

        {/* About WildTrack expandable */}
        <div style={{
          padding: 24, background: 'white', border: '1px solid #E0E0E0', borderRadius: 12,
          marginBottom: 48,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Icon.ShieldCheck size={18} stroke="#2D6A4F"/>
              <span style={{ fontSize: 15, fontWeight: 500, color: '#1B1B1B' }}>
                About WildTrack traceability
              </span>
            </div>
            <Icon.ChevronDown size={18} stroke="#6C757D"/>
          </div>
          <div style={{
            paddingTop: 20, marginTop: 20, borderTop: '1px solid #EAEAEA',
            fontSize: 14, color: '#4A4A4A', lineHeight: 1.65,
          }}>
            <p style={{ margin: '0 0 12px' }}>
              Every WildTrack-traced animal is tagged at the moment of harvest with a GPS-stamped, cryptographically-signed identifier. Each subsequent handoff — processor, distributor, kitchen — is recorded against that tag and verified by WildTrack.
            </p>
            <p style={{ margin: 0 }}>
              The platform is operated by certified estates and food businesses across the UK. Tags cannot be reused, edited after creation, or forged.
            </p>
          </div>
        </div>

        {/* Footer attestation */}
        <div style={{
          padding: 24, background: '#F4FBF7', border: '1px solid #B8E5C2', borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 16,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 24,
            background: '#2D6A4F',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.ShieldCheck size={24} stroke="white"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: '#1B1B1B', marginBottom: 4 }}>
              This trace was verified by WildTrack
            </div>
            <div style={{ fontSize: 13, color: '#4A4A4A' }}>
              Signed: <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>SHA · a7f2…d091</span> · Last verified 20 May 2026 · 19:42
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer style={{
        borderTop: '1px solid #EAEAEA', padding: '32px 48px',
        background: 'white',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 16, color: '#1B1B1B', letterSpacing: '0.02em' }}>
            Wild<span style={{ color: '#2D6A4F' }}>Track</span>
          </span>
          <span style={{ fontSize: 13, color: '#6C757D' }}>Ethical sourcing, verified.</span>
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 13, color: '#6C757D' }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>About</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Methodology</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Contact</a>
        </div>
      </footer>
    </div>
  );
}

function TraceStep({ icon, label, location, when, details, last }) {
  return (
    <div style={{ display: 'flex', gap: 20, paddingBottom: last ? 0 : 36, position: 'relative' }}>
      <div style={{
        width: 32, height: 32, borderRadius: 16,
        background: '#2D6A4F',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0, position: 'relative', zIndex: 2,
        boxShadow: '0 0 0 4px white',
      }}>{icon}</div>
      <div style={{ flex: 1, paddingTop: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <Icon.Check size={14} stroke="#2D6A4F"/>
          <span className="font-display" style={{ fontSize: 18, fontWeight: 700, color: '#1B1B1B', letterSpacing: '-0.01em' }}>
            {label}
          </span>
        </div>
        <div style={{ fontSize: 14, color: '#1B1B1B', fontWeight: 500, marginBottom: 2 }}>
          {location}
        </div>
        <div style={{ fontSize: 13, color: '#6C757D', marginBottom: 12 }}>
          {when}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {details.map(([k, v]) => (
            <div key={k} style={{ display: 'flex', gap: 12, fontSize: 13 }}>
              <span style={{ width: 110, color: '#6C757D' }}>{k}</span>
              <span style={{ color: '#1B1B1B', fontFamily: k === 'GPS' || k === 'Certification' || k === 'Lot' ? 'JetBrains Mono, monospace' : 'DM Sans, sans-serif' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PublicTrace = PublicTrace;