import streamlit as st
import pandas as pd

# Page setup
st.set_page_config(page_title="AutoCAD Command Reference", layout="wide")

# Custom background and styling
st.markdown("""
    <style>
        body {
            background-color: #e6f0ff;
        }
        .title {
            color: #003366;
            text-align: center;
            font-size: 40px;
            margin-bottom: 20px;
        }
        .stApp {
            background-color: #e6f0ff;
        }
        .command-box {
            background-color: #ffffff;
            padding: 20px;
            margin: 10px 0;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        a {
            color: #0059b3;
            font-weight: bold;
        }
    </style>
""", unsafe_allow_html=True)

# Title
st.markdown('<div class="title">📐 AutoCAD Commands Reference</div>', unsafe_allow_html=True)

# Sample data (you can expand this)
commands = [
    {
        "Command": "LINE",
        "Description": "Creates straight line segments.",
        "YouTube": "https://www.youtube.com/watch?v=4Hsb5j5JH7A"
    },
    {
        "Command": "CIRCLE",
        "Description": "Creates a circle.",
        "YouTube": "https://www.youtube.com/watch?v=ZFbP13bU5Ck"
    },
    {
        "Command": "TRIM",
        "Description": "Trims objects to meet the edges of other objects.",
        "YouTube": "https://www.youtube.com/watch?v=8QULwXuHEjM"
    },
    {
        "Command": "EXTEND",
        "Description": "Extends objects to meet the edges of other objects.",
        "YouTube": "https://www.youtube.com/watch?v=EYYJSXruK4k"
    }
]

# Layout in columns
cols = st.columns(2)

for i, cmd in enumerate(commands):
    col = cols[i % 2]
    with col:
        st.markdown(f"""
        <div class="command-box">
            <h4>🛠️ {cmd['Command']}</h4>
            <p>{cmd['Description']}</p>
            <p><a href="{cmd['YouTube']}" target="_blank">▶️ Watch Tutorial</a></p>
        </div>
        """, unsafe_allow_html=True)