{% extends 'dating_app/base_dating.html' %}
{% load static %}
{% block title %}About Us | Ensolanka{% endblock %}

{% block content %}

<style>
  /* ── TOKENS — matched to home page palette ──────────────────── */
  :root {
    --ink:     #0e1a22;
    --paper:   #ffffff;
    --gold:    #ffc107;
    --gold-lt: #ffe082;
    --mist:    #f8f9fa;
    --slate:   #5a6a72;
    --white:   #ffffff;
    --serif:   system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sans:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --ease:    cubic-bezier(.25,.46,.45,.94);
  }

  /* ── RESET ───────────────────────────────────────────────────── */
  .about-page * { box-sizing: border-box; }
  .about-page { font-family: var(--sans); color: var(--ink); background: var(--paper); overflow-x: hidden; }

  /* ── HERO ────────────────────────────────────────────────────── */
  .ens-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url("{% static 'expat_life/images/about_hero.webp' %}") no-repeat center center / cover;
    overflow: hidden;
    background-color: #0e1a22;
  }
  .ens-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(
        90deg,
        rgba(7, 19, 28, 0.88) 0%,
        rgba(7, 19, 28, 0.70) 45%,
        rgba(7, 19, 28, 0.40) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.30) 100%
      );
  }
  .ens-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, transparent, var(--paper));
  }
  .ens-hero__inner {
    position: relative; z-index: 2;
    max-width: 780px;
    padding: 0 2rem;
  }
  .ens-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold);
    margin-bottom: 1.5rem;
    font-weight: 500;
  }
  .ens-hero__eyebrow span { width: 28px; height: 1px; background: var(--gold); }
  .ens-hero__title {
    font-family: var(--sans); font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    font-weight: 700; color: var(--white); line-height: 1.12;
    margin-bottom: 1.5rem;
  }
  .ens-hero__title em { font-style: normal; color: var(--gold-lt); }
  .ens-hero__sub {
    font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,.78);
    max-width: 520px; line-height: 1.8; margin-bottom: 2.5rem;
  }
  .ens-hero__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem; border: 1px solid rgba(255,193,7,.35);
    font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
    color: var(--gold-lt); text-transform: uppercase;
    background: rgba(255,193,7,.06);
  }
  .ens-hero__scroll {
    position: absolute; bottom: 140px; right: 3rem; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    font-family: var(--mono); font-size: .65rem; letter-spacing: .15em;
    color: rgba(255,255,255,.4); text-transform: uppercase;
    animation: scrollBob 2.4s var(--ease) infinite;
  }
  .ens-hero__scroll::after {
    content: ''; width: 1px; height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  }
  @keyframes scrollBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

  /* ── SECTION SHELL ───────────────────────────────────────────── */
  .ens-section { padding: 7rem 0; }
  .ens-section--mist { background: var(--mist); }
  .ens-section--ink  { background: var(--ink); color: var(--white); }

  .ens-label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
    font-weight: 500;
  }
  .ens-label::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
  .ens-h2 {
    font-family: var(--sans); font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 700; line-height: 1.18; margin-bottom: 1.25rem;
    color: var(--ink);
  }
  .ens-section--ink .ens-h2 { color: var(--white); }
  .ens-lead { font-size: 1.05rem; color: var(--slate); line-height: 1.8; max-width: 540px; }

  /* ── PLATFORM PILLARS ────────────────────────────────────────── */
  .pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .pillar {
    padding: 1.6rem; border-left: 3px solid var(--gold);
    background: var(--white); position: relative; overflow: hidden;
    border: 1px solid #e9ecef;
    border-left: 3px solid var(--gold);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(14,26,34,.10); }
  .pillar__num {
    position: absolute; top: 1rem; right: 1rem;
    font-family: var(--mono); font-size: .65rem; color: rgba(0,0,0,.12);
    letter-spacing: .1em;
  }
  .pillar__title { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; color: var(--ink); }
  .pillar__desc { font-size: .875rem; color: var(--slate); }

  /* ── STATS ROW ───────────────────────────────────────────────── */
  .stats-row { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat { flex: 1; padding: 3rem 2rem; border-right: 1px solid rgba(255,255,255,.1); text-align: center; }
  .stat:last-child { border-right: none; }
  .stat__num { font-family: var(--sans); font-size: 3.2rem; font-weight: 700; color: var(--gold); line-height: 1; }
  .stat__lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .4rem; }

  /* ── NETWORK LINKS ───────────────────────────────────────────── */
  .network-card {
    background: var(--white); border: 1px solid #dee2e6;
    overflow: hidden;
  }
  .network-card__header {
    padding: 1.8rem 2rem 1rem; border-bottom: 1px solid #dee2e6;
    background: var(--mist);
  }
  .network-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 2rem; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: var(--ink);
    transition: background .2s, padding-left .2s var(--ease);
  }
  .network-item:last-child { border-bottom: none; }
  .network-item:hover { background: var(--mist); padding-left: 2.4rem; color: var(--ink); }
  .network-item__text h6 { font-weight: 600; margin: 0 0 .15rem; font-size: .95rem; }
  .network-item__text small { font-size: .78rem; color: var(--slate); }
  .network-item__arrow { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; }

  /* ── TEAM ────────────────────────────────────────────────────── */
  .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .team-card { text-align: center; }
  .team-card__img-wrap {
    position: relative; width: 140px; height: 140px; margin: 0 auto 1.2rem;
  }
  .team-card__img-wrap::before {
    content: ''; position: absolute; inset: -6px;
    border: 2px solid var(--gold); border-radius: 50%;
    opacity: 0; transition: opacity .3s;
  }
  .team-card:hover .team-card__img-wrap::before { opacity: 1; }
  .team-card__img {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    filter: grayscale(20%); transition: filter .3s;
    border: 2px solid #dee2e6;
  }
  .team-card:hover .team-card__img { filter: grayscale(0); }
  .team-card__name { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: .25rem; color: var(--ink); }
  .team-card__role { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

  /* ── FOOTER STRIP ────────────────────────────────────────────── */
  .ens-footer-strip {
    background: var(--ink); color: rgba(255,255,255,.55);
    padding: 4rem 0; text-align: center;
  }
  .ens-footer-strip address { font-style: normal; font-size: .9rem; line-height: 2; }
  .ens-footer-strip strong { color: var(--white); }
  .ens-socials { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
  .ens-socials a {
    width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5); font-size: 1rem; text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
  }
  .ens-socials a:hover { border-color: var(--gold); color: var(--ink); background: var(--gold); }

  /* ── FADE-IN ANIMATION ───────────────────────────────────────── */
  .ens-fade { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .ens-fade.visible { opacity: 1; transform: none; }
  .ens-fade:nth-child(2) { transition-delay: .1s; }
  .ens-fade:nth-child(3) { transition-delay: .2s; }
  .ens-fade:nth-child(4) { transition-delay: .3s; }

  /* ── RESPONSIVE ──────────────────────────────────────────────── */
  @media (max-width: 991px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-row { flex-wrap: wrap; }
    .stat { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.1); }
  }
  @media (max-width: 575px) {
    .pillar-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .ens-hero__scroll { display: none; }
    .stat { flex: 0 0 100%; }
  }

  .network-item {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* keeps arrow on the right */
    padding: 1.1rem 2rem;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: var(--ink);
    transition: background .2s, padding-left .2s var(--ease);
  }

  .network-item__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;   /* ← this is the only gap between logo and text */
  }

  .network-item__logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;   /* remove this, or delete the line entirely */
  }

  .network-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
  }
