/* IJWestern — the Story section.
   Global: Story

   Moved off the home page whole in step 3 of phase 2 (client, 3 Sep 2026):
   the story belongs on the About page, not under the hero. Step 8 built
   about.html / about.jsx, which loads this file and renders <Story />
   below the map hero. Nothing else links it, so the `.story*` rules in
   styles.css serve this page alone — which is why the rules the section
   gained in step 8 sit in about.css rather than there.

   **The copy is the client's own, sent verbatim on 3 Sep**, after two
   drafts of ours were rejected. It replaces the brand.pdf lineage the
   section carried since phase 1: the IJ / Western reading of the name is
   gone with it, and so is the `.lead-letter` treatment that set it (the
   rule stays in styles.css, unused). Do not re-edit this text — it is
   his, not ours, down to "At IJWestern, mission is to create", which is
   how he wrote it and is flagged to him rather than silently fixed.

   His copy also settles a question that was open all phase: he writes
   **Mohammed Ijas**, so the credit below now reads that way too, and the
   portrait's alt text already did. */

/* ── Story Behind ─────────────────────────────────────────────── */
function Story() {
  return (
    <section className="story" id="story" data-screen-label="Story">
      <div className="shell">
        <div className="story-main">
          <div className="story-body">
            <h2 className="t-display story-title reveal-fade" style={{ "--reveal-delay": "150ms" }}>
              Born of a <em>belief</em>
            </h2>
            <p className="story-sub reveal" style={{ "--reveal-delay": "230ms" }}>
              Meet the founder
            </p>

            {/* Five of the six paragraphs, flowing down one column and
                then the next. The sixth closes the section below them. */}
            <div className="story-cols">
              <p className="story-p reveal" style={{ "--reveal-delay": "300ms" }}>
                Born and raised in Palakkad, Kerala, Mohammed Ijas grew up witnessing
                the region evolve around him. New communities took shape, opportunities
                expanded, and land became not just a place to live, but an important
                investment for the future.
              </p>
              <p className="story-p reveal" style={{ "--reveal-delay": "340ms" }}>
                At the same time, the challenges of navigating Kerala’s property market
                became evident. Finding the right property often came down to having
                access to trustworthy information, genuine opportunities, and the right
                guidance.
              </p>
              <p className="story-p reveal" style={{ "--reveal-delay": "380ms" }}>
                IJWestern was founded in 2024 with a simple purpose: to make real estate
                more transparent, trustworthy, and straightforward.
              </p>
              <p className="story-p reveal" style={{ "--reveal-delay": "420ms" }}>
                What began with a focus on helping people discover genuine property
                opportunities has grown into a larger vision: identifying the right land,
                creating thoughtfully planned layouts, and eventually developing
                residential communities where people can build their lives.
              </p>
              <p className="story-p reveal" style={{ "--reveal-delay": "460ms" }}>
                Every property is carefully considered with an understanding of its
                location, potential, and the people it is meant to serve. The belief
                remains that real estate should not simply be about transactions, but
                about creating places that people can feel connected to.
              </p>
            </div>

            <p className="story-pull reveal" style={{ "--reveal-delay": "520ms" }}>
              At IJWestern, mission is to create thoughtfully planned places where people
              can build their homes, their futures and their sense of belonging.
            </p>
          </div>

          <div className="story-portrait visual-frame reveal-x" style={{ "--reveal-delay": "240ms" }}>
            <img src="site-images/ijas.jpg" alt="Mohammed Ijas, founder of IJWestern Realtors" />
          </div>
        </div>

        <dl className="story-credits reveal" style={{ "--reveal-delay": "600ms" }}>
          <div className="cred">
            <dt>Founder</dt>
            <dd>Mohammed Ijas</dd>
          </div>
          <div className="cred">
            <dt>Rooted in</dt>
            <dd>Palakkad, Kerala</dd>
          </div>
          <div className="cred">
            <dt>Working since</dt>
            <dd>2024</dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

Object.assign(window, { Story });