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 (tweak these) =========
HERO_LOGO_SIZE     = 160   # px (top company logo size)
TOP_SPACER         = 100   # px (breathing room above hero; raise if the logo looks "trimmed")
CARD_WIDTH         = 300   # px (fixed width per card on desktop)
CARD_THUMB_HEIGHT  = 120   # px (image area inside each card)
GRID_GAP           = 80    # px (space between the cards)
BUTTON_TEXT        = "Click to Run APP"
OPEN_IN_NEW_TAB    = False # True = open links in a new tab

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

APP1 = {
    "title": "ST_GeoMech",
    "url":   "https://smart-thinking-ai-suite-geomech.hf.space",
    "thumb": ASSETS / "app1.png",
    "blurb": "Real-Time UCS Prediction",
    "bg":    "#F7FBFF",   # very light blue
    "border":"#E8F2FF",   # light blue border
}
APP2 = {
    "title": "ST_TOC",
    "url":   "https://smart-thinking-gr.hf.space/",
    "thumb": ASSETS / "app2.png",
    "blurb": "Real-Time GR Log Prediction",
    "bg":    "#F6FFF7",   # very light green
    "border":"#E4F9E6",   # light green border
}
# NEW third card (edit title/url/blurb/thumb/colors as needed)
APP3 = {
    "title": "ST_Perm",
    "url":   "https://example.com/",        # <-- replace with your Space URL
    "thumb": ASSETS / "app3.png",           # <-- upload this image
    "blurb": "Describe your third app here",
    "bg":    "#F9F6FF",   # very light purple
    "border":"#EDE6FF",   # light purple border
}

APP4 = {
    "title": "ST_Porosity",
    "url":   "https://example.com/",        # <-- replace with your Space URL
    "thumb": ASSETS / "app3.png",           # <-- upload this image
    "blurb": "Describe your third app here",
    "bg":    "#F9F6FF",   # very light purple
    "border":"#EDE6FF",   # light purple border
}

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 (fits one screen on desktop; no blank area under cards) =========
st.markdown(
    f"""
    <style>
      :root {{
        --top-spacer: {TOP_SPACER}px;
        --card-width: {CARD_WIDTH}px;
        --grid-gap: {GRID_GAP}px;
        --tagline-gap: 0px;           /* distance between H1 and tagline */
        --grid-top-space: 20px;       /* space above the cards */
      }}

      html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
      [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
      .block-container {{
        max-width: 1120px;
        min-height: 100vh;
        display: flex; flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding: var(--top-spacer) 0 8px !important;
      }}

      /* HERO */
      .hero {{ text-align:center; margin: 0 0 8px; }}
      .hero img {{
        width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
        display:block; margin: 0 auto 8px;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
      }}
      /* Make tagline closer to the company name */
      .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
      .hero p  {{
        color: #5a5f6a;
        margin: var(--tagline-gap) auto 0;
        max-width: 720px;
        font-style: italic;
      }}

      /* GRID: precise card width + extra space above cards */
      .grid {{
        display: flex;
        gap: var(--grid-gap);
        justify-content: center;
        align-items: stretch;
        flex-wrap: nowrap;             /* keep three across on desktop */
        margin-top: var(--grid-top-space);
      }}
      /* When viewport too narrow for 3-up, allow wrapping */
      @media (max-width: calc(3 * var(--card-width) + 2 * var(--grid-gap) + 64px)) {{
        .grid {{ flex-wrap: wrap; }}
      }}

      .card {{
        width: var(--card-width);
        background: var(--card-bg, #fff);
        border: 1px solid var(--card-border, rgba(0,0,0,.06));
        border-radius:16px; padding:14px;
        box-shadow:0 4px 18px rgba(0,0,0,.05);
        transition:transform .12s ease, box-shadow .12s ease;
        text-align:center; display:flex; flex-direction:column; gap:10px;
      }}
      .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 image */
        background:#fff;
      }}

      .card h3 {{ margin:6px 0 2px; }}
      .card p  {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}

      /* 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; }}

      .footer {{ text-align:center; color:#6b7280; font-size:1.0em; margin-top: 6px; }}
      .footer hr {{ margin: 6px 0; }}
    </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"
    style  = f"--card-bg:{app.get('bg','#fff')}; --card-border:{app.get('border','rgba(0,0,0,.06)')};"
    return (
        f"<div class='card' style='{style}'>"
        + 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>"
    )

# Render 3 cards side-by-side
st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + app_card(APP3) + "</div>", unsafe_allow_html=True)

# ========= FOOTER (compact; no extra spacing) =========
st.markdown(
    """
    <hr>
    <div class='footer'>
        © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
        Website: <a href="https://smartthinking.com.sa" target="_blank" rel="noopener noreferrer">smartthinking.com.sa</a>
    </div>
    """,
    unsafe_allow_html=True,
)