<?= $this->extend('layout/templatetool');?>

<!-- Untuk Css -->
<?= $this->section('css') ?>
<style>
	body { font-family: 'Inter', sans-serif; }

	.avatar-ring{
		width:180px;
		height:180px;
		border-radius:50%;
		padding:6px;
		background:linear-gradient(135deg,#0099b8,#00c6a2);
		overflow:hidden;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.avatar-inner{
		width:100%;
		height:100%;
		border-radius:50%;
		overflow:hidden;
		background:#fff;
	}

	.avatar-inner img{
    width:100%;
    height:110%;
    object-fit:cover;
    object-position:center;
}

		.skill-chip {
			display: inline-flex; align-items: center; gap: 6px;
			background: #f0fdfe; color: #0f6e56; border: 1px solid #d0f4ec;
			font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px;
		}

		.social-btn {
			width: 34px; height: 34px; border-radius: 9px;
			display: flex; align-items: center; justify-content: center;
			background: #fff; border: 1px solid #e2e8f0; color: #64748b;
			transition: all 0.12s;
		}
		.social-btn:hover { background: #0099b8; color: #fff; border-color: #0099b8; }

		.exp-item { position: relative; padding-left: 26px; padding-bottom: 20px; border-left: 2px solid #e2e8f0; }
		.exp-item:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
		.exp-dot { position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #0099b8; border: 3px solid #dff6fb; }
		.exp-year { font-size: 10px; font-weight: 800; color: #0099b8; letter-spacing: 0.04em; text-transform: uppercase; }
		.exp-title { font-size: 12.5px; font-weight: 700; color: #1e293b; margin-top: 2px; }
		.exp-desc { font-size: 11px; color: #64748b; margin-top: 3px; line-height: 1.5; }

		.stat-mini { text-align: center; }
		.stat-mini-num { font-size: 17px; font-weight: 800; color: #1e293b; }
		.stat-mini-lbl { font-size: 9.5px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
	</style>
	<?= $this->endSection(); ?>


	<!-- Untuk Main -->
	<?= $this->section('conten');?>
	<section class="bg-gradient-to-r from-[#005580] via-[#0088aa] to-[#00aa99] text-white overflow-hidden relative">
		<div class="max-w-7xl mx-auto px-6 py-12 md:py-14">
			<p class="text-xs text-blue-100 uppercase tracking-widest font-medium mb-3">Pena Ilmu · Tim</p>
			<h1 class="text-2xl md:text-3xl font-bold leading-tight tracking-wide">
				PROFIL PEMBUAT
			</h1>
			<p class="text-sm text-blue-50/90 max-w-xl leading-relaxed mt-3">
				Kenali sosok di balik Pena Ilmu — orang yang merancang, menulis, dan mengembangkan platform ini.
			</p>
		</div>
	</section>

	<!-- ===== MAIN ===== -->
	<main class="max-w-7xl mx-auto px-4 py-8">
		<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

			<!-- ===== KONTEN UTAMA ===== -->
			<div class="lg:col-span-3 space-y-4">

				<!-- BAR DETAIL -->
				<div class="bg-gradient-to-r from-blue-50 to-sky-100/50 border border-sky-100 rounded-xl px-4 py-3 flex flex-wrap items-center justify-between gap-3 shadow-sm">
					<div class="flex items-center gap-3">
						<a href="tentang.html" class="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-[11px] font-bold py-1 px-3 rounded-lg shadow-sm transition">⬅ Tentang Kami</a>
						<div class="h-4 w-px bg-slate-300"></div>
						<h2 class="text-xs font-bold text-slate-800 flex items-center gap-1.5 uppercase tracking-wide">
							Profil Pembuat <span>👤</span>
						</h2>
					</div>
					<span class="bg-[#0099b8] text-white text-[9px] font-bold px-2 py-0.5 rounded-full tracking-wider uppercase">Pena Ilmu Hub</span>
				</div>

				<!-- KARTU PROFIL -->
				<div class="bg-white border border-slate-200/70 rounded-xl p-6 shadow-sm">
					<div class="flex flex-col sm:flex-row items-center sm:items-start gap-5 text-center sm:text-left">
						<div class="avatar-ring">
							<div class="avatar-inner"><img src="<?= base_url('asset/image/penulis.png')?>"> </div>
						</div>
						<div class="flex-1">
							<h2 class="text-lg font-bold text-slate-800">Muh Latif Kahar, S.T</h2>
							<p class="text-[12px] text-[#0099b8] font-semibold mt-0.5">Pendiri & Pengembang Pena Ilmu</p>
							<p class="text-[12px] text-slate-500 leading-relaxed mt-3 max-w-lg">
								Programer dan pengembang konten digital yang tertarik pada dunia pendidikan, administrasi sekolah, dan teknologi. Membangun Pena Ilmu sebagai sarana berbagi dokumen dan pengetahuan yang mudah diakses semua orang.
							</p>
							<div class="flex items-center justify-center sm:justify-start gap-2 mt-4">
								<a href="#" class="social-btn" title="Email"><i class="fa-solid fa-envelope text-sm"></i></a>
								<a href="#" class="social-btn" title="Instagram"><i class="fa-brands fa-instagram text-sm"></i></a>
								<a href="#" class="social-btn" title="LinkedIn"><i class="fa-brands fa-linkedin-in text-sm"></i></a>
								<a href="#" class="social-btn" title="GitHub"><i class="fa-brands fa-github text-sm"></i></a>
								<a href="#" class="social-btn" title="WhatsApp"><i class="fa-brands fa-whatsapp text-sm"></i></a>
							</div>
						</div>
					</div>

					<div class="grid grid-cols-3 gap-3 mt-6 pt-5 border-t border-slate-100">
						<div class="stat-mini"><div class="stat-mini-num">30+</div><div class="stat-mini-lbl">Dokumen Dibuat</div></div>
						<div class="stat-mini"><div class="stat-mini-num">10</div><div class="stat-mini-lbl">Tahun Pengalaman</div></div>
						<div class="stat-mini"><div class="stat-mini-num">100%</div><div class="stat-mini-lbl">Karya Orisinal</div></div>
					</div>
				</div>

				<!-- TENTANG SAYA -->
				<div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
					<h3 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-user text-[#0099b8]"></i> Tentang Saya</h3>
					<p class="text-[12.5px] text-slate-600 leading-relaxed">
						Halo, saya Latif — pembuat dan pengelola Pena Ilmu. Berawal dari kebiasaan merapikan dokumen administrasi dan materi belajar untuk kebutuhan pribadi, saya memutuskan untuk membagikannya secara terbuka agar bisa membantu lebih banyak orang, mulai dari pelajar, guru, hingga masyarakat umum. Saya percaya bahwa akses terhadap dokumen yang rapi dan pengetahuan yang mudah dipahami seharusnya bisa dinikmati semua orang tanpa biaya.
					</p>
				</div>

				<!-- KEAHLIAN -->
				<div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
					<h3 class="text-sm font-bold text-slate-800 mb-3 flex items-center gap-2"><i class="fa-solid fa-screwdriver-wrench text-[#0099b8]"></i> Keahlian</h3>
					<div class="flex flex-wrap gap-2">
						<span class="skill-chip"><i class="fa-regular fa-file-word"></i> Microsoft Word</span>
						<span class="skill-chip"><i class="fa-regular fa-file-excel"></i> Microsoft Excel</span>
						<span class="skill-chip"><i class="fa-regular fa-file-powerpoint"></i> Microsoft PowerPoint</span>
						<span class="skill-chip"><i class="fa-solid fa-chalkboard"></i> Desain Media Ajar</span>
						<span class="skill-chip"><i class="fa-solid fa-code"></i> Pengembangan Web</span>
						<span class="skill-chip"><i class="fa-solid fa-pen-nib"></i> Penulisan Konten</span>
					</div>
				</div>

				<!-- PERJALANAN -->
				<div class="bg-white border border-slate-200/70 rounded-xl p-5 shadow-sm">
					<h3 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2"><i class="fa-solid fa-timeline text-[#0099b8]"></i> Perjalanan Singkat</h3>
					<div>
						<div class="exp-item">
							<div class="exp-dot"></div>
							<div class="exp-year">2023</div>
							<div class="exp-title">Mulai merapikan dokumen pribadi</div>
							<div class="exp-desc">Membuat template administrasi dan dokumen sekolah untuk kebutuhan sendiri.</div>
						</div>
						<div class="exp-item">
							<div class="exp-dot"></div>
							<div class="exp-year">2024</div>
							<div class="exp-title">Mulai membagikan template secara terbuka</div>
							<div class="exp-desc">Template dan dokumen mulai dibagikan kepada rekan kerja dan komunitas online.</div>
						</div>
						<div class="exp-item">
							<div class="exp-dot"></div>
							<div class="exp-year">2026</div>
							<div class="exp-title">Pena Ilmu resmi diluncurkan</div>
							<div class="exp-desc">Membangun Pena Ilmu sebagai platform terpusat untuk dokumen, tutorial, dan infografis edukasi.</div>
						</div>
					</div>
				</div>

				<!-- CTA -->
				<div class="rounded-xl p-6 text-white" style="background:linear-gradient(135deg,#005580,#0099b8 60%,#00aa99);">
					<div class="flex flex-col md:flex-row items-center justify-between gap-4">
						<div class="text-center md:text-left">
							<div class="text-sm font-bold mb-1">Ingin berkolaborasi atau punya masukan?</div>
							<div class="text-[12px] text-blue-50/90">Saya terbuka untuk kritik, saran, maupun ajakan kerja sama.</div>
						</div>
						<a href="<?= base_url('kontak')?>" class="bg-white text-[#0088aa] text-xs font-bold px-5 py-2.5 rounded-lg shadow-sm hover:opacity-90 transition whitespace-nowrap">
							Hubungi Saya <i class="fa-solid fa-arrow-right ml-1"></i>
						</a>
					</div>
				</div>

			</div>

			<!-- ===== SIDEBAR ===== -->
			<aside class="space-y-4">
				<div class="bg-white border border-slate-200/70 rounded-xl p-4 shadow-sm">
					<h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide border-b border-slate-100 pb-2 mb-3">📇 Info Singkat</h4>
					<ul class="space-y-3 text-[11px] text-slate-600">
						<li class="flex items-center gap-2"><i class="fa-solid fa-location-dot text-[#0099b8] w-4 text-center"></i> Indonesia</li>
						<li class="flex items-center gap-2"><i class="fa-solid fa-envelope text-[#0099b8] w-4 text-center"></i> hello@penailmu.id</li>
						<li class="flex items-center gap-2"><i class="fa-solid fa-briefcase text-[#0099b8] w-4 text-center"></i> Pendidik & Pengembang Konten</li>
						<li class="flex items-center gap-2"><i class="fa-solid fa-calendar text-[#0099b8] w-4 text-center"></i> Aktif sejak 2023</li>
					</ul>
				</div>

				<div class="bg-white border border-slate-200/70 rounded-xl p-4 shadow-sm">
					<h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide border-b border-slate-100 pb-2 mb-3">🔗 Halaman Terkait</h4>
					<ul class="space-y-2.5 text-[11px] font-semibold text-slate-600">
						<li><a href="tentang.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Tentang Kami</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
						<li><a href="kontak.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Request & Kontak</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
						<li><a href="privasi.html" class="flex items-center justify-between hover:text-[#0099b8] transition"><span>Kebijakan Privasi</span><i class="fa-solid fa-chevron-right text-[10px] text-slate-300"></i></a></li>
					</ul>
				</div>
			</aside>
		</div>
	</main>
	<?= $this->endSection(); ?>


	<!-- Untuk Js -->

	<?= $this->section('myscript') ?>

	<?= $this->endSection(); ?>