<?php
require_once '../ext/db.php'; 

// --- SEO CONFIGURATION ---
$pageTitle = "About Starent. | Our Mission, Story & Team";
$pageDesc = "Starent. is your daily source for breaking news, entertainment, sports, and music. Learn about our mission to bring you the stories that matter.";
$currentUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]";

// --- SCHEMA.ORG (JSON-LD) ---
// This connects the About Page directly to the Organization identity
$schemaData = [
    "@context" => "https://schema.org",
    "@graph" => [
        [
            "@type" => "NewsMediaOrganization",
            "@id" => $baseUrl . "/#organization",
            "name" => "Starent.",
            "url" => $baseUrl,
            "logo" => [
                "@type" => "ImageObject",
                "url" => $baseUrl . "/logo/logo-sterent.jpg",
                "width" => 600, 
                "height" => 60
            ],
            "sameAs" => [
                "https://facebook.com/feed.starent",
                "https://twitter.com/starent",
                "https://instagram.com/starent"
            ]
        ],
        [
            "@type" => "AboutPage",
            "@id" => $currentUrl,
            "url" => $currentUrl,
            "name" => $pageTitle,
            "description" => $pageDesc,
            "inLanguage" => "en-US",
            "isPartOf" => ["@id" => $baseUrl . "/#website"],
            "about" => ["@id" => $baseUrl . "/#organization"],
            "mainEntity" => ["@id" => $baseUrl . "/#organization"]
        ]
    ]
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title><?php echo $pageTitle; ?></title>
    <meta name="description" content="<?php echo $pageDesc; ?>">
    <link rel="canonical" href="<?php echo $currentUrl; ?>">
    <meta name="robots" content="index, follow">
    
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo $currentUrl; ?>">
    <meta property="og:title" content="<?php echo $pageTitle; ?>">
    <meta property="og:description" content="<?php echo $pageDesc; ?>">
    <meta property="og:site_name" content="Starent.">
    <meta property="og:image" content="<?php echo $baseUrl; ?>/images/about-og.jpg"> 

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="<?php echo $pageTitle; ?>">
    <meta property="twitter:description" content="<?php echo $pageDesc; ?>">
    <meta property="twitter:image" content="<?php echo $baseUrl; ?>/images/about-og.jpg">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Oswald:wght@400;500;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="/styles/home.css">
    <?php include '../ext/header.php' ?>
    <style>
        .about-header {
            background: #f8fafc;
            padding: 80px 20px;
            text-align: center;
            border-bottom: 1px solid #e2e8f0;
        }

        .about-header h1 {
            font-family: 'Oswald', sans-serif;
            font-size: 3.5rem;
            text-transform: uppercase;
            color: #1e293b;
            margin: 0 0 15px 0;
            line-height: 1.1;
        }

        .about-header p {
            font-family: 'Merriweather', serif;
            font-size: 1.2rem;
            color: #64748b;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .about-content {
            padding: 60px 0;
        }

        .mission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            margin-bottom: 80px;
        }

        .mission-text h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5rem;
            color: #0ea5e9; /* Theme Blue */
            margin: 0 0 20px 0;
            text-transform: uppercase;
        }

        .mission-text p {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #475569;
            margin-bottom: 20px;
            font-family: "Roboto", serif;
        }

        .mission-img {
            height: 400px;
            background: #e2e8f0; /* Placeholder gray */
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .mission-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Stats Counter */
        .stats-bar {
            background: #1e293b;
            color: white;
            padding: 50px 0;
            border-radius: 8px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            margin-bottom: 80px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .stat-item h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 3rem;
            color: #0ea5e9;
            margin: 0;
        }

        .stat-item span {
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #94a3b8;
        }

        /* Categories / Values */
        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 80px;
        }

        .value-card {
            background: #fff;
            padding: 30px;
            border: 1px solid #e2e8f0;
            border-top: 4px solid #0ea5e9;
            transition: transform 0.3s;
        }

        .value-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .value-card i {
            font-size: 2rem;
            color: #0ea5e9;
            margin-bottom: 20px;
        }

        .value-card h4 {
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            margin: 0 0 10px 0;
            color: #1e293b;
        }

        .value-card p {
            color: #64748b;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .about-header h1 { font-size: 2.5rem; }
            .mission-grid { grid-template-columns: 1fr; }
            .mission-img { height: 300px; }
            .stats-bar { flex-direction: column; gap: 40px; }
        }
    </style>

    <script type="application/ld+json">
        <?php echo json_encode($schemaData, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES); ?>
    </script>
</head>
<body>
    <?php include '../ext/nav.php' ?>

    <header class="about-header">
        <div class="container">
            <h1>We Are Starent.</h1>
            <p>Bringing you the pulse of the world, from breaking news to the beat of the music industry.</p>
        </div>
    </header>

    <div class="container">
        <div class="about-content">
            
            <section class="mission-grid">
                <div class="mission-text">
                    <h2>The Story</h2>
                    <p>Founded with a simple yet ambitious goal, <strong>Starent.</strong> set out to declutter the digital noise. We believe that staying informed shouldn't be exhausting. Whether it's the latest sports scores, breaking global headlines, or the newest entertainment gossip, we curate the stories that actually matter.</p>
                    <p>Our team of dedicated editors and contributors work around the clock to ensure accuracy, speed, and perspective. We aren't just an aggregator; we are a voice for the modern reader.</p>
                </div>
                <div class="mission-img">
                    <img src="/img/office.png" alt="Starent Office Environment">
                </div>
            </section>

            <section class="stats-bar">
                <div class="stat-item">
                    <h3>24/7</h3>
                    <span>Coverage</span>
                </div>
                <div class="stat-item">
                    <h3>100+</h3>
                    <span>Daily Stories</span>
                </div>
                <div class="stat-item">
                    <h3>100%</h3>
                    <span>Dedication</span>
                </div>
                <div class="stat-item">
                    <h3>10k+</h3>
                    <span>Readers</span>
                </div>
            </section>

            <section class="values-grid">
                <div class="value-card">
                    <i class="fas fa-newspaper"></i>
                    <h4>Breaking News</h4>
                    <p>Reliable, fact-checked journalism delivered as it happens. We keep you ahead of the curve on global events.</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-basketball-ball"></i>
                    <h4>Sports Action</h4>
                    <p>From the final buzzer to the locker room drama. Comprehensive coverage of the leagues you love.</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-music"></i>
                    <h4>Music & Culture</h4>
                    <p>Deep dives into album releases, artist spotlights, and the cultural trends shaping our world.</p>
                </div>
                <div class="value-card">
                    <i class="fas fa-layer-group"></i>
                    <h4>Diverse Categories</h4>
                    <p>Beyond the headlines. Explore our extensive sections on Tech, Lifestyle, Gaming, and much more.</p>
                </div>
            </section>

        </div>
    </div>

    <?php include '../ext/footer.php' ?>
</body>
</html>