use dioxus::prelude::*;

#[component]
pub fn Hero() -> Element {
    rsx! {
        // We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
        div {  
            class: "content container mb6t29",
            div {
                class: "col self-center flex-1 md:flex-row md:self-stretch justify-center lg:justify-between items-center p-y-0px p-x-10px",
                div {
                    class: "md:flex-1 gap-10px",
                    h1 {
                        class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em] md:text-left",
                        style: "background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: text; background-color: ; -webkit-background-clip: text;",
                        "Danilo"
                        " "
                        "Cesa"
                    }
                    p {  
                        class: "text-[var(--tertiary-text)] text-center md:text-left text-[1.2em] font-extralight",
                        "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, rerum. Debitis accusantium deleniti enim iste dignissimos? Similique, exercitationem! Odit vero, numquam quae ratione maxime sunt reiciendis laudantium quaerat iure ipsum!"
                    }
                }
                // h1 {
                //     class: "text-4xl md:text-6xl font-bold mb-4",
                //     "Hey, I'm Dan"
                // }
                // p {
                //     class: "text-lg md:text-xl text-gray-400",
                //     "Full Stack Developer"
                // }
            }
                // div {
                //     class: "p-4 rounded-lg hover:border-cyan-500 transition duration-300",
                //     p {  
                //         class: "text-gray-400",
                //         "I'm a passionate software developer with a background in computer science and a keen interest in frontend technologies."
                //     }
                // }
                // div {
                //     class: "row justify-center md:justify-start p-y-15px p-x-0px gap-2",
                //     a {
                //         class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
                //         href: "#contact",
                //         svg {
                //             class: "inline-block",
                //             view_box: "0 0 24 24",
                //             fill: "var(--accent-text)",
                //             height: "20px",
                //             width: "20px",
                //             path {
                //                 d: "M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"
                //             }
                //         }
                //     }
                //      a {
                //         class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition duration-300",
                //         href: "#contact",
                //         svg {
                //             class: "inline-block",
                //             view_box: "0 0 16 16",
                //             fill: "var(--accent-text)",
                //             height: "20px",
                //             width: "20px",
                //             path {
                //                 d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
                //             }
                //         }
                //     }
                // }
    
        }
    }
}