// ToConnectClone.jsx
// Single-file React component (TailwindCSS required) that reproduces a landing/dashboard like the screenshot.
// Usage: paste into a Create React App / Vite React project's src/App.jsx (rename) and ensure Tailwind is configured.

import React from 'react';

const user = { name: 'Tracy Demo' };

function ProgressRing({ percent = 0, size = 96 }) {
  const stroke = 8;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const dash = (percent / 100) * c;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <defs>
        <linearGradient id="g1" x1="0" x2="1">
          <stop offset="0%" stopColor="#f43f5e" />
          <stop offset="100%" stopColor="#fb923c" />
        </linearGradient>
      </defs>
      <circle
        cx={size/2}
        cy={size/2}
        r={r}
        stroke="#f3f4f6"
        strokeWidth={stroke}
        fill="none"
      />
      <circle
        cx={size/2}
        cy={size/2}
        r={r}
        stroke="url(#g1)"
        strokeWidth={stroke}
        strokeLinecap="round"
        strokeDasharray={`${dash} ${c - dash}`}
        transform={`rotate(-90 ${size/2} ${size/2})`}
        fill="none"
      />
      <text x="50%" y="50%" dominantBaseline="middle" textAnchor="middle" fontSize="14" fill="#111827">{percent}%</text>
    </svg>
  );
}

export default function ToConnectClone() {
  const recent = {
    title: 'Course A1-1 | Session 3',
    excerpt: 'Lerne die Basics und fortgeschrittene Tricks, um dein Setup zu optimieren.',
    progress: 42,
  };

  const upcoming = [
    { id:1, title: 'Session 2: Create Low Fidelity Designs', date: 'Mar 24, 16:00' },
    { id:2, title: 'Session 4: Create High Fidelity Designs', date: 'Mar 26, 18:00' },
  ];

  return (
    <div className="min-h-screen bg-gray-100 text-gray-900">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <header className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-4">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-600 to-pink-500 flex items-center justify-center text-white font-bold">AL</div>
            <div>
              <div className="text-sm text-gray-500">Hello, {user.name}</div>
              <h1 className="text-2xl font-semibold">What do you want to learn today?</h1>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <input className="hidden sm:inline-block border rounded p-2 text-sm" placeholder="Search..." />
            <button className="px-4 py-2 bg-white rounded shadow-sm text-sm">Account</button>
          </div>
        </header>

        {/* Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Main column */}
          <main className="lg:col-span-8 space-y-6">
            {/* Recent Learning Card */}
            <div className="bg-white rounded-xl shadow p-5 flex flex-col sm:flex-row gap-4">
              <div className="flex-1">
                <h2 className="font-semibold text-lg">{recent.title}</h2>
                <p className="text-sm text-gray-500 mt-2">{recent.excerpt}</p>
                <div className="mt-4">
                  <button className="px-4 py-2 bg-indigo-600 text-white rounded">Continue Learning</button>
                </div>
              </div>
              <div className="w-40 flex items-center justify-center">
                <ProgressRing percent={recent.progress} size={96} />
              </div>
            </div>

            {/* Upcoming Lessons */}
            <div className="bg-white rounded-xl shadow p-5">
              <h3 className="font-semibold mb-3">Upcoming Lessons</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {upcoming.map(u => (
                  <div key={u.id} className="border rounded p-3 flex items-start gap-3">
                    <div className="w-3 h-3 rounded-full bg-green-400 mt-2" />
                    <div>
                      <div className="font-medium">{u.title}</div>
                      <div className="text-sm text-gray-500">{u.date}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Custom content block (placeholder for video/grid) */}
            <div className="bg-white rounded-xl shadow p-5">
              <h3 className="font-semibold mb-3">Library</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {Array.from({length:6}).map((_,i) => (
                  <div key={i} className="border rounded overflow-hidden">
                    <div className="aspect-w-16 aspect-h-9 bg-gray-200" />
                    <div className="p-3">
                      <div className="font-medium">Lesson {i+1}</div>
                      <div className="text-sm text-gray-500">Short description</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </main>

          {/* Sidebar */}
          <aside className="lg:col-span-4 space-y-6">
            {/* Progress Stats */}
            <div className="bg-white rounded-xl shadow p-5">
              <h4 className="font-semibold mb-3">Progress Statistics</h4>
              <div className="grid grid-cols-3 gap-4 text-center">
                <div>
                  <div className="text-2xl font-bold">10</div>
                  <div className="text-sm text-gray-500">Completed</div>
                </div>
                <div>
                  <div className="text-2xl font-bold">15</div>
                  <div className="text-sm text-gray-500">Upcoming</div>
                </div>
                <div>
                  <div className="text-2xl font-bold">20</div>
                  <div className="text-sm text-gray-500">Lessons</div>
                </div>
              </div>
            </div>

            {/* Event Calendar (simple) */}
            <div className="bg-white rounded-xl shadow p-5">
              <h4 className="font-semibold mb-3">Event Calendar</h4>
              <div className="grid grid-cols-7 gap-1 text-sm text-center">
                {['Mo','Tu','We','Th','Fr','Sa','Su'].map(d => (
                  <div key={d} className="text-xs text-gray-400">{d}</div>
                ))}
                {Array.from({length:28}).map((_,i) => (
                  <div key={i} className={`p-2 rounded ${i===12? 'bg-indigo-50 font-medium' : 'hover:bg-gray-50'}`}>{i+1}</div>
                ))}
              </div>
            </div>

            {/* Small CTA */}
            <div className="bg-white rounded-xl shadow p-5 text-center">
              <div className="font-semibold">Join our Pro plan</div>
              <p className="text-sm text-gray-500 mt-2">Access premium lessons & monthly live sessions</p>
              <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded">Upgrade</button>
            </div>
          </aside>
        </div>

        {/* Footer */}
        <footer className="mt-8 text-center text-xs text-gray-500">© {new Date().getFullYear()} ALTERNATE – Made with ♥</footer>
      </div>
    </div>
  );
}