app.py

import base64, mimetypes
from html import escape
from pathlib import Path
import streamlit as st

# ========= PATHS (subfolder-safe) =========
BASE_DIR = Path(__file__).parent          # -> Landing_Page/
ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/

# ========= CONTROLS =========
HERO_LOGO_SIZE     = 170   # px (top company logo size)
TOP_SPACER         = 32    # px (extra top padding so logo never looks clipped)
CARD_THUMB_HEIGHT  = 170   # px (image height inside each card)
BUTTON_TEXT        = "Click to Run APP"
OPEN_IN_NEW_TAB    = False # True = open app in new tab

# ========= BRAND / APPS =========
COMPANY_NAME = "Smart Thinking"
TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"

APP1 = {
    "title": "ST_Geo_Mech",
    "url":   "https://smart-thinking-ucs.hf.space/",
    "thumb": ASSETS / "app1.png",
    "blurb": "Real-Time UCS Prediction",
}
APP2 = {
    "title": "ST_Log_GR",
    "url":   "https://smart-thinking-gr.hf.space/",
    "thumb": ASSETS / "app2.png",
    "blurb": "Real-Time GR Log Prediction",
}
LOGO_PATH = ASSETS / "logo.png"

# ========= PAGE META =========
page_icon = str(LOGO_PATH) if LOGO_PATH.exists() else "🧭"
st.set_page_config(page_title=f"{COMPANY_NAME} — Apps", page_icon=page_icon, layout="wide")

# ========= CSS (one-screen desktop, logo not “trimmed”) =========
st.markdown(
    f"""
    <style>
      html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
      [data-testid="stAppViewContainer"] > .main {{ min-height: 100vh; }}
      .block-container {{
        max-width: 1120px;
        min-height: 100vh;
        display: flex; flex-direction: column;
        justify-content: center;                 /* keep in-viewport on desktops */
        padding-top: {TOP_SPACER}px !important;  /* <-- gives the logo breathing room */
        padding-bottom: 10px !important;
      }}

      /* HERO */
      .hero {{ text-align:center; margin: 4px 0 18px; }}
      .hero img {{
        width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
        display:block; margin: 8px auto 8px;     /* no top clipping */
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
      }}
      .hero h1 {{ font-size: 2.3rem; margin: .6rem 0 .2rem; }}
      .hero p  {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}

      /* Two-card grid on desktop, stack on small screens */
      .grid {{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }}
      @media (max-width: 980px) {{
        .grid {{ grid-template-columns: 1fr; }}
        .block-container {{ justify-content: flex-start; }}
      }}

      .card {{
        background:#fff; border-radius:16px; padding:16px;
        border:1px solid rgba(0,0,0,.06);
        box-shadow:0 4px 18px rgba(0,0,0,.05);
        transition:transform .12s ease, box-shadow .12s ease;
        text-align:center;
      }}
      .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}

      .thumb {{
        width: 100%;
        height: {CARD_THUMB_HEIGHT}px;
        border-radius:14px;
        border:1px solid rgba(0,0,0,.06);
        object-fit: contain;       /* show full logo/image, no cropping */
        background:#fff;
      }}

      .card h3 {{ margin:12px 0 6px; }}
      .card p  {{ color:#5a5f6a; min-height:36px; margin-bottom:10px; }}

      /* Light button with dark text */
      .btn {{
        display:inline-block; padding:10px 14px; border-radius:12px;
        border:1px solid #e5e7eb; text-decoration:none;
        background:#f3f4f6; color:#111827; font-weight:500;
      }}
      .btn:hover {{ background:#e5e7eb; }}
    </style>
    """,
    unsafe_allow_html=True,
)

# ========= IMAGE HELPERS =========
def data_uri(path: Path) -> str | None:
    if not path.exists(): return None
    mime, _ = mimetypes.guess_type(path.name)
    if not mime: mime = "image/png"
    b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
    return f"data:{mime};base64,{b64}"

def img_tag(path: Path, alt: str, cls: str) -> str:
    uri = data_uri(path)
    if uri:
        return f'<img class="{cls}" src="{uri}" alt="{escape(alt)}" />'
    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#50545c;background:linear-gradient(180deg,#f6f7fb,#eceff4);">{escape(alt)}</div>'

# ========= HERO =========
st.markdown(
    '<div class="hero">'
    + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
    + f"<h1>{escape(COMPANY_NAME)}</h1>"
    + f"<p>{escape(TAGLINE)}</p>"
    + "</div>",
    unsafe_allow_html=True,
)

# ========= CARDS =========
def app_card(app: dict) -> str:
    target = "_blank" if OPEN_IN_NEW_TAB else "_self"
    return (
        "<div class='card'>"
        + img_tag(app["thumb"], app["title"], "thumb")
        + f"<h3>{escape(app['title'])}</h3>"
        + f"<p>{escape(app['blurb'])}</p>"
        + f"<a class='btn' href='{escape(app['url'])}' target='{target}'>{escape(BUTTON_TEXT)}</a>"
        + "</div>"
    )

st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + "</div>", unsafe_allow_html=True)

# ========= FOOTER =========
st.markdown("""
<br><br><br>
<hr>
<div style='text-align:center;color:#6b7280;font-size:1.0em;'>
    © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
    Contact: <a href="mailto:smartthinking@smartthinking.com.sa">smartthinking@smartthinking.com.sa</a>
</div>
""", unsafe_allow_html=True)