</style>

<div class="about-page">

  <!-- ══ HERO ══════════════════════════════════════════════════════ -->
  <section class="ens-hero">
    <div class="container">
      <div class="ens-hero__inner">
        <div class="ens-hero__eyebrow"><span></span>Since 2001</div>
        <h1 class="ens-hero__title">
          Empowering Innovation,<br><em>Elevating Success.</em>
        </h1>
        <p class="ens-hero__sub">
          A unified digital ecosystem built for Sri Lanka's evolving market —
          connecting expats, property owners, professionals, and communities
          through one seamless platform.
        </p>
        <div class="ens-hero__badge">
          <i class="bi bi-building"></i>
          Ensolanka LLC &nbsp;·&nbsp; EIN: 30-1444464
        </div>
      </div>
    </div>
    <div class="ens-hero__scroll">Scroll</div>
  </section>

  <!-- ══ PLATFORM PILLARS ══════════════════════════════════════════ -->
  <section class="ens-section">
    <div class="container">
      <div class="row align-items-start gy-5">

        <div class="col-lg-5">
          <div class="ens-fade">
            <p class="ens-label">What We Do</p>
            <h2 class="ens-h2">One Platform.<br>Endless Possibilities.</h2>
            <p class="ens-lead">
              Since 2001, we've been at the forefront of digital transformation.
              This portal is the culmination of our global experience, designed to
              serve four vital sectors of the Sri Lankan market through one
              seamless domain.
            </p>
          </div>
        </div>

        <div class="col-lg-6 offset-lg-1">
          <div class="pillar-grid">
            <div class="pillar ens-fade">
              <span class="pillar__num">01</span>
              <p class="pillar__title">Expat Life</p>
              <p class="pillar__desc">Living in Sri Lanka made easy — visas, housing, daily life support.</p>
            </div>
            <div class="pillar ens-fade">
              <span class="pillar__num">02</span>
              <p class="pillar__title">Rental Owner</p>
              <p class="pillar__desc">Smart property management for landlords and tenants alike.</p>
            </div>
            <div class="pillar ens-fade">
              <span class="pillar__num">03</span>
              <p class="pillar__title">Dating</p>
              <p class="pillar__desc">Meaningful local connections, thoughtfully facilitated.</p>
            </div>
            <div class="pillar ens-fade">
              <span class="pillar__num">04</span>
              <p class="pillar__title">Service Assistants</p>
              <p class="pillar__desc">Verified professionals ready to help — on demand.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ══ STATS ══════════════════════════════════════════════════════ -->
  <section class="ens-section--ink">
    <div class="container-fluid px-0">
      <div class="stats-row">
        <div class="stat ens-fade">
          <div class="stat__num">24+</div>
          <div class="stat__lbl">Years in Operation</div>
        </div>
        <div class="stat ens-fade">
          <div class="stat__num">4</div>
          <div class="stat__lbl">Platform Verticals</div>
        </div>
        <div class="stat ens-fade">
          <div class="stat__num">3</div>
          <div class="stat__lbl">Global Platforms</div>
        </div>
        <div class="stat ens-fade">
          <div class="stat__num">1</div>
          <div class="stat__lbl">Unified Ecosystem</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ══ GLOBAL NETWORK ════════════════════════════════════════════ -->
  <section class="ens-section ens-section--mist">
    <div class="container">
      <div class="row align-items-center gy-5">

        <div class="col-lg-5 ens-fade">
          <p class="ens-label">Our Network</p>
          <h2 class="ens-h2">Explore Our<br>Global Presence.</h2>
          <p class="ens-lead">
            Our expertise spans education, international communities, and
            corporate digital solutions. Each platform is purpose-built
            for its audience.
          </p>
        </div>

        <div class="col-lg-6 offset-lg-1 ens-fade">
            <div class="network-card">
                <div class="network-card__header">
                <p class="ens-label mb-0">Sister Sites</p>
                </div>

                    <a href="https://ensolanka.com/" target="_blank" class="network-item">
                    <div class="network-item__left">
                        <div class="network-item__logo">
                        <img src="{% static 'expat_life/images/corporate.png' %}" alt="Ensolanka Corporate logo">
                        </div>
                        <div class="network-item__text">
                        <h6>Ensolanka Corporate</h6>
                        <small>Our main tech &amp; consultancy hub</small>
                        </div>
                    </div>
                    <i class="bi bi-arrow-up-right network-item__arrow"></i>
                    </a>

                    <a href="https://pythonplayground.org/" target="_blank" class="network-item">
                    <div class="network-item__left">
                        <div class="network-item__logo">
                        <img src="{% static 'expat_life/images/python_playground.png' %}" alt="Python Playground logo">
                        </div>
                        <div class="network-item__text">
                        <h6>Python Playground</h6>
                        <small>Advanced AI &amp; tech education</small>
                        </div>
                    </div>
                    <i class="bi bi-arrow-up-right network-item__arrow"></i>
                    </a>

                    <a href="https://mauritians.net/" target="_blank" class="network-item">
                    <div class="network-item__left">
                        <div class="network-item__logo">
                        <img src="{% static 'expat_life/images/mauritians.png' %}" alt="Mauritians.net logo">
                        </div>
                        <div class="network-item__text">
                        <h6>Mauritians.net</h6>
                        <small>Global community platform</small>
                        </div>
                    </div>
                    <i class="bi bi-arrow-up-right network-item__arrow"></i>
                    </a>

            </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ══ TEAM ══════════════════════════════════════════════════════ -->
  <section class="ens-section">
    <div class="container">
      <div class="text-center mb-5 ens-fade">
        <p class="ens-label" style="justify-content:center;">The People</p>
        <h2 class="ens-h2">Leadership Team</h2>
      </div>
      <div class="team-grid">
        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/ceo.jpg' %}" class="team-card__img" alt="D. S. Wasantha Jayathunge">
          </div>
          <p class="team-card__name">D. S. Wasantha Jayathunge</p>
          <p class="team-card__role">Founder &amp; CEO</p>
        </div>
        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/harshani.jpg' %}" class="team-card__img" alt="D. S. Harshani Dharmathilaka">
          </div>
          <p class="team-card__name">D. S. Harshani Dharmathilaka</p>
          <p class="team-card__role">Managing Partner &amp; Secretary</p>
        </div>
        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/amila.jpg' %}" class="team-card__img" alt="R.M. Amila Ruwan Kumara">
          </div>
          <p class="team-card__name">R.M. Amila Ruwan Kumara</p>
          <p class="team-card__role">Manager Operations</p>
        </div>
        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/lionel.jpg' %}" class="team-card__img" alt="Lionel Fernando">
          </div>
          <p class="team-card__name">Lionel Fernando</p>
          <p class="team-card__role">Sr. Business Coordinator</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ══ FOOTER STRIP ══════════════════════════════════════════════ -->
  <div class="ens-footer-strip">
    <div class="container">
      <address>
        <strong>Official Registered Address — USA</strong><br>
        30 N Gould St Ste R, Sheridan, WY 82801, United States<br>
        <span style="font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);">ENSOLANKA LLC &nbsp;·&nbsp; EIN: 30-1444464</span>
      </address>
      <div class="ens-socials">
        <a href="https://web.facebook.com/ensolanka" target="_blank" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
        <a href="https://www.youtube.com/@ensolanka/" target="_blank" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
        <a href="https://www.linkedin.com/company/ensolanka-llc/" target="_blank" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
      </div>
    </div>
  </div>

</div><!-- /about-page -->

<script>
  const faders = document.querySelectorAll('.ens-fade');
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });
  }, { threshold: 0.12 });
  faders.forEach(el => io.observe(el));
</script>

{% endblock %}