/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

/* ─────────── Hash router ─────────── */
function useHashRoute() {
  const get = () => (window.location.hash || "#/").replace(/^#/, "") || "/";
  const [path, setPath] = useState(get());
  useEffect(() => {
    const onHash = () => {
      setPath(get());
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return path;
}

/* ─────────── Icons (custom monoline glyphs) ─────────── */
const IntroIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9" opacity="0.35" />
    <circle cx="12" cy="12" r="2.6" fill="currentColor" stroke="none" />
    <path d="M12 3.2 v2 M12 19 v2 M3.2 12 h2 M19 12 h2" opacity="0.5" />
  </svg>
);

const AboutIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 7 H19" />
    <path d="M5 12 H15" opacity="0.7" />
    <path d="M5 17 H11" opacity="0.45" />
    <circle cx="20" cy="17" r="1.4" fill="currentColor" stroke="none" />
  </svg>
);

const ContactIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17 L17 7" />
    <path d="M9 7 H17 V15" />
  </svg>
);

const CloseIcon = () => (
  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
    <path d="M6 6 L18 18 M18 6 L6 18" />
  </svg>
);

/* ─────────── Home: rail + card ─────────── */

const SECTIONS = [
  { id: "intro",   label: "Introduction", Icon: IntroIcon },
  { id: "about",   label: "About",        Icon: AboutIcon },
  { id: "contact", label: "Contact",      Icon: ContactIcon },
];

function Home() {
  const [active, setActive] = useState(null); // section id
  const [origin, setOrigin] = useState({ x: 0, y: 50 });
  const railRef = useRef(null);
  const iconRefs = useRef({});

  const handleSelect = (id) => {
    if (active === id) { setActive(null); return; }
    // compute card transform-origin = position of icon, in card-relative coords
    const iconEl = iconRefs.current[id];
    const cardOriginPercentX = window.innerWidth >= 720 ? 0 : 50;     // desktop: card to right of rail
    if (iconEl) {
      const r = iconEl.getBoundingClientRect();
      // we'll set --card-origin-y as percent based on icon vertical position vs card area
      setOrigin({ x: cardOriginPercentX, y: 50 });
    }
    setActive(id);
  };

  // Esc closes
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setActive(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const activeSection = SECTIONS.find((s) => s.id === active);

  return (
    <div className="home-stage" data-screen-label="01 Home">
      <div className="app-corner">
        <span className="dot"></span>
        <span>Hamza Atique · PM</span>
      </div>
      <div className="app-corner app-corner-right">
        <span>Berlin · 2026</span>
      </div>

      <div className="module">
        <div className="rail" ref={railRef}>
          {SECTIONS.map((s) => {
            const Icon = s.Icon;
            return (
              <button
                key={s.id}
                ref={(el) => (iconRefs.current[s.id] = el)}
                className={`rail-icon ${active === s.id ? "is-active" : ""}`}
                onClick={() => handleSelect(s.id)}
                aria-label={s.label}
              >
                <Icon />
              </button>
            );
          })}
          {!active && (
            <div className="rail-hint">
              Tap an <b>icon</b> to start
            </div>
          )}
        </div>

        {active && (
          <div
            key={active}
            className="card card-enter"
            style={{
              "--card-origin-x": `${origin.x}%`,
              "--card-origin-y": `${origin.y}%`,
            }}
            role="dialog"
            aria-label={activeSection?.label}
          >
            <button className="card-close" onClick={() => setActive(null)} aria-label="Close">
              <CloseIcon />
            </button>
            <div className="card-inner">
              {active === "intro"   && <IntroContent />}
              {active === "about"   && <AboutContent />}
              {active === "contact" && <ContactContent />}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function IntroContent() {
  return (
    <>
      <div className="card-eyebrow">Introduction</div>
      <h2 className="card-headline">Hey, I'm Hamza.</h2>
      <div className="card-body">
        <p>I'm a product manager who likes building useful digital products and helping teams move with more clarity.</p>
        <p>I've worked across telecom, SaaS, EdTech, healthcare, maritime, and mobility, in both startups and bigger companies.</p>
        <p>Right now I'm an <b>Associate Product Management Consultant II</b> at Product People in Berlin.</p>
      </div>
      <div className="stat-row">
        <div className="stat">
          <div className="stat-key">B2B + B2C</div>
          <div className="stat-val">Built for both sides.</div>
        </div>
        <div className="stat">
          <div className="stat-key">6 sectors</div>
          <div className="stat-val">Across different industries.</div>
        </div>
      </div>
    </>
  );
}

const SKILLS = [
  "Product discovery", "User research", "Journey mapping",
  "PRDs", "Roadmaps", "Stakeholder management",
  "Agile and Scrum", "Sprint planning", "OKRs",
  "Jira", "Linear", "Notion", "Figma", "Amplitude", "SQL", "AI prototyping",
];

function AboutContent() {
  return (
    <>
      <div className="card-eyebrow">About</div>
      <h2 className="card-headline">What I do</h2>
      <div className="card-body">
        <p>I work where user needs, business goals, and delivery meet. I like making things simple, making sure teams are aligned, and turning messy ideas into something real.</p>
      </div>

      <div className="focus-list">
        <div className="focus-row">
          <div className="label">Product discovery</div>
          <div className="body">User research, journey mapping, competitor checks, and clear prioritization.</div>
        </div>
        <div className="focus-row">
          <div className="label">Product delivery</div>
          <div className="body">From PRDs and roadmaps to sprint work, stakeholder alignment, and launch.</div>
        </div>
        <div className="focus-row">
          <div className="label">Prototyping</div>
          <div className="body">Fast demos with AI and no-code tools to test ideas before teams spend too much time.</div>
        </div>
      </div>

      <div className="skills-block">
        <h4>Tools and ways of working</h4>
        <div className="chips">
          {SKILLS.map((s) => <span key={s} className="chip">{s}</span>)}
        </div>
      </div>

      <div className="edu-card">
        <div className="name">LUMS · Lahore University of Management Sciences</div>
        <div className="desc">Bachelor's degree. Started in Finance, moved into Marketing, and then found my way into Product.</div>
      </div>
    </>
  );
}

function ContactContent() {
  const items = [
    { label: "Email",          val: "hamza.atique@getproductpeople.com", href: "mailto:hamza.atique@getproductpeople.com" },
    { label: "LinkedIn",       val: "linkedin.com/in/hamzaatique",        href: "https://linkedin.com/in/hamzaatique" },
    { label: "Product People", val: "getproductpeople.com",               href: "https://getproductpeople.com" },
  ];
  return (
    <>
      <div className="card-eyebrow">Contact</div>
      <h2 className="card-headline">Let's connect.</h2>
      <div className="card-body">
        <p>If you want to talk product, prototypes, or interesting work, feel free to reach out.</p>
      </div>
      <div className="contact-list">
        {items.map((c) => (
          <a key={c.label} className="contact-row" href={c.href} target="_blank" rel="noreferrer">
            <div className="lhs">
              <div className="label">{c.label}</div>
              <div className="val">{c.val}</div>
            </div>
            <div className="arrow">↗</div>
          </a>
        ))}
      </div>
    </>
  );
}

/* ─────────── Starlings ─────────── */

const FEATURES = [
  ["Keep rich profiles",     "Notes, birthdays, nicknames, photos, pronouns, jobs, addresses, and social handles, all gathered in one thoughtful place."],
  ["Log your interactions",  "Record calls, video chats, in-person moments, and meaningful check-ins. See when you last connected and how it felt."],
  ["Remember the details",   "Save hobbies, food preferences, allergies, gift ideas, and the tiny facts that make someone feel known."],
  ["Track important dates",  "Keep birthdays, anniversaries, and custom dates close. Get reminded before they arrive so care has time to happen."],
  ["Link people together",   "Map relationships between contacts — siblings, partners, colleagues, family, and custom connections — so every person's world makes more sense."],
  ["Write journal entries",  "Keep a private diary woven into your relationships. Tag the people each entry is about and build a memory archive over time."],
  ["Track loans",            "Remember money you've lent or borrowed, see what is still open, and mark things settled when they are done."],
  ["Stay on top of tasks",   "Create to-dos tied to specific people or keep them global. Set reminders that help you follow through."],
  ["Start from the dashboard","See who you have not reached out to recently, what dates are coming up, and what needs your attention today."],
];

function Starlings() {
  return (
    <div className="page" data-screen-label="02 Starlings">
      <a className="page-back" href="#/">← Hamza Atique</a>

      <div className="page-eyebrow">Starlings</div>
      <h1 className="page-h1">The people in your life deserve more than a contact card.</h1>
      <p className="page-lede">
        Starlings is a personal relationship manager: a warm, private space where you keep everything that matters about the people you love. Not a CRM. Not a social network. Something closer to a beautiful notebook that helps you actually stay close.
      </p>

      <div className="cta-row">
        <a className="btn btn-primary" href="#" onClick={(e)=>e.preventDefault()}>Download on the App Store</a>
        <a className="btn btn-ghost" href="#/starlings/privacy-policy">Read the Privacy Policy</a>
      </div>

      <h2>What you can do with Starlings</h2>
      <div className="feature-grid">
        {FEATURES.map(([name, desc], i) => (
          <div className="feature-cell" key={name}>
            <div className="ft-label">0{i + 1}</div>
            <div className="ft-name">{name}</div>
            <div className="ft-desc">{desc}</div>
          </div>
        ))}
      </div>

      <h2>Private by design</h2>
      <p>
        No account. No password. No subscription just to use the app. Starlings works from the moment you open it. Your data lives on your device and is never sent anywhere without your permission.
      </p>
      <ul className="privacy-list">
        <li>No analytics</li>
        <li>No ad networks</li>
        <li>No third-party trackers</li>
        <li>No relationship data stored by Starlings</li>
        <li>Optional iCloud Sync if you want it</li>
        <li>Export everything at any time</li>
      </ul>
      <p style={{marginTop: 18}}>iCloud Sync is available if you want it. It is opt-in, protected by Apple's iCloud security, and never accessible to Starlings.</p>

      <h2>One small upgrade, everything unlocked</h2>
      <div className="price-card">
        <div className="price">$1.99 <span>· one-time</span></div>
        <p>The free version lets you add up to 5 contacts and explore everything Starlings can do. Starlings Pro is a one-time purchase that removes the limit, so you can add as many people as your life holds.</p>
        <div className="meta">
          <span>No subscription</span>
          <span>No price changes</span>
          <span>Pay once, yours forever</span>
        </div>
      </div>

      <h2>Made with care</h2>
      <p>
        Starlings is built for people who believe that remembering someone is an act of love. It's designed to feel like something you want to open: quiet, warm, and entirely yours.
      </p>

      <div className="footer-meta">
        <div>Starlings · An app by Hamza Atique</div>
        <div style={{display:"flex", gap:18}}>
          <a href="#/starlings/privacy-policy">Privacy</a>
          <a href="#/starlings/terms-of-use">Terms</a>
        </div>
      </div>
    </div>
  );
}

function Privacy() {
  return (
    <div className="page legal" data-screen-label="03 Privacy">
      <a className="page-back" href="#/starlings">← Starlings</a>
      <div className="page-eyebrow">Starlings · Privacy Policy</div>
      <h1 className="page-h1">Your data stays with you.</h1>
      <div className="last-updated">Last updated: May 9, 2026</div>

      <p>Starlings is built on a simple belief: your personal relationships are yours, and the software that helps you remember them should never be in the business of collecting your data.</p>

      <h2>What data Starlings collects</h2>
      <p>Starlings does not collect or store your in-app personal relationship data.</p>
      <p>The only information Starlings may collect is your name and email address if you voluntarily choose to join updates during onboarding. This information is submitted to our email provider, Brevo, solely for occasional product updates and announcements.</p>
      <p>All data you enter into the app after the onboarding — including names, notes, birthdays, interactions, journal entries, loans, tasks, reminders, and everything else — stays on your device unless you choose to export it or enable optional iCloud Sync.</p>

      <h2>iCloud Sync</h2>
      <p>iCloud Sync is optional and off by default.</p>
      <p>If you choose to enable iCloud Sync, your Starlings data syncs through your personal iCloud account using Apple's own technology. This data is stored in your iCloud account, protected by Apple's iCloud security, and never accessible to Starlings.</p>
      <p>You can enable or disable iCloud Sync at any time in Settings.</p>

      <h2>Contacts permission</h2>
      <p>Starlings may ask for access to your device's Contacts app if you choose to import a contact.</p>
      <p>This permission is only requested when you explicitly choose to import from Contacts. It is used only to read the contact information you choose to bring into Starlings. Your contacts are never sent anywhere.</p>
      <p>You can revoke this permission at any time in iPhone Settings.</p>

      <h2>Notifications permission</h2>
      <p>Starlings may ask permission to send notifications if you create reminders or tasks.</p>
      <p>These notifications are generated on your device. They are never used for marketing or promotional messages.</p>
      <p>You can revoke notification permission at any time in iPhone Settings.</p>

      <h2>Photos permission</h2>
      <p>Starlings may ask for access to your photos if you choose to add a profile photo for a contact.</p>
      <p>This permission is only used to let you select an image. The selected image stays with your Starlings data and is never uploaded to Starlings.</p>
      <p>You can revoke photo permission at any time in iPhone Settings.</p>

      <h2>Email updates (optional)</h2>
      <p>If you choose to join the Starlings update list during onboarding, your name and email address are stored by Brevo for the purpose of sending occasional updates about the app.</p>
      <p>This information is not linked to your Starlings data, app activity, contacts, or reminders.</p>
      <p>You can unsubscribe at any time using the unsubscribe link included in emails.</p>

      <h2>Your data is yours</h2>
      <p>You can export your Starlings data at any time from Settings. The export gives you a copy of your information, which you can keep, back up, or delete.</p>
      <p>Because Starlings does not have access to your data, we cannot view, recover, modify, or delete it for you.</p>


      <h2>Children's privacy</h2>
      <p>Starlings is not directed at children under 13, and we do not knowingly collect personal information from children.</p>

      <h2>Changes to this policy</h2>
      <p>If this policy changes in any meaningful way, the "Last updated" date will be updated.</p>

      <h2>Contact</h2>
      <p>Hamza Atique</p>
      <p>Questions? Email: <a href="mailto:haikucreative@outlook.com" style={{color: "var(--accent)"}}>haikucreative@outlook.com</a></p>

      <div className="footer-meta">
        <div>Starlings · An app by Hamza Atique</div>
        <div style={{display:"flex", gap:18}}>
          <a href="#/starlings">Starlings</a>
          <a href="#/starlings/terms-of-use">Terms</a>
        </div>
      </div>
    </div>
  );
}

function Terms() {
  return (
    <div className="page legal" data-screen-label="04 Terms">
      <a className="page-back" href="#/starlings">← Starlings</a>
      <div className="page-eyebrow">Starlings · Terms of Use</div>
      <h1 className="page-h1">The rules, in plain language.</h1>
      <div className="last-updated">Last updated: May 10, 2026</div>

      <p>These Terms of Use explain the rules for using Starlings, an iPhone app made by Hamza Atique. By downloading or using the app, you agree to these terms.</p>

      <h2>The app</h2>
      <p>Starlings is a personal relationship manager that helps you remember meaningful details about the people in your life. It stores your data locally on your iPhone. Starlings does not have access to your personal relationship data.</p>

      <h2>Your purchase</h2>
      <p>Starlings Pro is a $1.99 one-time purchase that unlocks unlimited contacts.</p>
      <p>Once purchased:</p>
      <ul>
        <li>Starlings Pro is yours permanently.</li>
        <li>There are no ongoing payments.</li>
        <li>The purchase can be restored on any iPhone signed in with the same Apple ID.</li>
        <li>Payments and refunds are handled by Apple.</li>
      </ul>
      <p>For refunds, contact Apple through reportaproblem.apple.com.</p>

      <h2>What you cannot do</h2>
      <p>You agree not to:</p>
      <ul>
        <li>Copy, reverse-engineer, or take apart the app.</li>
        <li>Use the app for anything illegal.</li>
        <li>Misrepresent what Starlings does.</li>
        <li>Pretend to be Starlings or act on behalf of Starlings.</li>
      </ul>

      <h2>Your data</h2>
      <p>Everything you put into Starlings belongs to you. Your names, notes, birthdays, journal entries, interactions, reminders, loans, tasks, and other personal details live on your device unless you choose to export them or enable optional iCloud Sync.</p>
      <p>Because Starlings does not have access to your data, Starlings cannot recover it, edit it, or delete it for you. Please back up your iPhone regularly to protect your information.</p>

      <h2>No warranties</h2>
      <p>Starlings is provided as-is. We do our best to make it useful, reliable, and bug-free, but we cannot guarantee that it will always work perfectly.</p>
      <p>Starlings is not responsible for data loss, missed reminders, missed dates, or other issues that may happen while using the app. Please keep backups of your device.</p>

      <h2>Changes</h2>
      <p>These Terms may be updated occasionally. If there is a meaningful change, it may be shared in the app, on the website, or through another appropriate channel.</p>
      <p>Continuing to use Starlings after changes means you accept the updated Terms.</p>

      <h2>Contact</h2>
      <p>Questions? Email: <a href="mailto:haikucreative@outlook.com" style={{color: "var(--accent)"}}>haikucreative@outlook.com</a></p>

      <div className="footer-meta">
        <div>Starlings · An app by Hamza Atique</div>
        <div style={{display:"flex", gap:18}}>
          <a href="#/starlings">Starlings</a>
          <a href="#/starlings/privacy-policy">Privacy</a>
        </div>
      </div>
    </div>
  );
}

/* ─────────── Root ─────────── */
function App() {
  const path = useHashRoute();
  let view;
  if (path === "/" || path === "")           view = <Home />;
  else if (path === "/starlings")             view = <Starlings />;
  else if (path === "/starlings/privacy-policy") view = <Privacy />;
  else if (path === "/starlings/terms-of-use")   view = <Terms />;
  else                                       view = <Home />;

  return <div className="app fade-in" key={path}>{view}</div>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);